Skip to content

Commit

Permalink
break out into separate files, pr feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@kmcfaul
kmcfaul committed Oct 24, 2023
1 parent eb93828 commit 286cc98
Show file tree
Hide file tree
Showing 16 changed files with 453 additions and 331 deletions.
256 changes: 10 additions & 246 deletions packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -43,17 +37,17 @@ const gridBreakpointClasses = {
});
});

test(`Has breakpoint - 2xl when gridBreakpoint is pased`, () => {
render(<DataList aria-label="list" gridBreakpoint="2xl" />);
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers['grid_2xl']);
test(`Renders default class ${styles.dataList}`, () => {
render(<DataList key="list-id-1" aria-label="list" />);
expect(screen.getByLabelText('list')).toHaveClass(styles.dataList);
});

test('Renders custom class when passed', () => {
render(<DataList key="list-id-1" className="data-list-custom" aria-label="list" />);
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(
<DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
<DataListItem>
Expand All @@ -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(
<DataList aria-label="this is a simple list">
<DataListItem>
Expand All @@ -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();

Expand All @@ -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(
Expand All @@ -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(
<DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
<DataListItem selectableInputAriaLabel="Data list item label test">
Expand All @@ -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(
<DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
<DataListItem aria-labelledby="test-id">
Expand All @@ -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(
<DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
<DataListItem aria-labelledby="test-id" selectableInputAriaLabel="Data list item label test">
Expand All @@ -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(
<DataListItem key="item-id-1" aria-labelledby="item-1">
test
</DataListItem>
);
expect(asFragment()).toMatchSnapshot();
});

test(`Item has ${styles.modifiers.expanded} when isExpanded is passed`, () => {
render(
<DataListItem aria-labelledby="item-1" isExpanded>
test
</DataListItem>
);
expect(screen.getByRole('listitem')).toHaveClass(styles.modifiers.expanded);
});

test('Item renders with custom class name', () => {
render(
<DataListItem className="data-list-item-custom" aria-labelledby="item-1">
test
</DataListItem>
);
expect(screen.getByRole('listitem')).toHaveClass('data-list-item-custom');
});

test('Item row renders to match snapshot', () => {
const { asFragment } = render(<DataListItemRow>test</DataListItemRow>);
expect(asFragment()).toMatchSnapshot();
});

test('Cell renders to match snapshot', () => {
const { asFragment } = render(<DataListCell>Secondary</DataListCell>);
expect(asFragment()).toMatchSnapshot();
});

test('Cells renders to match snapshot', () => {
const { asFragment } = render(
<DataListItemCells
dataListCells={[
<DataListCell key="list-id-1" id="primary-item" className="data-list-custom">
Primary Id
</DataListCell>,
<DataListCell key="list-id-2" id="primary-item" className="data-list-custom">
Primary Id 2
</DataListCell>
]}
/>
);
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(
<DataListCell data-testid={testId} width={testCase.width as any} key={index}>
Primary Id
</DataListCell>
);

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(
<DataListCell data-testid={testId} wrapModifier={testCase.wrapModifier} key={index}>
Primary Id
</DataListCell>
);

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(
<DataListCell data-testid="test" key={0} className="test-class">
Primary Id
</DataListCell>
);
expect(screen.getByTestId('test')).toHaveClass('test-class');
});

test(`Cell has ${styles.modifiers.alignRight} when alignRight is passed`, () => {
render(
<DataListCell data-testid="test" key={0} alignRight>
Primary Id
</DataListCell>
);
expect(screen.getByTestId('test')).toHaveClass(styles.modifiers.alignRight);
});

test(`Cell has ${styles.modifiers.icon} when isIcon is passed`, () => {
render(
<DataListCell data-testid="test" key={0} isIcon>
Primary Id
</DataListCell>
);
expect(screen.getByTestId('test')).toHaveClass(styles.modifiers.icon);
});

test(`Cell has ${styles.modifiers.noFill} when isFilled = false`, () => {
render(
<DataListCell data-testid="test" key={0} isFilled={false}>
Primary Id
</DataListCell>
);
expect(screen.getByTestId('test')).toHaveClass(styles.modifiers.noFill);
});

test('Toggle has aria label', () => {
render(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" />);

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(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" isExpanded />);
expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
});

test('DataListAction renders to match snapshot', () => {
const { asFragment } = render(
<DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
<Button id="delete-item-1">Delete</Button>
</DataListAction>
);
expect(asFragment()).toMatchSnapshot();
});

test(`DataListAction has custom class when className is passed`, () => {
render(
<DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action" className="test-class">
<Button id="delete-item-1">Delete</Button>
</DataListAction>
);
expect(screen.getByRole('button').parentElement).toHaveClass('test-class');
});

test('DataListAction shows button with visibliity breakpoint set', () => {
render(
<DataListAction
visibility={{ default: 'hidden', lg: 'visible' }}
aria-labelledby="check-action-item2 check-action-action2"
id="check-action-action2"
aria-label="Actions"
>
<Button variant="primary">Primary</Button>
</DataListAction>
);

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(
<DataListAction
visibility={{ '2xl': 'hidden' }}
aria-labelledby="check-action-item2 check-action-action2"
id="check-action-action2"
aria-label="Actions"
>
<Button variant="primary">Primary</Button>
</DataListAction>
);

expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-hidden-on-2xl');
});

test('DataListContent renders to match snapshot', () => {
const { asFragment } = render(<DataListContent aria-label="Primary Content Details"> test</DataListContent>);
expect(asFragment()).toMatchSnapshot();
});

test(`DataListContent has ${styles.modifiers.noPadding} when hasNoPadding is passed`, () => {
render(
<DataListContent aria-label="Primary Content Details" hidden hasNoPadding>
test
</DataListContent>
);
expect(screen.getByText('test')).toHaveClass(styles.modifiers.noPadding);
});

test(`DataListContent has hidden property when isHidden is passed`, () => {
render(
<DataListContent data-testid="test-id" aria-label="Primary Content Details" isHidden>
test
</DataListContent>
);
expect(screen.getByTestId('test-id')).toHaveAttribute('hidden');
});

test(`DataListContent has custom class when className is passed`, () => {
render(
<DataListContent data-testid="test-id" aria-label="Primary Content Details" className="test-class">
test
</DataListContent>
);
expect(screen.getByTestId('test-id')).toHaveClass('test-class');
});
63 changes: 63 additions & 0 deletions packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -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(
<DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
test
</DataListAction>
);
expect(asFragment()).toMatchSnapshot();
});

test(`Renders with default class ${styles.dataListItemAction}`, () => {
render(
<DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action" className="test-class">
test
</DataListAction>
);
expect(screen.getByText('test')).toHaveClass(styles.dataListItemAction);
});

test(`Renders with custom class when className is passed`, () => {
render(
<DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action" className="test-class">
test
</DataListAction>
);
expect(screen.getByText('test')).toHaveClass('test-class');
});

test('Renders button with visibliity breakpoint set', () => {
render(
<DataListAction
visibility={{ default: 'hidden', lg: 'visible' }}
aria-labelledby="check-action-item2 check-action-action2"
id="check-action-action2"
aria-label="Actions"
>
test
</DataListAction>
);

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(
<DataListAction
visibility={{ '2xl': 'hidden' }}
aria-labelledby="check-action-item2 check-action-action2"
id="check-action-action2"
aria-label="Actions"
>
test
</DataListAction>
);

expect(screen.getByText('test')).toHaveClass('pf-m-hidden-on-2xl');
});
Loading

0 comments on commit 286cc98

Please sign in to comment.