Skip to content

Commit e568986

Browse files
fhlavacfhlavac
committed
feat(actions): Test ResponsiveActions component
1 parent 782d07f commit e568986

File tree

5 files changed

+336
-42
lines changed

5 files changed

+336
-42
lines changed

‎cypress/component/ResponsiveActions.cy.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from 'react';
2+
import { ResponsiveActions } from '@patternfly/react-component-groups/dist/dynamic/ResponsiveActions';
3+
import { ResponsiveAction } from '@patternfly/react-component-groups/dist/dynamic/ResponsiveAction';
4+
5+
describe('ResponsiveActions', () => {
6+
beforeEach(() => {
7+
cy.viewport(1280, 2000);
8+
})
9+
10+
it('renders persistent, pinned, and overflow actions', () => {
11+
cy.mount(
12+
<ResponsiveActions breakpoint="lg">
13+
<ResponsiveAction isPersistent>
14+
Persistent action
15+
</ResponsiveAction>
16+
<ResponsiveAction isPinned variant='secondary'>
17+
Pinned action
18+
</ResponsiveAction>
19+
<ResponsiveAction>
20+
Overflow action
21+
</ResponsiveAction>
22+
</ResponsiveActions>
23+
);
24+
25+
cy.get('[data-ouia-component-id="ResponsiveActions-action-0"]').should('be.visible');
26+
cy.get('[data-ouia-component-id="ResponsiveActions-action-1"]').should('be.visible');
27+
cy.get('[data-ouia-component-id="ResponsiveActions-action-2"]').should('not.exist');
28+
29+
cy.get('[data-ouia-component-id="ResponsiveActions-menu-dropdown-toggle"]').click();
30+
cy.get('[data-ouia-component-id="ResponsiveActions-action-2"]').should('be.visible');
31+
});
32+
33+
it('handles click events on actions', () => {
34+
const onClickSpy = cy.spy().as('actionClickSpy');
35+
36+
cy.mount(
37+
<ResponsiveActions breakpoint="lg">
38+
<ResponsiveAction isPersistent onClick={onClickSpy}>
39+
Persistent action
40+
</ResponsiveAction>
41+
<ResponsiveAction isPinned variant='secondary' onClick={onClickSpy}>
42+
Pinned action
43+
</ResponsiveAction>
44+
<ResponsiveAction onClick={onClickSpy}>
45+
Overflow action
46+
</ResponsiveAction>
47+
</ResponsiveActions>
48+
);
49+
50+
cy.get('[data-ouia-component-id="ResponsiveActions-action-0"]').click();
51+
cy.get('@actionClickSpy').should('have.been.calledOnce');
52+
53+
cy.get('[data-ouia-component-id="ResponsiveActions-action-1"]').click();
54+
cy.get('@actionClickSpy').should('have.been.calledTwice');
55+
56+
cy.get('[data-ouia-component-id="ResponsiveActions-menu-dropdown-toggle"]').click();
57+
cy.get('[data-ouia-component-id="ResponsiveActions-action-2"]').click();
58+
cy.get('@actionClickSpy').should('have.been.calledThrice');
59+
});
60+
61+
it('renders no persistent or pinned actions without flags', () => {
62+
cy.mount(
63+
<ResponsiveActions breakpoint="lg">
64+
<ResponsiveAction>
65+
Overflow action
66+
</ResponsiveAction>
67+
</ResponsiveActions>
68+
);
69+
70+
cy.get('[data-ouia-component-id="menu-persistent-content"]').should('not.exist');
71+
cy.get('[data-ouia-component-id="menu-pinned-content"]').should('not.exist');
72+
73+
cy.get('[data-ouia-component-id="ResponsiveActions-menu-dropdown-toggle"]').click();
74+
cy.contains('Overflow action').should('be.visible');
75+
});
76+
});

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import ResponsiveActions from './ResponsiveActions';
4+
import ResponsiveAction from '../ResponsiveAction';
5+
6+
describe('ResponsiveActions component', () => {
7+
describe('should render correctly', () => {
8+
9+
test('ResponsiveActions', () => {
10+
const { container } = render(
11+
<ResponsiveActions breakpoint="lg">
12+
<ResponsiveAction isPersistent>Persistent action</ResponsiveAction>
13+
<ResponsiveAction isPinned variant='secondary'>Pinned action</ResponsiveAction>
14+
<ResponsiveAction>Overflow action</ResponsiveAction>
15+
</ResponsiveActions>);
16+
expect(container).toMatchSnapshot();
17+
});
18+
});
19+
});

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`ResponsiveActions component should render correctly ResponsiveActions 1`] = `
4+
<div>
5+
<div
6+
class="pf-v5-c-overflow-menu"
7+
data-ouia-component-id="ResponsiveActions-menu"
8+
>
9+
<div
10+
class="pf-v5-c-overflow-menu__content"
11+
>
12+
<div
13+
class="pf-v5-c-overflow-menu__group pf-m-button-group"
14+
data-ouia-component-id="ResponsiveActions-menu-persistent-group"
15+
>
16+
<div
17+
class="pf-v5-c-overflow-menu__item"
18+
>
19+
20+
<button
21+
aria-disabled="false"
22+
class="pf-v5-c-button pf-m-primary"
23+
data-ouia-component-id="ResponsiveActions-action-0"
24+
data-ouia-component-type="PF5/Button"
25+
data-ouia-safe="true"
26+
type="button"
27+
>
28+
Persistent action
29+
</button>
30+
31+
</div>
32+
</div>
33+
</div>
34+
<div
35+
class="pf-v5-c-overflow-menu__content"
36+
>
37+
<div
38+
class="pf-v5-c-overflow-menu__group pf-m-button-group"
39+
data-ouia-component-id="ResponsiveActions-menu-pinned-group"
40+
>
41+
<div
42+
class="pf-v5-c-overflow-menu__item"
43+
>
44+
45+
<button
46+
aria-disabled="false"
47+
class="pf-v5-c-button pf-m-secondary"
48+
data-ouia-component-id="ResponsiveActions-action-1"
49+
data-ouia-component-type="PF5/Button"
50+
data-ouia-safe="true"
51+
type="button"
52+
>
53+
Pinned action
54+
</button>
55+
56+
</div>
57+
</div>
58+
</div>
59+
<div
60+
class="pf-v5-c-overflow-menu__control"
61+
data-ouia-component-id="ResponsiveActions-menu-control"
62+
>
63+
64+
<button
65+
aria-expanded="false"
66+
aria-label="Actions overflow menu"
67+
class="pf-v5-c-menu-toggle pf-m-plain"
68+
data-ouia-component-id="ResponsiveActions-menu-dropdown-toggle"
69+
type="button"
70+
>
71+
<svg
72+
aria-hidden="true"
73+
class="pf-v5-svg"
74+
fill="currentColor"
75+
height="1em"
76+
role="img"
77+
viewBox="0 0 192 512"
78+
width="1em"
79+
>
80+
<path
81+
d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
82+
/>
83+
</svg>
84+
</button>
85+
86+
</div>
87+
</div>
88+
</div>
89+
`;

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

