fix(GenerateId): add randomness to id generator to prevent id collisi…

…ons (#10178) * fix(GenerateId): add randomness to id generator to prevent id collisions * chore(docs): Correct prop description
patternfly · Mar 27, 2024 · 2375deb · 2375deb
1 parent 57651d7
commit 2375deb
Show file tree

Hide file tree

Showing 28 changed files with 138 additions and 84 deletions.
diff --git 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(
     <ChipGroup>
@@ -71,7 +73,7 @@ test('chip group has aria-labelledby attribute', () => {
       <Chip>1.1</Chip>
     </ChipGroup>
   );
-  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
@@ -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 }) => (
     <div data-testid="clipboardCopyButton-mock">

diff --git a/...act-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap b/...act-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
@@ -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
@@ -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(
     <Drawer isExpanded>

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
@@ -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(<DrawerPanelContent className={"''"} children={<div>ReactNode</div>} />);
   expect(asFragment()).toMatchSnapshot();

diff --git a/.../src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap b/.../src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`DrawerPanelContent should match snapshot (auto-generated) 1`] = `
   <div
     class="pf-v5-c-drawer__panel ''"
     hidden=""
-    id="pf-drawer-panel-0"
+    id="generated-id"
   />
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`Drawer expands from bottom 1`] = `
       </div>
       <div
         class="pf-v5-c-drawer__panel"
-        id="pf-drawer-panel-5"
+        id="generated-id"
       >
         <div
           class="pf-v5-c-drawer__body"
@@ -187,11 +187,11 @@ exports[`Drawer has resizable css and color variants 1`] = `
       </div>
       <div
         class="pf-v5-c-drawer__panel pf-m-resizable pf-m-light-200"
-        id="pf-drawer-panel-6"
+        id="generated-id"
         style="--pf-v5-c-drawer__panel--md--FlexBasis: 300px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 200px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 400px;"
       >
         <div
-          aria-controls="pf-drawer-panel-6"
+          aria-controls="generated-id"
           aria-label="Resize"
           aria-orientation="vertical"
           aria-valuemax="100"
@@ -283,7 +283,7 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
       <div
         class="pf-v5-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-1"
+        id="generated-id"
       />
     </div>
   </div>
@@ -310,7 +310,7 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
       <div
         class="pf-v5-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-3"
+        id="generated-id"
       />
     </div>
   </div>
@@ -336,7 +336,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
       </div>
       <div
         class="pf-v5-c-drawer__panel"
-        id="pf-drawer-panel-0"
+        id="generated-id"
       >
         <div
           class="pf-v5-c-drawer__body"
@@ -410,7 +410,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
       </div>
       <div
         class="pf-v5-c-drawer__panel"
-        id="pf-drawer-panel-4"
+        id="generated-id"
       >
         <div
           class="pf-v5-c-drawer__body"
@@ -484,7 +484,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
       </div>
       <div
         class="pf-v5-c-drawer__panel"
-        id="pf-drawer-panel-2"
+        id="generated-id"
       >
         <div
           class="pf-v5-c-drawer__body"

diff --git a/packages/react-core/src/components/Form/__tests__/FormFieldGroup.test.tsx b/packages/react-core/src/components/Form/__tests__/FormFieldGroup.test.tsx
@@ -7,6 +7,8 @@ import { FormFieldGroupExpandable } from '../FormFieldGroupExpandable';
 import { FormFieldGroupHeader } from '../FormFieldGroupHeader';
 import { Button } from '../../Button';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 test('Check form field group example against snapshot', () => {
   const FieldGroup = (
     <FormFieldGroup

diff --git a/packages/react-core/src/components/Form/__tests__/FormSection.test.tsx b/packages/react-core/src/components/Form/__tests__/FormSection.test.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import { FormSection } from '../FormSection';
 import { render, screen } from '@testing-library/react';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 test('Check form section example against snapshot', () => {
   const Section = <FormSection />;
   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
@@ -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"
         >
           <span

diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormSection.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormSection.test.tsx.snap
@@ -12,13 +12,13 @@ exports[`Check form section example against snapshot 1`] = `
 exports[`Check form section example with title 1`] = `
 <DocumentFragment>
   <section
-    aria-labelledby="pf-form-section-title1"
+    aria-labelledby="generated-id"
     class="pf-v5-c-form__section"
     role="group"
   >
     <h4
       class="pf-v5-c-form__section-title"
-      id="pf-form-section-title1"
+      id="generated-id"
     >
       Title
     </h4>

diff --git 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
@@ -134,12 +134,12 @@ exports[`LabelGroup label group with category 1`] = `
       <span
         aria-hidden="true"
         class="pf-v5-c-label-group__label"
-        id="pf-random-id-1"
+        id="generated-id"
       >
         category
       </span>
       <ul
-        aria-labelledby="pf-random-id-1"
+        aria-labelledby="generated-id"
         class="pf-v5-c-label-group__list"
         role="list"
       >
@@ -177,12 +177,12 @@ exports[`LabelGroup label group with category and tooltip 1`] = `
       <span
         aria-hidden="true"
         class="pf-v5-c-label-group__label"
-        id="pf-random-id-4"
+        id="generated-id"
       >
         A very long category name
       </span>
       <ul
-        aria-labelledby="pf-random-id-4"
+        aria-labelledby="generated-id"
         class="pf-v5-c-label-group__list"
         role="list"
       >
@@ -220,12 +220,12 @@ exports[`LabelGroup label group with closable category 1`] = `
       <span
         aria-hidden="true"
         class="pf-v5-c-label-group__label"
-        id="pf-random-id-2"
+        id="generated-id"
       >
         category
       </span>
       <ul
-        aria-labelledby="pf-random-id-2"
+        aria-labelledby="generated-id"
         class="pf-v5-c-label-group__list"
         role="list"
       >
@@ -254,12 +254,12 @@ exports[`LabelGroup label group with closable category 1`] = `
       <button
         aria-disabled="false"
         aria-label="Close label group"
-        aria-labelledby="remove_group_pf-random-id-2 pf-random-id-2"
+        aria-labelledby="remove_group_generated-id 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="remove_group_pf-random-id-2"
+        id="remove_group_generated-id"
         type="button"
       >
         <svg

diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUpload.test.tsx b/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUpload.test.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { MultipleFileUpload } from '../MultipleFileUpload';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 describe('MultipleFileUpload', () => {
   test('renders with expected class names when not horizontal', () => {
     const { asFragment } = render(<MultipleFileUpload>Foo</MultipleFileUpload>);

diff --git a/.../react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatus.test.tsx b/.../react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatus.test.tsx
@@ -3,6 +3,8 @@ import { render } from '@testing-library/react';
 import { MultipleFileUploadStatus } from '../MultipleFileUploadStatus';
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 describe('MultipleFileUploadStatus', () => {
   test('renders with expected class names', () => {
     const { asFragment } = render(<MultipleFileUploadStatus>Foo</MultipleFileUploadStatus>);

diff --git a/...ponents/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap b/...ponents/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap
@@ -9,10 +9,10 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
-        aria-controls="pf-expandable-section-1-content"
+        aria-controls="generated-id-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
-        id="pf-expandable-section-1-toggle"
+        id="generated-id-toggle"
         type="button"
       >
         <span
@@ -48,9 +48,9 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
         </span>
       </button>
       <div
-        aria-labelledby="pf-expandable-section-1-toggle"
+        aria-labelledby="generated-id-toggle"
         class="pf-v5-c-expandable-section__content"
-        id="pf-expandable-section-1-content"
+        id="generated-id-content"
         role="region"
       >
         <ul
@@ -74,10 +74,10 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
-        aria-controls="pf-expandable-section-3-content"
+        aria-controls="generated-id-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
-        id="pf-expandable-section-3-toggle"
+        id="generated-id-toggle"
         type="button"
       >
         <span
@@ -127,9 +127,9 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
         </span>
       </button>
       <div
-        aria-labelledby="pf-expandable-section-3-toggle"
+        aria-labelledby="generated-id-toggle"
         class="pf-v5-c-expandable-section__content"
-        id="pf-expandable-section-3-content"
+        id="generated-id-content"
         role="region"
       >
         <ul
@@ -153,10 +153,10 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
-        aria-controls="pf-expandable-section-2-content"
+        aria-controls="generated-id-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
-        id="pf-expandable-section-2-toggle"
+        id="generated-id-toggle"
         type="button"
       >
         <span
@@ -194,9 +194,9 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
         </span>
       </button>
       <div
-        aria-labelledby="pf-expandable-section-2-toggle"
+        aria-labelledby="generated-id-toggle"
         class="pf-v5-c-expandable-section__content"
-        id="pf-expandable-section-2-content"
+        id="generated-id-content"
         role="region"
       >
         <ul
@@ -220,10 +220,10 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
-        aria-controls="pf-expandable-section-0-content"
+        aria-controls="generated-id-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
-        id="pf-expandable-section-0-toggle"
+        id="generated-id-toggle"
         type="button"
       >
         <span
@@ -259,9 +259,9 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
         </span>
       </button>
       <div
-        aria-labelledby="pf-expandable-section-0-toggle"
+        aria-labelledby="generated-id-toggle"
         class="pf-v5-c-expandable-section__content"
-        id="pf-expandable-section-0-content"
+        id="generated-id-content"
         role="region"
       >
         <ul

diff --git a/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx b/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx
@@ -11,6 +11,7 @@ import badgeStyles from '@patternfly/react-styles/css/components/Badge/badge';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 
 jest.mock('../../../helpers/OUIA/ouia');
+jest.mock('../../../helpers/GenerateId/GenerateId');
 
 const props = {
   onChange: jest.fn(),