Skip to content

Commit 55397a3

Browse files
colinrotherhamcolinrotherham
committed
Add React DOM render tests
1 parent e67b912 commit 55397a3

File tree

33 files changed

+2311
-423
lines changed

33 files changed

+2311
-423
lines changed

‎src/components/content-presentation/details/__tests__/Details.test.tsx‎

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,58 @@
11
import React, { createRef } from 'react';
22
import { render } from '@testing-library/react';
3+
import { renderClient, renderServer } from '@util/components';
34
import Details from '../';
45

56
describe('Details', () => {
6-
it('matches snapshot', () => {
7-
const { container } = render(<Details />);
7+
it('matches snapshot', async () => {
8+
const { container } = await renderClient(<Details />, {
9+
className: 'nhsuk-details',
10+
});
811

912
expect(container).toMatchSnapshot('StandardDetails');
1013
});
1114

12-
it('matches snapshot - with expander present', () => {
13-
const { container } = render(<Details expander />);
15+
it('matches snapshot - with expander present', async () => {
16+
const { container } = await renderClient(<Details expander />, {
17+
className: 'nhsuk-details',
18+
});
1419

1520
expect(container).toMatchSnapshot('ExpanderDetails');
1621
});
1722

18-
it('adds expander classes', () => {
19-
const { container } = render(<Details expander />);
23+
it('matches snapshot (via server)', async () => {
24+
const { container, element } = await renderServer(<Details />, {
25+
className: 'nhsuk-details',
26+
});
27+
28+
expect(container).toMatchSnapshot('server');
29+
30+
await renderClient(element, {
31+
className: 'nhsuk-details',
32+
hydrate: true,
33+
container,
34+
});
2035

21-
expect(container.querySelector('.nhsuk-expander')).toBeTruthy();
36+
expect(container).toMatchSnapshot('client');
2237
});
2338

24-
it('forwards refs', () => {
39+
it('adds expander classes', async () => {
40+
const { modules } = await renderClient(<Details expander />, {
41+
className: 'nhsuk-details',
42+
});
43+
44+
const [detailsEl] = modules;
45+
expect(detailsEl).toHaveClass('nhsuk-expander');
46+
});
47+
48+
it('forwards refs', async () => {
2549
const ref = createRef<HTMLDetailsElement>();
2650

27-
const { container } = render(<Details ref={ref} />);
51+
const { modules } = await renderClient(<Details ref={ref} />, {
52+
className: 'nhsuk-details',
53+
});
2854

29-
const detailsEl = container.querySelector('details');
55+
const [detailsEl] = modules;
3056

3157
expect(ref.current).toBe(detailsEl);
3258
expect(ref.current).toHaveClass('nhsuk-details');

‎src/components/content-presentation/details/__tests__/__snapshots__/Details.test.tsx.snap‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,22 @@ exports[`Details Details.Text matches snapshot: Details.Text 1`] = `
3232
</div>
3333
`;
3434

35+
exports[`Details matches snapshot (via server): client 1`] = `
36+
<div>
37+
<details
38+
class="nhsuk-details"
39+
/>
40+
</div>
41+
`;
42+
43+
exports[`Details matches snapshot (via server): server 1`] = `
44+
<div>
45+
<details
46+
class="nhsuk-details"
47+
/>
48+
</div>
49+
`;
50+
3551
exports[`Details matches snapshot - with expander present: ExpanderDetails 1`] = `
3652
<div>
3753
<details

‎src/components/content-presentation/do-and-dont-list/__tests__/DoAndDontList.test.tsx‎

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,40 @@
11
import React, { createRef } from 'react';
22
import { render } from '@testing-library/react';
33
import DoAndDontList from '../';
4+
import { renderClient, renderServer } from '@util/components';
45

56
describe('DoAndDontList', () => {
67
describe('list type "do"', () => {
7-
it('matches snapshot', () => {
8-
const { container } = render(<DoAndDontList listType="do" />);
8+
it('matches snapshot', async () => {
9+
const { container } = await renderClient(<DoAndDontList listType="do" />, {
10+
className: 'nhsuk-do-dont-list',
11+
});
912

1013
expect(container).toMatchSnapshot('DoDontList-Do');
1114
});
1215

13-
it('forwards refs', () => {
16+
it('matches snapshot (via server)', async () => {
17+
const { container, element } = await renderServer(<DoAndDontList listType="do" />, {
18+
className: 'nhsuk-do-dont-list',
19+
});
20+
21+
expect(container).toMatchSnapshot('server');
22+
23+
await renderClient(element, {
24+
className: 'nhsuk-do-dont-list',
25+
hydrate: true,
26+
container,
27+
});
28+
29+
expect(container).toMatchSnapshot('client');
30+
});
31+
32+
it('forwards refs', async () => {
1433
const ref = createRef<HTMLDivElement>();
1534

16-
const { container } = render(<DoAndDontList listType="do" ref={ref} />);
35+
const { container } = await renderClient(<DoAndDontList listType="do" ref={ref} />, {
36+
className: 'nhsuk-do-dont-list',
37+
});
1738

1839
const listEl = container.querySelector('div');
1940

@@ -49,12 +70,30 @@ describe('DoAndDontList', () => {
4970
});
5071

5172
describe('list type "dont"', () => {
52-
it('matches snapshot', () => {
53-
const { container } = render(<DoAndDontList listType="dont" />);
73+
it('matches snapshot', async () => {
74+
const { container } = await renderClient(<DoAndDontList listType="dont" />, {
75+
className: 'nhsuk-do-dont-list',
76+
});
5477

5578
expect(container).toMatchSnapshot('DoDontList-Dont');
5679
});
5780

81+
it('matches snapshot (via server)', async () => {
82+
const { container, element } = await renderServer(<DoAndDontList listType="dont" />, {
83+
className: 'nhsuk-do-dont-list',
84+
});
85+
86+
expect(container).toMatchSnapshot('server');
87+
88+
await renderClient(element, {
89+
className: 'nhsuk-do-dont-list',
90+
hydrate: true,
91+
container,
92+
});
93+
94+
expect(container).toMatchSnapshot('client');
95+
});
96+
5897
it('adds the correct headings', () => {
5998
const { container } = render(<DoAndDontList listType="dont" />);
6099

‎src/components/content-presentation/do-and-dont-list/__tests__/__snapshots__/DoAndDontList.test.tsx.snap‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,40 @@ exports[`DoAndDontList DoDontList.Item matches snapshot: DoDontList.Item 1`] = `
2121
</div>
2222
`;
2323

24+
exports[`DoAndDontList list type "do" matches snapshot (via server): client 1`] = `
25+
<div>
26+
<div
27+
class="nhsuk-do-dont-list"
28+
>
29+
<h3
30+
class="nhsuk-do-dont-list__label"
31+
>
32+
Do
33+
</h3>
34+
<ul
35+
class="nhsuk-list nhsuk-list--tick"
36+
/>
37+
</div>
38+
</div>
39+
`;
40+
41+
exports[`DoAndDontList list type "do" matches snapshot (via server): server 1`] = `
42+
<div>
43+
<div
44+
class="nhsuk-do-dont-list"
45+
>
46+
<h3
47+
class="nhsuk-do-dont-list__label"
48+
>
49+
Do
50+
</h3>
51+
<ul
52+
class="nhsuk-list nhsuk-list--tick"
53+
/>
54+
</div>
55+
</div>
56+
`;
57+
2458
exports[`DoAndDontList list type "do" matches snapshot: DoDontList-Do 1`] = `
2559
<div>
2660
<div
@@ -38,6 +72,40 @@ exports[`DoAndDontList list type "do" matches snapshot: DoDontList-Do 1`] = `
3872
</div>
3973
`;
4074

75+
exports[`DoAndDontList list type "dont" matches snapshot (via server): client 1`] = `
76+
<div>
77+
<div
78+
class="nhsuk-do-dont-list"
79+
>
80+
<h3
81+
class="nhsuk-do-dont-list__label"
82+
>
83+
Don't
84+
</h3>
85+
<ul
86+
class="nhsuk-list nhsuk-list--cross"
87+
/>
88+
</div>
89+
</div>
90+
`;
91+
92+
exports[`DoAndDontList list type "dont" matches snapshot (via server): server 1`] = `
93+
<div>
94+
<div
95+
class="nhsuk-do-dont-list"
96+
>
97+
<h3
98+
class="nhsuk-do-dont-list__label"
99+
>
100+
Don't
101+
</h3>
102+
<ul
103+
class="nhsuk-list nhsuk-list--cross"
104+
/>
105+
</div>
106+
</div>
107+
`;
108+
41109
exports[`DoAndDontList list type "dont" matches snapshot: DoDontList-Dont 1`] = `
42110
<div>
43111
<div

‎src/components/content-presentation/table/components/__tests__/Table.test.tsx‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,38 @@
11
import React, { createRef } from 'react';
2-
import { render } from '@testing-library/react';
2+
import { renderClient, renderServer } from '@util/components';
33
import Table from '../..';
44

55
describe('Table', () => {
6-
it('matches snapshot', () => {
7-
const { container } = render(<Table />);
6+
it('matches snapshot', async () => {
7+
const { container } = await renderClient(<Table />, {
8+
className: 'nhsuk-table',
9+
});
810

911
expect(container).toMatchSnapshot();
1012
});
1113

12-
it('forwards refs', () => {
14+
it('matches snapshot (via server)', async () => {
15+
const { container, element } = await renderServer(<Table />, {
16+
className: 'nhsuk-table',
17+
});
18+
19+
expect(container).toMatchSnapshot('server');
20+
21+
await renderClient(element, {
22+
className: 'nhsuk-table',
23+
hydrate: true,
24+
container,
25+
});
26+
27+
expect(container).toMatchSnapshot('client');
28+
});
29+
30+
it('forwards refs', async () => {
1331
const ref = createRef<HTMLTableElement>();
1432

15-
const { container } = render(<Table ref={ref} />);
33+
const { container } = await renderClient(<Table ref={ref} />, {
34+
className: 'nhsuk-table',
35+
});
1636

1737
const tableEl = container.querySelector('table');
1838

‎src/components/content-presentation/table/components/__tests__/__snapshots__/Table.test.tsx.snap‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,21 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Table matches snapshot (via server): client 1`] = `
4+
<div>
5+
<table
6+
class="nhsuk-table"
7+
/>
8+
</div>
9+
`;
10+
11+
exports[`Table matches snapshot (via server): server 1`] = `
12+
<div>
13+
<table
14+
class="nhsuk-table"
15+
/>
16+
</div>
17+
`;
18+
319
exports[`Table matches snapshot 1`] = `
420
<div>
521
<table

0 commit comments

Comments
 (0)