Skip to content

Commit 6e53c53

Browse files
author
Luke Pearson
committed
Added table tests
1 parent 576c4c2 commit 6e53c53

File tree

5 files changed

+173
-21
lines changed

5 files changed

+173
-21
lines changed

‎src/components/table/TableHelpers.ts‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,12 @@ export const isTableCell = (child: ReactNode): child is ReactElement => {
66
};
77

88
export const getHeadingsFromChildren = (children: ReactNode): string[] => {
9-
const headings = React.Children.map(children, child => {
10-
if (isTableCell(child)) {
11-
return child.props.children.toString();
12-
}
13-
return null;
14-
});
15-
16-
if (!headings) return [];
17-
return headings.filter(Boolean);
9+
return React.Children
10+
.map(children, child => {
11+
if (isTableCell(child)) {
12+
return child.props.children.toString();
13+
}
14+
return null;
15+
})
16+
.filter(Boolean);
1817
};

‎src/components/table/components/TableRow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const TableRow: React.FC<HTMLProps<HTMLTableRowElement>> = ({ className, childre
1919
if (isTableCell(child)) {
2020
return React.cloneElement(child, {
2121
_responsive: isResponsive,
22-
_responsiveHeading: `${headings[index]} `,
22+
_responsiveHeading: `${headings[index] || ''} `,
2323
});
2424
}
2525
return child;

‎src/components/table/components/__tests__/TableRow.test.tsx‎

Lines changed: 157 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,170 @@
1-
import { mount } from 'enzyme';
1+
import { mount, ReactWrapper } from 'enzyme';
22
import React from 'react';
3+
import TableContext, { ITableContext } from '../../TableContext';
4+
import TableSectionContext, { TableSection } from '../../TableSectionContext';
5+
import TableCell from '../TableCell';
36
import TableRow from '../TableRow';
47

8+
const assertCellText = (c: ReactWrapper, cellNumber: number, text: string) => {
9+
expect(c.find(`[data-test="cell-${cellNumber}"]`).first().text()).toEqual(text);
10+
}
11+
512
describe('Table.Row', () => {
613
it('matches snapshot', () => {
714
const wrapper = mount(
815
<table>
9-
<TableRow />
16+
<tbody>
17+
<TableRow />
18+
</tbody>
1019
</table>,
1120
);
1221
expect(wrapper).toMatchSnapshot();
1322
wrapper.unmount();
1423
});
24+
25+
it('renders headers in the first column if responsive', () => {
26+
const contextValue: ITableContext = {
27+
isResponsive: true,
28+
headings: ['a', 'b', 'c'],
29+
setHeadings: jest.fn(),
30+
};
31+
const wrapper = mount(
32+
<table>
33+
<TableContext.Provider value={contextValue}>
34+
<TableSectionContext.Provider value={TableSection.BODY}>
35+
<tbody>
36+
<TableRow>
37+
<TableCell data-test="cell-1">1</TableCell>
38+
<TableCell data-test="cell-2">2</TableCell>
39+
<TableCell data-test="cell-3">3</TableCell>
40+
</TableRow>
41+
</tbody>
42+
</TableSectionContext.Provider>
43+
</TableContext.Provider>
44+
</table>
45+
);
46+
47+
assertCellText(wrapper, 1, 'a 1');
48+
assertCellText(wrapper, 2, 'b 2');
49+
assertCellText(wrapper, 3, 'c 3');
50+
expect(wrapper.find('.nhsuk-table-responsive__heading').length).toBe(3);
51+
52+
wrapper.unmount();
53+
});
54+
55+
it('renders row contents without headers in responsive mode if they are not cells', () => {
56+
const contextValue: ITableContext = {
57+
isResponsive: true,
58+
headings: ['a', 'b', 'c'],
59+
setHeadings: jest.fn(),
60+
};
61+
const wrapper = mount(
62+
<table>
63+
<TableContext.Provider value={contextValue}>
64+
<TableSectionContext.Provider value={TableSection.BODY}>
65+
<tbody>
66+
<TableRow>
67+
<td data-test="cell-1">1</td>
68+
<td data-test="cell-2">2</td>
69+
<td data-test="cell-3">3</td>
70+
</TableRow>
71+
</tbody>
72+
</TableSectionContext.Provider>
73+
</TableContext.Provider>
74+
</table>
75+
);
76+
77+
assertCellText(wrapper, 1, '1');
78+
assertCellText(wrapper, 2, '2');
79+
assertCellText(wrapper, 3, '3');
80+
expect(wrapper.find('.nhsuk-table-responsive__heading').length).toBe(0);
81+
82+
wrapper.unmount();
83+
});
84+
85+
it('renders row contents as headers in head section in responsive mode', () => {
86+
const setHeadings = jest.fn();
87+
const contextValue: ITableContext = {
88+
isResponsive: true,
89+
headings: ['a', 'b', 'c'],
90+
setHeadings,
91+
};
92+
const wrapper = mount(
93+
<table>
94+
<TableContext.Provider value={contextValue}>
95+
<TableSectionContext.Provider value={TableSection.HEAD}>
96+
<thead>
97+
<TableRow>
98+
<TableCell data-test="cell-1">1</TableCell>
99+
<TableCell data-test="cell-2">2</TableCell>
100+
<TableCell data-test="cell-3">3</TableCell>
101+
</TableRow>
102+
</thead>
103+
</TableSectionContext.Provider>
104+
</TableContext.Provider>
105+
</table>
106+
);
107+
108+
expect(setHeadings).toHaveBeenCalledWith(['1', '2', '3']);
109+
110+
wrapper.unmount();
111+
});
112+
113+
it('sets headers, skipping contents outside of table cells in responsive mode', () => {
114+
const setHeadings = jest.fn();
115+
const contextValue: ITableContext = {
116+
isResponsive: true,
117+
headings: ['a', 'b', 'c'],
118+
setHeadings,
119+
};
120+
const wrapper = mount(
121+
<table>
122+
<TableContext.Provider value={contextValue}>
123+
<TableSectionContext.Provider value={TableSection.HEAD}>
124+
<thead>
125+
<TableRow>
126+
<td data-test="cell-1">1</td>
127+
<TableCell data-test="cell-2">2</TableCell>
128+
<td data-test="cell-3">3</td>
129+
</TableRow>
130+
</thead>
131+
</TableSectionContext.Provider>
132+
</TableContext.Provider>
133+
</table>
134+
);
135+
136+
expect(setHeadings).toHaveBeenCalledWith(['2']);
137+
138+
wrapper.unmount();
139+
});
140+
141+
it('does not render row contents as headers in head section in normal mode', () => {
142+
const contextValue: ITableContext = {
143+
isResponsive: false,
144+
headings: ['a', 'b', 'c'],
145+
setHeadings: jest.fn(),
146+
};
147+
const wrapper = mount(
148+
<table>
149+
<TableContext.Provider value={contextValue}>
150+
<TableSectionContext.Provider value={TableSection.HEAD}>
151+
<thead>
152+
<TableRow>
153+
<TableCell data-test="cell-1">1</TableCell>
154+
<TableCell data-test="cell-2">2</TableCell>
155+
<TableCell data-test="cell-3">3</TableCell>
156+
</TableRow>
157+
</thead>
158+
</TableSectionContext.Provider>
159+
</TableContext.Provider>
160+
</table>
161+
);
162+
163+
assertCellText(wrapper, 1, '1');
164+
assertCellText(wrapper, 2, '2');
165+
assertCellText(wrapper, 3, '3');
166+
expect(wrapper.find('.nhsuk-table-responsive__heading').length).toBe(0);
167+
168+
wrapper.unmount();
169+
});
15170
});

‎src/components/table/components/__tests__/__snapshots__/TableRow.test.tsx.snap‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22

33
exports[`Table.Row matches snapshot 1`] = `
44
<table>
5-
<Table.Row>
6-
<tr
7-
className="nhsuk-table__row"
8-
/>
9-
</Table.Row>
5+
<tbody>
6+
<Table.Row>
7+
<tr
8+
className="nhsuk-table__row"
9+
/>
10+
</Table.Row>
11+
</tbody>
1012
</table>
1113
`;

‎stories/Table.stories.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,15 +68,11 @@ export const ResponsiveTable = (): JSX.Element => (
6868
<Table.Cell>2.5ml</Table.Cell>
6969
<Table.Cell>Max 3 times in 24 hours</Table.Cell>
7070
</Table.Row>
71-
</Table.Body>
72-
<Table.Body>
7371
<Table.Row>
7472
<Table.Cell>6 to 11 months</Table.Cell>
7573
<Table.Cell>2.5ml</Table.Cell>
7674
<Table.Cell>Max 3 to 4 times in 24 hours</Table.Cell>
7775
</Table.Row>
78-
</Table.Body>
79-
<Table.Body>
8076
<Table.Row>
8177
<Table.Cell>1 to 3 years</Table.Cell>
8278
<Table.Cell>5ml</Table.Cell>

0 commit comments

Comments
 (0)