Skip to content

Commit dcb7c2d

Browse files
fhlavacfhlavac
committed
filters2
1 parent b5bcf09 commit dcb7c2d

File tree

3 files changed

+132
-4
lines changed

3 files changed

+132
-4
lines changed

‎cypress/component/DataViewFilters.cy.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react';
2+
import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
3+
import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
4+
import { FilterIcon } from '@patternfly/react-icons';
5+
6+
describe('DataViewFilters', () => {
7+
const onChangeMock = cy.stub();
8+
9+
const filtersProps = {
10+
ouiaId: 'DataViewFilters',
11+
onChange: onChangeMock,
12+
values: { name: '', branch: '' },
13+
toggleIcon: <FilterIcon />,
14+
};
15+
16+
beforeEach(() => {
17+
cy.mount(
18+
<DataViewFilters {...filtersProps}>
19+
<DataViewTextFilter filterId="name" title="Name" placeholder="Filter by name" />
20+
<DataViewTextFilter filterId="branch" title="Branch" placeholder="Filter by branch" />
21+
</DataViewFilters>
22+
);
23+
});
24+
25+
it('renders DataViewFilters with menu and filter items', () => {
26+
// Verifies that the DataViewFilters component renders with its specified properties
27+
cy.get('[data-ouia-component-id="DataViewFilters"]').should('exist');
28+
29+
// Check if the toggle icon is rendered and click to open the dropdown
30+
cy.get('[data-ouia-component-id="DataViewFilters"]').click();
31+
32+
// Verifies the filter items inside the menu
33+
cy.contains('Name').should('exist');
34+
cy.contains('Branch').should('exist');
35+
});
36+
37+
it('can select a filter option', () => {
38+
// Opens the menu and selects a filter item
39+
cy.get('[data-ouia-component-id="DataViewFilters"]').click();
40+
cy.contains('Name').click();
41+
42+
// Ensures that 'Name' filter item is displayed
43+
cy.get('[data-ouia-component-id="DataViewFilters"]').should('contain.text', 'Name');
44+
});
45+
46+
it('responds to input and clears the filters', () => {
47+
// Select the "Name" filter and type a value
48+
cy.get('[data-ouia-component-id="DataViewFilters"]').click();
49+
cy.contains('Name').click();
50+
51+
// Type into the "Name" filter input
52+
cy.get('input[placeholder="Filter by name"]').type('Repository One');
53+
cy.wrap(onChangeMock).should('be.calledWith', 'name', { name: 'Repository One' });
54+
55+
// Clear the input
56+
cy.get('input[placeholder="Filter by name"]').clear();
57+
cy.wrap(onChangeMock).should('be.calledWith', 'name', { name: '' });
58+
});
59+
});

