Skip to content

Commit 4354094

Browse files
fhlavacfhlavac
committed
feat: add tests for checkbox filter
1 parent e350381 commit 4354094

File tree

3 files changed

+284
-0
lines changed

3 files changed

+284
-0
lines changed

‎cypress/component/DataViewCheckboxFilter.cy.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from 'react';
2+
import { DataViewCheckboxFilter, DataViewCheckboxFilterProps } from '@patternfly/react-data-view/dist/dynamic/DataViewCheckboxFilter';
3+
import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
4+
5+
describe('DataViewCheckboxFilter component', () => {
6+
const defaultProps: DataViewCheckboxFilterProps = {
7+
filterId: 'test-checkbox-filter',
8+
title: 'Test checkbox filter',
9+
value: [ 'workspace-one' ],
10+
options: [
11+
{ label: 'Workspace one', value: 'workspace-one' },
12+
{ label: 'Workspace two', value: 'workspace-two' },
13+
{ label: 'Workspace three', value: 'workspace-three' },
14+
],
15+
};
16+
17+
it('renders a checkbox filter with options', () => {
18+
const onChange = cy.stub().as('onChange');
19+
20+
cy.mount(
21+
<DataViewToolbar filters={<DataViewCheckboxFilter {...defaultProps} onChange={onChange} />} />
22+
);
23+
24+
cy.get('[data-ouia-component-id="DataViewCheckboxFilter-toggle"]')
25+
.contains('Test checkbox filter')
26+
.should('be.visible');
27+
28+
cy.get('[data-ouia-component-id="DataViewCheckboxFilter-badge"]')
29+
.should('exist')
30+
.contains('1');
31+
32+
cy.get('[data-ouia-component-id="DataViewCheckboxFilter-toggle"]').click();
33+
cy.get('[data-ouia-component-id="DataViewCheckboxFilter-menu"]').should('be.visible');
34+
35+
cy.get('[data-ouia-component-id="DataViewCheckboxFilter-menu"]')
36+
.find('li')
37+
.should('have.length', 3)
38+
.first()
39+
.contains('Workspace one');
40+
41+
cy.get('[data-ouia-component-id="DataViewCheckboxFilter-menu"]')
42+
.find('li')
43+
.first()
44+
.find('input[type="checkbox"]')
45+
.should('be.checked');
46+
47+
cy.get('[data-ouia-component-id="DataViewCheckboxFilter-menu"]')
48+
.find('li')
49+
.eq(1)
50+
.find('input[type="checkbox"]')
51+
.click();
52+
53+
cy.get('@onChange').should('have.been.calledWith', Cypress.sinon.match.object, [ 'workspace-two', 'workspace-one' ]);
54+
});
55+
56+
it('renders a checkbox filter with no options selected', () => {
57+
const emptyProps = { ...defaultProps, value: [] };
58+
59+
cy.mount(
60+
<DataViewToolbar filters={<DataViewCheckboxFilter {...emptyProps} />} />
61+
);
62+
63+
cy.get('[data-ouia-component-id="DataViewCheckboxFilter-toggle"]').contains('Test checkbox filter');
64+
cy.get('[data-ouia-component-id="DataViewCheckboxFilter-badge"]').should('not.exist');
65+
});
66+
});

‎packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import DataViewCheckboxFilter, { DataViewCheckboxFilterProps } from './DataViewCheckboxFilter';
4+
import DataViewToolbar from '../DataViewToolbar';
5+
6+
describe('DataViewCheckboxFilter component', () => {
7+
const defaultProps: DataViewCheckboxFilterProps = {
8+
filterId: 'test-checkbox-filter',
9+
title: 'Test Checkbox Filter',
10+
value: [ 'workspace-one' ],
11+
options: [
12+
{ label: 'Workspace one', value: 'workspace-one' },
13+
{ label: 'Workspace two', value: 'workspace-two' },
14+
{ label: 'Workspace three', value: 'workspace-three' },
15+
],
16+
};
17+
18+
it('should render correctly', () => {
19+
const { container } = render(
20+
<DataViewToolbar filters={<DataViewCheckboxFilter {...defaultProps} />} />
21+
);
22+
expect(container).toMatchSnapshot();
23+
});
24+
});

