Skip to content

Fix horizontal card Safari image size bug #8354

Fix horizontal card Safari image size bug

Fix horizontal card Safari image size bug #8354

name: Branches
permissions: read-all
on:
workflow_dispatch:
pull_request:
types: [opened, reopened, ready_for_review, synchronize]
concurrency:
group: ci-${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
jobs:
check-updates:
name: "Check package updates"
runs-on: ubuntu-latest
permissions:
pull-requests: read
outputs:
core: ${{ steps.filter.outputs.core }}
canary: ${{ steps.filter.outputs.canary }}
steps:
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1
- uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 #v3.0.2
id: filter
with:
base: "develop"
filters: |
core:
- 'packages/web-components/**'
- 'packages/react/**'
canary:
- 'packages/canary-web-components/**'
- 'packages/canary-react/**'
ic-ui-kit-static-analysis-tests:
needs: ["check-updates"]
name: "Static analysis tests"
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1
- name: Setup node
uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #4.0.2
with:
node-version: 20
- name: Cache dependencies
uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2
with:
path: |
packages/*/node_modules
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node
- name: Install dependencies
run: |
npm ci
npm run bootstrap -- -- --ci
- name: Build core components
if: ${{ needs.check-updates.outputs.canary == 'false' }}
run: npm run build
- name: Build all components
if: ${{ needs.check-updates.outputs.canary == 'true' }}
run: |
npm run build:all
- name: Lint commit messages
run: |
COMMIT_MESSAGE=$(git log -1 --pretty=format:"%s")
echo "$COMMIT_MESSAGE" | npx commitlint
- name: Lint
run: npm run lint
- name: Lint grammar
run: npm run lint:spelling
- name: Prettier
run: npm run prettier
- name: Audit
run: npm run audit
- name: A11y core tests
if: ${{ needs.check-updates.outputs.core == 'true' }}
run: npm run test-a11y:ci
- name: A11y canary tests
if: ${{ needs.check-updates.outputs.canary == 'true' }}
run: npm run test-a11y:ci:canary
- name: Unit Component tests
run: npm run test:coverage-ci
ic-ui-kit-e2e-tests:
needs: [check-updates]
name: "E2E tests"
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1
- name: Setup node
uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #4.0.2
with:
node-version: 20
- name: Cache dependencies
uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2
with:
path: |
packages/*/node_modules
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node
- name: Install dependencies
run: |
npm ci
npm run bootstrap -- -- --ci
- name: E2E core tests
if: ${{ needs.check-updates.outputs.core == 'true' }}
id: core_e2e_tests
run: npm run test-e2e
- name: Build core components
if: ${{ steps.core_e2e_tests.outcome == 'skipped' && needs.check-updates.outputs.canary == 'true' }}
run: npm run build
- name: E2E canary tests
if: ${{ needs.check-updates.outputs.canary == 'true' }}
run: npm run test-e2e:canary
ic-ui-kit-visual-tests:
needs: ["check-updates"]
name: "Visual regression tests"
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1
- name: Setup node
uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #4.0.2
with:
node-version: 20
- name: Cache dependencies
uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2
with:
path: |
packages/*/node_modules
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node
- name: Install dependencies
run: |
google-chrome --version
npm ci
npm run bootstrap -- -- --ci
- name: Core visual regression tests
if: ${{ needs.check-updates.outputs.core == 'true' }}
run: npm run test-visual:ci
- name: Canary visual regression tests
if: ${{ needs.check-updates.outputs.canary == 'true' }}
run: npm run test-visual:ci:canary
ic-ui-kit-cypress-tests:
needs: [check-updates]
name: "Cypress tests"
runs-on: ubuntu-latest
permissions:
contents: write
pull-requests: write
steps:
- name: Checkout repository
uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1
- name: Setup node
uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #4.0.2
with:
node-version: 20
- name: Setup Chrome
uses: browser-actions/setup-chrome@97349de5c98094d4fc9412f31c524d7697115ad8 #v1.5.0
- name: Extract branch name
run: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_OUTPUT
id: extract_branch
- name: Cache dependencies
uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2
with:
path: |
packages/*/node_modules
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node
- name: Install dependencies
run: |
google-chrome --version
npm ci
npm run bootstrap -- -- --ci
- name: Cache Cypress Binary
uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2
with:
path: ~/.cache/Cypress
key: cypress-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
- name: Install Core Cypress
if: ${{ needs.check-updates.outputs.core == 'true' }}
run: npm run cypress:install:react
- name: Core Cypress tests
if: ${{ needs.check-updates.outputs.core == 'true' }}
id: core_cypress_tests
run: npm run test-cypress:ci
- name: Upload core visual regression screenshots
if: failure() && steps.core_cypress_tests.outcome == 'failure'
uses: JamesIves/github-pages-deploy-action@65b5dfd4f5bcd3a7403bbc2959c144256167464e #v4.5.0
with:
folder: ./packages/react/cypress-image-diff-screenshots
target-folder: ./branches/${{ steps.extract_branch.outputs.branch }}/cypress-image-diff-screenshots
- name: Upload core visual regression report
if: always() && steps.core_cypress_tests.outcome == 'failure'
uses: JamesIves/github-pages-deploy-action@65b5dfd4f5bcd3a7403bbc2959c144256167464e #v4.5.0
with:
folder: ./packages/react/cypress-image-diff-html-report
target-folder: ./branches/${{ steps.extract_branch.outputs.branch }}/cypress-image-diff-html-report
- name: Install Canary Cypress
if: ${{ needs.check-updates.outputs.canary == 'true' }}
run: npm run cypress:install:canary-react
- name: Canary Cypress tests
if: ${{ needs.check-updates.outputs.canary == 'true' }}
id: canary_cypress_tests
run: npm run test-cypress:ci:canary
- name: Upload canary visual regression diff screenshots
if: failure() && steps.canary_cypress_tests.outcome == 'failure'
uses: JamesIves/github-pages-deploy-action@65b5dfd4f5bcd3a7403bbc2959c144256167464e #v4.5.0
with:
folder: ./packages/canary-react/cypress-image-diff-screenshots
target-folder: ./branches/${{ steps.extract_branch.outputs.branch }}/cypress-image-diff-screenshots
- name: Upload canary visual regression report
if: always() && steps.canary_cypress_tests.outcome == 'failure'
uses: JamesIves/github-pages-deploy-action@65b5dfd4f5bcd3a7403bbc2959c144256167464e #v4.5.0
with:
folder: ./packages/canary-react/cypress-image-diff-html-report
target-folder: ./branches/${{ steps.extract_branch.outputs.branch }}/cypress-image-diff-html-report
- name: Cypress performance tests
if: ${{ needs.check-updates.outputs.core == 'true' }}
id: core_cypress_performance_tests
run: npm run test-cypress-perf:ci
- name: Upload lighthouse performance reports
if: failure() && steps.core_cypress_performance_tests.outcome == 'failure'
uses: JamesIves/github-pages-deploy-action@65b5dfd4f5bcd3a7403bbc2959c144256167464e #v4.5.0
with:
folder: ./packages/react/cypress-lighthouse-reports
target-folder: ./branches/${{ steps.extract_branch.outputs.branch }}/cypress-lighthouse-reports
- name: Add PR comment with diff screenshots
if: always() && (steps.core_cypress_tests.outcome == 'failure' || steps.canary_cypress_tests.outcome == 'failure')
uses: mshick/add-pr-comment@b8f338c590a895d50bcbfa6c5859251edc8952fc #v2.8.2
with:
message: |
Cypress visual tests failed.
View the image diff here: https://github.com/mi6/ic-ui-kit/tree/gh-pages/branches/${{ steps.extract_branch.outputs.branch }}/cypress-image-diff-screenshots/diff
View the html report here: https://mi6.github.io/ic-ui-kit/branches/${{ steps.extract_branch.outputs.branch }}/cypress-image-diff-html-report/cypress-image-diff-html-report.html
message-id: "image-diff"
- name: Add PR comment with performance reports
if: always() && steps.core_cypress_performance_tests.outcome == 'failure'
uses: mshick/add-pr-comment@b8f338c590a895d50bcbfa6c5859251edc8952fc #v2.8.2
with:
message: |
Cypress performance tests failed.
View the lighthouse reports here: https://github.com/mi6/ic-ui-kit/tree/gh-pages/branches/${{ steps.extract_branch.outputs.branch }}/cypress-lighthouse-reports
message-id: "performance-results"
ic-ui-kit-deploy:
needs:
[
ic-ui-kit-static-analysis-tests,
ic-ui-kit-e2e-tests,
ic-ui-kit-visual-tests,
check-updates,
ic-ui-kit-cypress-tests,
]
if: ${{ github.event.pull_request.head.repo.full_name == github.repository || github.event_name == 'workflow_dispatch' }}
name: "Deploy storybook"
runs-on: ubuntu-latest
permissions:
contents: write
steps:
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #4.0.2
with:
node-version: 20
- name: Cache dependencies
uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2
with:
path: |
packages/*/node_modules
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node
- name: Extract branch name
run: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_OUTPUT
id: extract_branch
- name: Install dependencies
run: |
npm ci
npm run bootstrap -- -- --ci
- name: Build core components
if: ${{ needs.check-updates.outputs.canary == 'false' }}
run: |
npm run build
- name: Build all components
if: ${{ needs.check-updates.outputs.canary == 'true' }}
run: |
npm run build:all
- name: Build web-components and react storybook
if: ${{ needs.check-updates.outputs.core == 'true' }}
run: |
npm run build-storybook:web-components
npm run build-storybook:react
- name: Build canary web-components and canary react storybook
if: ${{ needs.check-updates.outputs.canary == 'true' }}
run: |
npm run build-storybook:canary-web-components
npm run build-storybook:canary-react
- name: Deploy core web components storybook
if: ${{ needs.check-updates.outputs.core == 'true' }}
uses: JamesIves/github-pages-deploy-action@65b5dfd4f5bcd3a7403bbc2959c144256167464e #v4.5.0
with:
folder: ./packages/web-components/storybook-static
target-folder: ./branches/${{ steps.extract_branch.outputs.branch }}/web-components
- name: Deploy core react storybook
if: ${{ needs.check-updates.outputs.core == 'true' }}
uses: JamesIves/github-pages-deploy-action@65b5dfd4f5bcd3a7403bbc2959c144256167464e #v4.5.0
with:
folder: ./packages/react/storybook-static
target-folder: ./branches/${{ steps.extract_branch.outputs.branch }}/react
- name: Deploy canary web components storybook
if: ${{ needs.check-updates.outputs.canary == 'true' }}
uses: JamesIves/github-pages-deploy-action@65b5dfd4f5bcd3a7403bbc2959c144256167464e #v4.5.0
with:
folder: ./packages/canary-web-components/storybook-static
target-folder: ./branches/${{ steps.extract_branch.outputs.branch }}/canary-web-components
- name: Deploy canary react storybook
if: ${{ needs.check-updates.outputs.canary == 'true' }}
uses: JamesIves/github-pages-deploy-action@65b5dfd4f5bcd3a7403bbc2959c144256167464e #v4.5.0
with:
folder: ./packages/canary-react/storybook-static
target-folder: ./branches/${{ steps.extract_branch.outputs.branch }}/canary-react