Attributes with unique values are not deterministic

[kalinchernev]

Describe the bug The usage of dates (Date()) makes snapshot testing more difficult.

To Reproduce Steps to reproduce the behavior:

• Install storybook and storyshots addon
• Run yarn test to see aria-controls="collapsible-content-1676553478193" changing values on each run

Expected behavior Either make ids of collapsible elements required or generate unique values in a deterministic way independent from dates. An coming to mind would be to use a canonical value (or a hash, or a slug) of the trigger prop value by default rather than a date.

Screenshots Example errors given by test runner:

FAIL tests/storyshot.spec.ts (5.339 s)
  ● Storyshots › Details › Details

    expect(received).toMatchSnapshot()

    Snapshot name: `Storyshots Details Details 1`

    - Snapshot  - 12
    + Received  + 12

    @@ -1,28 +1,28 @@
      <div>
        <div
          className="Collapsible"
        >
          <span
    -       aria-controls="collapsible-content-1676553478193"
    +       aria-controls="collapsible-content-1676553815982"
            aria-disabled={false}
            aria-expanded={false}
            className="Collapsible__trigger is-closed"
    -       id="collapsible-trigger-1676553478193"
    +       id="collapsible-trigger-1676553815982"
            onClick={[Function]}
            onKeyPress={[Function]}
            role="button"
            style={null}
            tabIndex={null}
          >
            Lorem ipsum dolor sit amet
          </span>
          <div
    -       aria-labelledby="collapsible-trigger-1676553478193"
    +       aria-labelledby="collapsible-trigger-1676553815982"
            className="Collapsible__contentOuter"
            hidden={false}
    -       id="collapsible-content-1676553478193"
    +       id="collapsible-content-1676553815982"
            onTransitionEnd={[Function]}
            role="region"
            style={
              {
                "WebkitTransition": "height 400ms linear",
    @@ -44,28 +44,28 @@
        </div>
        <div
          className="Collapsible"
        >
          <span
    -       aria-controls="collapsible-content-1676553478193"
    +       aria-controls="collapsible-content-1676553815982"
            aria-disabled={false}
            aria-expanded={false}
            className="Collapsible__trigger is-closed"
    -       id="collapsible-trigger-1676553478193"
    +       id="collapsible-trigger-1676553815982"
            onClick={[Function]}
            onKeyPress={[Function]}
            role="button"
            style={null}
            tabIndex={null}
          >
            Lorem ipsum dolor sit amet
          </span>
          <div
    -       aria-labelledby="collapsible-trigger-1676553478193"
    +       aria-labelledby="collapsible-trigger-1676553815982"
            className="Collapsible__contentOuter"
            hidden={false}
    -       id="collapsible-content-1676553478193"
    +       id="collapsible-content-1676553815982"
            onTransitionEnd={[Function]}
            role="region"
            style={
              {
                "WebkitTransition": "height 400ms linear",
    @@ -87,28 +87,28 @@
        </div>
        <div
          className="Collapsible"
        >
          <span
    -       aria-controls="collapsible-content-1676553478193"
    +       aria-controls="collapsible-content-1676553815982"
            aria-disabled={true}
            aria-expanded={false}
            className="Collapsible__trigger is-closed is-disabled"
    -       id="collapsible-trigger-1676553478193"
    +       id="collapsible-trigger-1676553815982"
            onClick={[Function]}
            onKeyPress={[Function]}
            role="button"
            style={null}
            tabIndex={null}
          >
            Lorem ipsum dolor sit amet
          </span>
          <div
    -       aria-labelledby="collapsible-trigger-1676553478193"
    +       aria-labelledby="collapsible-trigger-1676553815982"
            className="Collapsible__contentOuter"
            hidden={false}
    -       id="collapsible-content-1676553478193"
    +       id="collapsible-content-1676553815982"
            onTransitionEnd={[Function]}
            role="region"
            style={
              {
                "WebkitTransition": "height 400ms linear",

      at match (node_modules/@storybook/addon-storyshots/dist/ts3.9/test-bodies.js:23:32)
      at node_modules/@storybook/addon-storyshots/dist/ts3.9/test-bodies.js:32:16
      at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/ts3.9/api/snapshotsTestsTemplate.js:29:24)

Additional context The issue is not major, although the usage of dates for making HTML attribute values unique is not conventional for use cases that are not time sensitive.

[treymcmeans]

Possible workaround for now is to mock the date for your test runner. Jest shown below:

jest.useFakeTimers().setSystemTime(new Date('2020-01-01'));

Agreed it would be best to not use Date() to generate the IDs