From 79bdb9ed456632cfdf575ae004884fdc5cf5eea4 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 14 Sep 2023 10:44:07 -0400 Subject: [PATCH 1/8] add spread prop test, update test --- .../BackgroundImage/__tests__/BackgroundImage.test.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx b/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx index ecd1cb47a6a..f0ff01e361a 100644 --- a/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx +++ b/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx @@ -14,6 +14,11 @@ test('spreads additional props', () => { expect(screen.getByTestId('test-id')).toHaveProperty('lang'); }); +test('spreads additional props', () => { + render(); + expect(screen.getByTestId('test-id')).toHaveProperty('lang'); +}); + test('has src URL applied to style', () => { render(); expect(screen.getByTestId('test-id')).toHaveAttribute('style', `${cssBackgroundImage.name}: url(/image/url.png);`); From 4c349e2fba808fff0ad3d01845894ee1949d73e0 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Tue, 26 Sep 2023 09:19:16 -0400 Subject: [PATCH 2/8] chore(DataList): update tests --- .../DataList/__tests__/DataList.test.tsx | 604 ++++++++++-------- .../__snapshots__/DataList.test.tsx.snap | 256 +------- 2 files changed, 335 insertions(+), 525 deletions(-) diff --git a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx index a7a5bc878c1..24f05b2a641 100644 --- a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx +++ b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx @@ -12,339 +12,385 @@ import { DataListItemCells } from '../DataListItemCells'; import { DataListItemRow } from '../DataListItemRow'; import { DataListContent } from '../DataListContent'; import { Button } from '../../Button'; -import { Dropdown, DropdownList, DropdownItem } from '../../Dropdown'; -import { MenuToggle } from '../../MenuToggle'; + import styles from '@patternfly/react-styles/css/components/DataList/data-list'; -describe('DataList', () => { - test('List default', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); +test('Renders to match snapshot', () => { + const { asFragment } = render(); + expect(screen.getByLabelText('list')).toBeInTheDocument(); + expect(asFragment()).toMatchSnapshot(); +}); - test('List compact', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); +test(`Renders ${styles.modifiers.compact} when isCompact = true`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.compact); +}); - describe('DataList variants', () => { - ['none', 'always', 'sm', 'md', 'lg', 'xl', '2xl'].forEach((oneBreakpoint) => { - test(`Breakpoint - ${oneBreakpoint}`, () => { - const { asFragment } = render( - - ); - expect(asFragment()).toMatchSnapshot(); - }); - }); +const gridBreakpointClasses = { + none: styles.modifiers.gridNone, + always: 'pf-m-grid', + sm: styles.modifiers.gridSm, + md: styles.modifiers.gridMd, + lg: styles.modifiers.gridLg, + xl: styles.modifiers.gridXl, + '2xl': styles.modifiers.grid_2xl +}; + +['none', 'always', 'sm', 'md', 'lg', 'xl', '2xl'].forEach((oneBreakpoint) => { + test(`Has breakpoint - ${oneBreakpoint} when gridBreakpoint is pased`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass(gridBreakpointClasses[oneBreakpoint]); }); +}); - test('List draggable', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); +test(`Has breakpoint - 2xl when gridBreakpoint is pased`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers['grid_2xl']); +}); - test('List', () => { - const { asFragment } = render( - - ); - expect(asFragment()).toMatchSnapshot(); - }); +test('Renders custom class when passed', () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass('data-list-custom'); +}); - test('List renders with a hidden input to improve a11y when selectableRow is passed', () => { - render( - {}}> - - -

Test

- - - - ); +test('List renders with a hidden input to improve a11y when selectableRow is passed', () => { + render( + {}}> + + +

Test

+ + + + ); - const selectableInput = screen.getByRole('radio', { hidden: true }); + const selectableInput = screen.getByRole('radio', { hidden: true }); - expect(selectableInput).toBeInTheDocument(); - }); + expect(selectableInput).toBeInTheDocument(); +}); - test('List does not render with a hidden input to improve a11y when selectableRow is not passed', () => { - render( - - - -

Test

- - - - ); +test('List does not render with a hidden input to improve a11y when selectableRow is not passed', () => { + render( + + + +

Test

+ + + + ); - const selectableInput = screen.queryByRole('radio', { hidden: true }); + const selectableInput = screen.queryByRole('radio', { hidden: true }); - expect(selectableInput).not.toBeInTheDocument(); - }); + expect(selectableInput).not.toBeInTheDocument(); +}); - test('List calls selectableRow.onChange when the selectable input changes', async () => { - const mock = jest.fn(); - const user = userEvent.setup(); +test('List calls selectableRow.onChange when the selectable input changes', async () => { + const mock = jest.fn(); + const user = userEvent.setup(); - render( - - - -

Test

- - - - ); + render( + + + +

Test

+ + + + ); - const selectableInput = screen.getByRole('radio', { hidden: true }); - await user.click(selectableInput); + const selectableInput = screen.getByRole('radio', { hidden: true }); + await user.click(selectableInput); - expect(mock).toHaveBeenCalled(); - }); + expect(mock).toHaveBeenCalled(); +}); - test('List does not call selectableRow.onChange when the selectable input is not changed', () => { - const mock = jest.fn(); +test('List does not call selectableRow.onChange when the selectable input is not changed', () => { + const mock = jest.fn(); - render( - - - -

Test

- - - - ); + render( + + + +

Test

+ + + + ); - expect(mock).not.toHaveBeenCalled(); - }); + expect(mock).not.toHaveBeenCalled(); +}); - test('Item applies selectableInputAriaLabel to the hidden input', () => { - render( - {}}> - - -

Test

- - - - ); +test('Item applies selectableInputAriaLabel to the hidden input', () => { + render( + {}}> + + +

Test

+ + + + ); - const selectableInput = screen.getByRole('radio', { hidden: true }); + const selectableInput = screen.getByRole('radio', { hidden: true }); - expect(selectableInput).toHaveAccessibleName('Data list item label test'); - }); + expect(selectableInput).toHaveAccessibleName('Data list item label test'); +}); - test('Item defaults to labelling its input using its aria-labelledby prop', () => { - render( - {}}> - -

Test cell content

- - - ); +test('Item defaults to labelling its input using its aria-labelledby prop', () => { + render( + {}}> + +

Test cell content

+ + + ); - const selectableInput = screen.getByRole('radio', { hidden: true }); + const selectableInput = screen.getByRole('radio', { hidden: true }); - expect(selectableInput).toHaveAccessibleName('Test cell content'); - }); + expect(selectableInput).toHaveAccessibleName('Test cell content'); +}); - test('Item prioritizes selectableInputAriaLabel over aria-labelledby prop', () => { - render( - {}}> - -

Test cell content

- - - ); +test('Item prioritizes selectableInputAriaLabel over aria-labelledby prop', () => { + render( + {}}> + +

Test cell content

+ + + ); - const selectableInput = screen.getByRole('radio', { hidden: true }); + const selectableInput = screen.getByRole('radio', { hidden: true }); - expect(selectableInput).toHaveAccessibleName('Data list item label test'); - }); + expect(selectableInput).toHaveAccessibleName('Data list item label test'); +}); - test('Item default', () => { - const { asFragment } = render( - - test - - ); - expect(asFragment()).toMatchSnapshot(); - }); +test('Item renders to match snapshot', () => { + const { asFragment } = render( + + test + + ); + expect(asFragment()).toMatchSnapshot(); +}); + +test(`Item has ${styles.modifiers.expanded} when isExpanded is passed`, () => { + render( + + test + + ); + expect(screen.getByRole('listitem')).toHaveClass(styles.modifiers.expanded); +}); + +test('Item renders with custom class name', () => { + render( + + test + + ); + expect(screen.getByRole('listitem')).toHaveClass('data-list-item-custom'); +}); + +test('Item row renders to match snapshot', () => { + const { asFragment } = render(test); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Cell renders to match snapshot', () => { + const { asFragment } = render(Secondary); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Cells renders to match snapshot', () => { + const { asFragment } = render( + + Primary Id + , + + Primary Id 2 + + ]} + /> + ); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Cell has width modifier when width is passed', () => { + [ + { width: 1, class: '' }, + { width: 2, class: 'pf-m-flex-2' }, + { width: 3, class: 'pf-m-flex-3' }, + { width: 4, class: 'pf-m-flex-4' }, + { width: 5, class: 'pf-m-flex-5' } + ].forEach((testCase, index) => { + const testId = `cell-test-id-${index}`; - test('Item expanded', () => { render( - - test - + + Primary Id + ); - expect(screen.getByRole('listitem')).toHaveClass(`${styles.dataListItem} ${styles.modifiers.expanded}`); - }); - test('Item', () => { - const { asFragment } = render( - - test - - ); - expect(asFragment()).toMatchSnapshot(); - }); + const dataListCell = screen.getByTestId(testId); - test('item row default', () => { - const { asFragment } = render(test); - expect(asFragment()).toMatchSnapshot(); + testCase.class === '' + ? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell') + : expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`); }); +}); - test('Cell default', () => { - const { asFragment } = render(Secondary); - expect(asFragment()).toMatchSnapshot(); - }); +test('Cell has text wrap modifiers when wrapModifier is passed', () => { + [ + { wrapModifier: null as any, class: '' }, + { wrapModifier: 'breakWord', class: 'pf-m-break-word' }, + { wrapModifier: 'nowrap', class: 'pf-m-nowrap' }, + { wrapModifier: 'truncate', class: 'pf-m-truncate' } + ].forEach((testCase, index) => { + const testId = `cell-test-id-${index}`; - test('Cells', () => { - const { asFragment } = render( - - Primary Id - , - - Primary Id 2 - - ]} - /> + render( + + Primary Id + ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('Cell with width modifier', () => { - [ - { width: 1, class: '' }, - { width: 2, class: 'pf-m-flex-2' }, - { width: 3, class: 'pf-m-flex-3' }, - { width: 4, class: 'pf-m-flex-4' }, - { width: 5, class: 'pf-m-flex-5' } - ].forEach((testCase, index) => { - const testId = `cell-test-id-${index}`; - - render( - - Primary Id - - ); - const dataListCell = screen.getByTestId(testId); + const dataListCell = screen.getByTestId(testId); - testCase.class === '' - ? expect(dataListCell).toHaveClass(styles.dataListCell) - : expect(dataListCell).toHaveClass(`${styles.dataListCell} ${testCase.class}`); - }); + testCase.class === '' + ? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell') + : expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`); }); +}); - test('Cell with text modifiers', () => { - [ - { wrapModifier: null as any, class: '' }, - { wrapModifier: 'breakWord', class: 'pf-m-break-word' }, - { wrapModifier: 'nowrap', class: 'pf-m-nowrap' }, - { wrapModifier: 'truncate', class: 'pf-m-truncate' } - ].forEach((testCase, index) => { - const testId = `cell-test-id-${index}`; - - render( - - Primary Id - - ); +test(`Cell has custom class when className is passed`, () => { + render( + + Primary Id + + ); + expect(screen.getByTestId('test')).toHaveClass('test-class'); +}); - const dataListCell = screen.getByTestId(testId); +test(`Cell has ${styles.modifiers.alignRight} when alignRight is passed`, () => { + render( + + Primary Id + + ); + expect(screen.getByTestId('test')).toHaveClass(styles.modifiers.alignRight); +}); - testCase.class === '' - ? expect(dataListCell).toHaveClass(styles.dataListCell) - : expect(dataListCell).toHaveClass(`${styles.dataListCell} ${testCase.class}`); - }); - }); +test(`Cell has ${styles.modifiers.icon} when isIcon is passed`, () => { + render( + + Primary Id + + ); + expect(screen.getByTestId('test')).toHaveClass(styles.modifiers.icon); +}); - test('Toggle default with aria label', () => { - render(); +test(`Cell has ${styles.modifiers.noFill} when isFilled = false`, () => { + render( + + Primary Id + + ); + expect(screen.getByTestId('test')).toHaveClass(styles.modifiers.noFill); +}); - expect(screen.getByRole('button')).not.toHaveAttribute('aria-labelledby'); - expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Toggle details for'); - expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false'); - }); +test('Toggle has aria label', () => { + render(); - test('Toggle expanded', () => { - render(); - expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true'); - }); + expect(screen.getByRole('button')).not.toHaveAttribute('aria-labelledby'); + expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Toggle details for'); + expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false'); +}); - test('DataListAction dropdown', () => { - const { asFragment } = render( - - }> - - - action-1 - - , - - action-2 - - - - - ); - expect(asFragment()).toMatchSnapshot(); - }); +test('Toggle has aria-expanded set when isExpanded is passed', () => { + render(); + expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true'); +}); - test('DataListAction button', () => { - const { asFragment } = render( - - - - ); - expect(asFragment()).toMatchSnapshot(); - }); +test('DataListAction renders to match snapshot', () => { + const { asFragment } = render( + + + + ); + expect(asFragment()).toMatchSnapshot(); +}); - test('DataListAction visibility - show button when lg', () => { - render( - - - - ); +test(`DataListAction has custom class when className is passed`, () => { + render( + + + + ); + expect(screen.getByRole('button').parentElement).toHaveClass('test-class'); +}); - expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-hidden'); - expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-visible-on-lg'); - }); +test('DataListAction shows button with visibliity breakpoint set', () => { + render( + + + + ); + + expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-hidden'); + expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-visible-on-lg'); +}); - test('DataListAction visibility - hide button on 2xl', () => { - render( - - - - ); +test('DataListAction hides button with visibility breakpoint set', () => { + render( + + + + ); + + expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-hidden-on-2xl'); +}); - expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-hidden-on-2xl'); - }); +test('DataListContent renders to match snapshot', () => { + const { asFragment } = render( test); + expect(asFragment()).toMatchSnapshot(); +}); - test('DataListContent', () => { - const { asFragment } = render( test); - expect(asFragment()).toMatchSnapshot(); - }); +test(`DataListContent has ${styles.modifiers.noPadding} when hasNoPadding is passed`, () => { + render( + + ); + expect(screen.getByText('test')).toHaveClass(styles.modifiers.noPadding); +}); - test('DataListContent hasNoPadding', () => { - const { asFragment } = render( - - ); - expect(asFragment()).toMatchSnapshot(); - }); +test(`DataListContent has hidden property when isHidden is passed`, () => { + render( + + test + + ); + expect(screen.getByTestId('test-id')).toHaveAttribute('hidden'); +}); + +test(`DataListContent has custom class when className is passed`, () => { + render( + + test + + ); + expect(screen.getByTestId('test-id')).toHaveClass('test-class'); }); diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap index ee9d1720bb9..d71331137ea 100644 --- a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap +++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`DataList Cell default 1`] = ` +exports[`Cell renders to match snapshot 1`] = `
`; -exports[`DataList Cells 1`] = ` +exports[`Cells renders to match snapshot 1`] = `
`; -exports[`DataList DataList variants Breakpoint - 2xl 1`] = ` - -
    - -`; - -exports[`DataList DataList variants Breakpoint - always 1`] = ` - -
      - -`; - -exports[`DataList DataList variants Breakpoint - lg 1`] = ` - -
        - -`; - -exports[`DataList DataList variants Breakpoint - md 1`] = ` - -
          - -`; - -exports[`DataList DataList variants Breakpoint - none 1`] = ` - -
            - -`; - -exports[`DataList DataList variants Breakpoint - sm 1`] = ` - -
              - -`; - -exports[`DataList DataList variants Breakpoint - xl 1`] = ` - -
                - -`; - -exports[`DataList DataListAction button 1`] = ` +exports[`DataListAction renders to match snapshot 1`] = `
                `; -exports[`DataList DataListAction dropdown 1`] = ` - -
                -
                - -
                -
                - -
                -
                -
                -
                -                 -`; - -exports[`DataList DataListContent 1`] = ` +exports[`DataListContent renders to match snapshot 1`] = `
                `; -exports[`DataList DataListContent hasNoPadding 1`] = ` - - - -`; - -exports[`DataList Item 1`] = ` - -
              • - -`; - -exports[`DataList Item default 1`] = ` +exports[`Item renders to match snapshot 1`] = `
              • `; -exports[`DataList List 1`] = ` +exports[`Item row renders to match snapshot 1`] = ` -
                  - -`; - -exports[`DataList List compact 1`] = ` - -
                    `; -exports[`DataList List default 1`] = ` +exports[`Renders to match snapshot 1`] = `
                      `; - -exports[`DataList List draggable 1`] = ` - -
                        - -`; - -exports[`DataList item row default 1`] = ` - -
                        - -`; From 31151a84242b25613d0d7281eb40c557789a166a Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Tue, 26 Sep 2023 09:24:20 -0400 Subject: [PATCH 3/8] fix merge error --- .../BackgroundImage/__tests__/BackgroundImage.test.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx b/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx index f0ff01e361a..ecd1cb47a6a 100644 --- a/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx +++ b/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx @@ -14,11 +14,6 @@ test('spreads additional props', () => { expect(screen.getByTestId('test-id')).toHaveProperty('lang'); }); -test('spreads additional props', () => { - render(); - expect(screen.getByTestId('test-id')).toHaveProperty('lang'); -}); - test('has src URL applied to style', () => { render(); expect(screen.getByTestId('test-id')).toHaveAttribute('style', `${cssBackgroundImage.name}: url(/image/url.png);`); From 4e1876113a64e465288cb60e59670c64c6fc84f8 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Tue, 24 Oct 2023 15:06:27 -0400 Subject: [PATCH 4/8] break out into separate files, pr feedback --- .../DataList/__tests__/DataList.test.tsx | 256 +----------------- .../__tests__/DataListAction.test.tsx | 63 +++++ .../DataList/__tests__/DataListCell.test.tsx | 102 +++++++ .../__tests__/DataListContent.test.tsx | 46 ++++ .../DataList/__tests__/DataListItem.test.tsx | 37 +++ .../__tests__/DataListItemCells.test.tsx | 20 ++ .../__tests__/DataListItemRow.test.tsx | 24 ++ .../__tests__/DataListToggle.test.tsx | 38 +++ .../__snapshots__/DataList.test.tsx.snap | 85 ------ .../DataListAction.test.tsx.snap | 11 + .../__snapshots__/DataListCell.test.tsx.snap | 11 + .../DataListContent.test.tsx.snap | 17 ++ .../__snapshots__/DataListItem.test.tsx.snap | 11 + .../DataListItemCells.test.tsx.snap | 9 + .../DataListItemRow.test.tsx.snap | 9 + .../DataListToggle.test.tsx.snap | 45 +++ 16 files changed, 453 insertions(+), 331 deletions(-) create mode 100644 packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx create mode 100644 packages/react-core/src/components/DataList/__tests__/DataListCell.test.tsx create mode 100644 packages/react-core/src/components/DataList/__tests__/DataListContent.test.tsx create mode 100644 packages/react-core/src/components/DataList/__tests__/DataListItem.test.tsx create mode 100644 packages/react-core/src/components/DataList/__tests__/DataListItemCells.test.tsx create mode 100644 packages/react-core/src/components/DataList/__tests__/DataListItemRow.test.tsx create mode 100644 packages/react-core/src/components/DataList/__tests__/DataListToggle.test.tsx create mode 100644 packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListAction.test.tsx.snap create mode 100644 packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListCell.test.tsx.snap create mode 100644 packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListContent.test.tsx.snap create mode 100644 packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItem.test.tsx.snap create mode 100644 packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItemCells.test.tsx.snap create mode 100644 packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItemRow.test.tsx.snap create mode 100644 packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap diff --git a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx index 24f05b2a641..f2e4a7571a7 100644 --- a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx +++ b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx @@ -5,13 +5,7 @@ import userEvent from '@testing-library/user-event'; import { DataList } from '../DataList'; import { DataListItem } from '../DataListItem'; -import { DataListAction } from '../DataListAction'; -import { DataListCell } from '../DataListCell'; -import { DataListToggle } from '../DataListToggle'; -import { DataListItemCells } from '../DataListItemCells'; import { DataListItemRow } from '../DataListItemRow'; -import { DataListContent } from '../DataListContent'; -import { Button } from '../../Button'; import styles from '@patternfly/react-styles/css/components/DataList/data-list'; @@ -43,9 +37,9 @@ const gridBreakpointClasses = { }); }); -test(`Has breakpoint - 2xl when gridBreakpoint is pased`, () => { - render(); - expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers['grid_2xl']); +test(`Renders default class ${styles.dataList}`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass(styles.dataList); }); test('Renders custom class when passed', () => { @@ -53,7 +47,7 @@ test('Renders custom class when passed', () => { expect(screen.getByLabelText('list')).toHaveClass('data-list-custom'); }); -test('List renders with a hidden input to improve a11y when selectableRow is passed', () => { +test('Renders with a hidden input to improve a11y when onSelectableRowChange is passed', () => { render( {}}> @@ -69,7 +63,7 @@ test('List renders with a hidden input to improve a11y when selectableRow is pas expect(selectableInput).toBeInTheDocument(); }); -test('List does not render with a hidden input to improve a11y when selectableRow is not passed', () => { +test('Does not render with a hidden input to improve a11y when onSelectableRowChange is not passed', () => { render( @@ -85,7 +79,7 @@ test('List does not render with a hidden input to improve a11y when selectableRo expect(selectableInput).not.toBeInTheDocument(); }); -test('List calls selectableRow.onChange when the selectable input changes', async () => { +test('Calls onSelectableRowChange.onChange when the selectable input changes', async () => { const mock = jest.fn(); const user = userEvent.setup(); @@ -105,7 +99,7 @@ test('List calls selectableRow.onChange when the selectable input changes', asyn expect(mock).toHaveBeenCalled(); }); -test('List does not call selectableRow.onChange when the selectable input is not changed', () => { +test('Does not call onSelectableRowChange.onChange when the selectable input is not changed', () => { const mock = jest.fn(); render( @@ -121,7 +115,7 @@ test('List does not call selectableRow.onChange when the selectable input is not expect(mock).not.toHaveBeenCalled(); }); -test('Item applies selectableInputAriaLabel to the hidden input', () => { +test('Applies selectableInputAriaLabel to the hidden input', () => { render( {}}> @@ -137,7 +131,7 @@ test('Item applies selectableInputAriaLabel to the hidden input', () => { expect(selectableInput).toHaveAccessibleName('Data list item label test'); }); -test('Item defaults to labelling its input using its aria-labelledby prop', () => { +test('Defaults to labelling its input using its aria-labelledby prop', () => { render( {}}> @@ -151,7 +145,7 @@ test('Item defaults to labelling its input using its aria-labelledby prop', () = expect(selectableInput).toHaveAccessibleName('Test cell content'); }); -test('Item prioritizes selectableInputAriaLabel over aria-labelledby prop', () => { +test('Prioritizes selectableInputAriaLabel over aria-labelledby prop', () => { render( {}}> @@ -164,233 +158,3 @@ test('Item prioritizes selectableInputAriaLabel over aria-labelledby prop', () = expect(selectableInput).toHaveAccessibleName('Data list item label test'); }); - -test('Item renders to match snapshot', () => { - const { asFragment } = render( - - test - - ); - expect(asFragment()).toMatchSnapshot(); -}); - -test(`Item has ${styles.modifiers.expanded} when isExpanded is passed`, () => { - render( - - test - - ); - expect(screen.getByRole('listitem')).toHaveClass(styles.modifiers.expanded); -}); - -test('Item renders with custom class name', () => { - render( - - test - - ); - expect(screen.getByRole('listitem')).toHaveClass('data-list-item-custom'); -}); - -test('Item row renders to match snapshot', () => { - const { asFragment } = render(test); - expect(asFragment()).toMatchSnapshot(); -}); - -test('Cell renders to match snapshot', () => { - const { asFragment } = render(Secondary); - expect(asFragment()).toMatchSnapshot(); -}); - -test('Cells renders to match snapshot', () => { - const { asFragment } = render( - - Primary Id - , - - Primary Id 2 - - ]} - /> - ); - expect(asFragment()).toMatchSnapshot(); -}); - -test('Cell has width modifier when width is passed', () => { - [ - { width: 1, class: '' }, - { width: 2, class: 'pf-m-flex-2' }, - { width: 3, class: 'pf-m-flex-3' }, - { width: 4, class: 'pf-m-flex-4' }, - { width: 5, class: 'pf-m-flex-5' } - ].forEach((testCase, index) => { - const testId = `cell-test-id-${index}`; - - render( - - Primary Id - - ); - - const dataListCell = screen.getByTestId(testId); - - testCase.class === '' - ? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell') - : expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`); - }); -}); - -test('Cell has text wrap modifiers when wrapModifier is passed', () => { - [ - { wrapModifier: null as any, class: '' }, - { wrapModifier: 'breakWord', class: 'pf-m-break-word' }, - { wrapModifier: 'nowrap', class: 'pf-m-nowrap' }, - { wrapModifier: 'truncate', class: 'pf-m-truncate' } - ].forEach((testCase, index) => { - const testId = `cell-test-id-${index}`; - - render( - - Primary Id - - ); - - const dataListCell = screen.getByTestId(testId); - - testCase.class === '' - ? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell') - : expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`); - }); -}); - -test(`Cell has custom class when className is passed`, () => { - render( - - Primary Id - - ); - expect(screen.getByTestId('test')).toHaveClass('test-class'); -}); - -test(`Cell has ${styles.modifiers.alignRight} when alignRight is passed`, () => { - render( - - Primary Id - - ); - expect(screen.getByTestId('test')).toHaveClass(styles.modifiers.alignRight); -}); - -test(`Cell has ${styles.modifiers.icon} when isIcon is passed`, () => { - render( - - Primary Id - - ); - expect(screen.getByTestId('test')).toHaveClass(styles.modifiers.icon); -}); - -test(`Cell has ${styles.modifiers.noFill} when isFilled = false`, () => { - render( - - Primary Id - - ); - expect(screen.getByTestId('test')).toHaveClass(styles.modifiers.noFill); -}); - -test('Toggle has aria label', () => { - render(); - - expect(screen.getByRole('button')).not.toHaveAttribute('aria-labelledby'); - expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Toggle details for'); - expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false'); -}); - -test('Toggle has aria-expanded set when isExpanded is passed', () => { - render(); - expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true'); -}); - -test('DataListAction renders to match snapshot', () => { - const { asFragment } = render( - - - - ); - expect(asFragment()).toMatchSnapshot(); -}); - -test(`DataListAction has custom class when className is passed`, () => { - render( - - - - ); - expect(screen.getByRole('button').parentElement).toHaveClass('test-class'); -}); - -test('DataListAction shows button with visibliity breakpoint set', () => { - render( - - - - ); - - expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-hidden'); - expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-visible-on-lg'); -}); - -test('DataListAction hides button with visibility breakpoint set', () => { - render( - - - - ); - - expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-hidden-on-2xl'); -}); - -test('DataListContent renders to match snapshot', () => { - const { asFragment } = render( test); - expect(asFragment()).toMatchSnapshot(); -}); - -test(`DataListContent has ${styles.modifiers.noPadding} when hasNoPadding is passed`, () => { - render( - - ); - expect(screen.getByText('test')).toHaveClass(styles.modifiers.noPadding); -}); - -test(`DataListContent has hidden property when isHidden is passed`, () => { - render( - - test - - ); - expect(screen.getByTestId('test-id')).toHaveAttribute('hidden'); -}); - -test(`DataListContent has custom class when className is passed`, () => { - render( - - test - - ); - expect(screen.getByTestId('test-id')).toHaveClass('test-class'); -}); diff --git a/packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx new file mode 100644 index 00000000000..99ffd9f2e10 --- /dev/null +++ b/packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { DataListAction } from '../DataListAction'; + +import styles from '@patternfly/react-styles/css/components/DataList/data-list'; + +test('Renders to match snapshot', () => { + const { asFragment } = render( + + test + + ); + expect(asFragment()).toMatchSnapshot(); +}); + +test(`Renders with default class ${styles.dataListItemAction}`, () => { + render( + + test + + ); + expect(screen.getByText('test')).toHaveClass(styles.dataListItemAction); +}); + +test(`Renders with custom class when className is passed`, () => { + render( + + test + + ); + expect(screen.getByText('test')).toHaveClass('test-class'); +}); + +test('Renders button with visibliity breakpoint set', () => { + render( + + test + + ); + + expect(screen.getByText('test')).toHaveClass('pf-m-hidden'); + expect(screen.getByText('test')).toHaveClass('pf-m-visible-on-lg'); +}); + +test('Does not render button with hidden breakpoint set', () => { + render( + + test + + ); + + expect(screen.getByText('test')).toHaveClass('pf-m-hidden-on-2xl'); +}); diff --git a/packages/react-core/src/components/DataList/__tests__/DataListCell.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListCell.test.tsx new file mode 100644 index 00000000000..e64f3fa816d --- /dev/null +++ b/packages/react-core/src/components/DataList/__tests__/DataListCell.test.tsx @@ -0,0 +1,102 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { DataListCell } from '../DataListCell'; + +import styles from '@patternfly/react-styles/css/components/DataList/data-list'; + +test('Cell renders to match snapshot', () => { + const { asFragment } = render(Secondary); + expect(asFragment()).toMatchSnapshot(); +}); + +test(`Renders default class ${styles.dataListCell}`, () => { + render( + + Primary Id + + ); + expect(screen.getByTestId('test')).toHaveClass(styles.dataListCell); +}); + +test(`Renders custom class when className is passed`, () => { + render( + + Primary Id + + ); + expect(screen.getByTestId('test')).toHaveClass('test-class'); +}); + +test('Renders width modifier when width is passed', () => { + [ + { width: 1, class: '' }, + { width: 2, class: 'pf-m-flex-2' }, + { width: 3, class: 'pf-m-flex-3' }, + { width: 4, class: 'pf-m-flex-4' }, + { width: 5, class: 'pf-m-flex-5' } + ].forEach((testCase, index) => { + const testId = `cell-test-id-${index}`; + + render( + + Primary Id + + ); + + const dataListCell = screen.getByTestId(testId); + + testCase.class === '' + ? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell', { exact: true }) + : expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`, { exact: true }); + }); +}); + +test('Has text wrap modifiers when wrapModifier is passed', () => { + [ + { wrapModifier: null as any, class: '' }, + { wrapModifier: 'breakWord', class: 'pf-m-break-word' }, + { wrapModifier: 'nowrap', class: 'pf-m-nowrap' }, + { wrapModifier: 'truncate', class: 'pf-m-truncate' } + ].forEach((testCase, index) => { + const testId = `cell-test-id-${index}`; + + render( + + Primary Id + + ); + + const dataListCell = screen.getByTestId(testId); + + testCase.class === '' + ? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell') + : expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`); + }); +}); + +test(`Renders with class ${styles.modifiers.alignRight} when alignRight is passed`, () => { + render( + + Primary Id + + ); + expect(screen.getByTestId('test')).toHaveClass(styles.modifiers.alignRight); +}); + +test(`Renders with class ${styles.modifiers.icon} when isIcon is passed`, () => { + render( + + Primary Id + + ); + expect(screen.getByTestId('test')).toHaveClass(styles.modifiers.icon); +}); + +test(`Renders with class ${styles.modifiers.noFill} when isFilled = false`, () => { + render( + + Primary Id + + ); + expect(screen.getByTestId('test')).toHaveClass(styles.modifiers.noFill); +}); diff --git a/packages/react-core/src/components/DataList/__tests__/DataListContent.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListContent.test.tsx new file mode 100644 index 00000000000..564a03b3a31 --- /dev/null +++ b/packages/react-core/src/components/DataList/__tests__/DataListContent.test.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { DataListContent } from '../DataListContent'; + +import styles from '@patternfly/react-styles/css/components/DataList/data-list'; + +test('Renders to match snapshot', () => { + const { asFragment } = render( test); + expect(asFragment()).toMatchSnapshot(); +}); + +test(`Renders with default class ${styles.dataListExpandableContent}`, () => { + render( + + test + + ); + expect(screen.getByTestId('test-id')).toHaveClass(styles.dataListExpandableContent); +}); + +test(`Renders with custom class when className is passed`, () => { + render( + + test + + ); + expect(screen.getByTestId('test-id')).toHaveClass('test-class'); +}); + +test(`Renders with class ${styles.modifiers.noPadding} when hasNoPadding is passed`, () => { + render( + + ); + expect(screen.getByText('test')).toHaveClass(styles.modifiers.noPadding); +}); + +test(`Renders with hidden property when isHidden is passed`, () => { + render( + + test + + ); + expect(screen.getByTestId('test-id')).toHaveAttribute('hidden'); +}); diff --git a/packages/react-core/src/components/DataList/__tests__/DataListItem.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListItem.test.tsx new file mode 100644 index 00000000000..1ca58e070ad --- /dev/null +++ b/packages/react-core/src/components/DataList/__tests__/DataListItem.test.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { DataListItem } from '../DataListItem'; + +import styles from '@patternfly/react-styles/css/components/DataList/data-list'; + +test('Renders to match snapshot', () => { + const { asFragment } = render( + + test + + ); + expect(asFragment()).toMatchSnapshot(); +}); + +test(`Renders with default class ${styles.dataListItem}`, () => { + render(test); + expect(screen.getByRole('listitem')).toHaveClass(styles.dataListItem); +}); + +test('Renders with custom class name', () => { + render( + + test + + ); + expect(screen.getByRole('listitem')).toHaveClass('data-list-item-custom'); +}); + +test(`Renders class ${styles.modifiers.expanded} when isExpanded is passed`, () => { + render( + + test + + ); + expect(screen.getByRole('listitem')).toHaveClass(styles.modifiers.expanded); +}); diff --git a/packages/react-core/src/components/DataList/__tests__/DataListItemCells.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListItemCells.test.tsx new file mode 100644 index 00000000000..f5526ebfe99 --- /dev/null +++ b/packages/react-core/src/components/DataList/__tests__/DataListItemCells.test.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { DataListItemCells } from '../DataListItemCells'; + +import styles from '@patternfly/react-styles/css/components/DataList/data-list'; + +test('Cells renders to match snapshot', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test(`Renders with default class ${styles.dataListItemContent}`, () => { + render(); + expect(screen.getByText('test')).toHaveClass(styles.dataListItemContent); +}); + +test(`Renders with custom class when className is passed`, () => { + render(); + expect(screen.getByText('test')).toHaveClass('custom'); +}); diff --git a/packages/react-core/src/components/DataList/__tests__/DataListItemRow.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListItemRow.test.tsx new file mode 100644 index 00000000000..dd9f01a0a90 --- /dev/null +++ b/packages/react-core/src/components/DataList/__tests__/DataListItemRow.test.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { DataListItemRow } from '../DataListItemRow'; + +import styles from '@patternfly/react-styles/css/components/DataList/data-list'; + +test('Item row renders to match snapshot', () => { + const { asFragment } = render(test); + expect(asFragment()).toMatchSnapshot(); +}); + +test(`Renders with default class ${styles.dataListItemRow}`, () => { + render(test); + expect(screen.getByTestId('test')).toHaveClass(styles.dataListItemRow); +}); + +test(`Renders with custom class when className is passed`, () => { + render( + + test + + ); + expect(screen.getByTestId('test')).toHaveClass('custom'); +}); diff --git a/packages/react-core/src/components/DataList/__tests__/DataListToggle.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListToggle.test.tsx new file mode 100644 index 00000000000..d7ea8b664b3 --- /dev/null +++ b/packages/react-core/src/components/DataList/__tests__/DataListToggle.test.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { DataListToggle } from '../DataListToggle'; + +import styles from '@patternfly/react-styles/css/components/DataList/data-list'; + +test('DataListAction renders to match snapshot', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test(`Renders with default class ${styles.dataListToggle}`, () => { + render(); + expect(screen.getByRole('button').parentElement).toHaveClass(styles.dataListToggle); +}); + +test(`Renders with default class ${styles.dataListItemControl}`, () => { + render(); + expect(screen.getByRole('button').parentElement?.parentElement).toHaveClass(styles.dataListItemControl); +}); + +test(`Renders with custom class when className is passed`, () => { + render(); + expect(screen.getByRole('button').parentElement?.parentElement).toHaveClass('custom'); +}); + +test('Renders with aria label', () => { + render(); + + expect(screen.getByRole('button')).not.toHaveAttribute('aria-labelledby'); + expect(screen.getByRole('button')).toHaveAccessibleName('Toggle details for'); +}); + +test('Renders with aria-expanded when isExpanded = true', () => { + render(); + + expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true'); +}); diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap index d71331137ea..c8bebb7725c 100644 --- a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap +++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap @@ -1,90 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Cell renders to match snapshot 1`] = ` - -
                        - Secondary -
                        -                         -`; - -exports[`Cells renders to match snapshot 1`] = ` - -
                        -
                        - Primary Id -
                        -
                        - Primary Id 2 -
                        -
                        -                         -`; - -exports[`DataListAction renders to match snapshot 1`] = ` - -
                        - -
                        -                         -`; - -exports[`DataListContent renders to match snapshot 1`] = ` - -
                        -
                        - test -
                        -
                        -                         -`; - -exports[`Item renders to match snapshot 1`] = ` - -
                      • - -`; - -exports[`Item row renders to match snapshot 1`] = ` - -
                        - -`; - exports[`Renders to match snapshot 1`] = `
                          +
                          + test +
                          + +`; diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListCell.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListCell.test.tsx.snap new file mode 100644 index 00000000000..8dfb9393730 --- /dev/null +++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListCell.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Cell renders to match snapshot 1`] = ` + +
                          + Secondary +
                          +                           +`; diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListContent.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListContent.test.tsx.snap new file mode 100644 index 00000000000..15736a7aa11 --- /dev/null +++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListContent.test.tsx.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Renders to match snapshot 1`] = ` + +
                          +
                          + test +
                          +
                          +                           +`; diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItem.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItem.test.tsx.snap new file mode 100644 index 00000000000..1f0da0b84eb --- /dev/null +++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItem.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Renders to match snapshot 1`] = ` + +
                        • + +`; diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItemCells.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItemCells.test.tsx.snap new file mode 100644 index 00000000000..05d99f283e7 --- /dev/null +++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItemCells.test.tsx.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Cells renders to match snapshot 1`] = ` + +
                          + +`; diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItemRow.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItemRow.test.tsx.snap new file mode 100644 index 00000000000..bacaa0a7320 --- /dev/null +++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItemRow.test.tsx.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Item row renders to match snapshot 1`] = ` + +
                          + +`; diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap new file mode 100644 index 00000000000..a3aeac302e4 --- /dev/null +++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap @@ -0,0 +1,45 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DataListAction renders to match snapshot 1`] = ` + +
                          +
                          + +
                          +
                          +                           +`; From f11340f7cfb405a76cf0117be2a8ff83f018d17e Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 6 Nov 2023 09:24:12 -0500 Subject: [PATCH 5/8] updates --- .../src/components/DataList/DataList.tsx | 2 + .../components/DataList/DataListAction.tsx | 10 ++- .../DataList/__tests__/DataList.test.tsx | 32 ++++++++- .../__tests__/DataListAction.test.tsx | 68 +++++++++++++------ .../DataList/__tests__/DataListCell.test.tsx | 40 ++++++++--- .../DataList/__tests__/DataListCheck.test.tsx | 5 ++ .../__tests__/DataListContent.test.tsx | 29 +++++++- .../DataList/__tests__/DataListItem.test.tsx | 11 ++- .../__tests__/DataListItemCells.test.tsx | 7 +- .../__tests__/DataListItemRow.test.tsx | 22 +++++- .../__tests__/DataListToggle.test.tsx | 29 +++++++- .../DataListAction.test.tsx.snap | 3 + .../DataListAction.test.tsx.snap | 3 + .../DataListToggle.test.tsx.snap | 2 +- 14 files changed, 219 insertions(+), 44 deletions(-) diff --git a/packages/react-core/src/components/DataList/DataList.tsx b/packages/react-core/src/components/DataList/DataList.tsx index 5b2a82a738c..817fb1c6875 100644 --- a/packages/react-core/src/components/DataList/DataList.tsx +++ b/packages/react-core/src/components/DataList/DataList.tsx @@ -73,6 +73,7 @@ class DataList extends React.Component { const { className, children, + 'aria-label': ariaLabel, onSelectDataListItem, selectedDataListItemId, isCompact, @@ -106,6 +107,7 @@ class DataList extends React.Component { )} style={props.style} role="list" + aria-label={ariaLabel} {...props} ref={this.ref} > diff --git a/packages/react-core/src/components/DataList/DataListAction.tsx b/packages/react-core/src/components/DataList/DataListAction.tsx index 807bf915691..da79897e544 100644 --- a/packages/react-core/src/components/DataList/DataListAction.tsx +++ b/packages/react-core/src/components/DataList/DataListAction.tsx @@ -31,15 +31,19 @@ export const DataListAction: React.FunctionComponent = ({ children, className, visibility, - /* eslint-disable @typescript-eslint/no-unused-vars */ id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isPlainButtonAction, - /* eslint-enable @typescript-eslint/no-unused-vars */ ...props }: DataListActionProps) => ( -
                          +
                          {isPlainButtonAction ?
                          {children}
                          : children}
                          ); diff --git a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx index f2e4a7571a7..ef37e5f9ba6 100644 --- a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx +++ b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx @@ -11,15 +11,41 @@ import styles from '@patternfly/react-styles/css/components/DataList/data-list'; test('Renders to match snapshot', () => { const { asFragment } = render(); - expect(screen.getByLabelText('list')).toBeInTheDocument(); expect(asFragment()).toMatchSnapshot(); }); +test(`Renders with default class ${styles.dataList}`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass(styles.dataList); +}); + +test(`Renders with custom class when className is passed`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass('custom'); +}); + +test(`Renders with spread props`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveAttribute('id', 'test'); +}); + +test(`Renders with aria-label when aria-label is passed`, () => { + render(test); + expect(screen.getByText('test')).toHaveAttribute('aria-label', 'list'); +}); + test(`Renders ${styles.modifiers.compact} when isCompact = true`, () => { render(); expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.compact); }); +['nowrap', 'truncate', 'breakWord'].forEach((wrap) => { + test(`Renders with class ${styles.modifiers[wrap]} when wrapModifier = ${wrap} is pased`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers[wrap]); + }); +}); + const gridBreakpointClasses = { none: styles.modifiers.gridNone, always: 'pf-m-grid', @@ -79,7 +105,7 @@ test('Does not render with a hidden input to improve a11y when onSelectableRowCh expect(selectableInput).not.toBeInTheDocument(); }); -test('Calls onSelectableRowChange.onChange when the selectable input changes', async () => { +test('Calls onSelectableRowChange when the selectable input changes', async () => { const mock = jest.fn(); const user = userEvent.setup(); @@ -99,7 +125,7 @@ test('Calls onSelectableRowChange.onChange when the selectable input changes', a expect(mock).toHaveBeenCalled(); }); -test('Does not call onSelectableRowChange.onChange when the selectable input is not changed', () => { +test('Does not call onSelectableRowChange when the selectable input is not changed', () => { const mock = jest.fn(); render( diff --git a/packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx index 99ffd9f2e10..038ff5d2197 100644 --- a/packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx +++ b/packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx @@ -15,11 +15,11 @@ test('Renders to match snapshot', () => { test(`Renders with default class ${styles.dataListItemAction}`, () => { render( - + test ); - expect(screen.getByText('test')).toHaveClass(styles.dataListItemAction); + expect(screen.getByText('test')).toHaveClass(styles.dataListItemAction, { exact: true }); }); test(`Renders with custom class when className is passed`, () => { @@ -31,33 +31,63 @@ test(`Renders with custom class when className is passed`, () => { expect(screen.getByText('test')).toHaveClass('test-class'); }); -test('Renders button with visibliity breakpoint set', () => { +test(`Renders with spread props`, () => { + render( + + test + + ); + expect(screen.getByText('test')).toHaveAttribute('id', 'ex-action'); +}); + +test(`Renders with class ${styles.dataListAction} when isPlainButtonAction = true`, () => { render( - + test ); + expect(screen.getByText('test')).toHaveClass(styles.dataListAction); +}); + +['hidden', 'visible'].forEach((vis) => { + const visMod = vis as 'hidden' | 'visible'; + test(`Has visibility - ${vis} for every breakpoint`, () => { + render( + + test + + ); - expect(screen.getByText('test')).toHaveClass('pf-m-hidden'); - expect(screen.getByText('test')).toHaveClass('pf-m-visible-on-lg'); + if (visMod === 'hidden') { + expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}`]); + } + expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnSm`]); + expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnMd`]); + expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnLg`]); + expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnXl`]); + expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}On_2xl`]); + }); }); -test('Does not render button with hidden breakpoint set', () => { +test(`Renders with aria-label when aria-label is passed`, () => { render( - + test ); + expect(screen.getByText('test')).toHaveAccessibleName('Actions'); +}); - expect(screen.getByText('test')).toHaveClass('pf-m-hidden-on-2xl'); +test(`Renders with aria-labelledby when aria-label is passed`, () => { + render( + + test + + ); + expect(screen.getByText('test')).toHaveAttribute('aria-labelledby', 'ex-action'); }); diff --git a/packages/react-core/src/components/DataList/__tests__/DataListCell.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListCell.test.tsx index e64f3fa816d..6e5954384fa 100644 --- a/packages/react-core/src/components/DataList/__tests__/DataListCell.test.tsx +++ b/packages/react-core/src/components/DataList/__tests__/DataListCell.test.tsx @@ -15,7 +15,7 @@ test(`Renders default class ${styles.dataListCell}`, () => { Primary Id ); - expect(screen.getByTestId('test')).toHaveClass(styles.dataListCell); + expect(screen.getByTestId('test')).toHaveClass(styles.dataListCell, { exact: true }); }); test(`Renders custom class when className is passed`, () => { @@ -27,13 +27,22 @@ test(`Renders custom class when className is passed`, () => { expect(screen.getByTestId('test')).toHaveClass('test-class'); }); +test(`Renders with spread props`, () => { + render( + + Primary Id + + ); + expect(screen.getByText('Primary Id')).toHaveAttribute('id', 'test'); +}); + test('Renders width modifier when width is passed', () => { [ { width: 1, class: '' }, - { width: 2, class: 'pf-m-flex-2' }, - { width: 3, class: 'pf-m-flex-3' }, - { width: 4, class: 'pf-m-flex-4' }, - { width: 5, class: 'pf-m-flex-5' } + { width: 2, class: styles.modifiers.flex_2 }, + { width: 3, class: styles.modifiers.flex_3 }, + { width: 4, class: styles.modifiers.flex_4 }, + { width: 5, class: styles.modifiers.flex_5 } ].forEach((testCase, index) => { const testId = `cell-test-id-${index}`; @@ -46,7 +55,12 @@ test('Renders width modifier when width is passed', () => { const dataListCell = screen.getByTestId(testId); testCase.class === '' - ? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell', { exact: true }) + ? expect(dataListCell).not.toHaveClass( + styles.modifiers.flex_2, + styles.modifiers.flex_3, + styles.modifiers.flex_4, + styles.modifiers.flex_5 + ) : expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`, { exact: true }); }); }); @@ -54,9 +68,9 @@ test('Renders width modifier when width is passed', () => { test('Has text wrap modifiers when wrapModifier is passed', () => { [ { wrapModifier: null as any, class: '' }, - { wrapModifier: 'breakWord', class: 'pf-m-break-word' }, - { wrapModifier: 'nowrap', class: 'pf-m-nowrap' }, - { wrapModifier: 'truncate', class: 'pf-m-truncate' } + { wrapModifier: 'breakWord', class: styles.modifiers.breakWord }, + { wrapModifier: 'nowrap', class: styles.modifiers.nowrap }, + { wrapModifier: 'truncate', class: styles.modifiers.truncate } ].forEach((testCase, index) => { const testId = `cell-test-id-${index}`; @@ -69,8 +83,12 @@ test('Has text wrap modifiers when wrapModifier is passed', () => { const dataListCell = screen.getByTestId(testId); testCase.class === '' - ? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell') - : expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`); + ? expect(dataListCell).not.toHaveClass( + styles.modifiers.breakWord, + styles.modifiers.nowrap, + styles.modifiers.truncate + ) + : expect(dataListCell).toHaveClass(`${testCase.class}`); }); }); diff --git a/packages/react-core/src/components/DataList/__tests__/DataListCheck.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListCheck.test.tsx index 9e69ff734e8..fa1424c746f 100644 --- a/packages/react-core/src/components/DataList/__tests__/DataListCheck.test.tsx +++ b/packages/react-core/src/components/DataList/__tests__/DataListCheck.test.tsx @@ -3,6 +3,11 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { DataListCheck } from '../DataListCheck'; +test(`Renders with spread props`, () => { + render(); + expect(screen.getByRole('checkbox')).toHaveAttribute('id', 'test'); +}); + it('does not throw a "A component is changing an uncontrolled input of type checkbox to be controlled" error when changed if using isChecked', async () => { const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); const user = userEvent.setup(); diff --git a/packages/react-core/src/components/DataList/__tests__/DataListContent.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListContent.test.tsx index 564a03b3a31..912bb48f0de 100644 --- a/packages/react-core/src/components/DataList/__tests__/DataListContent.test.tsx +++ b/packages/react-core/src/components/DataList/__tests__/DataListContent.test.tsx @@ -15,7 +15,16 @@ test(`Renders with default class ${styles.dataListExpandableContent}`, () => { test ); - expect(screen.getByTestId('test-id')).toHaveClass(styles.dataListExpandableContent); + expect(screen.getByTestId('test-id')).toHaveClass(styles.dataListExpandableContent, { exact: true }); +}); + +test(`Renders with default class ${styles.dataListExpandableContentBody}`, () => { + render( + + test + + ); + expect(screen.getByText('test')).toHaveClass(styles.dataListExpandableContentBody, { exact: true }); }); test(`Renders with custom class when className is passed`, () => { @@ -27,6 +36,24 @@ test(`Renders with custom class when className is passed`, () => { expect(screen.getByTestId('test-id')).toHaveClass('test-class'); }); +test(`Renders with id when id is passed`, () => { + render( + + test + + ); + expect(screen.getByTestId('test-id')).toHaveAttribute('id', 'idProp'); +}); + +test(`Renders with spread props`, () => { + render( + + test + + ); + expect(screen.getByTestId('test-id')).toHaveAttribute('dir', 'rtl'); +}); + test(`Renders with class ${styles.modifiers.noPadding} when hasNoPadding is passed`, () => { render(