Skip to content

Commit 896294f

Browse files
fhlavacfhlavac
committed
Enhance tests
1 parent 4269ced commit 896294f

File tree

8 files changed

+832
-6
lines changed

8 files changed

+832
-6
lines changed

‎cypress/component/DataView.cy.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react';
22
import { Pagination } from '@patternfly/react-core';
33
import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
4+
import { BulkSelect } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
45
import DataView from '../../packages/module/dist/dynamic/DataView';
5-
import DataViewToolbar from '../../packages/module/dist/esm/DataViewToolbar';
6+
import DataViewToolbar from '../../packages/module/dist/dynamic/DataViewToolbar';
67

78
interface Repository {
89
name: string;
@@ -45,7 +46,21 @@ describe('DataView', () => {
4546

4647
cy.mount(
4748
<DataView>
48-
<DataViewToolbar pagination={<Pagination {...PAGINATION} ouiaId="DataViewToolbar-pagination" />} />
49+
<DataViewToolbar
50+
ouiaId="DataViewToolbar"
51+
pagination={<Pagination {...PAGINATION} />}
52+
bulkSelect={
53+
<BulkSelect
54+
canSelectAll
55+
pageCount={5}
56+
totalCount={10}
57+
selectedCount={2}
58+
pageSelected={false}
59+
pagePartiallySelected={true}
60+
onSelect={() => null}
61+
/>
62+
}
63+
/>
4964
<Table aria-label="Repositories table" ouiaId={ouiaId}>
5065
<Thead data-ouia-component-id={`${ouiaId}-thead`}>
5166
<Tr ouiaId={`${ouiaId}-tr-head`}>
@@ -64,10 +79,11 @@ describe('DataView', () => {
6479
))}
6580
</Tbody>
6681
</Table>
67-
<DataViewToolbar pagination={<Pagination isCompact {...PAGINATION} ouiaId="DataViewFooter-pagination" />} ouiaId="DataViewFooter" />
82+
<DataViewToolbar ouiaId="DataViewFooter" pagination={<Pagination isCompact {...PAGINATION} />} />
6883
</DataView>
6984
);
7085
cy.get('[data-ouia-component-id="DataViewToolbar-pagination"]').should('exist');
86+
cy.get('[data-ouia-component-id="DataViewToolbar-bulk-select"]').should('exist');
7187

7288
cy.get('[data-ouia-component-id="data-th-0"]').contains('Repositories');
7389
cy.get('[data-ouia-component-id="data-th-1"]').contains('Branches');

‎cypress/component/DataViewToolbar.cy.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
11
import React from 'react';
22
import { Pagination } from '@patternfly/react-core';
3+
import { BulkSelect } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
34
import DataViewToolbar from '../../packages/module/dist/dynamic/DataViewToolbar';
45

56
describe('DataViewToolbar', () => {
67
it('renders the data view toolbar', () => {
7-
cy.mount(<DataViewToolbar pagination={<Pagination page={1} perPage={10} ouiaId="DataViewToolbar-pagination" />} />)
8+
cy.mount(<DataViewToolbar pagination={<Pagination page={1} perPage={10} />}
9+
bulkSelect={
10+
<BulkSelect
11+
canSelectAll
12+
pageCount={5}
13+
totalCount={10}
14+
selectedCount={2}
15+
pageSelected={false}
16+
pagePartiallySelected={true}
17+
onSelect={() => null}
18+
/>
19+
}
20+
/>)
821
cy.get('[data-ouia-component-id="DataViewToolbar"]').should('exist');
922
cy.get('[data-ouia-component-id="DataViewToolbar-pagination"]').should('exist');
23+
cy.get('[data-ouia-component-id="DataViewToolbar-bulk-select"]').should('exist');
1024
});
1125
});

‎cypress/e2e/DataView.spec.cy.ts‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ describe('Test the Data view docs page', () => {
33
it('displays a layout with a table and paginates', () => {
44
const ouiaId = 'LayoutExample';
55

6-
cy.visit('http://localhost:8006/extensions/data-view/data-view-layout');
6+
cy.visit('http://localhost:8006/extensions/data-view/layout');
77

88
cy.get(`[data-ouia-component-id="${ouiaId}Header-pagination"]`).should('exist');
9+
cy.get(`[data-ouia-component-id="${ouiaId}Header-bulk-select"]`).should('exist');
910

1011
cy.get(`[data-ouia-component-id="${ouiaId}Footer-pagination"]`).should('exist');
12+
cy.get(`[data-ouia-component-id="${ouiaId}Footer-bulk-select"]`).should('not.exist');
1113

1214
cy.get(`[data-ouia-component-id="${ouiaId}-th-0"]`).contains('Repositories');
1315
cy.get(`[data-ouia-component-id="${ouiaId}-th-4"]`).contains('Last commit');
@@ -23,5 +25,35 @@ describe('Test the Data view docs page', () => {
2325
// move to previous page
2426
cy.get(`[data-action="previous"`).eq(1).click({ force: true });
2527
cy.get(`[data-ouia-component-id="${ouiaId}-td-0-4"]`).contains('five');
28+
29+
// test bulk select
30+
cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('not.be.checked')});
31+
32+
// page checkbox select
33+
cy.get(`[data-ouia-component-id="BulkSelect-checkbox"`).first().click();
34+
cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('be.checked')});
35+
cy.contains('5 selected').should('exist');
36+
37+
// select none
38+
cy.get(`[data-ouia-component-id="BulkSelect-toggle"`).first().click({ force: true });
39+
cy.get(`[data-ouia-component-id="BulkSelect-select-none"`).first().click();
40+
cy.contains('5 selected').should('not.exist');
41+
42+
// select all
43+
cy.get(`[data-ouia-component-id="BulkSelect-toggle"`).first().click({ force: true });
44+
cy.get(`[data-ouia-component-id="BulkSelect-select-all"`).first().click();
45+
cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('be.checked')});
46+
cy.contains('6 selected').should('exist');
47+
48+
// page checkbox deselect
49+
cy.get(`[data-ouia-component-id="BulkSelect-checkbox"`).first().click();
50+
cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('not.be.checked')});
51+
cy.contains('1 selected').should('exist');
52+
53+
// select page
54+
cy.get(`[data-ouia-component-id="BulkSelect-toggle"`).first().click({ force: true });
55+
cy.get(`[data-ouia-component-id="BulkSelect-select-page"`).first().click();
56+
cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('be.checked')});
57+
cy.contains('6 selected').should('exist');
2658
})
27-
})
59+
});

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import DataView from './DataView';
4+
5+
const layoutItemStyling = {
6+
width: '100%',
7+
height: '5rem',
8+
padding: 'var(--pf-t--global--spacer--md)',
9+
border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)'
10+
};
11+
12+
describe('DataView component', () => {
13+
test('should render correctly', () => {
14+
expect(render(
15+
<DataView>
16+
<div style={layoutItemStyling}>Header</div>
17+
<div style={layoutItemStyling}>Data representation</div>
18+
<div style={layoutItemStyling}>Footer</div>
19+
</DataView>)).toMatchSnapshot();
20+
});
21+
});

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

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`DataView component should render correctly 1`] = `
4+
{
5+
"asFragment": [Function],
6+
"baseElement": <body>
7+
<div>
8+
<div
9+
class="pf-v6-l-stack"
10+
data-ouia-component-id="DataView-stack}"
11+
>
12+
<div
13+
class="pf-v6-l-stack__item"
14+
data-ouia-component-id="DataView-stack-item-0"
15+
>
16+
<div
17+
style="width: 100%; height: 5rem;"
18+
>
19+
Header
20+
</div>
21+
</div>
22+
<div
23+
class="pf-v6-l-stack__item"
24+
data-ouia-component-id="DataView-stack-item-1"
25+
>
26+
<div
27+
style="width: 100%; height: 5rem;"
28+
>
29+
Data representation
30+
</div>
31+
</div>
32+
<div
33+
class="pf-v6-l-stack__item"
34+
data-ouia-component-id="DataView-stack-item-2"
35+
>
36+
<div
37+
style="width: 100%; height: 5rem;"
38+
>
39+
Footer
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
</body>,
45+
"container": <div>
46+
<div
47+
class="pf-v6-l-stack"
48+
data-ouia-component-id="DataView-stack}"
49+
>
50+
<div
51+
class="pf-v6-l-stack__item"
52+
data-ouia-component-id="DataView-stack-item-0"
53+
>
54+
<div
55+
style="width: 100%; height: 5rem;"
56+
>
57+
Header
58+
</div>
59+
</div>
60+
<div
61+
class="pf-v6-l-stack__item"
62+
data-ouia-component-id="DataView-stack-item-1"
63+
>
64+
<div
65+
style="width: 100%; height: 5rem;"
66+
>
67+
Data representation
68+
</div>
69+
</div>
70+
<div
71+
class="pf-v6-l-stack__item"
72+
data-ouia-component-id="DataView-stack-item-2"
73+
>
74+
<div
75+
style="width: 100%; height: 5rem;"
76+
>
77+
Footer
78+
</div>
79+
</div>
80+
</div>
81+
</div>,
82+
"debug": [Function],
83+
"findAllByAltText": [Function],
84+
"findAllByDisplayValue": [Function],
85+
"findAllByLabelText": [Function],
86+
"findAllByPlaceholderText": [Function],
87+
"findAllByRole": [Function],
88+
"findAllByTestId": [Function],
89+
"findAllByText": [Function],
90+
"findAllByTitle": [Function],
91+
"findByAltText": [Function],
92+
"findByDisplayValue": [Function],
93+
"findByLabelText": [Function],
94+
"findByPlaceholderText": [Function],
95+
"findByRole": [Function],
96+
"findByTestId": [Function],
97+
"findByText": [Function],
98+
"findByTitle": [Function],
99+
"getAllByAltText": [Function],
100+
"getAllByDisplayValue": [Function],
101+
"getAllByLabelText": [Function],
102+
"getAllByPlaceholderText": [Function],
103+
"getAllByRole": [Function],
104+
"getAllByTestId": [Function],
105+
"getAllByText": [Function],
106+
"getAllByTitle": [Function],
107+
"getByAltText": [Function],
108+
"getByDisplayValue": [Function],
109+
"getByLabelText": [Function],
110+
"getByPlaceholderText": [Function],
111+
"getByRole": [Function],
112+
"getByTestId": [Function],
113+
"getByText": [Function],
114+
"getByTitle": [Function],
115+
"queryAllByAltText": [Function],
116+
"queryAllByDisplayValue": [Function],
117+
"queryAllByLabelText": [Function],
118+
"queryAllByPlaceholderText": [Function],
119+
"queryAllByRole": [Function],
120+
"queryAllByTestId": [Function],
121+
"queryAllByText": [Function],
122+
"queryAllByTitle": [Function],
123+
"queryByAltText": [Function],
124+
"queryByDisplayValue": [Function],
125+
"queryByLabelText": [Function],
126+
"queryByPlaceholderText": [Function],
127+
"queryByRole": [Function],
128+
"queryByTestId": [Function],
129+
"queryByText": [Function],
130+
"queryByTitle": [Function],
131+
"rerender": [Function],
132+
"unmount": [Function],
133+
}
134+
`;

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import DataViewToolbar from './DataViewToolbar';
4+
import { Pagination } from '@patternfly/react-core';
5+
6+
describe('DataViewToolbar component', () => {
7+
test('should render correctly', () => {
8+
expect(render(
9+
<DataViewToolbar pagination={<Pagination page={1} perPage={10} />} />)).toMatchSnapshot();
10+
});
11+
});

0 commit comments

Comments
 (0)