diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index c83e60b854e..36942d70e44 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -35,90 +35,8 @@ env: RUN_POST_BUILD: ${{ startsWith(github.ref, 'refs/heads/main') || startsWith(github.ref, 'refs/heads/v') }} jobs: - visual-test: - name: Run visual e2e-tests - - runs-on: macos-15 - - timeout-minutes: 40 - - steps: - - name: Git checkout - uses: actions/checkout@v4 - with: - persist-credentials: false - - - name: Use Node.js - uses: actions/setup-node@v4 - with: - node-version-file: 'package.json' - - - name: Use yarn cache - uses: actions/cache@v4 - id: yarn-cache - with: - path: ./.yarn/cache - key: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-deps-${{ hashFiles('**/yarn.lock') }} - restore-keys: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-deps- - - - name: Install dependencies - run: yarn install --immutable - - - name: Use Playwright cache - uses: actions/cache@v4 - id: playwright-cache - with: - path: | - ~/Library/Caches/ms-playwright - ~/.cache/ms-playwright - %USERPROFILE%\AppData\Local\ms-playwright - key: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-playwright-${{ hashFiles('**/yarn.lock') }} - - run: yarn workspace @dnb/eufemia playwright install --with-deps firefox - if: steps.playwright-cache.outputs.cache-hit != 'true' - - run: yarn workspace @dnb/eufemia playwright install-deps firefox - if: steps.playwright-cache.outputs.cache-hit == 'true' - - - name: Prebuild Library - if: env.RUN_POST_BUILD == 'true' - run: yarn workspace @dnb/eufemia prebuild:ci - - - name: Postbuild Library - if: env.RUN_POST_BUILD == 'true' - run: yarn workspace @dnb/eufemia postbuild:ci - - - name: Build portal - run: yarn workspace dnb-design-system-portal build:visual-test - - - name: Run visual tests - run: yarn workspace dnb-design-system-portal test:screenshots:ci - - - uses: actions/upload-artifact@v4 - if: failure() - with: - name: visual-test-artifact - path: | - ./packages/dnb-eufemia/src/**/*.snap-diff.png - ./packages/dnb-eufemia/jest-visual-diff-report/* - - - name: Run visual tests info - if: failure() - run: echo '\n\nšŸ‘‰ Download the diff files as a ZIP file. \nIt is called "visual-test-artifact" and you find it in the test "Summary" under "Artifacts".\n\n\n' - - - name: Slack - uses: 8398a7/action-slack@v3 - with: - channel: '#eufemia-dev' - status: ${{ job.status }} - fields: author,ref,workflow,job,took - job_name: Run visual e2e-tests - github_base_url: https://github.com/ - env: - SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }} - if: ${{ always() && !github.event.pull_request.head.repo.fork }} - continue-on-error: true - - portal-test: - name: Run portal e2e-tests + e2e: + name: Run e2e tests runs-on: ubuntu-latest @@ -187,7 +105,7 @@ jobs: channel: '#eufemia-dev' status: ${{ job.status }} fields: author,ref,workflow,job,took - job_name: Run portal e2e-tests + job_name: Run e2e tests github_base_url: https://github.com/ env: SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }} diff --git a/.github/workflows/visual-regression.yml b/.github/workflows/visual-regression.yml new file mode 100644 index 00000000000..7a281886b0a --- /dev/null +++ b/.github/workflows/visual-regression.yml @@ -0,0 +1,118 @@ +name: visual-regression + +on: + push: + branches: + - '**' + - '!**--skip-ci' + - '!**--visual-reports' + - '!wip/**' + - '!experiments/**' + - '!release' + - '!portal' + - '!beta' + - '!alpha' + pull_request: + branches: + - 'main' + types: [opened] + +concurrency: + group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }} + cancel-in-progress: true + +env: + GH_EMAIL: ${{ secrets.GH_EMAIL }} + GH_NAME: ${{ secrets.GH_NAME }} + GH_TOKEN: ${{ secrets.GH_TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }} + FIGMA_ICONS_FILE: ${{ secrets.FIGMA_ICONS_FILE }} + ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }} + ALGOLIA_INDEX_NAME: ${{ secrets.ALGOLIA_INDEX_NAME }} + ALGOLIA_SEARCH_KEY: ${{ secrets.ALGOLIA_SEARCH_KEY }} + ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }} + RUN_POST_BUILD: ${{ startsWith(github.ref, 'refs/heads/main') || startsWith(github.ref, 'refs/heads/v') }} + +jobs: + visual-regression: + name: Run visual-regression tests + + runs-on: macos-15 + + timeout-minutes: 40 + + steps: + - name: Git checkout + uses: actions/checkout@v4 + with: + persist-credentials: false + + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version-file: 'package.json' + + - name: Use yarn cache + uses: actions/cache@v4 + id: yarn-cache + with: + path: ./.yarn/cache + key: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-deps-${{ hashFiles('**/yarn.lock') }} + restore-keys: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-deps- + + - name: Install dependencies + run: yarn install --immutable + + - name: Use Playwright cache + uses: actions/cache@v4 + id: playwright-cache + with: + path: | + ~/Library/Caches/ms-playwright + ~/.cache/ms-playwright + %USERPROFILE%\AppData\Local\ms-playwright + key: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-playwright-${{ hashFiles('**/yarn.lock') }} + - run: yarn workspace @dnb/eufemia playwright install --with-deps firefox + if: steps.playwright-cache.outputs.cache-hit != 'true' + - run: yarn workspace @dnb/eufemia playwright install-deps firefox + if: steps.playwright-cache.outputs.cache-hit == 'true' + + - name: Prebuild Library + if: env.RUN_POST_BUILD == 'true' + run: yarn workspace @dnb/eufemia prebuild:ci + + - name: Postbuild Library + if: env.RUN_POST_BUILD == 'true' + run: yarn workspace @dnb/eufemia postbuild:ci + + - name: Build portal + run: yarn workspace dnb-design-system-portal build:visual-test + + - name: Run visual tests + run: yarn workspace dnb-design-system-portal test:screenshots:ci + + - uses: actions/upload-artifact@v4 + if: failure() + with: + name: visual-test-artifact + path: | + ./packages/dnb-eufemia/src/**/*.snap-diff.png + ./packages/dnb-eufemia/jest-visual-diff-report/* + + - name: Run visual tests info + if: failure() + run: echo '\n\nšŸ‘‰ Download the diff files as a ZIP file. \nIt is called "visual-test-artifact" and you find it in the test "Summary" under "Artifacts".\n\n\n' + + - name: Slack + uses: 8398a7/action-slack@v3 + with: + channel: '#eufemia-dev' + status: ${{ job.status }} + fields: author,ref,workflow,job,took + job_name: Run visual regression tests + github_base_url: https://github.com/ + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }} + if: ${{ always() && !github.event.pull_request.head.repo.fork }} + continue-on-error: true diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/Slider.e2e.spec.ts b/packages/dnb-eufemia/src/components/slider/__tests__/Slider.e2e.spec.ts index 8e96658dff8..e8082ebc508 100644 --- a/packages/dnb-eufemia/src/components/slider/__tests__/Slider.e2e.spec.ts +++ b/packages/dnb-eufemia/src/components/slider/__tests__/Slider.e2e.spec.ts @@ -10,7 +10,7 @@ test.describe('Slider', () => { }) }) - test('click on grid switch should enable the grid', async ({ page }) => { + test('should swap thumbs by using ArrowRight', async ({ page }) => { const inputElements = page.locator( '[data-visual-test="slider-multi"] .dnb-slider:nth-child(2) input' )