@patternfly/react-core 6.0.0-alpha.2 → 6.0.0-alpha.20

package/src/components/DataList/__tests__/DataList.test.tsx

@@ -5,346 +5,182 @@ 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 { 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(<DataList aria-label="this is a simple list" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 
-  test('List compact', () => {
-    const { asFragment } = render(<DataList aria-label="this is a simple list" isCompact />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders to match snapshot', () => {
+  const { asFragment } = render(<DataList aria-label="list" />);
+  expect(asFragment()).toMatchSnapshot();
+});
 
-  describe('DataList variants', () => {
-    ['none', 'always', 'sm', 'md', 'lg', 'xl', '2xl'].forEach((oneBreakpoint) => {
-      test(`Breakpoint - ${oneBreakpoint}`, () => {
-        const { asFragment } = render(
-          <DataList aria-label="this is a simple list" gridBreakpoint={oneBreakpoint as any} />
-        );
-        expect(asFragment()).toMatchSnapshot();
-      });
-    });
-  });
+test(`Renders with default class ${styles.dataList}`, () => {
+  render(<DataList aria-label="list" />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.dataList);
+});
 
-  test('List draggable', () => {
-    const { asFragment } = render(<DataList aria-label="this is a simple list" isCompact onDragFinish={jest.fn()} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test(`Renders with custom class when className is passed`, () => {
+  render(<DataList aria-label="list" className="custom" />);
+  expect(screen.getByLabelText('list')).toHaveClass('custom');
+});
 
-  test('List', () => {
-    const { asFragment } = render(
-      <DataList key="list-id-1" className="data-list-custom" aria-label="this is a simple list" />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test(`Renders with spread props`, () => {
+  render(<DataList aria-label="list" id="test" />);
+  expect(screen.getByLabelText('list')).toHaveAttribute('id', 'test');
+});
 
-  test('List renders with a hidden input to improve a11y when selectableRow is passed', () => {
-    render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
-        <DataListItem>
-          <DataListItemRow aria-labelledby="test-id">
-            <p id="test-id">Test</p>
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    );
+test(`Renders with aria-label when aria-label is passed`, () => {
+  render(<DataList aria-label="list">test</DataList>);
+  expect(screen.getByText('test')).toHaveAccessibleName('list');
+});
 
-    const selectableInput = screen.getByRole('radio', { hidden: true });
+test(`Renders ${styles.modifiers.compact} when isCompact = true`, () => {
+  render(<DataList aria-label="list" isCompact />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.compact);
+});
 
-    expect(selectableInput).toBeInTheDocument();
+['nowrap', 'truncate', 'breakWord'].forEach((wrap) => {
+  test(`Renders with class ${styles.modifiers[wrap]} when wrapModifier = ${wrap} is pased`, () => {
+    render(<DataList aria-label="list" wrapModifier={wrap as 'nowrap' | 'truncate' | 'breakWord'} />);
+    expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers[wrap]);
   });
+});
 
-  test('List does not render with a hidden input to improve a11y when selectableRow is not passed', () => {
-    render(
-      <DataList aria-label="this is a simple list">
-        <DataListItem>
-          <DataListItemRow aria-labelledby="test-id">
-            <p id="test-id">Test</p>
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    );
-
-    const selectableInput = screen.queryByRole('radio', { hidden: true });
-
-    expect(selectableInput).not.toBeInTheDocument();
+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(<DataList aria-label="list" gridBreakpoint={oneBreakpoint as any} />);
+    expect(screen.getByLabelText('list')).toHaveClass(gridBreakpointClasses[oneBreakpoint]);
   });
+});
 
-  test('List calls selectableRow.onChange when the selectable input changes', async () => {
-    const mock = jest.fn();
-    const user = userEvent.setup();
-
-    render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={mock} selectedDataListItemId="">
-        <DataListItem id="item-test-id">
-          <DataListItemRow aria-labelledby="test-id">
-            <p id="test-id">Test</p>
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    );
-
-    const selectableInput = screen.getByRole('radio', { hidden: true });
-    await user.click(selectableInput);
+test(`Renders default class ${styles.dataList}`, () => {
+  render(<DataList key="list-id-1" aria-label="list" />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.dataList);
+});
 
-    expect(mock).toHaveBeenCalled();
-  });
+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 does not call selectableRow.onChange when the selectable input is not changed', () => {
-    const mock = jest.fn();
+test('Renders with a hidden input to improve a11y when onSelectableRowChange is passed', () => {
+  render(
+    <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
+      <DataListItem>
+        <DataListItemRow aria-labelledby="test-id">
+          <p id="test-id">Test</p>
+        </DataListItemRow>
+      </DataListItem>
+    </DataList>
+  );
 
-    render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={mock} selectedDataListItemId="">
-        <DataListItem id="item-test-id">
-          <DataListItemRow aria-labelledby="test-id">
-            <p id="test-id">Test</p>
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    );
+  const selectableInput = screen.getByRole('radio', { hidden: true });
 
-    expect(mock).not.toHaveBeenCalled();
-  });
-
-  test('Item applies selectableInputAriaLabel to the hidden input', () => {
-    render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
-        <DataListItem selectableInputAriaLabel="Data list item label test">
-          <DataListItemRow aria-labelledby="test-id">
-            <p id="test-id">Test</p>
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    );
+  expect(selectableInput).toBeInTheDocument();
+});
 
-    const selectableInput = screen.getByRole('radio', { hidden: true });
+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>
+        <DataListItemRow aria-labelledby="test-id">
+          <p id="test-id">Test</p>
+        </DataListItemRow>
+      </DataListItem>
+    </DataList>
+  );
 
-    expect(selectableInput).toHaveAccessibleName('Data list item label test');
-  });
+  const selectableInput = screen.queryByRole('radio', { hidden: true });
 
-  test('Item 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">
-          <p id="test-id">Test cell content</p>
-        </DataListItem>
-      </DataList>
-    );
+  expect(selectableInput).not.toBeInTheDocument();
+});
 
-    const selectableInput = screen.getByRole('radio', { hidden: true });
+test('Calls onSelectableRowChange when the selectable input changes', async () => {
+  const mock = jest.fn();
+  const user = userEvent.setup();
 
-    expect(selectableInput).toHaveAccessibleName('Test cell content');
-  });
+  render(
+    <DataList aria-label="this is a simple list" onSelectableRowChange={mock} selectedDataListItemId="">
+      <DataListItem id="item-test-id">
+        <DataListItemRow aria-labelledby="test-id">
+          <p id="test-id">Test</p>
+        </DataListItemRow>
+      </DataListItem>
+    </DataList>
+  );
 
-  test('Item 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">
-          <p id="test-id">Test cell content</p>
-        </DataListItem>
-      </DataList>
-    );
+  const selectableInput = screen.getByRole('radio', { hidden: true });
+  await user.click(selectableInput);
 
-    const selectableInput = screen.getByRole('radio', { hidden: true });
+  expect(mock).toHaveBeenCalled();
+});
 
-    expect(selectableInput).toHaveAccessibleName('Data list item label test');
-  });
+test('Does not call onSelectableRowChange when the selectable input is not changed', () => {
+  const mock = jest.fn();
 
-  test('Item default', () => {
-    const { asFragment } = render(
-      <DataListItem key="item-id-1" aria-labelledby="item-1">
-        test
+  render(
+    <DataList aria-label="this is a simple list" onSelectableRowChange={mock} selectedDataListItemId="">
+      <DataListItem id="item-test-id">
+        <DataListItemRow aria-labelledby="test-id">
+          <p id="test-id">Test</p>
+        </DataListItemRow>
       </DataListItem>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+    </DataList>
+  );
 
-  test('Item expanded', () => {
-    render(
-      <DataListItem aria-labelledby="item-1" isExpanded>
-        test
-      </DataListItem>
-    );
-    expect(screen.getByRole('listitem')).toHaveClass(`${styles.dataListItem} ${styles.modifiers.expanded}`);
-  });
+  expect(mock).not.toHaveBeenCalled();
+});
 
-  test('Item', () => {
-    const { asFragment } = render(
-      <DataListItem className="data-list-item-custom" aria-labelledby="item-1">
-        test
+test('Applies selectableInputAriaLabel to the hidden input', () => {
+  render(
+    <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
+      <DataListItem selectableInputAriaLabel="Data list item label test">
+        <DataListItemRow aria-labelledby="test-id">
+          <p id="test-id">Test</p>
+        </DataListItemRow>
       </DataListItem>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('item row default', () => {
-    const { asFragment } = render(<DataListItemRow>test</DataListItemRow>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Cell default', () => {
-    const { asFragment } = render(<DataListCell>Secondary</DataListCell>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Cells', () => {
-    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 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(
-        <DataListCell data-testid={testId} width={testCase.width as any} key={index}>
-          Primary Id
-        </DataListCell>
-      );
-
-      const dataListCell = screen.getByTestId(testId);
-
-      testCase.class === ''
-        ? expect(dataListCell).toHaveClass(styles.dataListCell)
-        : expect(dataListCell).toHaveClass(`${styles.dataListCell} ${testCase.class}`);
-    });
-  });
+    </DataList>
+  );
 
-  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(
-        <DataListCell data-testid={testId} wrapModifier={testCase.wrapModifier} key={index}>
-          Primary Id
-        </DataListCell>
-      );
-
-      const dataListCell = screen.getByTestId(testId);
-
-      testCase.class === ''
-        ? expect(dataListCell).toHaveClass(styles.dataListCell)
-        : expect(dataListCell).toHaveClass(`${styles.dataListCell} ${testCase.class}`);
-    });
-  });
-
-  test('Toggle default with aria label', () => {
-    render(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" />);
+  const selectableInput = screen.getByRole('radio', { hidden: 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');
-  });
+  expect(selectableInput).toHaveAccessibleName('Data list item label test');
+});
 
-  test('Toggle expanded', () => {
-    render(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" isExpanded />);
-    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
-  });
+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">
+        <p id="test-id">Test cell content</p>
+      </DataListItem>
+    </DataList>
+  );
 
-  test('DataListAction dropdown', () => {
-    const { asFragment } = render(
-      <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action" isPlainButtonAction>
-        <Dropdown toggle={(toggleRef) => <MenuToggle ref={toggleRef} />}>
-          <DropdownList>
-            <DropdownItem onClick={jest.fn()} key="action-1">
-              action-1
-            </DropdownItem>
-            ,
-            <DropdownItem onClick={jest.fn()} key="action-2">
-              action-2
-            </DropdownItem>
-          </DropdownList>
-        </Dropdown>
-      </DataListAction>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+  const selectableInput = screen.getByRole('radio', { hidden: true });
 
-  test('DataListAction button', () => {
-    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 visibility - show button when lg', () => {
-    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');
-  });
+  expect(selectableInput).toHaveAccessibleName('Test cell content');
+});
 
-  test('DataListAction visibility - hide button on 2xl', () => {
-    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('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">
+        <p id="test-id">Test cell content</p>
+      </DataListItem>
+    </DataList>
+  );
 
-  test('DataListContent', () => {
-    const { asFragment } = render(<DataListContent aria-label="Primary Content Details"> test</DataListContent>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+  const selectableInput = screen.getByRole('radio', { hidden: true });
 
-  test('DataListContent hasNoPadding', () => {
-    const { asFragment } = render(
-      <DataListContent aria-label="Primary Content Details" hidden hasNoPadding>
-        test
-      </DataListContent>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+  expect(selectableInput).toHaveAccessibleName('Data list item label test');
 });

package/src/components/DataList/__tests__/DataListAction.test.tsx

@@ -0,0 +1,75 @@
+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">
+      test
+    </DataListAction>
+  );
+  expect(screen.getByText('test')).toHaveClass(styles.dataListItemAction, { exact: true });
+});
+
+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 with spread props`, () => {
+  render(
+    <DataListAction dir="rtl" aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
+      test
+    </DataListAction>
+  );
+  expect(screen.getByText('test')).toHaveAttribute('dir', 'rtl');
+});
+
+test(`Renders with class ${styles.dataListAction} when isPlainButtonAction = true`, () => {
+  render(
+    <DataListAction id="id" aria-label="Actions" aria-labelledby="ex-action" isPlainButtonAction>
+      test
+    </DataListAction>
+  );
+  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(
+      <DataListAction
+        visibility={{ default: visMod, sm: visMod, md: visMod, lg: visMod, xl: visMod, '2xl': visMod }}
+        aria-labelledby="check-action-item2 check-action-action2"
+        id="check-action-action2"
+        aria-label="Actions"
+      >
+        test
+      </DataListAction>
+    );
+
+    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`]);
+  });
+});