Lines changed: 48 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -15,27 +15,29 @@ exports[`SkeletonTable component should render correctly 1`] = `
1515
>
1616
<thead
1717
class="pf-v5-c-table__thead"
18-
data-ouia-component-id="SkeletonTableHeader-thead"
18+
data-ouia-component-id="SkeletonTable-thead"
1919
>
2020
<tr
2121
class="pf-v5-c-table__tr"
22-
data-ouia-component-id="SkeletonTableHeader-tr-head"
22+
data-ouia-component-id="SkeletonTable-tr-head"
2323
data-ouia-component-type="PF5/TableRow"
2424
data-ouia-safe="true"
2525
>
2626
<th
2727
class="pf-v5-c-table__th"
28-
data-ouia-component-id="SkeletonTableHeader-th-0"
28+
data-ouia-component-id="SkeletonTable-th-0"
2929
scope="col"
3030
tabindex="-1"
3131
>
32-
<div
33-
class="pf-v5-c-skeleton"
34-
>
35-
<span
36-
class="pf-v5-screen-reader"
37-
/>
38-
</div>
32+
First
33+
</th>
34+
<th
35+
class="pf-v5-c-table__th"
36+
data-ouia-component-id="SkeletonTable-th-1"
37+
scope="col"
38+
tabindex="-1"
39+
>
40+
Second
3941
</th>
4042
</tr>
4143
</thead>
@@ -224,27 +226,29 @@ exports[`SkeletonTable component should render correctly 1`] = `
224226
>
225227
<thead
226228
class="pf-v5-c-table__thead"
227-
data-ouia-component-id="SkeletonTableHeader-thead"
229+
data-ouia-component-id="SkeletonTable-thead"
228230
>
229231
<tr
230232
class="pf-v5-c-table__tr"
231-
data-ouia-component-id="SkeletonTableHeader-tr-head"
233+
data-ouia-component-id="SkeletonTable-tr-head"
232234
data-ouia-component-type="PF5/TableRow"
233235
data-ouia-safe="true"
234236
>
235237
<th
236238
class="pf-v5-c-table__th"
237-
data-ouia-component-id="SkeletonTableHeader-th-0"
239+
data-ouia-component-id="SkeletonTable-th-0"
238240
scope="col"
239241
tabindex="-1"
240242
>
241-
<div
242-
class="pf-v5-c-skeleton"
243-
>
244-
<span
245-
class="pf-v5-screen-reader"
246-
/>
247-
</div>
243+
First
244+
</th>
245+
<th
246+
class="pf-v5-c-table__th"
247+
data-ouia-component-id="SkeletonTable-th-1"
248+
scope="col"
249+
tabindex="-1"
250+
>
251+
Second
248252
</th>
249253
</tr>
250254
</thead>
@@ -491,27 +495,29 @@ exports[`SkeletonTable component should render correctly with rows 1`] = `
491495
>
492496
<thead
493497
class="pf-v5-c-table__thead"
494-
data-ouia-component-id="SkeletonTableHeader-thead"
498+
data-ouia-component-id="SkeletonTable-thead"
495499
>
496500
<tr
497501
class="pf-v5-c-table__tr"
498-
data-ouia-component-id="SkeletonTableHeader-tr-head"
502+
data-ouia-component-id="SkeletonTable-tr-head"
499503
data-ouia-component-type="PF5/TableRow"
500504
data-ouia-safe="true"
501505
>
502506
<th
503507
class="pf-v5-c-table__th"
504-
data-ouia-component-id="SkeletonTableHeader-th-0"
508+
data-ouia-component-id="SkeletonTable-th-0"
505509
scope="col"
506510
tabindex="-1"
507511
>
508-
<div
509-
class="pf-v5-c-skeleton"
510-
>
511-
<span
512-
class="pf-v5-screen-reader"
513-
/>
514-
</div>
512+
First
513+
</th>
514+
<th
515+
class="pf-v5-c-table__th"
516+
data-ouia-component-id="SkeletonTable-th-1"
517+
scope="col"
518+
tabindex="-1"
519+
>
520+
Second
515521
</th>
516522
</tr>
517523
</thead>
@@ -701,27 +707,29 @@ exports[`SkeletonTable component should render correctly with rows 1`] = `
701707
>
702708
<thead
703709
class="pf-v5-c-table__thead"
704-
data-ouia-component-id="SkeletonTableHeader-thead"
710+
data-ouia-component-id="SkeletonTable-thead"
705711
>
706712
<tr
707713
class="pf-v5-c-table__tr"
708-
data-ouia-component-id="SkeletonTableHeader-tr-head"
714+
data-ouia-component-id="SkeletonTable-tr-head"
709715
data-ouia-component-type="PF5/TableRow"
710716
data-ouia-safe="true"
711717
>
712718
<th
713719
class="pf-v5-c-table__th"
714-
data-ouia-component-id="SkeletonTableHeader-th-0"
720+
data-ouia-component-id="SkeletonTable-th-0"
715721
scope="col"
716722
tabindex="-1"
717723
>
718-
<div
719-
class="pf-v5-c-skeleton"
720-
>
721-
<span
722-
class="pf-v5-screen-reader"
723-
/>
724-
</div>
724+
First
725+
</th>
726+
<th
727+
class="pf-v5-c-table__th"
728+
data-ouia-component-id="SkeletonTable-th-1"
729+
scope="col"
730+
tabindex="-1"
731+
>
732+
Second
725733
</th>
726734
</tr>
727735
</thead>

0 commit comments

Comments
 (0)