Skip to content

Commit

Permalink
Add info on prior work
Browse files Browse the repository at this point in the history
  • Loading branch information
pksjce committed Aug 18, 2022
1 parent b8dfc7d commit b9ca708
Showing 1 changed file with 11 additions and 1 deletion.
12 changes: 11 additions & 1 deletion contributor-docs/adrs/adr-009-interaction-tests.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,19 @@ Unofficially we test more complex interactive scenarios using our storybooks set

2. Debugging complex jest tests - There is no visual aspect to jest tests. Mostly everything is CLI based. This makes it hard to debug broken tests. Visibility into these tests is also low for people who want to enhance them.

## Prior work and Alternatives

Before settling on this solution, we experimented with a couple of different alternatives.

1. Cypress - Writing tests using cypress e2e testing infrastructure, on the surface is pretty straightforward. Easy debugging and CI support come along with it. However, we found that cypress tends to create flaky tests because of how often the wait function needs to be used. Cypress is also not multi browser friendly. So we decided to try Playwright.
2. Playwright - This is perhaps the best way for e2e tests in the industry right now. Other github products already use it. It ticks all of the boxes that cypress lacks in.

However, we do not yet have a single e2e environment to run these tests. We'd have to create a kitchen sink app and write tests for it. Or we'd need to run these tests on storybook. The latter is a pretty common but slightly heavy setup that burdens our existing workflow.
After some peer recommendations, we found Storybook play functions to be a good middle ground. These tests tack on nicely to existing infrastructure and give us a taste of integration testing. We can assess the usage and utility of these tests before committing to Playwright in the future. As primer-react and its usage matures, we can upgrade our testing chops too.

## Decisions

Going forward, we can use [storybook's play functions](https://storybook.js.org/docs/react/writing-stories/play-function) to write interactive tests for our components. Here's a document that describes h[ow to add and run these tests](../storybook-tests.md).
Going forward, we can use [storybook's play functions](https://storybook.js.org/docs/react/writing-stories/play-function) to write interaction tests for our components. Here's a document that describes [how to add and run these tests](../storybook-tests.md).
Guidelines to make this easier -

1. Create a new storybook file for your components and call them "interactions". Inside these files, we can import the stories from "examples" or "fixtures" and tack on play functions to them. This will create duplicate stories but with the added benefit of the tests appearing in the interactions add-on tab. This tab will let you step through your tests step by step, increasing visibility and debuggability.
Expand Down

0 comments on commit b9ca708

Please sign in to comment.