IQSS / dataverse-frontend

An upcoming and modernized UI for Dataverse

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Update Chromatic configurations

M27Mangan opened this issue · comments

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)

Related to: #270

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.

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.