Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Chromatic configurations #305

Closed
M27Mangan opened this issue Feb 8, 2024 · 3 comments · Fixed by #325
Closed

Update Chromatic configurations #305

M27Mangan opened this issue Feb 8, 2024 · 3 comments · Fixed by #325
Labels
Size: 10 A percentage of a sprint. 7 hours.

Comments

@M27Mangan
Copy link

M27Mangan commented Feb 8, 2024

Ensure that Chromatic tests are using consistent data provided by the Faker library. Chromatic should be re-reviewed as well

Referenced from:

It's nice to have all the reviews up to date! I noticed that some changes are being flagged because we are using randomized test data, it might be useful to modify how the Stories are run for chromatic, so that randomized doesn't get interpreted in Chormatic as a change in the UI.
For example in this review-
https://www.chromatic.com/review?appId=646f68aa9beb01b35c599acd&number=296&type=linked&view=changes

In the files table, we randomize File Access and ingest state
Image

And in multiple stories, we have random faker data, for example
Image

We could use a faker.seed() to have reproducible results (https://fakerjs.dev/guide/usage.html#reproducible-results) and have conditional logic to only set the seed for a chromatic run https://www.chromatic.com/docs/ischromatic/#with-an-environment-variable.
It could be a bit involved to set the seed correctly and have it visible to all the stories, so it might be worth saving that as a separate ticket and keep doing a visual review for now. Would be good to discuss with the team.

Originally posted by @ekraffmiller in #270 (comment)

@M27Mangan M27Mangan added the Size: 3 A percentage of a sprint. 2.1 hours. label Feb 8, 2024
@M27Mangan
Copy link
Author

Related to: #270

@M27Mangan
Copy link
Author

Adding new requirement for this ticket per Ellens investigation on load times & rendering issues:

@M27Mangan there is one more thing I noticed...sometimes the snapshot of a Story is taken before the component finishes loading, for example https://www.chromatic.com/review?appId=646f68aa9beb01b35c599acd&number=296&type=linked&view=components&groupPrefix=Sections%2FDataset+Page

Image

Can we add this to #305? I think it can be solved by adding a delay https://www.chromatic.com/docs/delay/. Then I can close this ticket.

@M27Mangan M27Mangan changed the title Add Faker seed to Chromatic tests Update Chromatic configurations Feb 15, 2024
@M27Mangan M27Mangan added Size: 10 A percentage of a sprint. 7 hours. and removed Size: 3 A percentage of a sprint. 2.1 hours. labels Feb 15, 2024
@M27Mangan
Copy link
Author

The following functionalities should be added for Chromatic to function properly when being used with Dataverse

  • Add delay to configuration for a buffer before taking snapshot of page. Link to comment
  • Add seeded Faker constant to Chromatic in order to repeatedly test uniform data and decrease false flagging of non-changes.

To reflect changes in this issue the size was updated from 3 to 10.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Size: 10 A percentage of a sprint. 7 hours.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant