Add e2e setup for Eufemia

dnbexperience · Oct 4, 2023 · 4cc5ea2 · 4cc5ea2
1 parent 55e5804
commit 4cc5ea2
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 28 deletions.
diff --git 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
@@ -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/...design-system-portal/src/docs/contribute/getting-started/make-and-run-tests.mdx b/...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
@@ -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
@@ -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
@@ -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