From 4a898c488cba2ff08fa216c4370d78bca1547c93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Zl=C3=A1mal?= Date: Tue, 10 May 2022 18:59:28 -0500 Subject: [PATCH] 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 | 18 +++++++++++----- src/sx-design/package.json | 2 ++ src/sx-design/playwright.config.js | 28 +++++++++++++++++++++++++ src/sx-design/tests/.eslintrc.js | 16 ++++++++++++++ src/sx-design/tests/README.md | 3 +++ src/sx-design/tests/ui/homepage.play.js | 8 +++++++ yarn.lock | 2 ++ 7 files changed, 72 insertions(+), 5 deletions(-) create mode 100644 src/sx-design/playwright.config.js create mode 100644 src/sx-design/tests/.eslintrc.js create mode 100644 src/sx-design/tests/README.md create mode 100644 src/sx-design/tests/ui/homepage.play.js diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 902c4a9d0b..be56a9e379 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -6,6 +6,17 @@ 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: @@ -13,13 +24,11 @@ jobs: - 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 @@ -31,6 +40,5 @@ jobs: - name: Install Yarn dependencies 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 + run: yarn workspace ${{ matrix.repository }} playwright test diff --git a/src/sx-design/package.json b/src/sx-design/package.json index 329fe88230..5d786c7d2c 100644 --- a/src/sx-design/package.json +++ b/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" }, diff --git a/src/sx-design/playwright.config.js b/src/sx-design/playwright.config.js new file mode 100644 index 0000000000..d340f1d38b --- /dev/null +++ b/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; diff --git a/src/sx-design/tests/.eslintrc.js b/src/sx-design/tests/.eslintrc.js new file mode 100644 index 0000000000..d503ef90e4 --- /dev/null +++ b/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, + }, +}; diff --git a/src/sx-design/tests/README.md b/src/sx-design/tests/README.md new file mode 100644 index 0000000000..0cce477a9e --- /dev/null +++ b/src/sx-design/tests/README.md @@ -0,0 +1,3 @@ +``` +yarn workspace @adeira/sx-design playwright test +``` diff --git a/src/sx-design/tests/ui/homepage.play.js b/src/sx-design/tests/ui/homepage.play.js new file mode 100644 index 0000000000..21dd8acc0b --- /dev/null +++ b/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$/); +}); diff --git a/yarn.lock b/yarn.lock index 9b6e237ca1..5219329cfa 100644 --- a/yarn.lock +++ b/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