Skip to content

Commit

Permalink
Use cache to store snapshots
Browse files Browse the repository at this point in the history
  • Loading branch information
sidharthv96 committed Jan 19, 2024
1 parent 8754b9d commit 013a987
Show file tree
Hide file tree
Showing 7 changed files with 67 additions and 11 deletions.
42 changes: 40 additions & 2 deletions .github/workflows/e2e.yml
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
name: E2E

on:
push:
pull_request:
merge_group:

permissions:
contents: read
Expand All @@ -27,6 +25,44 @@ jobs:
with:
node-version: ${{ matrix.node-version }}

- name: Cache snapshots
id: cache-snapshot
uses: actions/cache@v4
with:
save-always: true
path: ./cypress/snapshots
key: ${{ runner.os }}-snapshots-${{ matrix.containers }}
restore-keys: |
${{ runner.os }}-snapshots
- name: Switch to base branch
if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
uses: actions/checkout@v4
with:
ref: ${{ github.event.pull_request.base.sha }}
# ref: ${{ github.event_name == 'push' && 'develop' || github.event.pull_request.base.sha }}

- name: Cypress run
uses: cypress-io/github-action@v4
id: cypress-snapshot-gen
# If CYPRESS_RECORD_KEY is set, run in parallel on all containers
# Otherwise (e.g. if running from fork), we run on a single container only
if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' && (( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 )) }}
with:
start: pnpm run dev
wait-on: 'http://localhost:9000'
browser: chrome
# Disable recording if we don't have an API key
# e.g. if this action was run from a fork
record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
env:
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

- name: Switch to original branch
if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
uses: actions/checkout@v4

# Install NPM dependencies, cache them correctly
# and run all Cypress tests
- name: Cypress run
Expand All @@ -38,6 +74,7 @@ jobs:
with:
start: pnpm run dev:coverage
wait-on: 'http://localhost:9000'
browser: chrome
# Disable recording if we don't have an API key
# e.g. if this action was run from a fork
record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
Expand All @@ -46,6 +83,7 @@ jobs:
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
VITEST_COVERAGE: true
CYPRESS_COMMIT: ${{ github.sha }}

- name: Upload Coverage to Codecov
uses: codecov/codecov-action@v3
# Run step only pushes to develop and pull_requests
Expand Down
1 change: 1 addition & 0 deletions cSpell.json
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@
"sidharth",
"sidharthv",
"sphinxcontrib",
"ssim",
"startx",
"starty",
"statediagram",
Expand Down
9 changes: 9 additions & 0 deletions cypress.config.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,21 @@ const { defineConfig } = require('cypress');
const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
const coverage = require('@cypress/code-coverage/task');


module.exports = defineConfig({
projectId: 'n2sma2',
viewportWidth: 1440,
viewportHeight: 1024,
e2e: {
specPattern: 'cypress/integration/**/*.{js,jsx,ts,tsx}',
setupNodeEvents(on, config) {
coverage(on, config);
on('before:browser:launch', (browser = {}, launchOptions) => {
if (browser.name === 'chrome' && browser.isHeadless) {
launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
}
return launchOptions;
});
addMatchImageSnapshotPlugin(on, config);
// copy any needed variables from process.env to config.env
config.env.useAppli = process.env.USE_APPLI ? true : false;
Expand Down
1 change: 0 additions & 1 deletion cypress/integration/other/configuration.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,6 @@ describe('Configuration', () => {
});
it('should not taint the initial configuration when using multiple directives', () => {
const url = 'http://localhost:9000/regression/issue-1874.html';
cy.viewport(1440, 1024);
cy.visit(url);

cy.get('svg');
Expand Down
2 changes: 0 additions & 2 deletions cypress/integration/other/rerender.spec.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
describe('Rerendering', () => {
it('should be able to render after an error has occurred', () => {
const url = 'http://localhost:9000/render-after-error.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('#graphDiv').should('exist');
});

it('should be able to render and rerender a graph via API', () => {
const url = 'http://localhost:9000/rerender.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('#graph [id^=flowchart-A]').should('have.text', 'XMas');

Expand Down
13 changes: 8 additions & 5 deletions cypress/integration/rendering/gantt.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,10 @@ describe('Gantt diagram', () => {
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
expect(maxWidthValue).to.be.within(984 * 0.95, 984 * 1.05);
expect(maxWidthValue).to.be.within(
Cypress.config().viewportWidth * 0.95,
Cypress.config().viewportWidth * 1.05
);
});
});

Expand Down Expand Up @@ -285,11 +288,11 @@ describe('Gantt diagram', () => {
{ gantt: { useMaxWidth: false } }
);
cy.get('svg').should((svg) => {
// const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5%
// expect(height).to.be.within(484 * 0.95, 484 * 1.05);
expect(width).to.be.within(984 * 0.95, 984 * 1.05);
expect(width).to.be.within(
Cypress.config().viewportWidth * 0.95,
Cypress.config().viewportWidth * 1.05
);
expect(svg).to.not.have.attr('style');
});
});
Expand Down
10 changes: 9 additions & 1 deletion cypress/support/commands.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,12 @@

import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';

addMatchImageSnapshotCommand();
addMatchImageSnapshotCommand({
comparisonMethod: 'ssim',
failureThreshold: 0.01,
failureThresholdType: 'percent',
customDiffConfig: {
ssim: 'fast',
},
blur: 1,
});

0 comments on commit 013a987

Please sign in to comment.