From ad7ec9d9a7e754259aac8316651a3e6060a12455 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Wed, 6 Sep 2023 13:52:10 -0400
Subject: [PATCH 1/5] chore(Chip): updated unit tests

---
 .../react-core/src/components/Chip/Chip.tsx   |   3 +-
 .../components/Chip/__tests__/Chip.test.tsx   | 239 +++++++++++++++---
 .../__snapshots__/Chip.test.tsx.snap          | 215 +---------------
 3 files changed, 216 insertions(+), 241 deletions(-)

diff --git a/packages/react-core/src/components/Chip/Chip.tsx b/packages/react-core/src/components/Chip/Chip.tsx
index a05cfe85986..52c6c62d518 100644
--- a/packages/react-core/src/components/Chip/Chip.tsx
+++ b/packages/react-core/src/components/Chip/Chip.tsx
@@ -140,12 +140,13 @@ class Chip extends React.Component<ChipProps, ChipState> {
       tooltipPosition,
       component,
       ouiaId,
+      textMaxWidth,
       ...props
     } = this.props;
     const Component = component as any;
     return (
       <Component
-        {...(this.props.textMaxWidth && {
+        {...(textMaxWidth && {
           style: this.setChipStyle()
         })}
         className={css(styles.chip, className)}
diff --git a/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx b/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
index 56e178e1b4b..3b793ff4bf4 100644
--- a/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
+++ b/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
@@ -1,59 +1,234 @@
 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
+['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>
+    );
+
+    expect(screen.getByTestId('container')).toHaveClass(styles.chip);
+  });
+
+  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);
+  });
+
+  test(`Renders ${chipType} children with class ${styles.chipText}`, () => {
+    render(<Chip isOverflowChip={isOverflowChip}>Chip text</Chip>);
+
+    expect(screen.getByText('Chip text')).toHaveClass(styles.chipText);
+  });
+
+  test(`Renders with custom class on the ${chipType} container element`, () => {
+    render(
+      <Chip isOverflowChip={isOverflowChip} data-testid="container" className="custom-class">
+        Chip text
+      </Chip>
+    );
+
+    expect(screen.getByTestId('container')).toHaveClass('custom-class');
   });
 
