From 3c95080386db5d08a64f506c9696ec2d4092d108 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Mon, 18 Mar 2024 17:42:58 -0400 Subject: [PATCH 1/2] fix(GenerateId): add randomness to id generator to prevent id collisions --- .../Chip/__tests__/ChipGroup.test.tsx | 4 +- .../__tests__/ClipboardCopy.test.tsx | 2 + .../__snapshots__/ClipboardCopy.test.tsx.snap | 2 +- .../Drawer/__tests__/Drawer.test.tsx | 2 + .../__tests__/DrawerPanelContent.test.tsx | 2 + .../Generated/DrawerPanelContent.test.tsx | 2 + .../DrawerPanelContent.test.tsx.snap | 2 +- .../__snapshots__/Drawer.test.tsx.snap | 16 +++--- .../Form/__tests__/FormFieldGroup.test.tsx | 2 + .../Form/__tests__/FormSection.test.tsx | 2 + .../FormFieldGroup.test.tsx.snap | 4 +- .../__snapshots__/FormSection.test.tsx.snap | 4 +- .../Label/__tests__/LabelGroup.test.tsx | 2 + .../__snapshots__/LabelGroup.test.tsx.snap | 16 +++--- .../__tests__/MultipleFileUpload.test.tsx | 2 + .../MultipleFileUploadStatus.test.tsx | 2 + .../MultipleFileUploadStatus.test.tsx.snap | 32 ++++++------ .../__tests__/SearchInput.test.tsx | 1 + .../__snapshots__/SearchInput.test.tsx.snap | 4 +- .../components/Tabs/__tests__/Tabs.test.tsx | 2 + .../__snapshots__/Tabs.test.tsx.snap | 6 +-- .../Toolbar/__tests__/Toolbar.test.tsx | 2 + .../__snapshots__/Toolbar.test.tsx.snap | 22 ++++---- .../Select/__tests__/Select.test.tsx | 2 + .../__snapshots__/Select.test.tsx.snap | 50 +++++++++---------- .../src/helpers/GenerateId/GenerateId.ts | 20 ++++++-- .../GenerateId/__mocks__/GenerateId.ts | 11 ++++ .../GenerateId/__tests__/GenerateId.test.tsx | 4 +- 28 files changed, 138 insertions(+), 84 deletions(-) create mode 100644 packages/react-core/src/helpers/GenerateId/__mocks__/GenerateId.ts diff --git a/packages/react-core/src/components/Chip/__tests__/ChipGroup.test.tsx b/packages/react-core/src/components/Chip/__tests__/ChipGroup.test.tsx index 148f985133e..f209a6e63c3 100644 --- a/packages/react-core/src/components/Chip/__tests__/ChipGroup.test.tsx +++ b/packages/react-core/src/components/Chip/__tests__/ChipGroup.test.tsx @@ -7,6 +7,8 @@ import { ChipGroup } from '../index'; import { Chip } from '../../Chip'; import styles from '@patternfly/react-styles/css/components/Chip/chip-group'; +jest.mock('../../../helpers/GenerateId/GenerateId'); + test('chip group default', () => { render( @@ -71,7 +73,7 @@ test('chip group has aria-labelledby attribute', () => { 1.1 ); - expect(screen.getByRole('group')).toHaveAttribute('aria-labelledby', expect.stringContaining(`pf-random-id`)); + expect(screen.getByRole('group')).toHaveAttribute('aria-labelledby', expect.stringContaining(`generated-id`)); }); test('chip group has aria-labelledby attribute set to ID value', () => { diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx index 4d2b38cb5a6..88221d26dcd 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx @@ -4,6 +4,8 @@ import { ClipboardCopy } from '../ClipboardCopy'; import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy'; import userEvent from '@testing-library/user-event'; +jest.mock('../../../helpers/GenerateId/GenerateId'); + jest.mock('../ClipboardCopyButton', () => ({ ClipboardCopyButton: ({ 'aria-label': ariaLabel, children, entryDelay, exitDelay, maxWidth, position, onClick }) => (
diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap index 832f82d2ba4..28b75e79c38 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap @@ -21,7 +21,7 @@ exports[`Matches snapshot 1`] = ` data-ouia-component-id="OUIA-Generated-TextInputBase-26" data-ouia-component-type="PF5/TextInput" data-ouia-safe="true" - id="text-input-34" + id="text-input-generated-id" type="text" value="Copyable text" /> diff --git a/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx b/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx index b174efc01c1..7ca56909dc8 100644 --- a/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx +++ b/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx @@ -14,6 +14,8 @@ import { render } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { KeyTypes } from '../../../helpers'; +jest.mock('../../../helpers/GenerateId/GenerateId'); + Object.values([ { isExpanded: true, isInline: false, isStatic: false }, { isExpanded: false, isInline: false, isStatic: false }, diff --git a/packages/react-core/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx b/packages/react-core/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx index 3794f640b31..55874262ed4 100644 --- a/packages/react-core/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx +++ b/packages/react-core/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx @@ -3,6 +3,8 @@ import { render, screen } from '@testing-library/react'; import { DrawerPanelContent } from '../DrawerPanelContent'; import { Drawer } from '../Drawer'; +jest.mock('../../../helpers/GenerateId/GenerateId'); + test('Does not render with aria-labelledby by default', () => { render( diff --git a/packages/react-core/src/components/Drawer/__tests__/Generated/DrawerPanelContent.test.tsx b/packages/react-core/src/components/Drawer/__tests__/Generated/DrawerPanelContent.test.tsx index 4648dc9f0e5..ed8676d0943 100644 --- a/packages/react-core/src/components/Drawer/__tests__/Generated/DrawerPanelContent.test.tsx +++ b/packages/react-core/src/components/Drawer/__tests__/Generated/DrawerPanelContent.test.tsx @@ -7,6 +7,8 @@ import { DrawerPanelContent } from '../../DrawerPanelContent'; // any missing imports can usually be resolved by adding them here import {} from '../..'; +jest.mock('../../../../helpers/GenerateId/GenerateId'); + it('DrawerPanelContent should match snapshot (auto-generated)', () => { const { asFragment } = render(ReactNode
} />); expect(asFragment()).toMatchSnapshot(); diff --git a/packages/react-core/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap b/packages/react-core/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap index e9e693c4f4d..2b064900bdd 100644 --- a/packages/react-core/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap +++ b/packages/react-core/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap @@ -5,7 +5,7 @@ exports[`DrawerPanelContent should match snapshot (auto-generated) 1`] = `
@@ -310,7 +310,7 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
@@ -336,7 +336,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
{ const FieldGroup = ( { const Section = ; const { asFragment } = render(Section); diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap index 70419b283e7..01c929b3a9c 100644 --- a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap +++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap @@ -17,12 +17,12 @@ exports[`Check expandable form field group example against snapshot 1`] = ` aria-disabled="false" aria-expanded="true" aria-label="toggle" - aria-labelledby="title-text-id2 form-field-group-toggle0" + aria-labelledby="title-text-id2 generated-id" class="pf-v5-c-button pf-m-plain" data-ouia-component-id="OUIA-Generated-Button-plain-1" data-ouia-component-type="PF5/Button" data-ouia-safe="true" - id="form-field-group-toggle0" + id="generated-id" type="button" >

Title

diff --git a/packages/react-core/src/components/Label/__tests__/LabelGroup.test.tsx b/packages/react-core/src/components/Label/__tests__/LabelGroup.test.tsx index 3576322730d..5f02fd9c151 100644 --- a/packages/react-core/src/components/Label/__tests__/LabelGroup.test.tsx +++ b/packages/react-core/src/components/Label/__tests__/LabelGroup.test.tsx @@ -6,6 +6,8 @@ import userEvent from '@testing-library/user-event'; import { Label } from '../../Label'; import { LabelGroup } from '../index'; +jest.mock('../../../helpers/GenerateId/GenerateId'); + describe('LabelGroup', () => { test('label group default', () => { const { asFragment } = render( diff --git a/packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap b/packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap index 6c289c32529..7c647ce96c3 100644 --- a/packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap +++ b/packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap @@ -134,12 +134,12 @@ exports[`LabelGroup label group with category 1`] = `
    @@ -177,12 +177,12 @@ exports[`LabelGroup label group with category and tooltip 1`] = `
      @@ -220,12 +220,12 @@ exports[`LabelGroup label group with closable category 1`] = `
        @@ -254,12 +254,12 @@ exports[`LabelGroup label group with closable category 1`] = `