From 4cc5ea202c03be8bc7c043ba0a609e7f4e1597f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Wed, 4 Oct 2023 17:13:23 +0200 Subject: [PATCH] Add e2e setup for Eufemia --- .github/workflows/e2e.yml | 7 +++-- .../dnb-design-system-portal/package.json | 10 +++---- .../getting-started/make-and-run-tests.mdx | 30 +++++++++++++++++-- packages/dnb-eufemia/package.json | 6 +++- packages/dnb-eufemia/playwright.config.ts | 17 +++++++++++ yarn.lock | 24 +++++---------- 6 files changed, 66 insertions(+), 28 deletions(-) create mode 100644 packages/dnb-eufemia/playwright.config.ts diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index a4032aa563c..da76eef76aa 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -190,8 +190,11 @@ jobs: - name: Build portal run: yarn workspace dnb-design-system-portal build - - name: Run Playwright - run: yarn workspace dnb-design-system-portal test:e2e:ci + - name: Run Playwright on Portal + run: yarn workspace dnb-design-system-portal test:portal:e2e:ci + + - name: Run Playwright on Eufemia Components + run: yarn workspace @dnb/eufemia test:e2e:ci - name: Store Playwright artifacts uses: actions/upload-artifact@v3 diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json index 6bbe38b1fa5..5325011691d 100644 --- a/packages/dnb-design-system-portal/package.json +++ b/packages/dnb-design-system-portal/package.json @@ -29,11 +29,11 @@ "start": "cross-env NODE_OPTIONS=--max-old-space-size=8192 gatsby develop", "test": "jest", "test:ci": "jest --ci --passWithNoTests", - "test:e2e": "yarn playwright test", - "test:e2e:ci": "start-server-and-test serve 8000 test:e2e", - "test:e2e:watch": "playwright test --ui", + "test:e2e:portal": "yarn playwright test", + "test:e2e:portal:ci": "start-server-and-test serve http://localhost:8000 test:e2e:portal", + "test:e2e:portal:watch": "playwright test --ui", "test:screenshots": "yarn workspace @dnb/eufemia test:screenshots", - "test:screenshots:ci": "start-server-and-test serve 8000 'yarn workspace @dnb/eufemia test:screenshots:ci'", + "test:screenshots:ci": "start-server-and-test serve http://localhost:8000 'yarn workspace @dnb/eufemia test:screenshots:ci'", "test:staged": "jest --bail --findRelatedTests ", "test:types": "tsc --noEmit", "test:types:watch": "tsc --noEmit --watch", @@ -113,7 +113,7 @@ "remark-gfm": "1.0.0", "repo-utils": "workspace:*", "sass": "1.43.4", - "start-server-and-test": "1.15.4", + "start-server-and-test": "2.0.1", "storybook-utils": "workspace:*", "stylelint": "15.9.0", "stylelint-config-recommended": "12.0.0", diff --git a/packages/dnb-design-system-portal/src/docs/contribute/getting-started/make-and-run-tests.mdx b/packages/dnb-design-system-portal/src/docs/contribute/getting-started/make-and-run-tests.mdx index e6c407b84b6..c68eca998a6 100644 --- a/packages/dnb-design-system-portal/src/docs/contribute/getting-started/make-and-run-tests.mdx +++ b/packages/dnb-design-system-portal/src/docs/contribute/getting-started/make-and-run-tests.mdx @@ -46,22 +46,46 @@ yarn test:update yarn test:update breadcrumb avatar ``` -3. Run the visual test against the portal: +Jest integration tests uses this naming convention: `/__tests__/{ComponentName}.test.tsx` + +3. Run visual and end-to-end test: **NB:** Make sure you have the portal running locally on port 8000. +**Visual tests:** + ```bash # 1. First start the portal yarn start -# 2. Then run all screenshot tests including 'breadcrumb' or 'avatar' +# 2. Then run screenshot tests for e.g. 'breadcrumb' or 'avatar' yarn test:screenshots breadcrumb avatar + +# You can also start it in watch mode +yarn test:screenshots:watch breadcrumb avatar ``` +Visual tests uses this naming convention: `/__tests__/{ComponentName}.spec.ts` + +**Playwright end-to-end tests:** + +```bash +# 1. First start the portal +yarn start + +# 2. Then run Playwright tests including 'Slider' or 'Button' +yarn test:e2e /Slider\|Button/ + +# You can also start it in watch mode +yarn test:e2e:watch /Slider\|Button/ +``` + +Playwright uses this naming convention: `/__tests__/{ComponentName}.screenshot.test.ts` + 4. Update eventually new or valid visual PNG snapshots: ```bash -# Update all screenshot tests including 'breadcrumb' +# Update screenshot tests including 'breadcrumb' yarn test:screenshots:update breadcrumb ``` diff --git a/packages/dnb-eufemia/package.json b/packages/dnb-eufemia/package.json index 7d0413af229..b34883cfd5c 100644 --- a/packages/dnb-eufemia/package.json +++ b/packages/dnb-eufemia/package.json @@ -81,6 +81,9 @@ "test": "yarn jest", "test:auto-generated-types": "yarn jest ./postTypeGeneration.test.ts --ci --testPathIgnorePatterns=[]", "test:ci": "yarn jest --ci", + "test:e2e:watch": "playwright test --ui", + "test:e2e": "yarn playwright test", + "test:e2e:ci": "start-server-and-test 'yarn workspace dnb-design-system-portal serve' http://localhost:8000 test:e2e", "test:postbuild": "yarn jest ./postbuild.test.ts --ci --testPathIgnorePatterns=[]", "test:screenshots": "yarn jest --config=./jest.config.screenshots.js --maxWorkers=1 --detectOpenHandles --testPathPattern ", "test:screenshots:ci": "yarn jest --config=./jest.config.screenshots.js --ci --bail --maxWorkers=1", @@ -143,6 +146,7 @@ "@babel/traverse": "7.22.5", "@emotion/react": "11.11.0", "@emotion/styled": "11.11.0", + "@playwright/test": "1.38.1", "@rollup/plugin-babel": "6.0.3", "@rollup/plugin-commonjs": "24.0.1", "@rollup/plugin-json": "6.0.0", @@ -228,7 +232,6 @@ "opentype.js": "1.3.4", "ora": "5.4.1", "packpath": "0.1.0", - "playwright-firefox": "1.38.1", "postcss": "8.3.11", "postcss-calc": "8.0.0", "postcss-preset-env": "6.7.0", @@ -248,6 +251,7 @@ "sass-loader": "13.2.0", "semantic-release": "20.1.0", "simple-git": "3.16.0", + "start-server-and-test": "2.0.1", "storybook": "7.0.21", "storybook-utils": "workspace:*", "style-loader": "3.3.1", diff --git a/packages/dnb-eufemia/playwright.config.ts b/packages/dnb-eufemia/playwright.config.ts new file mode 100644 index 00000000000..3f1d7004c47 --- /dev/null +++ b/packages/dnb-eufemia/playwright.config.ts @@ -0,0 +1,17 @@ +import { defineConfig } from '@playwright/test' + +export default defineConfig({ + timeout: 30000, + globalTimeout: 600000, + reporter: 'list', + testDir: './src/', + testMatch: '*__tests__/*.spec.ts', + + use: { + // Base URL to use in actions like `await page.goto('/')`. + baseURL: 'http://localhost:8000', + + // Name of the browser that runs tests. For example `chromium`, `firefox`, `webkit`. + browserName: 'firefox', + }, +}) diff --git a/yarn.lock b/yarn.lock index 87a31cc1f31..e304ffa326e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2572,6 +2572,7 @@ __metadata: "@babel/traverse": 7.22.5 "@emotion/react": 11.11.0 "@emotion/styled": 11.11.0 + "@playwright/test": 1.38.1 "@rollup/plugin-babel": 6.0.3 "@rollup/plugin-commonjs": 24.0.1 "@rollup/plugin-json": 6.0.0 @@ -2665,7 +2666,6 @@ __metadata: opentype.js: 1.3.4 ora: 5.4.1 packpath: 0.1.0 - playwright-firefox: 1.38.1 postcss: 8.3.11 postcss-calc: 8.0.0 postcss-preset-env: 6.7.0 @@ -2685,6 +2685,7 @@ __metadata: sass-loader: 13.2.0 semantic-release: 20.1.0 simple-git: 3.16.0 + start-server-and-test: 2.0.1 storybook: 7.0.21 storybook-utils: "workspace:*" style-loader: 3.3.1 @@ -12641,7 +12642,7 @@ __metadata: remark-gfm: 1.0.0 repo-utils: "workspace:*" sass: 1.43.4 - start-server-and-test: 1.15.4 + start-server-and-test: 2.0.1 storybook-utils: "workspace:*" stylelint: 15.9.0 stylelint-config-recommended: 12.0.0 @@ -24985,17 +24986,6 @@ __metadata: languageName: node linkType: hard -"playwright-firefox@npm:1.38.1": - version: 1.38.1 - resolution: "playwright-firefox@npm:1.38.1" - dependencies: - playwright-core: 1.38.1 - bin: - playwright: cli.js - checksum: 43574c7f5d326f4c3a844d2896cc2bd21984e06976ec15342cef89838a08e2930f55b8ce3235ac91099578385ebe97313e41719597e59ef5c5be8fa8576e0f1d - languageName: node - linkType: hard - "playwright@npm:1.38.1": version: 1.38.1 resolution: "playwright@npm:1.38.1" @@ -28981,9 +28971,9 @@ __metadata: languageName: node linkType: hard -"start-server-and-test@npm:1.15.4": - version: 1.15.4 - resolution: "start-server-and-test@npm:1.15.4" +"start-server-and-test@npm:2.0.1": + version: 2.0.1 + resolution: "start-server-and-test@npm:2.0.1" dependencies: arg: ^5.0.2 bluebird: 3.7.2 @@ -28997,7 +28987,7 @@ __metadata: server-test: src/bin/start.js start-server-and-test: src/bin/start.js start-test: src/bin/start.js - checksum: 0df9a4710ea45ddb1a9f719e0865faa8e26a973beff693dfe244ae2d914bfc6eed4d2db8529cdcad3d53658c4655356e5aca3520485a3ef4d9d9f320956b0e7d + checksum: d423e0950815d29180177c6c53d6fddcb13b64ca69ea9735b82db264ad57229f9bc9ceb5fd5623f23331dad2d5fa5a895988e84b77e1a0e37797803bcca8f7d2 languageName: node linkType: hard