Generate stable IDs

[matsprea]

🚀 Feature Proposal

I'd like to have stable generated IDs instead of completely different at each execution.

Motivation

As a developer I want to control these IDs and be able to use snapshots in automation to check their values. At the moment I have to mock the IDs because the ones generated by uuid are changing at every execution.

[lychyi]

@matsprea Thanks for the issue.

Can you add a bit more context or a code block? I'm curious if mocking uuid causing another downstream issue for you? In the past, that's how we recommend that people do this for stable snapshots.

Also, which components are you specifically talking about? Some components have a manual id override like FormField. Others are ids generated as part of the component itself and they're not overridable by design.

We're not closed to the idea entirely but some more context about the pain point would help us a ton!

[matsprea]

My specific issue is with the popup component that is generating an id for the aria-labelledby to reference the tittle of the popup and every time we run the automation, the id changes.

`NotificationsPopup > › NotificationsPopup > › snapshot with open set to true

expect(received).toMatchSnapshot()

Snapshot name: `NotificationsPopup >  NotificationsPopup > snapshot with open set to true 1`

- Snapshot
+ Received

@@ -536,11 +536,11 @@
  
  <div
    class="emotion-20"
  >
    <div
-     aria-labelledby="0f7757d3-5286-459e-9c98-28de998ca51e"
+     aria-labelledby="58ae28cd-88d6-4158-996a-038fa8be04c7"
      aria-modal="true"
      class="emotion-19"
      role="dialog"
      tabindex="-1"
    >
@@ -580,11 +580,11 @@
      <div
        class="emotion-18"
      >
        <h3
          class="emotion-3"
-         id="0f7757d3-5286-459e-9c98-28de998ca51e"
+         id="58ae28cd-88d6-4158-996a-038fa8be04c7"
        >
          Mentions (1)
        </h3>
        <div
          class="emotion-17"

  52 | export const takeSnapshot = (component, state) => {
  53 |   const { container } = getRenderedResult(component, state);
> 54 |   expect(getTarget(container)).toMatchSnapshot();
     |                                ^
  55 | };
  56 | 
  57 | export const takeTableElementSnapshot = (component, state) => {

  at toMatchSnapshot (src/__tests__/testUtils.jsx:54:32)
  at Object.<anonymous> (src/components/common/header/notifications/popup/__tests__/NotificationsPopup.test.jsx:20:7)`

As a workaround we are mocking the Id in the test

jest.mock('uuid/v4', () => jest.fn(() => 'theIdToTestWith'));

but we would like to have it generated in a predictable/stable way or control how it's generated.

[NicholasBoll]

Thank you for creating this issue! I'd like to add a few notes to guide how we can improve this.

1. Not all IDs can be overridden through props since there are cases where ids are used internally by components for ARIA attributes
2. Our use of uuid often creates invalid IDREFs since uuid can produce values that start with a number
3. uuid produces very long IDs that take extra bytes and are unnecessary

My suggestion is we create a utility function that will go into @workday/canvas-kit-react-common that produces valid IDREFs for use in all our components. We should have a mechanism for stable IDREF production for testing purposes (likely a prefix with an incrementing suffix similar to stable Emotion CSS class names). Generating the same string for all IDREFs is not an option as this may break valid queries like those use in React Testing Library. The utility function should have another function that should be used in global test configuration files to reset this increment for use in a beforeEach of said global test configuration. This should be documented within the common package so that we can point to it when needed.

[matsprea]

Thanks @NicholasBoll , that will be awesome!