SX Design: test Storybook via Playwright

Just to make sure it still works after updating Storybook dependencies as it gets broken _very_ often.

.github/workflows/playwright.yml

@@ -6,31 +6,42 @@ on: [push]
 
 jobs:
   build:
+    strategy:
+      matrix:
+        repository:
+          - '@adeira/abacus-kochka'
+          - '@adeira/sx-design'
+        include:
+          - repository: '@adeira/abacus-kochka'
+            source: 'src/abacus-kochka/**'
+          - repository: '@adeira/sx-design'
+            source: 'src/sx-design/**'
+
     runs-on: ubuntu-latest
 
     steps:
       # https://github.com/actions/checkout
       - uses: actions/checkout@v3.0.2
 
       # https://github.com/dorny/paths-filter
-      # TODO: expand as needed
       - uses: dorny/paths-filter@v2.10.2
         id: paths-filter
         with:
           filters: |
-            src:
-              - 'src/abacus-kochka/**'
+            src: ${{ matrix.source }}
 
       # https://github.com/actions/setup-node
       - name: Use Node.js 18.x
+        if: steps.paths-filter.outputs.src == 'true'
         uses: actions/setup-node@v3.1.1
         with:
           node-version: 18.x
           cache: 'yarn'
 
       - name: Install Yarn dependencies
+        if: steps.paths-filter.outputs.src == 'true'
         run: yarn install --immutable
 
-      # We currently don't have any other project using `playwright` so let's keep it simple:
       - name: Run Playwright tests
-        run: yarn workspace @adeira/abacus-kochka playwright test
+        if: steps.paths-filter.outputs.src == 'true'
+        run: yarn workspace ${{ matrix.repository }} playwright test

src/sx-design/package.json

@@ -39,6 +39,7 @@
     "@adeira/sx-jest-snapshot-serializer": "^0.1.0",
     "@babel/core": "^7.17.10",
     "@fbtjs/default-collection-transform": "^1.0.0",
+    "@playwright/test": "^1.21.1",
     "@storybook/addon-a11y": "^6.4.22",
     "@storybook/addon-actions": "^6.4.22",
     "@storybook/addon-essentials": "^6.4.22",
@@ -53,6 +54,7 @@
     "babel-loader": "^8.2.5",
     "babel-plugin-fbt": "^1.0.0",
     "babel-plugin-fbt-runtime": "^1.0.0",
+    "playwright": "^1.21.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

src/sx-design/playwright.config.js

@@ -0,0 +1,28 @@
+// eslint-disable-next-line ft-flow/require-valid-file-annotation,import/no-extraneous-dependencies
+const { devices } = require('@playwright/test');
+
+const config = {
+  testDir: 'tests',
+  testMatch: '**.play.js',
+  forbidOnly: !!process.env.CI,
+  reporter: process.env.CI ? 'github' : 'list',
+  retries: process.env.CI ? 2 : 0,
+  webServer: {
+    command: 'yarn storybook',
+    port: 6006,
+    timeout: 120 * 1000, // milliseconds
+    reuseExistingServer: !process.env.CI,
+  },
+  use: {
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    {
+      name: 'Desktop Chrome',
+      use: devices['Desktop Chrome'],
+    },
+  ],
+};
+
+module.exports = config;

src/sx-design/tests/.eslintrc.js

@@ -0,0 +1,16 @@
+// @flow strict
+
+/* eslint-disable no-unused-vars */
+const OFF = 0;
+const WARN = 1;
+const ERROR = 2;
+/* eslint-enable no-unused-vars */
+
+module.exports = {
+  rules: {
+    // Jest rules incompatible with Playwright:
+    'jest/no-disabled-tests': OFF,
+    'jest/no-standalone-expect': OFF,
+    'jest/valid-title': OFF,
+  },
+};

src/sx-design/tests/README.md

@@ -0,0 +1,3 @@
+```
+yarn workspace @adeira/sx-design playwright test
+```

src/sx-design/tests/ui/homepage.play.js

@@ -0,0 +1,8 @@
+// eslint-disable-next-line ft-flow/require-valid-file-annotation,import/no-extraneous-dependencies
+const { test, expect } = require('@playwright/test');
+
+test('that storybook works', async ({ page, baseURL }) => {
+  // This is here just to make sure that our Storybook works as it gets broken very often.
+  await page.goto(baseURL);
+  await expect(page).toHaveTitle(/^Styleguide \/ Colors - Page ⋅ Storybook$/);
+});

yarn.lock

@@ -430,6 +430,7 @@ __metadata:
     "@babel/core": ^7.17.10
     "@babel/runtime": ^7.17.9
     "@fbtjs/default-collection-transform": ^1.0.0
+    "@playwright/test": ^1.21.1
     "@storybook/addon-a11y": ^6.4.22
     "@storybook/addon-actions": ^6.4.22
     "@storybook/addon-essentials": ^6.4.22
@@ -448,6 +449,7 @@ __metadata:
     fbt: ^1.0.0
     flow-enums-runtime: ^0.0.6
     focus-trap-react: ^8.11.1
+    playwright: ^1.21.1
     prop-types: ^15.8.1
     react: ^17.0.2
     react-blurhash: ^0.1.3