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.

Sign up for GitHub

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

Adding a CONTRIBUTING file with a strategy for implementing tests #774

Merged
merged 2 commits into from
Dec 1, 2023
Merged

Adding a CONTRIBUTING file with a strategy for implementing tests #774

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6eb90a9
Adding a CONTRIBUTING file with a strategy for implementing tests
VictorCLLucas Nov 28, 2023
890651f
Adding examples of valid scenarios for each testing framework
VictorCLLucas Nov 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# Contributing

We welcome all contributions to this project. Please read the following guidelines before submitting a pull request.


### Testing Section

When it comes down to writing tests for storybook components we have two frameworks [Playwright](https://playwright.dev/) and [Jest](https://jestjs.io/).

Playwright tests should be added when you need to test the functionality of your application in a real browser environment. These tests are essential for assessing your application in an actual browser setting. They are ideal for scenarios involving user interactions, DOM testing, and other browser-dependent functionalities. Playwright is particularly effective for end-to-end testing, ensuring the user's overall experience with the application is as intended.

On the other hand, Jest tests are more suitable for unit testing JavaScript or TypeScript code. These tests focus on evaluating individual functions or components in isolation, bypassing the need for a browser. Jest tests are generally quicker and more concentrated, perfect for examining the internal logic of your application's code.
Copy link
Contributor

@mattcorner mattcorner Nov 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

We should maybe expand on this a bit more with some examples. As a UI component library it kind of reads like everything should be a playwright test unless its a plain javascript utility function, but its more subtle than that.

Some examples of valid Jest tests that I can think of:

  • Testing react hooks that do not interact with the dom. e.g. useVehicleSelection
  • Testing components with no / little user interactivity e.g. Copyright
  • Testing component styling e.g. ColorModeToggle

Listing some examples here will hopefully paint a better picture for developers when deciding which testing framework to use. We should include some good playwright case example too. e.g.

Some strong cases for Playwright tests that I can think of:

  • Testing interactions that rely on browser dom functionality such as clientWidth. e.g. TextOverflowTooltip which is untestable in jest.
  • Testing component workflows that rely on a lot of user inteaction e.g. VehicleSelect

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is a great suggestion that did not occur to us. Thanks Matt. I'll add it in.