@patternfly/react-core 5.2.0-prerelease.29 → 5.2.0-prerelease.30

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`]);
+  });
+});

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

@@ -0,0 +1,120 @@
+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(<DataListCell>Secondary</DataListCell>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders default class ${styles.dataListCell}`, () => {
+  render(
+    <DataListCell data-testid="test" key={0}>
+      Primary Id
+    </DataListCell>
+  );
+  expect(screen.getByTestId('test')).toHaveClass(styles.dataListCell, { exact: true });
+});
+
+test(`Renders 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(`Renders with spread props`, () => {
+  render(
+    <DataListCell key={0} id="test">
+      Primary Id
+    </DataListCell>
+  );
+  expect(screen.getByText('Primary Id')).toHaveAttribute('id', 'test');
+});
+
+test('Renders width modifier when width is passed', () => {
+  [
+    { width: 1, class: '' },
+    { 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}`;
+
+    render(
+      <DataListCell data-testid={testId} width={testCase.width as any} key={index}>
+        Primary Id
+      </DataListCell>
+    );
+
+    const dataListCell = screen.getByTestId(testId);
+
+    testCase.class === ''
+      ? 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 });
+  });
+});
+
+test('Has text wrap modifiers when wrapModifier is passed', () => {
+  [
+    { wrapModifier: null as any, class: '' },
+    { 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}`;
+
+    render(
+      <DataListCell data-testid={testId} wrapModifier={testCase.wrapModifier} key={index}>
+        Primary Id
+      </DataListCell>
+    );
+
+    const dataListCell = screen.getByTestId(testId);
+
+    testCase.class === ''
+      ? expect(dataListCell).not.toHaveClass(
+          styles.modifiers.breakWord,
+          styles.modifiers.nowrap,
+          styles.modifiers.truncate
+        )
+      : expect(dataListCell).toHaveClass(`${testCase.class}`);
+  });
+});
+
+test(`Renders with class ${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(`Renders with class ${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(`Renders with class ${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);
+});

package/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(<DataListCheck id="test" aria-labelledby={'string'} isChecked />);
+  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();

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

@@ -0,0 +1,73 @@
+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(<DataListContent aria-label="Primary Content Details"> test</DataListContent>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders with default class ${styles.dataListExpandableContent}`, () => {
+  render(
+    <DataListContent data-testid="test-id" aria-label="Primary Content Details">
+      test
+    </DataListContent>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass(styles.dataListExpandableContent, { exact: true });
+});
+
+test(`Renders with default class ${styles.dataListExpandableContentBody}`, () => {
+  render(
+    <DataListContent data-testid="test-id" aria-label="Primary Content Details">
+      test
+    </DataListContent>
+  );
+  expect(screen.getByText('test')).toHaveClass(styles.dataListExpandableContentBody, { exact: true });
+});
+
+test(`Renders with 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');
+});
+
+test(`Renders with id when id is passed`, () => {
+  render(
+    <DataListContent id="idProp" data-testid="test-id" aria-label="Primary Content Details" className="test-class">
+      test
+    </DataListContent>
+  );
+  expect(screen.getByTestId('test-id')).toHaveAttribute('id', 'idProp');
+});
+
+test(`Renders with spread props`, () => {
+  render(
+    <DataListContent dir="rtl" data-testid="test-id" aria-label="Primary Content Details">
+      test
+    </DataListContent>
+  );
+  expect(screen.getByTestId('test-id')).toHaveAttribute('dir', 'rtl');
+});
+
+test(`Renders with class ${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(`Renders with 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');
+});

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

@@ -0,0 +1,46 @@
+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(
+    <DataListItem key="item-id-1" aria-labelledby="item-1">
+      test
+    </DataListItem>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders with default class ${styles.dataListItem}`, () => {
+  render(<DataListItem aria-labelledby="item-1">test</DataListItem>);
+  expect(screen.getByRole('listitem')).toHaveClass(styles.dataListItem, { exact: true });
+});
+
+test('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('Renders with spread props', () => {
+  render(
+    <DataListItem dir="rtl" aria-labelledby="item-1">
+      test
+    </DataListItem>
+  );
+  expect(screen.getByRole('listitem')).toHaveAttribute('dir', 'rtl');
+});
+
+test(`Renders class ${styles.modifiers.expanded} when isExpanded is passed`, () => {
+  render(
+    <DataListItem aria-labelledby="item-1" isExpanded>
+      test
+    </DataListItem>
+  );
+  expect(screen.getByRole('listitem')).toHaveClass(styles.modifiers.expanded);
+});

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

@@ -0,0 +1,25 @@
+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(<DataListItemCells dataListCells={[]} />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders with default class ${styles.dataListItemContent}`, () => {
+  render(<DataListItemCells dataListCells="test" />);
+  expect(screen.getByText('test')).toHaveClass(styles.dataListItemContent, { exact: true });
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(<DataListItemCells className="custom" dataListCells="test" />);
+  expect(screen.getByText('test')).toHaveClass('custom');
+});
+
+test(`Renders with spread props`, () => {
+  render(<DataListItemCells dir="rtl" dataListCells="test" />);
+  expect(screen.getByText('test')).toHaveAttribute('dir', 'rtl');
+});

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

@@ -0,0 +1,44 @@
+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(<DataListItemRow>test</DataListItemRow>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders with default class ${styles.dataListItemRow}`, () => {
+  render(<DataListItemRow data-testid="test">test</DataListItemRow>);
+  expect(screen.getByTestId('test')).toHaveClass(styles.dataListItemRow, { exact: true });
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(
+    <DataListItemRow className="custom" data-testid="test">
+      test
+    </DataListItemRow>
+  );
+  expect(screen.getByTestId('test')).toHaveClass('custom');
+});
+
+test(`Renders with spread props`, () => {
+  render(
+    <DataListItemRow dir="rtl" data-testid="test">
+      test
+    </DataListItemRow>
+  );
+  expect(screen.getByTestId('test')).toHaveAttribute('dir', 'rtl');
+});
+
+['nowrap', 'truncate', 'breakWord'].forEach((wrap) => {
+  test(`Renders with class ${styles.modifiers[wrap]} when wrapModifier = ${wrap} is pased`, () => {
+    render(
+      <DataListItemRow data-testid="test" wrapModifier={wrap as 'nowrap' | 'truncate' | 'breakWord'}>
+        test
+      </DataListItemRow>
+    );
+    expect(screen.getByTestId('test')).toHaveClass(styles.modifiers[wrap]);
+  });
+});

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

@@ -0,0 +1,61 @@
+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('Renders to match snapshot', () => {
+  const { asFragment } = render(<DataListToggle id="ex-toggle2" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders with default class ${styles.dataListToggle}`, () => {
+  render(<DataListToggle id="ex-toggle2" />);
+  expect(screen.getByRole('button').parentElement).toHaveClass(styles.dataListToggle);
+});
+
+test(`Renders with default class ${styles.dataListItemControl}`, () => {
+  render(<DataListToggle id="ex-toggle2" />);
+  expect(screen.getByRole('button').parentElement?.parentElement).toHaveClass(styles.dataListItemControl, {
+    exact: true
+  });
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(<DataListToggle className="custom" id="ex-toggle2" />);
+  expect(screen.getByRole('button').parentElement?.parentElement).toHaveClass('custom');
+});
+
+test(`Renders with spread props`, () => {
+  render(<DataListToggle dir="rtl" id="ex-toggle2" />);
+  expect(screen.getByRole('button').parentElement?.parentElement).toHaveAttribute('dir', 'rtl');
+});
+
+test(`Renders with spread buttonProps`, () => {
+  render(<DataListToggle buttonProps={{ isDisabled: true }} id="ex-toggle2" />);
+  expect(screen.getByRole('button')).toHaveAttribute('disabled');
+});
+
+test('Renders aria-labelledby by default when no custom aria-label is passed', () => {
+  render(<DataListToggle rowid="row" id="ex-toggle2" />);
+
+  expect(screen.getByRole('button')).toHaveAttribute('aria-labelledby', 'row ex-toggle2');
+});
+
+test('Does not render aria-labelledby when custom aria-label is passed', () => {
+  render(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" />);
+
+  expect(screen.getByRole('button')).not.toHaveAttribute('aria-labelledby');
+  expect(screen.getByRole('button')).toHaveAccessibleName('Toggle details for');
+});
+
+test(`Renders with ariaControls when ariaControls is passed`, () => {
+  render(<DataListToggle aria-controls="control" id="ex-toggle2" />);
+  expect(screen.getByRole('button')).toHaveAttribute('aria-controls', 'control');
+});
+
+test('Renders with aria-expanded when isExpanded = true', () => {
+  render(<DataListToggle isExpanded id="ex-toggle2" />);
+
+  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+});