@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.3

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

@@ -1,59 +1,276 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Chip } from '../Chip';
+import styles from '@patternfly/react-styles/css/components/Chip/chip';
 
-describe('Chip', () => {
-  test('overflow', () => {
-    const { asFragment } = render(
-      <Chip className="my-chp-cls" isOverflowChip>
-        4 more
+jest.mock('../../Tooltip', () => ({
+  Tooltip: ({ content, position }) => (
+    <div data-testid="tooltip-mock">
+      <p>{`content: ${content}`}</p>
+      <p>{`position: ${position}`}</p>
+    </div>
+  )
+}));
+
+['default chip', 'overflow chip'].forEach((chipType) => {
+  const isOverflowChip = chipType === 'overflow chip';
+
+  test(`Renders without children for ${chipType}`, () => {
+    render(
+      <div data-testid="container">
+        <Chip isOverflowChip={isOverflowChip} />
+      </div>
+    );
+
+    expect(screen.getByTestId('container').firstChild).toBeVisible();
+  });
+
+  test(`Renders with class ${styles.chip} on the ${chipType} container element`, () => {
+    render(
+      <Chip isOverflowChip={isOverflowChip} data-testid="container">
+        Chip text
+      </Chip>
+    );
+
+    // Only a non-overflow chip will have exactly the class "pf-v5-c-chip", we test for
+    // additional classes on overflow chips elsewhere in the suite
+    expect(screen.getByTestId('container')).toHaveClass(styles.chip, { exact: !isOverflowChip });
+  });
+
+  test(`Renders with class ${styles.chipContent} around the ${chipType} content`, () => {
+    render(
+      <Chip isOverflowChip={isOverflowChip} data-testid="container">
+        Chip text
       </Chip>
     );
-    expect(asFragment()).toMatchSnapshot();
+
+    expect(screen.getByTestId('container').firstChild).toHaveClass(styles.chipContent, { exact: true });
+  });
+
+  test(`Renders ${chipType} children with class ${styles.chipText}`, () => {
+    render(<Chip isOverflowChip={isOverflowChip}>Chip text</Chip>);
+
+    expect(screen.getByText('Chip text')).toHaveClass(styles.chipText, { exact: true });
   });
 
-  test('closable', () => {
-    const { asFragment } = render(
-      <Chip className="my-chp-cls" id="chip_one">
-        Chip
+  test(`Renders with custom class on the ${chipType} container element`, () => {
+    render(
+      <Chip isOverflowChip={isOverflowChip} data-testid="container" className="custom-class">
+        Chip text
       </Chip>
     );
-    expect(asFragment()).toMatchSnapshot();
+
+    expect(screen.getByTestId('container')).toHaveClass('custom-class');
   });
 
-  test('closable with tooltip', () => {
-    const { asFragment } = render(
-      <Chip className="my-chp-cls" id="chip_one">
-        1234567890123456789
+  test(`Renders a badge when badge prop is passed to ${chipType}`, () => {
+    render(
+      <Chip isOverflowChip={isOverflowChip} badge={<div>Badge content</div>}>
+        Chip text
       </Chip>
     );
-    expect(asFragment()).toMatchSnapshot();
+
+    expect(screen.getByText('Badge content')).toBeVisible();
+  });
+
+  test(`Renders with div container on ${chipType} by default`, () => {
+    render(
+      <Chip isOverflowChip={isOverflowChip} data-testid="container">
+        Chip text
+      </Chip>
+    );
+
+    expect(screen.getByTestId('container').tagName).toBe('DIV');
   });
 
-  test('readonly', () => {
-    const { asFragment } = render(
-      <Chip className="my-chp-cls" isReadOnly>
-        4 more
+  test(`Renders with custom container on ${chipType} when component prop is passed`, () => {
+    render(
+      <Chip component="li" isOverflowChip={isOverflowChip}>
+        Chip text
       </Chip>
     );
-    expect(asFragment()).toMatchSnapshot();
+
+    expect(screen.getByRole('listitem')).toBeVisible();
   });
 
-  test('custom max-width text', () => {
-    const { asFragment } = render(
-      <Chip className="my-chp-cls" textMaxWidth="100px">
-        4 more
+  test(`Renders maxWidth css var in style attribute when textMaxWidth is passed for ${chipType}`, () => {
+    render(
+      <Chip isOverflowChip={isOverflowChip} data-testid="container" textMaxWidth="10px">
+        Chip text
       </Chip>
     );
-    expect(asFragment()).toMatchSnapshot();
+
+    expect(screen.getByTestId('container')).toHaveAttribute('style', '--pf-v5-c-chip__text--MaxWidth: 10px;');
   });
 
-  test("with role='gridcell'", () => {
-    const { asFragment } = render(
-      <Chip className="my-chp-cls" role="gridcell">
-        I'm a roled chip
+  test(`Spreads additional props to container for ${chipType}`, () => {
+    render(
+      <Chip isOverflowChip={isOverflowChip} data-testid="container" role="button">
+        Chip text
       </Chip>
     );
-    expect(asFragment()).toMatchSnapshot();
+
+    expect(screen.getByTestId('container')).toHaveAttribute('role', 'button');
   });
 });
+
+test(`Renders id prop on ${styles.chipText} container for default chip`, () => {
+  render(<Chip id="custom-id">Chip text</Chip>);
+
+  expect(screen.getByText('Chip text')).toHaveAttribute('id', 'custom-id');
+});
+
+test(`Does not render id prop on ${styles.chipText} container for overflow chip`, () => {
+  render(
+    <Chip isOverflowChip id="custom-id">
+      Chip text
+    </Chip>
+  );
+
+  expect(screen.getByText('Chip text')).not.toHaveAttribute('id');
+});
+
+test(`Renders actions container with class ${styles.chipActions} when isReadOnly is false`, () => {
+  render(<Chip>Chip text</Chip>);
+
+  expect(screen.getByRole('button').parentElement).toHaveClass(styles.chipActions);
+});
+
+test(`Renders aria-labelledby on action close button by default`, () => {
+  render(<Chip>Chip text</Chip>);
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('close Chip text');
+});
+
+test(`Renders aria-labelledby on action close button with custom id passed`, () => {
+  render(<Chip id="custom-id">Chip text</Chip>);
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('close Chip text');
+});
+
+test(`Renders concatenated aria-label on action close button by default`, () => {
+  render(<Chip>Chip text</Chip>);
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('close Chip text');
+});
+
+test(`Renders custom aria-label on action close button when closeBtnAriaLabel is passed`, () => {
+  render(<Chip closeBtnAriaLabel="custom label">Chip text</Chip>);
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('custom label Chip text');
+});
+
+test(`Does not render close button action when isOverflowChip is true`, () => {
+  render(<Chip isOverflowChip>Chip text</Chip>);
+
+  // Because overflow chip renders as a button, we need to add the accessible name to the query
+  expect(screen.queryByRole('button', { name: 'close Chip text' })).not.toBeInTheDocument();
+});
+
+test(`Does not render close button action when isReadOnly is true`, () => {
+  render(<Chip isReadOnly>Chip text</Chip>);
+
+  expect(screen.queryByRole('button')).not.toBeInTheDocument();
+});
+
+test(`Does not render with class ${styles.modifiers.overflow} when isOverflowChip is not passed`, () => {
+  render(<Chip data-testid="container">Chip text</Chip>);
+
+  expect(screen.getByTestId('container')).not.toHaveClass(styles.modifiers.overflow);
+});
+
+test(`Renders with class ${styles.modifiers.overflow} when isOverflowChip is true`, () => {
+  render(
+    <Chip isOverflowChip data-testid="container">
+      Chip text
+    </Chip>
+  );
+
+  expect(screen.getByTestId('container')).toHaveClass(styles.modifiers.overflow);
+});
+
+test(`Calls onClick when close button action is clicked for default chip`, async () => {
+  const user = userEvent.setup();
+  const onClickMock = jest.fn();
+
+  render(<Chip onClick={onClickMock}>Chip text</Chip>);
+
+  await user.click(screen.getByRole('button', { name: 'close Chip text' }));
+
+  expect(onClickMock).toHaveBeenCalledTimes(1);
+});
+
+test(`Does not call onClick when close button action is not clicked for default chip`, async () => {
+  const user = userEvent.setup();
+  const onClickMock = jest.fn();
+
+  render(
+    <>
+      <Chip onClick={onClickMock}>Chip text</Chip>
+      <button>Test clicker</button>
+    </>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Test clicker' }));
+
+  expect(onClickMock).not.toHaveBeenCalled();
+});
+
+test(`Calls onClick when chip is clicked for overflow chip`, async () => {
+  const user = userEvent.setup();
+  const onClickMock = jest.fn();
+
+  render(
+    <Chip isOverflowChip component="button" onClick={onClickMock}>
+      Chip text
+    </Chip>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Chip text' }));
+
+  expect(onClickMock).toHaveBeenCalledTimes(1);
+});
+
+test(`Does not call onClick when chip is not clicked for overflow chip`, async () => {
+  const user = userEvent.setup();
+  const onClickMock = jest.fn();
+
+  render(
+    <>
+      <Chip isOverflowChip component="button" onClick={onClickMock}>
+        Chip text
+      </Chip>
+      <button>Test clicker</button>
+    </>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Test clicker' }));
+
+  expect(onClickMock).not.toHaveBeenCalled();
+});
+
+test('Passes position to Tooltip', () => {
+  Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, value: 500 });
+  render(<Chip tooltipPosition="bottom">Test chip text</Chip>);
+
+  expect(screen.getByText('position: bottom')).toBeVisible();
+  Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, value: 0 });
+});
+
+test('Passes content to Tooltip', () => {
+  Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, value: 500 });
+  render(<Chip>Test chip text</Chip>);
+
+  expect(screen.getByText(`content: Test chip text`)).toBeVisible();
+  Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, value: 0 });
+});
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(
+    <Chip id="snapshot-test" ouiaId="snapshot-test">
+      Chip text
+    </Chip>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -5,66 +5,289 @@ 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 () => {
+  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 () => {
+  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();
 });