Skip to content

Commit 36992fc

Browse files
liamdebeasiliamdebeasi
authored
chore(ci): e2e tests are run on CI (#1126)
1 parent 5f2aab6 commit 36992fc

File tree

10 files changed

+223
-8
lines changed

10 files changed

+223
-8
lines changed

‎.github/workflows/actions/build-core/action.yml‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,9 @@ runs:
2626
with:
2727
name: ionicons-build
2828
output: IoniconsBuild.zip
29-
paths: dist components icons
29+
paths: dist components icons www
30+
- uses: ./.github/workflows/actions/upload-archive
31+
with:
32+
name: ionicons-src
33+
output: IoniconsSrc.zip
34+
paths: src

‎.github/workflows/actions/test-e2e/action.yml‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
name: 'Test E2E'
2+
description: 'Test E2E'
3+
inputs:
4+
shard:
5+
description: 'Playwright Test Shard (ex: 2)'
6+
totalShards:
7+
description: 'Playwright total number of test shards (ex: 4)'
8+
update:
9+
description: 'Whether or not to update the reference snapshots'
10+
runs:
11+
using: 'composite'
12+
steps:
13+
- uses: actions/setup-node@v3
14+
15+
- name: Cache Node Modules
16+
uses: actions/cache@v3
17+
env:
18+
cache-name: node-modules
19+
with:
20+
path: ./node_modules
21+
key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./package-lock.json') }}-v1
22+
- uses: ./.github/workflows/actions/download-archive
23+
with:
24+
name: ionicons-build
25+
path: .
26+
filename: IoniconsBuild.zip
27+
- uses: ./.github/workflows/actions/download-archive
28+
with:
29+
name: ionicons-src
30+
path: .
31+
filename: IoniconsSrc.zip
32+
- name: Install Playwright Dependencies
33+
run: npx playwright install && npx playwright install-deps
34+
shell: bash
35+
- name: Test
36+
if: inputs.update != 'true'
37+
run: npx playwright test --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
38+
shell: bash
39+
- name: Test and Update
40+
id: test-and-update
41+
if: inputs.update == 'true'
42+
# Keep track of the files that were
43+
# changed so they can be correctly restored
44+
# in the combine step.
45+
# To do this, we move only the changed files
46+
# to a separate directory, while preserving the
47+
# directory structure of the source.
48+
# When, we create and archive of these results
49+
# so that the combine step can simply
50+
# unzip and move the changed files into place.
51+
# We have extra logic added so that job runners
52+
# that do not have any new screenshots do not create
53+
# an unnecessary .zip.
54+
run: |
55+
npx playwright test --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
56+
git add src/\*.png --force
57+
mkdir updated-screenshots
58+
echo 'made dir'
59+
rsync -R --progress $(git diff --name-only --cached) updated-screenshots
60+
echo 'copied images'
61+
if [ -d updated-screenshots ]; then
62+
echo "::set-output name=hasUpdatedScreenshots::$(echo 'true')"
63+
cd updated-screenshots
64+
ls
65+
zip -q -r ../UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip ./
66+
fi
67+
shell: bash
68+
- name: Archive Updated Screenshots
69+
if: inputs.update == 'true' && steps.test-and-update.outputs.hasUpdatedScreenshots == 'true'
70+
uses: actions/upload-artifact@v3
71+
with:
72+
name: updated-screenshots-${{ inputs.shard }}-${{ inputs.totalShards }}
73+
path: UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
74+
- name: Archive Test Results
75+
# The always() ensures that this step
76+
# runs even if the previous step fails.
77+
# We want the test results to be archived
78+
# even if the test fails in the previous
79+
# step, otherwise there would be no way
80+
# to debug these tests.
81+
if: always()
82+
uses: ./.github/workflows/actions/upload-archive
83+
with:
84+
name: test-results-${{ inputs.shard }}-${{ inputs.totalShards }}
85+
output: TestResults-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
86+
paths: playwright-report

‎.github/workflows/actions/update-reference-screenshots/action.yml‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
name: 'Update Reference Screenshots'
2+
description: 'Update Reference Screenshots'
3+
4+
on:
5+
workflow_dispatch:
6+
7+
runs:
8+
using: 'composite'
9+
steps:
10+
- uses: actions/setup-node@v3
11+
- uses: actions/download-artifact@v3
12+
with:
13+
path: ./artifacts
14+
- name: Extract Archives
15+
# This finds all .zip files in the ./artifacts
16+
# directory, including nested directories.
17+
# It then unzips every .zip to the root directory
18+
run: |
19+
find . -type f -name 'UpdatedScreenshots-*.zip' -exec unzip -q -o -d ../ {} \;
20+
shell: bash
21+
working-directory: ./artifacts
22+
- name: Push Screenshots
23+
# Configure user as Ionitron
24+
# and push only the changed .png snapshots
25+
# to the remote branch.
26+
# Screenshots are in .gitignore
27+
# to prevent local screenshots from getting
28+
# pushed to Git. As a result, we need --force
29+
# here so that CI generated screenshots can
30+
# get added to git. Screenshot ground truths
31+
# should only be added via this CI process.
32+
run: |
33+
git config user.name ionitron
34+
git config user.email [email protected]
35+
git add src/\*.png --force
36+
git commit -m "chore(): add updated snapshots"
37+
git push
38+
shell: bash

‎.github/workflows/build.yml‎

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,46 @@ jobs:
2626
runs-on: ubuntu-latest
2727
steps:
2828
- uses: actions/checkout@v3
29-
- uses: ./.github/workflows/actions/test-spec
29+
- uses: ./.github/workflows/actions/test-spec
30+
31+
test-e2e:
32+
strategy:
33+
# This ensures that all screenshot shard
34+
# failures are reported so the dev can
35+
# review everything at once.
36+
fail-fast: false
37+
matrix:
38+
# Divide the tests into n buckets
39+
# and run those buckets in parallel.
40+
# To increase the number of shards,
41+
# add new items to the shard array
42+
# and change the value of totalShards
43+
# to be the length of the shard array.
44+
shard: [1, 2, 3]
45+
totalShards: [3]
46+
needs: [build-core]
47+
runs-on: ubuntu-latest
48+
steps:
49+
- uses: actions/checkout@v3
50+
- uses: ./.github/workflows/actions/test-e2e
51+
with:
52+
shard: ${{ matrix.shard }}
53+
totalShards: ${{ matrix.totalShards }}
54+
55+
# Screenshots are required to pass
56+
# in order for the branch to be merge
57+
# eligible. However, the screenshot tests
58+
# are run on n runners where n can change
59+
# over time. The verify-screenshots step allows
60+
# us to have a required status check for screenshot
61+
# results without having to manually add each
62+
# matrix run in the branch protection rules
63+
# Source: https://github.community/t/status-check-for-a-matrix-jobs/127354
64+
verify-e2e:
65+
if: ${{ always() }}
66+
needs: test-e2e
67+
runs-on: ubuntu-latest
68+
steps:
69+
- name: Check build matrix status
70+
if: ${{ needs.test-e2e.result != 'success' }}
71+
run: exit 1

‎.github/workflows/update-screenshots.yml‎

Lines changed: 46 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,52 @@
1-
name: 'Update Screenshot References'
1+
name: 'Update Reference Screenshots'
22

33
on:
44
workflow_dispatch:
55

66
jobs:
7-
stub:
7+
build-core:
8+
runs-on: ubuntu-latest
89
steps:
9-
- name: Stub
10-
run: echo 'This is a stub'
11-
shell: bash
10+
- uses: actions/checkout@v3
11+
- uses: ./.github/workflows/actions/build-core
12+
13+
test-e2e:
14+
strategy:
15+
# This ensures that all screenshot shard
16+
# failures are reported so the dev can
17+
# review everything at once.
18+
fail-fast: false
19+
matrix:
20+
# Divide the tests into n buckets
21+
# and run those buckets in parallel.
22+
# To increase the number of shards,
23+
# add new items to the shard array
24+
# and change the value of totalShards
25+
# to be the length of the shard array.
26+
shard: [1, 2, 3]
27+
totalShards: [3]
28+
needs: [build-core]
29+
runs-on: ubuntu-latest
30+
steps:
31+
- uses: actions/checkout@v3
32+
- uses: ./.github/workflows/actions/test-e2e
33+
with:
34+
shard: ${{ matrix.shard }}
35+
totalShards: ${{ matrix.totalShards }}
36+
update: true
37+
38+
update-reference-screenshots:
39+
runs-on: ubuntu-latest
40+
needs: [test-e2e]
41+
steps:
42+
- uses: actions/checkout@v2
43+
# Normally, we could just push with the
44+
# default GITHUB_TOKEN, but that will
45+
# not cause the build workflow
46+
# to re-run. We use Ionitron's
47+
# Personal Access Token instead
48+
# to allow for this build workflow
49+
# to run when the screenshots are pushed.
50+
with:
51+
token: ${{ secrets.IONITRON_TOKEN }}
52+
- uses: ./.github/workflows/actions/update-reference-screenshots

‎playwright.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const config: PlaywrightTestConfig = {
8888
/* Configure projects for major browsers */
8989
projects: projects,
9090
webServer: {
91-
command: 'serve -p 3333',
91+
command: 'serve www -p 3333',
9292
port: 3333,
9393
reuseExistingServer: !process.env.CI
9494
}

‎src/components/icon/test/icon.e2e.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import { test } from '@utils/test/playwright';
44
test.describe('icon: basic', () => {
55
test('should not have visual regressions', async ({ page }) => {
66
await page.goto(`/`);
7+
8+
// Wait for all SVGs to be lazily loaded before taking screenshots
9+
await page.waitForLoadState('networkidle');
710

811
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(`icon-diff.png`);
912
});

‎src/components/icon/test/icon.e2e.ts-snapshots/icon-diff-Mobile-Chrome-linux.png‎

309 KB
Loading

‎src/components/icon/test/icon.e2e.ts-snapshots/icon-diff-Mobile-Firefox-linux.png‎

95.3 KB
Loading

‎src/components/icon/test/icon.e2e.ts-snapshots/icon-diff-Mobile-Safari-linux.png‎

289 KB
Loading

0 commit comments

Comments
 (0)