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

dev: Use Storybook for component testing #3571

Merged
merged 22 commits into from
Jan 5, 2024
Merged

dev: Use Storybook for component testing #3571

merged 22 commits into from
Jan 5, 2024

Conversation

mastercactapus
Copy link
Member

Description:
This PR replaces the playwright experimental component testing stuff with Storybook.js

  • Ability to mock GraphQL query/mutations included /w example tests
  • Stories and tests added for the Time component
  • Stories and tests added for the TelTextField component
  • Deleted playwright component tests, hacks, and config
  • Made timeFormat support unix timestamps in addition to ISO and DateTime
  • Fixed an issue we found with make vscode

Start the UI with make storybook
Test components remains make test-components

Screenshots:
image
image

Describe any introduced user-facing changes:
N/A

Describe any introduced API changes:
N/A

@Forfold
Copy link
Contributor

Forfold commented Jan 4, 2024

The Valid TelTextField demo is rendering as invalid. I also can't update any values, which I would expect:

Screenshot 2024-01-04 at 10 42 58 AM

@Forfold
Copy link
Contributor

Forfold commented Jan 4, 2024

Clicking on "Valid Number" from the sidebar produces this error:

Screenshot 2024-01-04 at 10 44 41 AM

and clicking on anything in the sidebar under Time produces this error:

Screenshot 2024-01-04 at 10 45 26 AM

@Forfold
Copy link
Contributor

Forfold commented Jan 4, 2024

If I refresh the page, the screen turns white and the console has the following errors:

Screenshot 2024-01-04 at 10 46 53 AM

Screenshot 2024-01-04 at 10 58 58 AM

@Forfold
Copy link
Contributor

Forfold commented Jan 4, 2024

Running make generate beforehand resolves the above errors ^ Though there is still the issue of the valid TelTextField showing as invalid. yarn may also be required as I got some random crashes related to missing packages.

tony-tvu
tony-tvu previously approved these changes Jan 4, 2024
Copy link
Collaborator

@tony-tvu tony-tvu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

tony-tvu
tony-tvu previously approved these changes Jan 4, 2024
Copy link
Contributor

@Forfold Forfold left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice if we could reduce the time to test- Currently sitting around 1-2 minutes for me. Storybook also takes at least a minute to render the components. Otherwise, looks good.

Screenshot 2024-01-05 at 10 00 56 AM

@tony-tvu tony-tvu merged commit 0b20184 into master Jan 5, 2024
7 checks passed
@tony-tvu tony-tvu deleted the storybook branch January 5, 2024 22:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants