Skip to content

Commit 1ae51ba

Browse files
lordelogoslordelogos
authored
chore(packages): setup component tests (#932)
1 parent 037940a commit 1ae51ba

35 files changed

+519
-154
lines changed

‎packages/body/src/body.spec.tsx

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,28 @@
11
import { render } from "@react-email/render";
22
import { Body } from "./index";
33

4-
describe("render", () => {
5-
it("renders the <Body> component", () => {
4+
describe("<Body> component", () => {
5+
it("renders children correctly", () => {
6+
const testMessage = "Test message";
7+
const html = render(<Body>{testMessage}</Body>);
8+
expect(html).toContain(testMessage);
9+
});
10+
11+
it("passes style and other props correctly", () => {
12+
const style = { backgroundColor: "red" };
13+
const html = render(
14+
<Body style={style} data-testid="body-test">
15+
Test
16+
</Body>,
17+
);
18+
expect(html).toContain('style="background-color:red"');
19+
expect(html).toContain('data-testid="body-test"');
20+
});
21+
22+
it("renders correctly", () => {
623
const actualOutput = render(<Body>Lorem ipsum</Body>);
724
expect(actualOutput).toMatchInlineSnapshot(
8-
`"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><body data-id=\\"__react-email-body\\">Lorem ipsum</body>"`,
25+
`"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><body>Lorem ipsum</body>"`,
926
);
1027
});
1128
});

‎packages/body/src/body.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const Body: React.FC<Readonly<BodyProps>> = ({
1010
...props
1111
}) => {
1212
return (
13-
<body {...props} data-id="__react-email-body" style={style}>
13+
<body {...props} style={style}>
1414
{children}
1515
</body>
1616
);

‎packages/button/src/button.spec.tsx

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,6 @@ import { render } from "@react-email/render";
22
import { Button } from "./index";
33

44
describe("<Button> component", () => {
5-
beforeEach(() => {
6-
vi.restoreAllMocks();
7-
vi.resetModules();
8-
});
9-
105
it("renders children correctly", () => {
116
const testMessage = "Test message";
127
const html = render(<Button>{testMessage}</Button>);

‎packages/column/src/column.spec.tsx

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,28 @@
11
import { render } from "@react-email/render";
22
import { Column } from "./index";
33

4-
describe("render", () => {
5-
it("renders the <Column> component", () => {
4+
describe("<Column> component", () => {
5+
it("renders children correctly", () => {
6+
const testMessage = "Test message";
7+
const html = render(<Column>{testMessage}</Column>);
8+
expect(html).toContain(testMessage);
9+
});
10+
11+
it("passes style and other props correctly", () => {
12+
const style = { backgroundColor: "red" };
13+
const html = render(
14+
<Column style={style} data-testid="column-test">
15+
Test
16+
</Column>,
17+
);
18+
expect(html).toContain('style="background-color:red"');
19+
expect(html).toContain('data-testid="column-test"');
20+
});
21+
22+
it("renders correctly", () => {
623
const actualOutput = render(<Column>Lorem ipsum</Column>);
724
expect(actualOutput).toMatchInlineSnapshot(
8-
`"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><td data-id=\\"__react-email-column\\">Lorem ipsum</td>"`,
25+
'"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><td data-id=\\"__react-email-column\\">Lorem ipsum</td>"',
926
);
1027
});
1128
});

‎packages/container/src/container.spec.tsx

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,34 @@
1+
import { Container } from "./index";
12
import { render } from "@react-email/render";
23
import { Container } from "./index";
34

4-
describe("render", () => {
5-
it("renders the <Container> component", () => {
5+
describe("<Container> component", () => {
6+
it("renders children correctly", () => {
7+
const testMessage = "Test message";
8+
const html = render(<Container>{testMessage}</Container>);
9+
expect(html).toContain(testMessage);
10+
});
11+
12+
it("passes style and other props correctly", () => {
13+
const style = { maxWidth: 300, backgroundColor: "red" };
14+
const html = render(
15+
<Container style={style} data-testid="container-test">
16+
Test
17+
</Container>,
18+
);
19+
expect(html).toContain('style="max-width:300px;background-color:red"');
20+
expect(html).toContain('data-testid="container-test"');
21+
});
22+
23+
it("renders correctly", () => {
624
const container = render(
725
<Container style={{ maxWidth: "300px" }}>
826
<button type="button">Hi</button>
927
</Container>,
1028
);
1129

1230
expect(container).toMatchInlineSnapshot(
13-
'"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><table align=\\"center\\" width=\\"100%\\" border=\\"0\\" cellPadding=\\"0\\" cellSpacing=\\"0\\" data-id=\\"__react-email-container\\" role=\\"presentation\\" style=\\"max-width:300px\\"><tbody><tr style=\\"width:100%\\"><td><button type=\\"button\\">Hi</button></td></tr></tbody></table>"',
31+
'"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><table align=\\"center\\" width=\\"100%\\" border=\\"0\\" cellPadding=\\"0\\" cellSpacing=\\"0\\" role=\\"presentation\\" style=\\"max-width:300px\\"><tbody><tr style=\\"width:100%\\"><td><button type=\\"button\\">Hi</button></td></tr></tbody></table>"',
1432
);
1533
});
1634
});

‎packages/container/src/container.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ export const Container: React.FC<Readonly<ContainerProps>> = ({
1717
border={0}
1818
cellPadding="0"
1919
cellSpacing="0"
20-
data-id="__react-email-container"
2120
role="presentation"
2221
style={{ maxWidth: "37.5em", ...style }}
2322
>

‎packages/font/src/font.spec.tsx

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,46 @@
11
import { render } from "@react-email/render";
22
import { Font } from "./index";
33

4-
describe("render", () => {
5-
it("renders the <Font> component", () => {
4+
describe("<Font> component", () => {
5+
it("renders with default props", () => {
6+
const html = render(
7+
<Font fontFamily="Arial" fallbackFontFamily="Helvetica" />,
8+
);
9+
10+
expect(html).toContain("font-style: normal;");
11+
expect(html).toContain("font-weight: 400;");
12+
expect(html).toContain("font-family: 'Arial';");
13+
});
14+
15+
it("renders with webFont prop", () => {
16+
const webFont = {
17+
url: "example.com/font.woff",
18+
format: "woff",
19+
} as const;
20+
21+
const html = render(
22+
<Font
23+
fontFamily="Example"
24+
fallbackFontFamily="Helvetica"
25+
webFont={webFont}
26+
/>,
27+
);
28+
29+
expect(html).toContain("font-family: 'Example';");
30+
expect(html).toContain(
31+
`src: url(${webFont.url}) format('${webFont.format}');`,
32+
);
33+
});
34+
35+
it("renders with multiple fallback fonts", () => {
36+
const html = render(
37+
<Font fontFamily="Arial" fallbackFontFamily={["Helvetica", "Verdana"]} />,
38+
);
39+
40+
expect(html).toContain("font-family: 'Arial', Helvetica, Verdana;");
41+
});
42+
43+
it("renders correctly", () => {
644
const actualOutput = render(
745
<Font fallbackFontFamily="Verdana" fontFamily="Roboto" />,
846
);

‎packages/head/src/head.spec.tsx

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,34 @@
11
import { render } from "@react-email/render";
22
import { Head } from "./index";
33

4-
describe("render", () => {
5-
it("renders the <Head> component", () => {
4+
describe("<Head> component", () => {
5+
it("renders children correctly", () => {
6+
const testMessage = "Test message";
7+
const html = render(<Head>{testMessage}</Head>);
8+
expect(html).toContain(testMessage);
9+
});
10+
11+
it("renders correctly", () => {
612
const actualOutput = render(<Head />);
713
expect(actualOutput).toMatchInlineSnapshot(
8-
'"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><head data-id=\\"__react-email-head\\"><meta content=\\"text/html; charset=UTF-8\\" http-equiv=\\"Content-Type\\"/></head>"',
14+
'"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><head><meta content=\\"text/html; charset=UTF-8\\" http-equiv=\\"Content-Type\\"/></head>"',
915
);
1016
});
1117

12-
it("renders children components", () => {
18+
it("renders style tags", () => {
1319
const actualOutput = render(
1420
<Head>
15-
<title>My email title</title>
21+
<style>
22+
{`body{
23+
color: red;
24+
}`}
25+
</style>
1626
</Head>,
1727
);
18-
expect(actualOutput).toMatchInlineSnapshot(
19-
'"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><head data-id=\\"__react-email-head\\"><meta content=\\"text/html; charset=UTF-8\\" http-equiv=\\"Content-Type\\"/><title>My email title</title></head>"',
20-
);
28+
expect(actualOutput).toMatchInlineSnapshot(`
29+
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><head><meta content=\\"text/html; charset=UTF-8\\" http-equiv=\\"Content-Type\\"/><style>body{
30+
color: red;
31+
}</style></head>"
32+
`);
2133
});
2234
});

‎packages/head/src/head.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ type RootProps = React.ComponentPropsWithoutRef<"head">;
55
export type HeadProps = RootProps;
66

77
export const Head: React.FC<Readonly<HeadProps>> = ({ children, ...props }) => (
8-
<head {...props} data-id="__react-email-head">
8+
<head {...props}>
99
<meta content="text/html; charset=UTF-8" httpEquiv="Content-Type" />
1010
{children}
1111
</head>

‎packages/hr/src/hr.spec.tsx

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,22 @@
11
import { render } from "@react-email/render";
22
import { Hr } from "./index";
33

4-
describe("render", () => {
5-
it("renders the <Hr> component", () => {
4+
describe("<Hr> component", () => {
5+
it("passes styles and other props correctly", () => {
6+
const style = {
7+
width: "50%",
8+
borderColor: "black",
9+
};
10+
const html = render(<Hr style={style} data-testid="hr-test" />);
11+
expect(html).toContain("width:50%");
12+
expect(html).toContain("border-color:black");
13+
expect(html).toContain('data-testid="hr-test"');
14+
});
15+
16+
it("renders correctly", () => {
617
const actualOutput = render(<Hr />);
718
expect(actualOutput).toMatchInlineSnapshot(
8-
`"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><hr data-id=\\"react-email-hr\\" style=\\"width:100%;border:none;border-top:1px solid #eaeaea\\"/>"`,
19+
`"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><hr style=\\"width:100%;border:none;border-top:1px solid #eaeaea\\"/>"`,
920
);
1021
});
1122
});

0 commit comments

Comments
 (0)