-  test('closable', () => {
-    const { asFragment } = render(
-      <Chip className="my-chp-cls" id="chip_one">
-        Chip
+  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('closable with tooltip', () => {
-    const { asFragment } = render(
-      <Chip className="my-chp-cls" id="chip_one">
-        1234567890123456789
+  test(`Renders with div container on ${chipType} by default`, () => {
+    render(
+      <Chip isOverflowChip={isOverflowChip} data-testid="container">
+        Chip text
       </Chip>
     );
-    expect(asFragment()).toMatchSnapshot();
+
+    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="button" isOverflowChip={isOverflowChip} data-testid="container">
+        Chip text
       </Chip>
     );
-    expect(asFragment()).toMatchSnapshot();
+
+    expect(screen.getByTestId('container').tagName).toBe('BUTTON');
   });
 
-  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')).toHaveAttribute(
+    'aria-labelledby',
+    expect.stringMatching(/remove_pf-random-id-\d+ pf-random-id-\d+/)
+  );
+});
+
+test(`Renders aria-labelledby on action close button with custom id passed`, () => {
+  render(<Chip id="custom-id">Chip text</Chip>);
+
+  expect(screen.getByRole('button')).toHaveAttribute('aria-labelledby', 'remove_custom-id custom-id');
+});
+
+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(`Does not render with type attribute when isOverflowChip is true and component is not button`, () => {
+  render(
+    <Chip component="span" isOverflowChip data-testid="container">
+      Chip text
+    </Chip>
+  );
+
+  expect(screen.getByTestId('container')).not.toHaveAttribute('type');
+});
+
+test(`Renders with type attribute when isOverflowChip is true and component is button`, () => {
+  render(
+    <Chip component="button" isOverflowChip data-testid="container">
+      Chip text
+    </Chip>
+  );
+
+  expect(screen.getByTestId('container')).toHaveAttribute('type', 'button');
+});
+
+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(`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('Matches snapshot', () => {
+  const { asFragment } = render(<Chip>Chip text</Chip>);
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
index 00b63d8b8fd..638d7a0f662 100644
--- a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -1,22 +1,21 @@
 // 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="OUIA-Generated-Chip-36"
     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"
+        id="pf-random-id-35"
       >
-        Chip
+        Chip text
       </span>
     </span>
     <span
@@ -25,212 +24,12 @@ exports[`Chip closable 1`] = `
       <button
         aria-disabled="false"
         aria-label="close"
-        aria-labelledby="remove_chip_one chip_one"
+        aria-labelledby="remove_pf-random-id-35 pf-random-id-35"
         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 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_pf-random-id-35"
         type="button"
       >
         <svg

From b8137e844ceaf7c39374024ef244b30225621cdd Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 7 Sep 2023 10:27:21 -0400
Subject: [PATCH 2/5] Added integration test files

---
 .../cypress/integration/chip.spec.ts                 | 10 ++++++++++
 packages/react-integration/demo-app-ts/src/Demos.ts  |  5 +++++
 .../src/components/demos/ChipDemo/ChipDemo.tsx       | 12 ++++++++++++
 .../demo-app-ts/src/components/demos/index.ts        |  1 +
 4 files changed, 28 insertions(+)
 create mode 100644 packages/react-integration/cypress/integration/chip.spec.ts
 create mode 100644 packages/react-integration/demo-app-ts/src/components/demos/ChipDemo/ChipDemo.tsx

diff --git a/packages/react-integration/cypress/integration/chip.spec.ts b/packages/react-integration/cypress/integration/chip.spec.ts
new file mode 100644
index 00000000000..280614d39b9
--- /dev/null
+++ b/packages/react-integration/cypress/integration/chip.spec.ts
@@ -0,0 +1,10 @@
+describe('Chip Group Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/chip-demo-nav-link');
+  });
+
+  it('Verify tooltipPosition is passed to Tooltip', () => {
+    cy.get('#longName-chip').focus();
+    cy.get('.pf-v5-c-tooltip').should('have.class', 'pf-m-bottom');
+  });
+});
diff --git a/packages/react-integration/demo-app-ts/src/Demos.ts b/packages/react-integration/demo-app-ts/src/Demos.ts
index 638f4410a72..14d6ceba2c9 100644
--- a/packages/react-integration/demo-app-ts/src/Demos.ts
+++ b/packages/react-integration/demo-app-ts/src/Demos.ts
@@ -67,6 +67,11 @@ export const Demos: DemoInterface[] = [
     name: 'Card Demo',
     componentType: Examples.CardDemo
   },
+  {
+    id: 'chip-demo',
+    name: 'Chip Demo',
+    componentType: Examples.ChipDemo
+  },
   {
     id: 'chipgroup-demo',
     name: 'ChipGroup Demo',
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ChipDemo/ChipDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipDemo/ChipDemo.tsx
new file mode 100644
index 00000000000..a8e6c0e9578
--- /dev/null
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ChipDemo/ChipDemo.tsx
@@ -0,0 +1,12 @@
+import { Chip } from '@patternfly/react-core';
+import React from 'react';
+
+export const ChipDemo: React.FunctionComponent = () => (
+  <>
+    <Chip tooltipPosition="bottom" id="longName-chip">
+      Chip with a really, really, REALLY long text
+    </Chip>
+    ;
+  </>
+);
+ChipDemo.displayName = 'ChipDemo';
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
index 2eadd9a9609..af191ee6d5b 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/index.ts
+++ b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
@@ -9,6 +9,7 @@ export * from './BackToTopDemo/BackToTopDemo';
 export * from './BreadcrumbDemo/BreadcrumbDemo';
 export * from './ButtonDemo/ButtonDemo';
 export * from './CardDemo/CardDemo';
+export * from './ChipDemo/ChipDemo';
 export * from './ChipGroupDemo/ChipGroupDefaultIsOpenDemo';
 export * from './ChipGroupDemo/ChipGroupDemo';
 export * from './ChipGroupDemo/ChipGroupWithCategoryDemo';

From 07be44fa1adc0de5d4f62fe3718eab0bfb10ff25 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Fri, 13 Oct 2023 15:48:26 -0400
Subject: [PATCH 3/5] Updated tests per Austin feedback

---
 .../components/Chip/__tests__/Chip.test.tsx   | 73 +++++++++++--------
 .../__snapshots__/Chip.test.tsx.snap          |  7 +-
 2 files changed, 47 insertions(+), 33 deletions(-)

diff --git a/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx b/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
index 3b793ff4bf4..7772a71968a 100644
--- a/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
+++ b/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
@@ -24,7 +24,9 @@ import styles from '@patternfly/react-styles/css/components/Chip/chip';
       </Chip>
     );
 
