From a7f09464de253bc3a3c9e0584aacc655cf7e49f7 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. --- .../continuous-integration-javascript.yml | 3 +- .../workflows/continuous-integration-rust.yml | 4 ++- .github/workflows/playwright.yml | 33 +++++++++++++++---- src/sx-design/package.json | 2 ++ src/sx-design/playwright.config.js | 29 ++++++++++++++++ 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 | 6 ++-- 9 files changed, 94 insertions(+), 10 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/continuous-integration-javascript.yml b/.github/workflows/continuous-integration-javascript.yml index 96beb3e165..1d7f348b27 100644 --- a/.github/workflows/continuous-integration-javascript.yml +++ b/.github/workflows/continuous-integration-javascript.yml @@ -8,7 +8,8 @@ env: BABEL_DISABLE_CACHE: '1' jobs: - build: + javascript-test: + name: JavaScript test runs-on: ubuntu-latest strategy: diff --git a/.github/workflows/continuous-integration-rust.yml b/.github/workflows/continuous-integration-rust.yml index ca86870950..ca1f0bd83d 100644 --- a/.github/workflows/continuous-integration-rust.yml +++ b/.github/workflows/continuous-integration-rust.yml @@ -3,7 +3,9 @@ name: Continuous Integration (Rust) on: [push] jobs: - build-all-targets: + rust-test: + name: Rust test + strategy: fail-fast: true matrix: diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index f53b586247..42c3cb92a5 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -5,7 +5,19 @@ name: Playwright on: [push] jobs: - build: + playwright-test: + name: Playwright test + 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,24 +25,33 @@ 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 + if: steps.paths-filter.outputs.src == 'true' uses: actions/setup-node@v3.2.0 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: Install Playwright + if: steps.paths-filter.outputs.src == 'true' + run: yarn workspace ${{ matrix.repository }} playwright install --with-deps + - 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 + env: + # See: https://github.com/storybookjs/storybook/issues/16555 + NODE_OPTIONS: --openssl-legacy-provider + + # TODO: upload Playwright artifacts, see: https://playwright.dev/docs/next/ci#github-actions diff --git a/src/sx-design/package.json b/src/sx-design/package.json index 3fb3bf2dbb..d0348c8571 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.18.0", "@fbtjs/default-collection-transform": "^1.0.0", + "@playwright/test": "^1.21.1", "@storybook/addon-a11y": "^6.5.3", "@storybook/addon-actions": "^6.5.3", "@storybook/addon-essentials": "^6.5.3", @@ -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..b622bea8f0 --- /dev/null +++ b/src/sx-design/playwright.config.js @@ -0,0 +1,29 @@ +// eslint-disable-next-line ft-flow/require-valid-file-annotation,import/no-extraneous-dependencies +const { devices } = require('@playwright/test'); + +const config = { + timeout: 60000, + 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 --quiet', + 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 5419bbc4cc..47b9149501 100644 --- a/yarn.lock +++ b/yarn.lock @@ -430,6 +430,7 @@ __metadata: "@babel/core": ^7.18.0 "@babel/runtime": ^7.18.0 "@fbtjs/default-collection-transform": ^1.0.0 + "@playwright/test": ^1.21.1 "@storybook/addon-a11y": ^6.5.3 "@storybook/addon-actions": ^6.5.3 "@storybook/addon-essentials": ^6.5.3 @@ -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 @@ -3052,7 +3054,7 @@ __metadata: languageName: node linkType: hard -"@playwright/test@npm:^1.22.1": +"@playwright/test@npm:^1.21.1, @playwright/test@npm:^1.22.1": version: 1.22.1 resolution: "@playwright/test@npm:1.22.1" dependencies: @@ -15849,7 +15851,7 @@ __metadata: languageName: node linkType: hard -"playwright@npm:^1.22.1": +"playwright@npm:^1.21.1, playwright@npm:^1.22.1": version: 1.22.1 resolution: "playwright@npm:1.22.1" dependencies: