fix(GenerateId): add randomness to id generator to prevent id collisions (#10178)

* fix(GenerateId): add randomness to id generator to prevent id collisions

* chore(docs): Correct prop description

Author: wise-king-sullyman

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', () => {

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">

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"
         />

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 },

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>

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();

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`] = `
   <div
     class="pf-v5-c-drawer__panel ''"
     hidden=""
-    id="pf-drawer-panel-0"
+    id="generated-id"
   />
 </DocumentFragment>
 `;

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"

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

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);