‎cypress/component/DataViewTextFilter.cy.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from 'react';
2+
import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
3+
4+
describe('DataViewTextFilter', () => {
5+
const onChangeMock = cy.stub();
6+
7+
const defaultProps = {
8+
filterId: 'name',
9+
title: 'Name',
10+
value: '',
11+
onChange: onChangeMock,
12+
ouiaId: 'DataViewTextFilter',
13+
placeholder: 'Filter by name'
14+
};
15+
16+
beforeEach(() => {
17+
cy.mount(<DataViewTextFilter {...defaultProps} />);
18+
});
19+
20+
it('renders DataViewTextFilter with correct initial values', () => {
21+
// Checks that the main components are rendered
22+
cy.get('[data-ouia-component-id="DataViewTextFilter"]').should('exist');
23+
cy.get('[data-ouia-component-id="DataViewTextFilter-input"]').should('have.attr', 'placeholder', 'Filter by name');
24+
});
25+
26+
it('accepts input and calls onChange with trimmed input', () => {
27+
// Type into the search input field
28+
cy.get('[data-ouia-component-id="DataViewTextFilter-input"]').type(' Repository One ');
29+
30+
// Verifies that onChange is called with trimmed input value
31+
cy.wrap(onChangeMock).should('have.been.calledWith', Cypress.sinon.match.any, 'Repository One');
32+
});
33+
34+
it('displays a chip when value is present and clears it on delete', () => {
35+
// Set initial value to display the chip
36+
cy.mount(<DataViewTextFilter {...defaultProps} value="Repository One" />);
37+
38+
// Checks that the chip displays with the correct value
39+
cy.get('[data-ouia-component-id="DataViewTextFilter"]').contains('Repository One').should('exist');
40+
41+
// Clears the chip and checks if onChange is called with an empty value
42+
cy.get('[data-ouia-component-id="DataViewTextFilter"] button').click();
43+
cy.wrap(onChangeMock).should('have.been.calledWith', Cypress.sinon.match.any, '');
44+
});
45+
46+
it('clears input when the clear button is clicked', () => {
47+
// Type a value and clear it
48+
cy.get('[data-ouia-component-id="DataViewTextFilter-input"]').type('Repository Two');
49+
cy.get('[data-ouia-component-id="DataViewTextFilter-input"] button.pf-c-button').click();
50+
51+
// Verifies that the input field is cleared and onChange is called with an empty value
52+
cy.wrap(onChangeMock).should('have.been.calledWith', Cypress.sinon.match.any, '');
53+
cy.get('[data-ouia-component-id="DataViewTextFilter-input"]').should('have.value', '');
54+
});
55+
56+
it('hides or shows the toolbar item based on showToolbarItem prop', () => {
57+
// Rerender component with showToolbarItem set to false
58+
cy.mount(<DataViewTextFilter {...defaultProps} showToolbarItem={false} />);
59+
60+
// Verifies that the filter component is not visible in the toolbar
61+
cy.get('[data-ouia-component-id="DataViewTextFilter"]').should('not.exist');
62+
63+
// Rerender with showToolbarItem set to true
64+
cy.mount(<DataViewTextFilter {...defaultProps} showToolbarItem />);
65+
66+
// Verifies that the filter component is now visible
67+
cy.get('[data-ouia-component-id="DataViewTextFilter"]').should('exist');
68+
});
69+
});

‎packages/module/patternfly-docs/generated/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ module.exports = {
2525
'/extensions/data-view/functionality/react': {
2626
id: "Functionality",
2727
title: "Functionality",
28-
toc: [[{"text":"Toolbar usage"},{"text":"Pagination state"},{"text":"Pagination example"},{"text":"Toolbar usage","id":"toolbar-usage-0"},{"text":"Selection state"},{"text":"Selection example"}]],
29-
examples: ["Pagination example","Selection example"],
28+
toc: [[{"text":"Toolbar usage"},{"text":"Pagination state"},{"text":"Pagination example"},{"text":"Toolbar usage","id":"toolbar-usage-0"},{"text":"Selection state"},{"text":"Selection example"},{"text":"Toolbar usage","id":"toolbar-usage-1"},{"text":"Filters state"},{"text":"Filtering example"}]],
29+
examples: ["Pagination example","Selection example","Filtering example"],
3030
section: "extensions",
3131
subsection: "Data view",
3232
source: "react",
@@ -49,8 +49,8 @@ module.exports = {
4949
'/extensions/data-view/components/react': {
5050
id: "Components",
5151
title: "Components",
52-
toc: [{"text":"Data view toolbar"},[{"text":"Basic toolbar example"}],{"text":"Data view table"},[{"text":"Rows and columns customization"},{"text":"Tree table example"},{"text":"Empty state example"}]],
53-
examples: ["Basic toolbar example","Rows and columns customization","Tree table example","Empty state example"],
52+
toc: [{"text":"Data view toolbar"},[{"text":"Basic toolbar example"},{"text":"Actions configuration"},{"text":"Actions example"}],{"text":"Data view table"},[{"text":"Rows and columns customization"},{"text":"Tree table example"},{"text":"Empty state example"},{"text":"Error state example"},{"text":"Loading state example"}]],
53+
examples: ["Basic toolbar example","Actions example","Rows and columns customization","Tree table example","Empty state example","Error state example","Loading state example"],
5454
section: "extensions",
5555
subsection: "Data view",
5656
source: "react",

0 commit comments

Comments
 (0)