‎packages/module/src/DataViewCheckboxFilter/__snapshots__/DataViewCheckboxFilter.test.tsx.snap‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`DataViewCheckboxFilter component should render correctly 1`] = `
4+
<div>
5+
<div
6+
class="pf-v5-c-toolbar"
7+
data-ouia-component-id="DataViewToolbar"
8+
data-ouia-component-type="PF5/Toolbar"
9+
data-ouia-safe="true"
10+
id="pf-random-id-0"
11+
>
12+
<div
13+
class="pf-v5-c-toolbar__content"
14+
>
15+
<div
16+
class="pf-v5-c-toolbar__content-section"
17+
>
18+
<div
19+
class="pf-v5-c-toolbar__item pf-m-search-filter"
20+
>
21+
<div
22+
class="pf-v5-c-toolbar__item"
23+
data-ouia-component-id="DataViewCheckboxFilter"
24+
>
25+
<button
26+
aria-expanded="false"
27+
class="pf-v5-c-menu-toggle"
28+
data-ouia-component-id="DataViewCheckboxFilter-toggle"
29+
data-ouia-component-type="PF5/MenuToggle"
30+
data-ouia-safe="true"
31+
style="width: 200px;"
32+
type="button"
33+
>
34+
<span
35+
class="pf-v5-c-menu-toggle__icon"
36+
>
37+
<svg
38+
aria-hidden="true"
39+
class="pf-v5-svg"
40+
fill="currentColor"
41+
height="1em"
42+
role="img"
43+
viewBox="0 0 512 512"
44+
width="1em"
45+
>
46+
<path
47+
d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
48+
/>
49+
</svg>
50+
</span>
51+
<span
52+
class="pf-v5-c-menu-toggle__text"
53+
>
54+
Test Checkbox Filter
55+
</span>
56+
<span
57+
class="pf-v5-c-menu-toggle__count"
58+
>
59+
<span
60+
class="pf-v5-c-badge pf-m-read"
61+
data-ouia-component-id="DataViewCheckboxFilter-badge"
62+
>
63+
1
64+
</span>
65+
</span>
66+
<span
67+
class="pf-v5-c-menu-toggle__controls"
68+
>
69+
<span
70+
class="pf-v5-c-menu-toggle__toggle-icon"
71+
>
72+
<svg
73+
aria-hidden="true"
74+
class="pf-v5-svg"
75+
fill="currentColor"
76+
height="1em"
77+
role="img"
78+
viewBox="0 0 320 512"
79+
width="1em"
80+
>
81+
<path
82+
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
83+
/>
84+
</svg>
85+
</span>
86+
</span>
87+
</button>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
<div
93+
class="pf-v5-c-toolbar__content pf-m-chip-container"
94+
>
95+
<div
96+
class="pf-v5-c-toolbar__group"
97+
>
98+
<div
99+
class="pf-v5-c-toolbar__item pf-m-chip-group"
100+
>
101+
<div
102+
aria-labelledby="pf-random-id-1"
103+
class="pf-v5-c-chip-group pf-m-category"
104+
data-ouia-component-type="PF5/ChipGroup"
105+
data-ouia-safe="true"
106+
role="group"
107+
>
108+
<div
109+
class="pf-v5-c-chip-group__main"
110+
>
111+
<span
112+
class="pf-v5-c-chip-group__label"
113+
id="pf-random-id-1"
114+
>
115+
Test Checkbox Filter
116+
</span>
117+
<ul
118+
aria-labelledby="pf-random-id-1"
119+
class="pf-v5-c-chip-group__list"
120+
role="list"
121+
>
122+
<li
123+
class="pf-v5-c-chip-group__list-item"
124+
>
125+
<div
126+
class="pf-v5-c-chip"
127+
data-ouia-component-id="OUIA-Generated-Chip-1"
128+
data-ouia-component-type="PF5/Chip"
129+
data-ouia-safe="true"
130+
>
131+
<span
132+
class="pf-v5-c-chip__content"
133+
>
134+
<span
135+
class="pf-v5-c-chip__text"
136+
id="pf-random-id-2"
137+
>
138+
Workspace one
139+
</span>
140+
</span>
141+
<span
142+
class="pf-v5-c-chip__actions"
143+
>
144+
<button
145+
aria-disabled="false"
146+
aria-label="close"
147+
aria-labelledby="remove_pf-random-id-2 pf-random-id-2"
148+
class="pf-v5-c-button pf-m-plain"
149+
data-ouia-component-id="close"
150+
data-ouia-component-type="PF5/Button"
151+
data-ouia-safe="true"
152+
id="remove_pf-random-id-2"
153+
type="button"
154+
>
155+
<svg
156+
aria-hidden="true"
157+
class="pf-v5-svg"
158+
fill="currentColor"
159+
height="1em"
160+
role="img"
161+
viewBox="0 0 352 512"
162+
width="1em"
163+
>
164+
<path
165+
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
166+
/>
167+
</svg>
168+
</button>
169+
</span>
170+
</div>
171+
</li>
172+
</ul>
173+
</div>
174+
</div>
175+
</div>
176+
</div>
177+
<div
178+
class="pf-v5-c-toolbar__item"
179+
>
180+
<button
181+
aria-disabled="false"
182+
class="pf-v5-c-button pf-m-link pf-m-inline"
183+
data-ouia-component-id="DataViewToolbar-clear-all-filters"
184+
data-ouia-component-type="PF5/Button"
185+
data-ouia-safe="true"
186+
type="button"
187+
>
188+
Clear filters
189+
</button>
190+
</div>
191+
</div>
192+
</div>
193+
</div>
194+
`;

0 commit comments

Comments
 (0)