Skip to content

Commit b9ca708

Browse files
committed
Add info on prior work
1 parent b8dfc7d commit b9ca708

File tree

1 file changed

+11
-1
lines changed

1 file changed

+11
-1
lines changed

contributor-docs/adrs/adr-009-interaction-tests.md

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,19 @@ Unofficially we test more complex interactive scenarios using our storybooks set
1313

1414
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.
1515

16+
## Prior work and Alternatives
17+
18+
Before settling on this solution, we experimented with a couple of different alternatives.
19+
20+
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.
21+
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.
22+
23+
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.
24+
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.
25+
1626
## Decisions
1727

18-
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).
28+
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).
1929
Guidelines to make this easier -
2030

2131
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.

0 commit comments

Comments
 (0)