Skip to content

feat: add StackBlitz starter link and convert /issue page to mdx #13211

feat: add StackBlitz starter link and convert /issue page to mdx

feat: add StackBlitz starter link and convert /issue page to mdx #13211

name: visual-regression
on:
push:
branches:
- '**'
- '!**--skip-ci'
- '!**--visual-reports'
- '!wip/**'
- '!experiments/**'
- '!release'
- '!portal'
- '!beta'
- '!alpha'
pull_request:
branches:
- 'portal'
- 'release'
- 'beta'
- 'alpha'
- 'next'
types: [opened]
concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
cancel-in-progress: true
permissions:
contents: read
pull-requests: read
env:
GH_EMAIL: ${{ secrets.GH_EMAIL }}
GH_NAME: ${{ secrets.GH_NAME }}
GH_TOKEN: ${{ secrets.GH_TOKEN }}
GITHUB_TOKEN: ${{ github.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') }}
RUN_VISUAL_TEST: ${{ !startsWith(github.ref, 'refs/heads/icon') }}
jobs:
visual-regression:
name: Run visual-regression tests
runs-on: macos-26
timeout-minutes: 40
steps:
- name: Git checkout
uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5
with:
persist-credentials: false
- name: Use Node.js
uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
with:
node-version-file: 'package.json'
- name: Use yarn cache
uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5
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: Resolve changed files
uses: actions/github-script@v7
with:
script: |
let changedFiles = []
if (context.eventName === 'pull_request') {
const pullNumber = context.payload.pull_request?.number
if (!pullNumber) {
core.warning('No pull request number found. VISUAL_TEST_CHANGED_FILES was not set.')
return
}
const files = await github.paginate(
github.rest.pulls.listFiles,
{
owner: context.repo.owner,
repo: context.repo.repo,
pull_number: pullNumber,
per_page: 100,
}
)
changedFiles = files
.map((file) => file.filename)
.filter(Boolean)
} else if (context.eventName === 'push') {
const head = context.payload.after || context.sha
const defaultBranch =
context.payload.repository?.default_branch || 'main'
if (!head) {
core.warning('Missing push head SHA. VISUAL_TEST_CHANGED_FILES was not set.')
return
}
try {
const comparison = await github.rest.repos.compareCommitsWithBasehead({
owner: context.repo.owner,
repo: context.repo.repo,
basehead: `${defaultBranch}...${head}`,
})
changedFiles = (comparison.data.files || [])
.map((file) => file.filename)
.filter(Boolean)
} catch {
const base = context.payload.before
if (!base) {
core.warning('Missing push base SHA. VISUAL_TEST_CHANGED_FILES was not set.')
return
}
const comparison = await github.rest.repos.compareCommits({
owner: context.repo.owner,
repo: context.repo.repo,
base,
head,
})
changedFiles = (comparison.data.files || [])
.map((file) => file.filename)
.filter(Boolean)
}
} else {
core.warning(`Unsupported event: ${context.eventName}`)
return
}
core.exportVariable(
'VISUAL_TEST_CHANGED_FILES',
changedFiles.join('\n')
)
- name: Use Playwright cache
uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5
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
if: env.RUN_VISUAL_TEST == 'true'
run: yarn workspace dnb-design-system-portal build:visual-test
- name: Run visual tests
if: env.RUN_VISUAL_TEST == 'true'
run: yarn workspace dnb-design-system-portal test:screenshots:ci:conditional
- uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
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'