fix(Slider): make key navigation work when swapping position

.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:e2e:portal:ci
+
+      - name: Run Playwright on Eufemia Components
+        run: yarn workspace @dnb/eufemia test:e2e:ci
 
       - name: Store Playwright artifacts
         uses: actions/upload-artifact@v3

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",

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}.e2e.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
 ```
 

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": "yarn playwright test",
+    "test:e2e:ci": "start-server-and-test 'yarn workspace dnb-design-system-portal serve' http://localhost:8000 test:e2e",
+    "test:e2e:watch": "playwright test --ui",
     "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.4.31",
     "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",

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',
+  },
+})

packages/dnb-eufemia/src/components/slider/__tests__/Slider.e2e.spec.ts

@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('Slider', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/uilib/components/slider/demos/?data-visual-test')
+
+    // Check if app is mounted
+    await page.waitForSelector('#dnb-drawer-list__portal', {
+      state: 'attached',
+    })
+  })
+
+  test('click on grid switch should enable the grid', async ({ page }) => {
+    const inputElements = page.locator(
+      '[data-visual-test="slider-multi"] .dnb-slider:nth-child(2) input'
+    )
+
+    await expect(inputElements.nth(1)).toHaveValue('30')
+    await expect(inputElements.nth(2)).toHaveValue('50')
+
+    await inputElements.nth(1).focus()
+
+    // 30 + 25 = 55
+    for (let i = 0; i < 25; i++) {
+      await page.keyboard.press('ArrowRight')
+    }
+
+    await expect(inputElements.nth(2)).toHaveValue('55') // the elements where swapped
+    await expect(inputElements.nth(1)).toHaveValue('50') // therefore, now the first one is at 30
+  })
+})

packages/dnb-eufemia/src/components/slider/hooks/useSliderEvents.tsx

@@ -14,6 +14,7 @@ import { SliderContext } from '../SliderProvider'
 export function useSliderEvents() {
   const {
     isReverse,
+    isMulti,
     emitChange,
     trackRef,
     isVertical,
@@ -120,10 +121,32 @@ export function useSliderEvents() {
     event: React.FormEvent<HTMLInputElement>
   ) => {
     const emitEvent = event as unknown
-    emitChange(
-      emitEvent as MouseEvent,
-      parseFloat(event.currentTarget.value)
-    )
+    const currentValue = parseFloat(event.currentTarget.value)
+    const currentIndex = parseFloat(event.currentTarget.dataset.index)
+
+    emitChange(emitEvent as MouseEvent, currentValue)
+
+    if (isMulti) {
+      const thumbs: NodeListOf<HTMLInputElement> =
+        trackRef.current.querySelectorAll(
+          'input.dnb-slider__button-helper'
+        )
+
+      Array.from(thumbs).some((element, indexA) => {
+        if (indexA !== currentIndex) {
+          const value = parseFloat(element.value)
+          if (
+            (indexA > currentIndex && currentValue >= value) ||
+            (indexA < currentIndex && currentValue <= value)
+          ) {
+            element.focus()
+            return true
+          }
+        }
+
+        return false
+      })
+    }
   }
 
   const onHelperFocusHandler = (

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.4.31
     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"
@@ -28974,9 +28964,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
@@ -28990,7 +28980,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