Skip to content

Commit

Permalink
feat: add tests for checkbox filter
Browse files Browse the repository at this point in the history
  • Loading branch information
@fhlavac
fhlavac committed Nov 16, 2024
1 parent e350381 commit 4354094
Show file tree
Hide file tree
Showing 3 changed files with 284 additions and 0 deletions.
66 changes: 66 additions & 0 deletions cypress/component/DataViewCheckboxFilter.cy.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import React from 'react';
import { DataViewCheckboxFilter, DataViewCheckboxFilterProps } from '@patternfly/react-data-view/dist/dynamic/DataViewCheckboxFilter';
import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';

describe('DataViewCheckboxFilter component', () => {
const defaultProps: DataViewCheckboxFilterProps = {
filterId: 'test-checkbox-filter',
title: 'Test checkbox filter',
value: [ 'workspace-one' ],
options: [
{ label: 'Workspace one', value: 'workspace-one' },
{ label: 'Workspace two', value: 'workspace-two' },
{ label: 'Workspace three', value: 'workspace-three' },
],
};

it('renders a checkbox filter with options', () => {
const onChange = cy.stub().as('onChange');

cy.mount(
<DataViewToolbar filters={<DataViewCheckboxFilter {...defaultProps} onChange={onChange} />} />
);

cy.get('[data-ouia-component-id="DataViewCheckboxFilter-toggle"]')
.contains('Test checkbox filter')
.should('be.visible');

cy.get('[data-ouia-component-id="DataViewCheckboxFilter-badge"]')
.should('exist')
.contains('1');

cy.get('[data-ouia-component-id="DataViewCheckboxFilter-toggle"]').click();
cy.get('[data-ouia-component-id="DataViewCheckboxFilter-menu"]').should('be.visible');

cy.get('[data-ouia-component-id="DataViewCheckboxFilter-menu"]')
.find('li')
.should('have.length', 3)
.first()
.contains('Workspace one');

cy.get('[data-ouia-component-id="DataViewCheckboxFilter-menu"]')
.find('li')
.first()
.find('input[type="checkbox"]')
.should('be.checked');

cy.get('[data-ouia-component-id="DataViewCheckboxFilter-menu"]')
.find('li')
.eq(1)
.find('input[type="checkbox"]')
.click();

cy.get('@onChange').should('have.been.calledWith', Cypress.sinon.match.object, [ 'workspace-two', 'workspace-one' ]);
});

it('renders a checkbox filter with no options selected', () => {
const emptyProps = { ...defaultProps, value: [] };

cy.mount(
<DataViewToolbar filters={<DataViewCheckboxFilter {...emptyProps} />} />
);

cy.get('[data-ouia-component-id="DataViewCheckboxFilter-toggle"]').contains('Test checkbox filter');
cy.get('[data-ouia-component-id="DataViewCheckboxFilter-badge"]').should('not.exist');
});
});
24 changes: 24 additions & 0 deletions packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from 'react';
import { render } from '@testing-library/react';
import DataViewCheckboxFilter, { DataViewCheckboxFilterProps } from './DataViewCheckboxFilter';
import DataViewToolbar from '../DataViewToolbar';

describe('DataViewCheckboxFilter component', () => {
const defaultProps: DataViewCheckboxFilterProps = {
filterId: 'test-checkbox-filter',
title: 'Test Checkbox Filter',
value: [ 'workspace-one' ],
options: [
{ label: 'Workspace one', value: 'workspace-one' },
{ label: 'Workspace two', value: 'workspace-two' },
{ label: 'Workspace three', value: 'workspace-three' },
],
};

it('should render correctly', () => {
const { container } = render(
<DataViewToolbar filters={<DataViewCheckboxFilter {...defaultProps} />} />
);
expect(container).toMatchSnapshot();
});
});
194 changes: 194 additions & 0 deletions ...ages/module/src/DataViewCheckboxFilter/__snapshots__/DataViewCheckboxFilter.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`DataViewCheckboxFilter component should render correctly 1`] = `
<div>
<div
class="pf-v5-c-toolbar"
data-ouia-component-id="DataViewToolbar"
data-ouia-component-type="PF5/Toolbar"
data-ouia-safe="true"
id="pf-random-id-0"
>
<div
class="pf-v5-c-toolbar__content"
>
<div
class="pf-v5-c-toolbar__content-section"
>
<div
class="pf-v5-c-toolbar__item pf-m-search-filter"
>
<div
class="pf-v5-c-toolbar__item"
data-ouia-component-id="DataViewCheckboxFilter"
>
<button
aria-expanded="false"
class="pf-v5-c-menu-toggle"
data-ouia-component-id="DataViewCheckboxFilter-toggle"
data-ouia-component-type="PF5/MenuToggle"
data-ouia-safe="true"
style="width: 200px;"
type="button"
>
<span
class="pf-v5-c-menu-toggle__icon"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
width="1em"
>
<path
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"
/>
</svg>
</span>
<span
class="pf-v5-c-menu-toggle__text"
>
Test Checkbox Filter
</span>
<span
class="pf-v5-c-menu-toggle__count"
>
<span
class="pf-v5-c-badge pf-m-read"
data-ouia-component-id="DataViewCheckboxFilter-badge"
>
1
</span>
</span>
<span
class="pf-v5-c-menu-toggle__controls"
>
<span
class="pf-v5-c-menu-toggle__toggle-icon"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 320 512"
width="1em"
>
<path
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"
/>
</svg>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
<div
class="pf-v5-c-toolbar__content pf-m-chip-container"
>
<div
class="pf-v5-c-toolbar__group"
>
<div
class="pf-v5-c-toolbar__item pf-m-chip-group"
>
<div
aria-labelledby="pf-random-id-1"
class="pf-v5-c-chip-group pf-m-category"
data-ouia-component-type="PF5/ChipGroup"
data-ouia-safe="true"
role="group"
>
<div
class="pf-v5-c-chip-group__main"
>
<span
class="pf-v5-c-chip-group__label"
id="pf-random-id-1"
>
Test Checkbox Filter
</span>
<ul
aria-labelledby="pf-random-id-1"
class="pf-v5-c-chip-group__list"
role="list"
>
<li
class="pf-v5-c-chip-group__list-item"
>
<div
class="pf-v5-c-chip"
data-ouia-component-id="OUIA-Generated-Chip-1"
data-ouia-component-type="PF5/Chip"
data-ouia-safe="true"
>
<span
class="pf-v5-c-chip__content"
>
<span
class="pf-v5-c-chip__text"
id="pf-random-id-2"
>
Workspace one
</span>
</span>
<span
class="pf-v5-c-chip__actions"
>
<button
aria-disabled="false"
aria-label="close"
aria-labelledby="remove_pf-random-id-2 pf-random-id-2"
class="pf-v5-c-button pf-m-plain"
data-ouia-component-id="close"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="remove_pf-random-id-2"
type="button"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 352 512"
width="1em"
>
<path
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"
/>
</svg>
</button>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class="pf-v5-c-toolbar__item"
>
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-link pf-m-inline"
data-ouia-component-id="DataViewToolbar-clear-all-filters"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
type="button"
>
Clear filters
</button>
</div>
</div>
</div>
</div>
`;

0 comments on commit 4354094

Please sign in to comment.