@patternfly/react-core 5.2.0-prerelease.2 → 5.2.0-prerelease.21

package/src/components/Chip/__tests__/ChipGroup.test.tsx

@@ -5,66 +5,293 @@ import userEvent from '@testing-library/user-event';
 
 import { ChipGroup } from '../index';
 import { Chip } from '../../Chip';
+import styles from '@patternfly/react-styles/css/components/Chip/chip-group';
 
-describe('ChipGroup', () => {
-  test('chip group default', () => {
-    const { asFragment } = render(
-      <ChipGroup>
-        <Chip>1.1</Chip>
-      </ChipGroup>
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('chip group with category', () => {
-    const { asFragment } = render(
-      <ChipGroup categoryName="category">
-        <Chip>1.1</Chip>
-      </ChipGroup>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('chip group with closable category', () => {
-    const { asFragment } = render(
-      <ChipGroup categoryName="category" isClosable>
-        <Chip>1.1</Chip>
-      </ChipGroup>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('chip group expanded', async () => {
-    const user = userEvent.setup();
-
-    render(
-      <ChipGroup>
-        <Chip>1</Chip>
-        <Chip>2</Chip>
-        <Chip>3</Chip>
-        <Chip>4</Chip>
-      </ChipGroup>
-    );
-
-    const moreText = screen.getByText('1 more');
-    expect(moreText).toBeInTheDocument();
-
-    await user.click(moreText);
-    expect(screen.getByText('Show Less')).toBeInTheDocument();
-  });
-
-  test('chip group will not render if no children passed', () => {
-    render(<ChipGroup />);
-    expect(screen.queryByRole('group')).toBeNull();
-  });
-
-  test('chip group with category and tooltip', () => {
-    const { asFragment } = render(
-      <ChipGroup categoryName="A very long category name">
-        <Chip>1.1</Chip>
-      </ChipGroup>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('chip group default', () => {
+  render(
+    <ChipGroup>
+      <Chip>1.1</Chip>
+    </ChipGroup>
+  );
+
+  expect(screen.getByRole('group')).toHaveClass(styles.chipGroup);
+});
+
+test('chip group with custom className', () => {
+  render(
+    <ChipGroup className="test">
+      <Chip>1.1</Chip>
+    </ChipGroup>
+  );
+
+  expect(screen.getByRole('group')).toHaveClass(`${styles.chipGroup} test`);
+});
+
+test('chip group has aria-label by default when categoryName is not passed', () => {
+  render(
+    <ChipGroup>
+      <Chip>1.1</Chip>
+    </ChipGroup>
+  );
+
+  expect(screen.getByRole('group')).toHaveAccessibleName('Chip group category');
+});
+
+test('chip group with custom aria-label', () => {
+  render(
+    <ChipGroup aria-label="test chip group">
+      <Chip>1.1</Chip>
+    </ChipGroup>
+  );
+
+  expect(screen.getByRole('group')).toHaveAccessibleName('test chip group');
+});
+
+test('chip group with category', () => {
+  render(
+    <ChipGroup categoryName="category">
+      <Chip>1.1</Chip>
+    </ChipGroup>
+  );
+  expect(screen.getByText('category')).toBeVisible();
+});
+
+test('chip group with category renders with class pf-m-category', () => {
+  render(
+    <ChipGroup categoryName="category">
+      <Chip>1.1</Chip>
+    </ChipGroup>
+  );
+  expect(screen.getByRole('group')).toHaveClass(`${styles.modifiers.category}`);
+});
+
+test('chip group has aria-labelledby attribute', () => {
+  render(
+    <ChipGroup categoryName="category">
+      <Chip>1.1</Chip>
+    </ChipGroup>
+  );
+  expect(screen.getByRole('group')).toHaveAttribute('aria-labelledby', expect.stringContaining(`pf-random-id`));
+});
+
+test('chip group has aria-labelledby attribute set to ID value', () => {
+  render(
+    <ChipGroup categoryName="category" id="chip-group-id">
+      <Chip>1.1</Chip>
+    </ChipGroup>
+  );
+  expect(screen.getByRole('group')).toHaveAttribute('aria-labelledby', 'chip-group-id');
+});
+
+test('chip group expands', async () => {
+  const user = userEvent.setup();
+  const chips = ['Chip one', 'Really long chip that goes on and on', 'Chip three', 'Chip four', 'Chip five'];
+
+  render(
+    <ChipGroup aria-label="test">
+      {chips.map((currentChip) => (
+        <Chip key={currentChip}>{currentChip}</Chip>
+      ))}
+    </ChipGroup>
+  );
+
+  await user.click(screen.getByText('2 more'));
+  expect(screen.getByText('Chip five')).toBeVisible();
+});
+
+test('chip group with closable category', () => {
+  render(
+    <ChipGroup categoryName="category" isClosable>
+      <Chip>1.1</Chip>
+    </ChipGroup>
+  );
+  expect(screen.getByRole('group').lastChild).toHaveClass(styles.chipGroupClose);
+});
+
+test('chip group with closeBtnAriaLabel', () => {
+  render(
+    <ChipGroup closeBtnAriaLabel="close button aria label" isClosable categoryName="category">
+      <Chip>1.1</Chip>
+    </ChipGroup>
+  );
+  expect(screen.getByLabelText('close button aria label')).toBeInTheDocument();
+  expect(screen.getByLabelText('close button aria label')).toHaveAccessibleName("close button aria label category");
+});
+
+test('chip group onClick', async () => {
+  const onClose = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <ChipGroup categoryName="category" isClosable onClick={onClose}>
+      <Chip>1.1</Chip>
+    </ChipGroup>
+  );
+
+  await user.click(screen.getByLabelText('Close chip group'));
+  expect(onClose).toHaveBeenCalledTimes(1);
+});
+
+test('chip group onOverflowChipClick', async () => {
+  const onOverflowChipClick = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <ChipGroup categoryName="category" onOverflowChipClick={onOverflowChipClick}>
+      <Chip>1</Chip>
+      <Chip>2</Chip>
+      <Chip>3</Chip>
+      <Chip>4</Chip>
+    </ChipGroup>
+  );
+
+  await user.click(screen.getByText('1 more'));
+  expect(onOverflowChipClick).toHaveBeenCalledTimes(1);
+});
+
+test('chip group expanded', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <ChipGroup>
+      <Chip>1</Chip>
+      <Chip>2</Chip>
+      <Chip>3</Chip>
+      <Chip>4</Chip>
+    </ChipGroup>
+  );
+
+  const moreText = screen.getByText('1 more');
+  expect(moreText).toBeInTheDocument();
+
+  await user.click(moreText);
+  expect(screen.getByText('Show Less')).toBeInTheDocument();
+});
+
+test('overflow chip does not render by default when < 4 children are passed', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <ChipGroup>
+      <Chip>1</Chip>
+      <Chip>2</Chip>
+      <Chip>3</Chip>
+    </ChipGroup>
+  );
+
+  expect(screen.queryByText('1 more')).not.toBeInTheDocument();
+});
+
+test('overflow chip collapsed by default', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <ChipGroup>
+      <Chip>1</Chip>
+      <Chip>2</Chip>
+      <Chip>3</Chip>
+      <Chip>4</Chip>
+    </ChipGroup>
+  );
+
+  const moreText = screen.getByText('1 more');
+  expect(moreText).toBeInTheDocument();
+});
+
+test('overflow chip renders with the default numChips prop value of 3', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <ChipGroup>
+      <Chip>1</Chip>
+      <Chip>2</Chip>
+      <Chip>3</Chip>
+      <Chip>4</Chip>
+    </ChipGroup>
+  );
+
+  const moreText = screen.getByText('1 more');
+  expect(moreText).toBeInTheDocument();
+
+  await user.click(moreText);
+  expect(screen.getByText('Show Less')).toBeInTheDocument();
+});
+
+test('overflow chip renders with numChips prop value of 2', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <ChipGroup numChips={2}>
+      <Chip>1</Chip>
+      <Chip>2</Chip>
+      <Chip>3</Chip>
+    </ChipGroup>
+  );
+
+  const moreText = screen.getByText('1 more');
+  expect(moreText).toBeInTheDocument();
+
+  await user.click(moreText);
+  expect(screen.getByText('Show Less')).toBeInTheDocument();
+});
+
+test('clicking the overflow chip causes the text to update with the default props', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <ChipGroup>
+      <Chip>1</Chip>
+      <Chip>2</Chip>
+      <Chip>3</Chip>
+      <Chip>4</Chip>
+    </ChipGroup>
+  );
+
+  const moreText = screen.getByText('1 more');
+
+  await user.click(moreText);
+  expect(screen.getByText('Show Less')).toBeInTheDocument();
+});
+
+test('passing in the expandedText and collapsedText props work', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <ChipGroup expandedText="Collapse" collapsedText="Expand">
+      <Chip>1</Chip>
+      <Chip>2</Chip>
+      <Chip>3</Chip>
+      <Chip>4</Chip>
+    </ChipGroup>
+  );
+
+  const moreText = screen.getByText('Expand');
+  expect(moreText).toBeInTheDocument();
+
+  await user.click(moreText);
+  expect(screen.getByText('Collapse')).toBeInTheDocument();
+});
+
+test('passing defaultIsOpen of true causes the chip group to be expanded by default', async () => {
+  render(
+    <ChipGroup defaultIsOpen>
+      <Chip>1</Chip>
+      <Chip>2</Chip>
+      <Chip>3</Chip>
+      <Chip>4</Chip>
+    </ChipGroup>
+  );
+
+  expect(screen.getByText('Show Less')).toBeInTheDocument();
+});
+
+test('chip group will not render if no children passed', () => {
+  render(<ChipGroup />);
+  expect(screen.queryByRole('group')).toBeNull();
+});
+
+test('chip group renders to match snapshot', () => {
+  const { asFragment } = render(<ChipGroup>chips</ChipGroup>);
+  expect(screen.getByRole('group')).toBeInTheDocument();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap

@@ -1,22 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Chip closable 1`] = `
+exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-chip my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-2"
+    class="pf-v5-c-chip"
+    data-ouia-component-id="snapshot-test"
     data-ouia-component-type="PF5/Chip"
     data-ouia-safe="true"
-    id="chip_one"
+    id="snapshot-test"
   >
     <span
       class="pf-v5-c-chip__content"
     >
       <span
         class="pf-v5-c-chip__text"
-        id="chip_one"
+        id="snapshot-test"
       >
-        Chip
+        Chip text
       </span>
     </span>
     <span
@@ -25,212 +25,12 @@ exports[`Chip closable 1`] = `
       <button
         aria-disabled="false"
         aria-label="close"
-        aria-labelledby="remove_chip_one chip_one"
+        aria-labelledby="remove_snapshot-test snapshot-test"
         class="pf-v5-c-button pf-m-plain"
-        data-ouia-component-id="close"
+        data-ouia-component-id="snapshot-test"
         data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
-        id="remove_chip_one"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 352 512"
-          width="1em"
-        >
-          <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          />
-        </svg>
-      </button>
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Chip closable with tooltip 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-chip my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-3"
-    data-ouia-component-type="PF5/Chip"
-    data-ouia-safe="true"
-    id="chip_one"
-  >
-    <span
-      class="pf-v5-c-chip__content"
-    >
-      <span
-        class="pf-v5-c-chip__text"
-        id="chip_one"
-      >
-        1234567890123456789
-      </span>
-    </span>
-    <span
-      class="pf-v5-c-chip__actions"
-    >
-      <button
-        aria-disabled="false"
-        aria-label="close"
-        aria-labelledby="remove_chip_one chip_one"
-        class="pf-v5-c-button pf-m-plain"
-        data-ouia-component-id="close"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        id="remove_chip_one"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 352 512"
-          width="1em"
-        >
-          <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          />
-        </svg>
-      </button>
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Chip custom max-width text 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-chip my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-5"
-    data-ouia-component-type="PF5/Chip"
-    data-ouia-safe="true"
-    style="--pf-v5-c-chip__text--MaxWidth: 100px;"
-    textmaxwidth="100px"
-  >
-    <span
-      class="pf-v5-c-chip__content"
-    >
-      <span
-        class="pf-v5-c-chip__text"
-        id="pf-random-id-4"
-      >
-        4 more
-      </span>
-    </span>
-    <span
-      class="pf-v5-c-chip__actions"
-    >
-      <button
-        aria-disabled="false"
-        aria-label="close"
-        aria-labelledby="remove_pf-random-id-4 pf-random-id-4"
-        class="pf-v5-c-button pf-m-plain"
-        data-ouia-component-id="close"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        id="remove_pf-random-id-4"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 352 512"
-          width="1em"
-        >
-          <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          />
-        </svg>
-      </button>
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Chip overflow 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-chip pf-m-overflow my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-1"
-    data-ouia-component-type="PF5/OverflowChip"
-    data-ouia-safe="true"
-  >
-    <span
-      class="pf-v5-c-chip__content"
-    >
-      <span
-        class="pf-v5-c-chip__text"
-      >
-        4 more
-      </span>
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Chip readonly 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-chip my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-4"
-    data-ouia-component-type="PF5/Chip"
-    data-ouia-safe="true"
-  >
-    <span
-      class="pf-v5-c-chip__content"
-    >
-      <span
-        class="pf-v5-c-chip__text"
-        id="pf-random-id-3"
-      >
-        4 more
-      </span>
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Chip with role='gridcell' 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-chip my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-6"
-    data-ouia-component-type="PF5/Chip"
-    data-ouia-safe="true"
-    role="gridcell"
-  >
-    <span
-      class="pf-v5-c-chip__content"
-    >
-      <span
-        class="pf-v5-c-chip__text"
-        id="pf-random-id-5"
-      >
-        I'm a roled chip
-      </span>
-    </span>
-    <span
-      class="pf-v5-c-chip__actions"
-    >
-      <button
-        aria-disabled="false"
-        aria-label="close"
-        aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
-        class="pf-v5-c-button pf-m-plain"
-        data-ouia-component-id="close"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        id="remove_pf-random-id-5"
+        id="remove_snapshot-test"
         type="button"
       >
         <svg