-    expect(screen.getByTestId('container')).toHaveClass(styles.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`, () => {
@@ -34,13 +36,13 @@ import styles from '@patternfly/react-styles/css/components/Chip/chip';
       </Chip>
     );
 
-    expect(screen.getByTestId('container').firstChild).toHaveClass(styles.chipContent);
+    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);
+    expect(screen.getByText('Chip text')).toHaveClass(styles.chipText, { exact: true });
   });
 
   test(`Renders with custom class on the ${chipType} container element`, () => {
@@ -75,12 +77,12 @@ import styles from '@patternfly/react-styles/css/components/Chip/chip';
 
   test(`Renders with custom container on ${chipType} when component prop is passed`, () => {
     render(
-      <Chip component="button" isOverflowChip={isOverflowChip} data-testid="container">
+      <Chip component="li" isOverflowChip={isOverflowChip}>
         Chip text
       </Chip>
     );
 
-    expect(screen.getByTestId('container').tagName).toBe('BUTTON');
+    expect(screen.getByRole('listitem')).toBeVisible();
   });
 
   test(`Renders maxWidth css var in style attribute when textMaxWidth is passed for ${chipType}`, () => {
@@ -129,16 +131,13 @@ test(`Renders actions container with class ${styles.chipActions} when isReadOnly
 test(`Renders aria-labelledby on action close button by default`, () => {
   render(<Chip>Chip text</Chip>);
 
-  expect(screen.getByRole('button')).toHaveAttribute(
-    'aria-labelledby',
-    expect.stringMatching(/remove_pf-random-id-\d+ pf-random-id-\d+/)
-  );
+  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')).toHaveAttribute('aria-labelledby', 'remove_custom-id custom-id');
+  expect(screen.getByRole('button')).toHaveAccessibleName('close Chip text');
 });
 
 test(`Renders concatenated aria-label on action close button by default`, () => {
@@ -182,35 +181,31 @@ test(`Renders with class ${styles.modifiers.overflow} when isOverflowChip is tru
   expect(screen.getByTestId('container')).toHaveClass(styles.modifiers.overflow);
 });
 
-test(`Does not render with type attribute when isOverflowChip is true and component is not button`, () => {
-  render(
-    <Chip component="span" isOverflowChip data-testid="container">
-      Chip text
-    </Chip>
-  );
+test(`Calls onClick when close button action is clicked for default chip`, async () => {
+  const user = userEvent.setup();
+  const onClickMock = jest.fn();
 
-  expect(screen.getByTestId('container')).not.toHaveAttribute('type');
-});
+  render(<Chip onClick={onClickMock}>Chip text</Chip>);
 
-test(`Renders with type attribute when isOverflowChip is true and component is button`, () => {
-  render(
-    <Chip component="button" isOverflowChip data-testid="container">
-      Chip text
-    </Chip>
-  );
+  await user.click(screen.getByRole('button', { name: 'close Chip text' }));
 
-  expect(screen.getByTestId('container')).toHaveAttribute('type', 'button');
+  expect(onClickMock).toHaveBeenCalledTimes(1);
 });
 
-test(`Calls onClick when close button action is clicked for default chip`, async () => {
+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>);
+  render(
+    <>
+      <Chip onClick={onClickMock}>Chip text</Chip>
+      <button>Test clicker</button>
+    </>
+  );
 
-  await user.click(screen.getByRole('button', { name: 'close Chip text' }));
+  await user.click(screen.getByRole('button', { name: 'Test clicker' }));
 
-  expect(onClickMock).toHaveBeenCalledTimes(1);
+  expect(onClickMock).not.toHaveBeenCalledTimes(1);
 });
 
 test(`Calls onClick when chip is clicked for overflow chip`, async () => {
@@ -228,7 +223,25 @@ test(`Calls onClick when chip is clicked for overflow chip`, async () => {
   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.toHaveBeenCalledTimes(1);
+});
+
 test('Matches snapshot', () => {
-  const { asFragment } = render(<Chip>Chip text</Chip>);
+  const { asFragment } = render(<Chip id="snapshot-test">Chip text</Chip>);
   expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
index 638d7a0f662..7ada1a555dd 100644
--- a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -7,13 +7,14 @@ exports[`Matches snapshot 1`] = `
     data-ouia-component-id="OUIA-Generated-Chip-36"
     data-ouia-component-type="PF5/Chip"
     data-ouia-safe="true"
+    id="snapshot-test"
   >
     <span
       class="pf-v5-c-chip__content"
     >
       <span
         class="pf-v5-c-chip__text"
-        id="pf-random-id-35"
+        id="snapshot-test"
       >
         Chip text
       </span>
@@ -24,12 +25,12 @@ exports[`Matches snapshot 1`] = `
       <button
         aria-disabled="false"
         aria-label="close"
-        aria-labelledby="remove_pf-random-id-35 pf-random-id-35"
+        aria-labelledby="remove_snapshot-test snapshot-test"
         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-35"
+        id="remove_snapshot-test"
         type="button"
       >
         <svg

From 275f38d816f68f7d881b4aab22db90d09f6e9cfa Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 19 Oct 2023 10:23:58 -0400
Subject: [PATCH 4/5] Tested props get passed to Tooltip

---
 .../components/Chip/__tests__/Chip.test.tsx   | 31 ++++++++++++++++++-
 .../__snapshots__/Chip.test.tsx.snap          |  4 +--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx b/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
index 7772a71968a..d86baba02ff 100644
--- a/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
+++ b/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
@@ -4,6 +4,15 @@ import userEvent from '@testing-library/user-event';
 import { Chip } from '../Chip';
 import styles from '@patternfly/react-styles/css/components/Chip/chip';
 
+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';
 
@@ -241,7 +250,27 @@ test(`Does not call onClick when chip is not clicked for overflow chip`, async (
   expect(onClickMock).not.toHaveBeenCalledTimes(1);
 });
 
+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">Chip text</Chip>);
+  const { asFragment } = render(
+    <Chip id="snapshot-test" ouiaId="snapshot-test">
+      Chip text
+    </Chip>
+  );
   expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
index 7ada1a555dd..2216d2e45cc 100644
--- a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-chip"
-    data-ouia-component-id="OUIA-Generated-Chip-36"
+    data-ouia-component-id="snapshot-test"
     data-ouia-component-type="PF5/Chip"
     data-ouia-safe="true"
     id="snapshot-test"
@@ -27,7 +27,7 @@ exports[`Matches snapshot 1`] = `
         aria-label="close"
         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_snapshot-test"

From c7b165ed86366beac3eec1282573248fd5b8564e Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Mon, 23 Oct 2023 14:46:44 -0400
Subject: [PATCH 5/5] Replaced haveBeenCalledTimes with haveBeenCalled

---
 .../react-core/src/components/Chip/__tests__/Chip.test.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx b/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
index d86baba02ff..a72d1caaa62 100644
--- a/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
+++ b/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
@@ -214,7 +214,7 @@ test(`Does not call onClick when close button action is not clicked for default
 
   await user.click(screen.getByRole('button', { name: 'Test clicker' }));
 
-  expect(onClickMock).not.toHaveBeenCalledTimes(1);
+  expect(onClickMock).not.toHaveBeenCalled();
 });
 
 test(`Calls onClick when chip is clicked for overflow chip`, async () => {
@@ -247,7 +247,7 @@ test(`Does not call onClick when chip is not clicked for overflow chip`, async (
 
   await user.click(screen.getByRole('button', { name: 'Test clicker' }));
 
-  expect(onClickMock).not.toHaveBeenCalledTimes(1);
+  expect(onClickMock).not.toHaveBeenCalled();
 });
 
 test('Passes position to Tooltip', () => {