Attributes with unique values are not deterministic
kalinchernev opened this issue · comments
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 seearia-controls="collapsible-content-1676553478193"
changing values on each run
Expected behavior
Either make id
s 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.
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