Merge pull request #365 from ably/update-testing-strategy

[WEB-3840] remove Cypress in favour of Storybook's test-runner

.github/workflows/push.yml

@@ -1,4 +1,4 @@
-name: Run linters
+name: Lint and test
 
 on:
   push:
@@ -10,8 +10,8 @@ on:
       - main
 
 jobs:
-  run-linters:
-    name: Run linters
+  run-linters-and-tests:
+    name: Run linters and tests
     runs-on: ubuntu-latest
     env:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
@@ -23,7 +23,7 @@ jobs:
         with:
           node-version: 20
       - name: Install dependencies
-        run: yarn
+        run: yarn && npx playwright install --with-deps
       - name: Lint
         uses: wearerequired/lint-action@v2
         with:
@@ -35,8 +35,5 @@ jobs:
           prettier_dir: src
           prettier_extensions: js,ts,tsx
           prettier_auto_fix: false
-      # Cypress disabled until tests rewritten to use new SB paths
-      # - name: Cypress
-      #   uses: cypress-io/github-action@v6
-      #   with:
-      #     start: yarn start
+      - name: Run Storybook test-runner
+        run: yarn test

.github/workflows/release.yml

@@ -31,22 +31,16 @@ jobs:
           ./scripts/release.sh "${GITHUB_REF/refs\/tags\//}"
         shell: bash
   deploy-storybook:
-    name: Deploy to Storybook
+    name: Deploy Storybook to GH Pages
     runs-on: ubuntu-latest
     env:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       REGISTRY_TOKEN: ${{ secrets.REGISTRY_TOKEN }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - run: ls -l
       - name: Build
-        shell: bash
-        run: |
-          echo "::group::Build"
-          yarn install
-          yarn build-storybook
-          echo "::endgroup::"
+        run: yarn && yarn build-storybook
       - name: Upload
         uses: actions/[email protected]
         with:

.gitignore

@@ -1,8 +1,6 @@
 .bundle
 .DS_Store
 node_modules
-cypress/screenshots
-cypress/videos
 server_killer.rb
 yarn-error.log
 /dist

.storybook/main.ts

@@ -2,24 +2,20 @@ import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
-
   core: {
     disableTelemetry: true,
   },
-
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
   ],
-
   docs: {},
-
   typescript: {
     reactDocgen: "react-docgen-typescript",
   },

.storybook/test-runner.ts

@@ -0,0 +1,12 @@
+import type { TestRunnerConfig } from "@storybook/test-runner";
+
+const config: TestRunnerConfig = {
+  async postVisit(page, context) {
+    // the #storybook-root element wraps the story. In Storybook 6.x, the selector is #root
+    const elementHandler = await page.$("#storybook-root");
+    const innerHTML = await elementHandler.innerHTML();
+    expect(innerHTML).toMatchSnapshot();
+  },
+};
+
+export default config;

.swcrc → .swc

@@ -1,13 +1,12 @@
 {
   "jsc": {
-    "target": "es2018",
+    "target": "es2021",
     "parser": {
       "syntax": "typescript",
       "tsx": true,
       "decorators": false,
-      "dynamicImport": false
-    }
+      "dynamicImport": false,
+    },
   },
-  "exclude": [".stories.tsx"],
-  "minify": true
+  "minify": true,
 }

CONTRIBUTING.md

@@ -12,12 +12,6 @@ If anything in this guide or in this codebase doesn't make sense to you, please
 
 Please refer to the [README](./README.md#development) for instructions on how to set this up.
 
-## Testing
-
-This repo uses a combination of Jest and Cypress for testing.
-
-Please refer to the [README](./README.md#running-tests) for further details.
-
 ## Contributing
 
 1. Fork the [repo](https://github.com/ably/ably-ui/).

README.md

@@ -289,20 +289,10 @@ This will release the packages and update library and create & push the commit &
 
 ### Running tests
 
-The repo includes [Cypress](https://www.cypress.io/) for snapshot, screenshot, parity and behaviour testing. Cypress runs against the "preview" server (e.g. the same server used for development).
+`ably-ui` uses Storybook's `test-runner`, which on push automatically turns all stories into executable tests, underpinned by Jest and Playright. This means that we don't have to explicitly write tests for stories, though we have the ability to write [https://storybook.js.org/docs/writing-stories/play-function](play functions), which allow us to test more detailed interactions. More information on the capabilities of `test-runner` can be found [https://storybook.js.org/docs/writing-tests/test-runner](here).
 
-**Snapshot testing** takes saves the DOM and compares it between runs - updating of snapshots can be done in the Cypress UI.
+Snapshots are also assessed via `test-runner`. To generate new snapshots, run `yarn test:update-snapshots`.
 
-**Screenshot testing** takes a screenshot of a component and compares it between runs. Diffs are located in `cypress/screenshots`. To update a screenshot, delete it.
+You can run the tests by either running a dev instance of Storybook locally and then running `yarn test`, or by pushing a branch to GitHub.
 
-**Parity testing** checks VW/React components; screenshots are taken of both versions and fail if they are different.
-
-**Behaviour testing** clicks around the DOM and checks for singular elements on the page to be updated.
-
-To run integration tests (using [Cypress](https://www.cypress.io/)), you'll need to have the "preview app" running on port 5000, then run:
-
-```bash
-yarn cy:open
-```
-
-This will open the UI for Cypress, from which you can run the tests. Screenshots are saved in `cypress/screenshots`.
+A related quirk to mention here is that the SWC config has been renamed to `.swc` (away from the default `.swcrc`), as `test-runner` also uses SWC and its config conflicted with ours.