|
1 | 1 | import React from 'react'; |
2 | | -import { RowSelectVariant, Th } from '@patternfly/react-table'; |
3 | | -import SkeletonTable from '../../packages/module/dist/dynamic/SkeletonTable'; |
| 2 | +import { RowSelectVariant } from '@patternfly/react-table'; |
| 3 | +import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable'; |
4 | 4 |
|
5 | 5 | describe('SkeletonTable', () => { |
6 | 6 | beforeEach(() => { |
7 | 7 | cy.viewport(1600, 800); |
8 | 8 | }); |
9 | 9 |
|
10 | 10 | it('renders SkeletonTable', () => { |
11 | | - const SkeletonTableExample = <SkeletonTable rows={10} columns={[ 'first', 'second' ]} />; |
| 11 | + const SkeletonTableExample = <SkeletonTable rowsCount={10} columns={[ 'First', 'Second' ]} />; |
12 | 12 | cy.mount(SkeletonTableExample); |
13 | 13 | cy.get('table').should('exist'); |
14 | | - cy.get('table thead tr').should('have.text', 'firstsecond'); |
| 14 | + cy.get('table thead tr th').eq(0).should('have.text', 'First'); |
| 15 | + cy.get('table thead tr th').eq(1).should('have.text', 'Second'); |
15 | 16 | }); |
16 | 17 |
|
17 | 18 | it ('can be used without passing columns', () => { |
18 | | - const SkeletonTableExample = <SkeletonTable rows={10} numberOfColumns={2} />; |
| 19 | + const SkeletonTableExample = <SkeletonTable rowsCount={10} columnsCount={2} />; |
19 | 20 | cy.mount(SkeletonTableExample); |
20 | 21 | cy.get('table').should('exist'); |
21 | 22 | cy.get('table thead tr').should('have.text', ''); |
22 | 23 | }); |
23 | 24 |
|
24 | 25 | it('contains checkboxes when passed isSelectable', () => { |
25 | | - const SkeletonTableExample = <SkeletonTable rows={10} columns={[ 'first', 'second' ]} isSelectable />; |
| 26 | + const SkeletonTableExample = <SkeletonTable rowsCount={10} columns={[ 'First', 'Second' ]} isSelectable />; |
26 | 27 | cy.mount(SkeletonTableExample); |
27 | 28 | cy.get('table').should('exist'); |
28 | | - cy.get('table thead tr').should('have.text', 'firstsecond'); |
| 29 | + cy.get('table thead tr th').eq(0).should('have.text', 'Data selection table header cell'); |
| 30 | + cy.get('table thead tr th').eq(1).should('have.text', 'First'); |
| 31 | + cy.get('table thead tr th').eq(2).should('have.text', 'Second'); |
29 | 32 | cy.get('input[type="checkbox"]').should('have.length', 10); |
30 | 33 | }); |
31 | 34 |
|
32 | 35 | it('is expandable when passed isExpandable', () => { |
33 | | - const SkeletonTableExample = <SkeletonTable rows={10} columns={[ 'first', 'second' ]} isExpandable />; |
| 36 | + const SkeletonTableExample = <SkeletonTable rowsCount={10} columns={[ 'First', 'Second' ]} isExpandable />; |
34 | 37 | cy.mount(SkeletonTableExample); |
35 | 38 | cy.get('table').should('exist'); |
36 | | - cy.get('table thead tr').should('have.text', 'firstsecond'); |
| 39 | + cy.get('table thead tr th').eq(0).should('have.text', 'Data expansion table header cell'); |
| 40 | + cy.get('table thead tr th').eq(1).should('have.text', 'First'); |
| 41 | + cy.get('table thead tr th').eq(2).should('have.text', 'Second'); |
37 | 42 | cy.get('.pf-v6-c-table__toggle-icon').should('have.length', 10); |
38 | 43 | }); |
39 | 44 |
|
40 | 45 | it('can be passed a selectVariant to render radio buttons', () => { |
41 | | - const SkeletonTableExample = <SkeletonTable rows={10} columns={[ 'first', 'second' ]} isSelectable selectVariant={RowSelectVariant.radio} />; |
| 46 | + const SkeletonTableExample = <SkeletonTable rowsCount={10} columns={[ 'First', 'Second' ]} isSelectable selectVariant={RowSelectVariant.radio} />; |
42 | 47 | cy.mount(SkeletonTableExample); |
43 | 48 | cy.get('table').should('exist'); |
44 | | - cy.get('table thead tr').should('have.text', 'firstsecond'); |
| 49 | + cy.get('table thead tr th').eq(0).should('have.text', 'Data selection table header cell'); |
| 50 | + cy.get('table thead tr th').eq(1).should('have.text', 'First'); |
| 51 | + cy.get('table thead tr th').eq(2).should('have.text', 'Second'); |
45 | 52 | cy.get('input[type="radio"]').should('have.length', 10); |
46 | 53 | }); |
47 | 54 |
|
48 | | - it('can be passed custom columns', () => { |
| 55 | + it('can be passed custom columns props', () => { |
49 | 56 | const SkeletonTableExample = ( |
50 | 57 | <SkeletonTable |
51 | 58 | rows={10} |
52 | | - columns={[ |
53 | | - <Th key="1" sort={{ columnIndex: 0, sortBy: { index: 0, direction: 'asc' } }}> |
54 | | - first |
55 | | - </Th>, |
56 | | - <Th key="2">second</Th>, |
57 | | - <Th key="3">third</Th> |
| 59 | + columns={[ |
| 60 | + { cell: 'first', props: { sort: { columnIndex: 0, sortBy: { index: 0, direction: 'asc' } } } }, |
| 61 | + { cell: 'second' }, |
| 62 | + { cell: 'third' } |
58 | 63 | ]} |
59 | 64 | /> |
60 | 65 | ); |
61 | 66 | cy.mount(SkeletonTableExample); |
62 | 67 | cy.get('table').should('exist'); |
63 | | - cy.get('table thead tr').should('have.text', 'firstsecondthird'); |
| 68 | + cy.get('table thead tr th').eq(0).should('have.text', 'first'); |
| 69 | + cy.get('table thead tr th').eq(1).should('have.text', 'second'); |
| 70 | + cy.get('table thead tr th').eq(2).should('have.text', 'third'); |
64 | 71 | cy.get('.pf-v6-c-table__sort-indicator').eq(0).find('path').should( |
65 | 72 | 'have.attr', |
66 | 73 | 'd', |
|
![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4&size=40){kind=avatar}
0 commit comments