[passion week] Interaction tests with storybook's play function (#2172)

* Add storybook play function for autocomplete

* Add github workflow

* Must run on pull-request and push to main

* Package.lock revert

* update workflow

* configure static directories

* Build storybooks correctly

* A more complete autocomplete test

* Fix up packge lock?

* Fix up packge lock?

* Add some documentation

* Fix up autocomplete tests by adding data-testid

.github/workflows/storybook-tests.yml

@@ -0,0 +1,25 @@
+name: 'Storybook Tests'
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+      - name: Install dependencies
+        run: npm i
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build Storybook
+        run: npm run build:storybook:visual-testing --quiet
+      - name: Serve Storybook and run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --silent" \
+            "npx wait-on tcp:6006 && npm run test:storybook"

.storybook/main.js

@@ -3,6 +3,7 @@ module.exports = {
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-links',
+    '@storybook/addon-interactions',
     {name: '@storybook/addon-essentials', options: {backgrounds: false}},
     'storybook-addon-performance/register',
     {name: 'storybook-addon-turbo-build', options: {optimizationLevel: 2}},
@@ -13,5 +14,8 @@ module.exports = {
   babel: options => {
     options.plugins.push(['open-source', {editor: process.env.NODE_ENV === 'production' ? 'github' : 'vscode'}])
     return options
+  },
+  features: {
+    interactionsDebugger: true
   }
 }

contributor-docs/storybook-tests.md

@@ -0,0 +1,13 @@
+Storybook tests utilize the storybook feature called [Play functions](https://storybook.js.org/docs/react/writing-stories/play-function).
+
+### Writing a new play function.
+
+For every storybook, we can write a play function which gets executed after the story renders. By combining jest and testing-library API, we can effectively write something like an integration tests. Here, we will call them interactive tests.
+
+### Debugging the play function
+
+The new addon for [storybook interactions](https://storybook.js.org/addons/@storybook/addon-interactions) allows you to debug the play function step by step. We can step back and forth or replay the interactions too.
+
+### On local CI
+
+`npm run test:storybook` will do a quick pass of all storybooks and inform of any breaking tests.