Skip to content

Commit ed4300d

Browse files
fhlavacfhlavac
committed
fix: fix cypress tests failing because of the PF upgrade
1 parent 317462f commit ed4300d

File tree

9 files changed

+51
-41
lines changed

9 files changed

+51
-41
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export interface MyComponentProps {
2626
const useStyles = createUseStyles({
2727
myText: {
2828
fontFamily: 'monospace',
29-
fontSize: 'var(--pf-v5-global--icon--FontSize--md)',
29+
fontSize: 'var(--pf-v6-global--icon--FontSize--md)',
3030
},
3131
})
3232
@@ -126,7 +126,7 @@ When adding/making changes to a component, always make sure your code is tested:
126126
### Styling:
127127
- for styling always use JSS
128128
- new classNames should be named in camelCase starting with the name of a given component and following with more details clarifying its purpose/component's subsection to which the class is applied (`actionMenu`, `actionMenuDropdown`, `actionMenuDropdownToggle`, etc.)
129-
- do not use `pf-v5-u-XXX` classes, use CSS variables in a custom class instead (styles for the utility classes are not bundled with the standard patternfly.css - it would require the consumer to import also addons.css)
129+
- do not use `pf-v6-u-XXX` classes, use CSS variables in a custom class instead (styles for the utility classes are not bundled with the standard patternfly.css - it would require the consumer to import also addons.css)
130130

131131
---
132132

‎cypress/component/DataViewFilters.cy.tsx‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ describe('DataViewFilters', () => {
3737
it('renders DataViewFilters with menu and filter items', () => {
3838
cy.mount(<DataViewToolbarWithState />);
3939
cy.get('[data-ouia-component-id="DataViewFilters"]').should('exist');
40-
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
40+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click();
4141

4242
cy.contains('Name').should('exist');
4343
cy.contains('Branch').should('exist');
@@ -46,63 +46,65 @@ describe('DataViewFilters', () => {
4646
it('can select a filter option', () => {
4747
cy.mount(<DataViewToolbarWithState />);
4848
cy.get('[data-ouia-component-id="DataViewFilters"]').should('contain.text', 'Name');
49-
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
49+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click();
5050
cy.contains('Branch').click();
5151

5252
cy.get('[data-ouia-component-id="DataViewFilters"]').should('contain.text', 'Branch');
5353
});
5454

5555
it('responds to input and clears the filters', () => {
5656
cy.mount(<DataViewToolbarWithState />);
57-
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
57+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click();
5858
cy.contains('Name').click();
5959

6060
cy.get('input[placeholder="Filter by name"]').type('Repository one');
61-
cy.get('.pf-v5-c-chip__text').should('have.length', 1);
61+
cy.get('.pf-v6-c-label__text').should('have.length', 1);
6262
cy.get('input[placeholder="Filter by name"]').clear();
63-
cy.get('.pf-v5-c-chip__text').should('have.length', 0);
63+
cy.get('.pf-v6-c-label__text').should('have.length', 0);
6464
});
6565

66-
it('displays chips for selected filters', () => {
66+
it('displays labels for selected filters', () => {
6767
cy.mount(<DataViewToolbarWithState />);
68-
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
68+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click();
6969
cy.contains('Name').click();
7070
cy.get('input[placeholder="Filter by name"]').type('Repository one');
7171

72-
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
72+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click();
7373
cy.contains('Branch').click();
7474
cy.get('input[placeholder="Filter by branch"]').type('Main branch');
7575

76-
cy.get('.pf-v5-c-chip__text').should('have.length', 2);
77-
cy.get('.pf-v5-c-chip__text').eq(0).should('contain.text', 'Repository one');
78-
cy.get('.pf-v5-c-chip__text').eq(1).should('contain.text', 'Main branch');
76+
cy.get('.pf-v6-c-label__text').should('have.length', 2);
77+
cy.get('.pf-v6-c-label__text').eq(0).should('contain.text', 'Repository one');
78+
cy.get('.pf-v6-c-label__text').eq(1).should('contain.text', 'Main branch');
7979
});
8080

81-
it('removes filters by clicking individual chips', () => {
81+
it('removes filters by clicking individual labels', () => {
8282
cy.mount(<DataViewToolbarWithState />);
83-
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
83+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click();
8484
cy.contains('Name').click();
8585
cy.get('input[placeholder="Filter by name"]').type('Repository one');
8686

87-
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
87+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click();
8888
cy.contains('Branch').click();
8989
cy.get('input[placeholder="Filter by branch"]').type('Main branch');
9090

91-
cy.get('[data-ouia-component-id="close"]').should('have.length', 2);
91+
cy.get('[aria-label="Close Repository one"]').should('have.length', 1);
92+
cy.get('[aria-label="Close Main branch"]').should('have.length', 1);
9293

93-
cy.get('[data-ouia-component-id="close"]').first().click();
94-
cy.get('[data-ouia-component-id="close"]').last().click();
94+
cy.get('[aria-label="Close Repository one"]').click();
95+
cy.get('[aria-label="Close Repository one"]').should('have.length', 0);
9596

96-
cy.get('[data-ouia-component-id="close"]').should('have.length', 0);
97+
cy.get('[aria-label="Close Main branch"]').click();
98+
cy.get('[aria-label="Close Main branch"]').should('have.length', 0);
9799
});
98100

99101
it('clears all filters using the clear-all button', () => {
100102
cy.mount(<DataViewToolbarWithState />);
101-
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
103+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click();
102104
cy.contains('Name').click();
103105
cy.get('input[placeholder="Filter by name"]').type('Repository one');
104106

105-
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
107+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click();
106108
cy.contains('Branch').click();
107109
cy.get('input[placeholder="Filter by branch"]').type('Main branch');
108110

‎cypress/component/DataViewTableSorting.cy.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,15 @@ describe('DataViewTable Sorting with Hook', () => {
8282
</BrowserRouter>
8383
);
8484

85-
cy.get('[data-ouia-component-id="test-table-th-0"]').click();
85+
cy.get('[data-ouia-component-id="test-table-th-0"]')
86+
.find('button')
87+
.click();
8688
cy.get('[data-ouia-component-id="test-table-td-0-0"]').should('contain', 'Repository five');
8789
cy.get('[data-ouia-component-id="test-table-td-5-0"]').should('contain', 'Repository two');
8890

89-
cy.get('[data-ouia-component-id="test-table-th-0"]').click();
91+
cy.get('[data-ouia-component-id="test-table-th-0"]')
92+
.find('button')
93+
.click();
9094
cy.get('[data-ouia-component-id="test-table-td-0-0"]').should('contain', 'Repository two');
9195
cy.get('[data-ouia-component-id="test-table-td-5-0"]').should('contain', 'Repository five');
9296
});
@@ -98,11 +102,15 @@ describe('DataViewTable Sorting with Hook', () => {
98102
</BrowserRouter>
99103
);
100104

101-
cy.get('[data-ouia-component-id="test-table-th-4"]').click();
105+
cy.get('[data-ouia-component-id="test-table-th-4"]')
106+
.find('button')
107+
.click();
102108
cy.get('[data-ouia-component-id="test-table-td-0-4"]').should('contain', '2023-11-01');
103109
cy.get('[data-ouia-component-id="test-table-td-5-4"]').should('contain', '2023-11-06');
104110

105-
cy.get('[data-ouia-component-id="test-table-th-4"]').click();
111+
cy.get('[data-ouia-component-id="test-table-th-4"]')
112+
.find('button')
113+
.click();
106114
cy.get('[data-ouia-component-id="test-table-td-0-4"]').should('contain', '2023-11-06');
107115
cy.get('[data-ouia-component-id="test-table-td-5-4"]').should('contain', '2023-11-01');
108116
});

‎cypress/component/DataViewTextFilter.cy.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,14 @@ describe('DataViewTextFilter', () => {
3737
.should('have.value', 'Repository one');
3838
});
3939

40-
it('displays a chip when value is present and removes it on delete', () => {
40+
it('displays a label when value is present and removes it on delete', () => {
4141
cy.mount(<DataViewToolbarWithState />);
4242
cy.get('[data-ouia-component-id="DataViewTextFilter-input"] input').should('have.value', 'Repository one');
4343

44-
cy.get('.pf-v5-c-chip__text').contains('Repository one');
45-
cy.get('.pf-m-chip-group button.pf-v5-c-button.pf-m-plain').click();
44+
cy.get('.pf-v6-c-label__text').contains('Repository one');
45+
cy.get('.pf-m-label-group button.pf-v6-c-button.pf-m-plain').click();
4646

47-
cy.get('.pf-v5-c-chip__text').should('not.exist');
47+
cy.get('.pf-v6-c-label__text').should('not.exist');
4848
cy.get('[data-ouia-component-id="DataViewTextFilter-input"] input').should('have.value', '');
4949
});
5050

‎packages/module/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableExample.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspac
5454
const columns: DataViewTh[] = [
5555
null,
5656
'Repositories',
57-
{ cell: <>Branches<ExclamationCircleIcon className='pf-v5-u-ml-sm' color="var(--pf-t--temp--dev--tbd)"/* CODEMODS: original v5 color was --pf-v5-global--danger-color--100 *//></> },
57+
{ cell: <>Branches<ExclamationCircleIcon className='pf-v6-u-ml-sm' color="var(--pf-t--global--color--status--danger--default)"/></> },
5858
'Pull requests',
5959
{ cell: 'Workspaces', props: { info: { tooltip: 'More information' } } },
6060
{ cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } },

‎packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const RepositoryDetail: React.FunctionComponent<RepositoryDetailProps> = ({ sele
4747
return (
4848
<DrawerPanelContent>
4949
<DrawerHead>
50-
<Title className="pf-v5-u-mb-md" headingLevel="h2" ouiaId="detail-drawer-title">
50+
<Title className="pf-v6-u-mb-md" headingLevel="h2" ouiaId="detail-drawer-title">
5151
Detail of {selectedRepo?.name}
5252
</Title>
5353
<Content component="p">Branches: {selectedRepo?.branches}</Content>

‎packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ The `useDataViewSelection` hook manages the selection state of the data view.
8888
```
8989

9090
# Filters
91-
Enables filtering of data records in the data view and displays the applied filter chips.
91+
Enables filtering of data records in the data view and displays the applied filter labels.
9292

9393
### Toolbar usage
9494
The data view toolbar can include a set of filters by passing a React node to the `filters` property. You can use predefined components `DataViewFilters`, `DataViewTextFilter` and `DataViewCheckboxFilter` to customize and handle filtering directly in the toolbar. The `DataViewFilters` is a wrapper allowing conditional filtering using multiple attributes. If you need just a single filter, you can use `DataViewTextFilter`, `DataViewCheckboxFilter` or a different filter component alone. Props of these filter components are listed at the bottom of this page.

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import {
1414
import { FilterIcon } from '@patternfly/react-icons';
1515
import { DataViewFilterOption } from '../DataViewFilters';
1616

17-
const isToolbarChip = (chip: string | ToolbarLabel): chip is ToolbarLabel =>
18-
typeof chip === 'object' && 'key' in chip;
17+
const isToolbarLabel = (label: string | ToolbarLabel): label is ToolbarLabel =>
18+
typeof label === 'object' && 'key' in label;
1919

2020
export const isDataViewFilterOption = (obj: unknown): obj is DataViewFilterOption =>
2121
!!obj &&
@@ -117,8 +117,8 @@ export const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps> = ({
117117
const activeOption = normalizeOptions.find(option => option.value === item);
118118
return ({ key: activeOption?.value as string, node: activeOption?.label })
119119
})}
120-
deleteLabel={(_, chip) =>
121-
onChange?.(undefined, value.filter(item => item !== (isToolbarChip(chip) ? chip.key : chip)))
120+
deleteLabel={(_, label) =>
121+
onChange?.(undefined, value.filter(item => item !== (isToolbarLabel(label) ? label.key : label)))
122122
}
123123
categoryName={title}
124124
showToolbarItem={showToolbarItem}

‎packages/module/src/DataViewToolbar/DataViewToolbar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProp
1515
actions?: React.ReactNode;
1616
/** React node to display filters */
1717
filters?: React.ReactNode;
18-
/** React node to display custom filter chips */
19-
customChipGroupContent?: React.ReactNode;
18+
/** React node to display custom filter labels */
19+
customLabelGroupContent?: React.ReactNode;
2020
}
2121

22-
export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, filters, customChipGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => {
22+
export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => {
2323
const defaultClearFilters = useRef(
2424
<ToolbarItem>
2525
<Button ouiaId={`${ouiaId}-clear-all-filters`} variant="link" onClick={clearAllFilters} isInline>
@@ -28,7 +28,7 @@ export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, oui
2828
</ToolbarItem>
2929
);
3030
return (
31-
<Toolbar ouiaId={ouiaId} className={className} customLabelGroupContent={customChipGroupContent ?? defaultClearFilters.current} {...props}>
31+
<Toolbar ouiaId={ouiaId} className={className} customLabelGroupContent={customLabelGroupContent ?? defaultClearFilters.current} {...props}>
3232
<ToolbarContent>
3333
{bulkSelect && (
3434
<ToolbarItem data-ouia-component-id={`${ouiaId}-bulk-select`}>

0 commit comments

Comments
 (0)