import { render } from "@testing-library/react-native";
import { ComponentProps } from "react";
import { Alert } from "react-native";
import type { IOColors } from "../../../core/IOColors";
import { IOFontWeight } from "../../../utils/fonts";
import { Body } from "../Body";
import { BodyMonospace } from "../BodyMonospace";
import { BodySmall } from "../BodySmall";
import { ButtonText } from "../ButtonText";
import { calculateWeightColor } from "../common";
import { H1 } from "../H1";
import { H2 } from "../H2";
import { H3 } from "../H3";
import { H4 } from "../H4";
import { H5 } from "../H5";
import { H6 } from "../H6";
describe("Test Typography Components", () => {
it("H1 Snapshot", () => {
const { toJSON: H1Default } = render(Text
);
expect(H1Default()).toMatchSnapshot();
const { toJSON: H1White } = render(Text
);
expect(H1White()).toMatchSnapshot();
});
it("H2 Snapshot", () => {
const { toJSON: H2Default } = render(Text
);
expect(H2Default()).toMatchSnapshot();
});
it("H3 Snapshot", () => {
// SemiBold weight, default weight
const { toJSON: H3Default } = render(Text
);
expect(H3Default()).toMatchSnapshot();
const { toJSON: H3Grey } = render(Text
);
expect(H3Grey()).toMatchSnapshot();
const { toJSON: H3White } = render(Text
);
expect(H3White()).toMatchSnapshot();
});
it("H4 Snapshot", () => {
// Bold weight, default weight
const { toJSON: H4Default } = render(Text
);
expect(H4Default()).toMatchSnapshot();
const { toJSON: H4Blue } = render(Text
);
expect(H4Blue()).toMatchSnapshot();
const { toJSON: H4White } = render(Text
);
expect(H4White()).toMatchSnapshot();
});
it("H5 Snapshot", () => {
// SemiBold weight, default
const { toJSON: H5Default } = render(Text
);
expect(H5Default()).toMatchSnapshot();
const { toJSON: H5Grey } = render(Text
);
expect(H5Grey()).toMatchSnapshot();
const { toJSON: H5Blue } = render(Text
);
expect(H5Blue()).toMatchSnapshot();
const { toJSON: H5White } = render(Text
);
expect(H5White()).toMatchSnapshot();
});
it("H6 Snapshot", () => {
// SemiBold weight, default
const { toJSON: H6Default } = render(Text
);
expect(H6Default()).toMatchSnapshot();
});
it("Body Snapshot", () => {
const { toJSON: BodyDefault } = render(Text);
expect(BodyDefault()).toMatchSnapshot();
});
it("ButtonText Snapshot", () => {
const { toJSON: ButtonTextDefault } = render(Text);
expect(ButtonTextDefault()).toMatchSnapshot();
});
it("BodySmall Snapshot", () => {
const { toJSON: toJSONDefault } = render(Text);
expect(toJSONDefault()).toMatchSnapshot();
type BodyColors = ComponentProps["color"];
const allowedColors: ReadonlyArray = [
"blueIO-500",
"grey-700",
"error-600",
"white"
];
allowedColors.map(color => {
const { toJSON: componentVariant } = render(
Text
);
expect(componentVariant()).toMatchSnapshot();
});
});
it("Body as Link Snapshot", () => {
const { toJSON: BodyLink } = render(
Alert.alert("Pressed")}>
Text
);
expect(BodyLink()).toMatchSnapshot();
});
it("BodyMonospace Snapshot", () => {
const { toJSON: BodyMonospaceDefault } = render(
Text
);
expect(BodyMonospaceDefault()).toMatchSnapshot();
});
});
describe("Test Typography common", () => {
it("Test calculateWeightColor behaviour", () => {
const noValues = calculateWeightColor(
"Bold",
"error-600"
);
expect(noValues.color).toBe("error-600");
expect(noValues.weight).toBe("Bold");
const weightProvided = calculateWeightColor(
"Bold",
"error-600",
"Regular"
);
expect(weightProvided.color).toBe("error-600");
expect(weightProvided.weight).toBe("Regular");
const allValuesProvided = calculateWeightColor(
"Bold",
"error-600",
"Regular",
"grey-700"
);
expect(allValuesProvided.color).toBe("grey-700");
expect(allValuesProvided.weight).toBe("Regular");
});
});