From b2af23bfdc82b41a71ddada16ca38f62c3cbe6af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9line=20Souchet?= Date: Tue, 8 Dec 2020 18:21:00 +0100 Subject: [PATCH 1/2] Move custom diff & snapshots directories in ImageSnapshotConfigurator --- test/e2e/bpmn.navigation.test.ts | 11 ++--------- test/e2e/bpmn.rendering.test.ts | 12 ++---------- test/e2e/diagram.rendering.test.ts | 27 ++++++++++++--------------- test/e2e/helpers/visu-utils.ts | 19 ++++++++++++++++--- 4 files changed, 32 insertions(+), 37 deletions(-) diff --git a/test/e2e/bpmn.navigation.test.ts b/test/e2e/bpmn.navigation.test.ts index 826e3b9d5a..009d4ecedc 100644 --- a/test/e2e/bpmn.navigation.test.ts +++ b/test/e2e/bpmn.navigation.test.ts @@ -33,11 +33,9 @@ describe('diagram navigation', () => { }, ], ]), + 'navigation', ); - const navigationDiffDir = join(ImageSnapshotConfigurator.getDiffDir(), 'navigation'); - const navigationDir = join(ImageSnapshotConfigurator.getSnapshotsDir(), 'navigation'); - // to have mouse pointer visible during headless test - add 'showMousePointer=true' to queryParams const bpmnDiagramPreparation = new BpmnDiagramPreparation(new Map(), { name: 'rendering-diagram', queryParams: [] }, 'navigation'); @@ -65,8 +63,6 @@ describe('diagram navigation', () => { expect(image).toMatchImageSnapshot({ ...config, customSnapshotIdentifier: 'mouse.panning', - customSnapshotsDir: navigationDir, - customDiffDir: navigationDiffDir, }); }); @@ -83,8 +79,6 @@ describe('diagram navigation', () => { expect(image).toMatchImageSnapshot({ ...config, customSnapshotIdentifier: zoom === 'zoom in' ? 'mouse.zoom.in' : 'mouse.zoom.out', - customSnapshotsDir: navigationDir, - customDiffDir: navigationDiffDir, }); }); @@ -111,8 +105,7 @@ describe('diagram navigation', () => { expect(image).toMatchImageSnapshot({ ...config, customSnapshotIdentifier: 'initial.zoom', - customSnapshotsDir: navigationDir, - customDiffDir: join(navigationDiffDir, `${xTimes}-zoom-in-out`), + customDiffDir: join(config.customDiffDir, `${xTimes}-zoom-in-out`), }); }); }); diff --git a/test/e2e/bpmn.rendering.test.ts b/test/e2e/bpmn.rendering.test.ts index bb4438e229..5ba6c4d1f2 100644 --- a/test/e2e/bpmn.rendering.test.ts +++ b/test/e2e/bpmn.rendering.test.ts @@ -15,7 +15,6 @@ */ import { findFiles } from '../helpers/file-helper'; import { BpmnDiagramPreparation, BpmnLoadMethod, ImageSnapshotConfigurator, ImageSnapshotThresholdConfig, PageTester } from './helpers/visu-utils'; -import { join } from 'path'; describe('no BPMN elements visual regression', () => { const imageSnapshotConfigurator = new ImageSnapshotConfigurator( @@ -109,6 +108,7 @@ describe('no BPMN elements visual regression', () => { }, ], ]), + 'bpmn', ); const bpmnDiagramPreparation = new BpmnDiagramPreparation( @@ -130,9 +130,6 @@ describe('no BPMN elements visual regression', () => { return filename.split('.').slice(0, -1).join('.'); }); - const bpmnDiffDir = join(ImageSnapshotConfigurator.getDiffDir(), 'bpmn'); - const bpmnDir = join(ImageSnapshotConfigurator.getSnapshotsDir(), 'bpmn'); - it('check bpmn non-regression files availability', () => { expect(bpmnFileNames).toContain('gateways'); }); @@ -142,11 +139,6 @@ describe('no BPMN elements visual regression', () => { const image = await page.screenshot({ fullPage: true }); const config = imageSnapshotConfigurator.getConfig(fileName); - expect(image).toMatchImageSnapshot({ - ...config, - customSnapshotIdentifier: fileName, - customSnapshotsDir: bpmnDir, - customDiffDir: bpmnDiffDir, - }); + expect(image).toMatchImageSnapshot(config); }); }); diff --git a/test/e2e/diagram.rendering.test.ts b/test/e2e/diagram.rendering.test.ts index abbc795309..d77c2edc33 100644 --- a/test/e2e/diagram.rendering.test.ts +++ b/test/e2e/diagram.rendering.test.ts @@ -17,8 +17,7 @@ import { BpmnDiagramPreparation, BpmnLoadMethod, ImageSnapshotConfigurator, Imag import { FitType, LoadOptions } from '../../src/component/options'; import { join } from 'path'; -function getCustomSnapshotDir(fitType: FitType, margin = 0): string { - const fitDir = join(ImageSnapshotConfigurator.getSnapshotsDir(), 'fit'); +function getCustomSnapshotDir(fitDir: string, fitType: FitType, margin = 0): string { const typeDir = join(fitDir, `type-${fitType}`); return join(typeDir, `margin-${margin == null || margin < 0 ? 0 : margin}`); } @@ -48,6 +47,12 @@ describe('no diagram visual regression', () => { }, ], ]), + 'fit', + // minimal threshold to make test pass on Github Workflow + // ubuntu: Expected image to match or be a close match to snapshot but was 0.005379276499073438% different from snapshot + // macOS: Expected image to match or be a close match to snapshot but was 0.005379276499073438% different from snapshot + // windows: Expected image to match or be a close match to snapshot but was 0.005379276499073438% different from snapshot + 0.00006, ); const fitTypes: FitType[] = [FitType.None, FitType.HorizontalVertical, FitType.Horizontal, FitType.Vertical, FitType.Center]; @@ -61,15 +66,11 @@ describe('no diagram visual regression', () => { const image = await page.screenshot({ fullPage: true }); - // minimal threshold to make test pass on Github Workflow - // ubuntu: Expected image to match or be a close match to snapshot but was 0.005379276499073438% different from snapshot - // macOS: Expected image to match or be a close match to snapshot but was 0.005379276499073438% different from snapshot - // windows: Expected image to match or be a close match to snapshot but was 0.005379276499073438% different from snapshot - const config = imageSnapshotConfigurator.getConfig(fileName, 0.00006); + const config = imageSnapshotConfigurator.getConfig(fileName); expect(image).toMatchImageSnapshot({ ...config, customSnapshotIdentifier: fileName, - customSnapshotsDir: getCustomSnapshotDir(loadFitType), + customSnapshotsDir: getCustomSnapshotDir(config.customSnapshotsDir, loadFitType), customDiffDir: loadFitDiffDir, }); }); @@ -83,15 +84,11 @@ describe('no diagram visual regression', () => { const image = await page.screenshot({ fullPage: true }); - // minimal threshold to make test pass on Github Workflow - // ubuntu: Expected image to match or be a close match to snapshot but was 0.005379276499073438% different from snapshot - // macos: Expected image to match or be a close match to snapshot but was 0.005379276499073438% different from snapshot - // windows: Expected image to match or be a close match to snapshot but was 0.005379276499073438% different from snapshot - const config = imageSnapshotConfigurator.getConfig(fileName, 0.00006); + const config = imageSnapshotConfigurator.getConfig(fileName); expect(image).toMatchImageSnapshot({ ...config, customSnapshotIdentifier: fileName, - customSnapshotsDir: getCustomSnapshotDir(fitType), + customSnapshotsDir: getCustomSnapshotDir(config.customSnapshotsDir, fitType), customDiffDir: join(fitDiffDir, `type-${fitType}`), }); }); @@ -110,7 +107,7 @@ describe('no diagram visual regression', () => { expect(image).toMatchImageSnapshot({ ...config, customSnapshotIdentifier: fileName, - customSnapshotsDir: getCustomSnapshotDir(loadFitType, margin), + customSnapshotsDir: getCustomSnapshotDir(config.customSnapshotsDir, loadFitType, margin), customDiffDir: join(loadFitDiffDir, `margin-${margin}`), }); }); diff --git a/test/e2e/helpers/visu-utils.ts b/test/e2e/helpers/visu-utils.ts index 19618329ea..a1ca6cdb0e 100644 --- a/test/e2e/helpers/visu-utils.ts +++ b/test/e2e/helpers/visu-utils.ts @@ -52,6 +52,8 @@ const defaultImageSnapshotConfig: MatchImageSnapshotOptions = { }; export class ImageSnapshotConfigurator { + private readonly defaultCustomDiffDir: string; + private readonly defaultCustomSnapshotsDir: string; /** * About `thresholdConfig` * @@ -60,12 +62,16 @@ export class ImageSnapshotConfigurator { * This is generally only required for diagram containing labels. If you are not testing the labels (value, position, ...) as part of the use case you want to cover, remove labels * from the BPMN diagram to avoid such discrepancies. */ - constructor(readonly thresholdConfig: Map) {} + constructor(readonly thresholdConfig: Map, private customDirName: string, readonly defaultFailureThreshold = 0.000004) { + this.defaultCustomDiffDir = join(ImageSnapshotConfigurator.getDiffDir(), customDirName); + this.defaultCustomSnapshotsDir = join(ImageSnapshotConfigurator.getSnapshotsDir(), customDirName); + } // minimal threshold to make tests for diagram renders pass on local // macOS: Expected image to match or be a close match to snapshot but was 0.00031509446166699817% different from snapshot - getConfig(fileName: string, failureThreshold = 0.000004): MatchImageSnapshotOptions { + getConfig(fileName: string): MatchImageSnapshotOptions { const config = this.thresholdConfig.get(fileName); + let failureThreshold = this.defaultFailureThreshold; if (config) { log(`Building dedicated image snapshot configuration for '${fileName}'`); const simplePlatformName = getSimplePlatformName(); @@ -77,7 +83,14 @@ export class ImageSnapshotConfigurator { } log(`ImageSnapshot - using failureThreshold: ${failureThreshold}`); - return { ...defaultImageSnapshotConfig, failureThreshold: failureThreshold, failureThresholdType: 'percent' }; + return { + ...defaultImageSnapshotConfig, + failureThreshold: failureThreshold, + failureThresholdType: 'percent', + customSnapshotIdentifier: fileName, + customSnapshotsDir: this.defaultCustomSnapshotsDir, + customDiffDir: this.defaultCustomDiffDir, + }; } static getSnapshotsDir(): string { From 2f625aadcab8a6fbf28587c0f1da338002296245 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9line=20Souchet?= Date: Wed, 9 Dec 2020 16:22:24 +0100 Subject: [PATCH 2/2] Refactor calculation of custom dirs in Diagram rendering visual tests --- test/e2e/diagram.rendering.test.ts | 95 +++++++++++++++++++----------- test/e2e/helpers/visu-utils.ts | 7 ++- 2 files changed, 63 insertions(+), 39 deletions(-) diff --git a/test/e2e/diagram.rendering.test.ts b/test/e2e/diagram.rendering.test.ts index d77c2edc33..1902977c5f 100644 --- a/test/e2e/diagram.rendering.test.ts +++ b/test/e2e/diagram.rendering.test.ts @@ -16,10 +16,40 @@ import { BpmnDiagramPreparation, BpmnLoadMethod, ImageSnapshotConfigurator, ImageSnapshotThresholdConfig, PageTester } from './helpers/visu-utils'; import { FitType, LoadOptions } from '../../src/component/options'; import { join } from 'path'; +import { MatchImageSnapshotOptions } from 'jest-image-snapshot'; -function getCustomSnapshotDir(fitDir: string, fitType: FitType, margin = 0): string { - const typeDir = join(fitDir, `type-${fitType}`); - return join(typeDir, `margin-${margin == null || margin < 0 ? 0 : margin}`); +class FitImageSnapshotConfigurator extends ImageSnapshotConfigurator { + getConfig(param: { + fileName: string; + buildCustomDiffDir: (config: MatchImageSnapshotOptions, fitType: FitType, margin?: number) => string; + fitType: FitType; + margin?: number; + }): MatchImageSnapshotOptions { + const config = super.getConfig(param); + config.customSnapshotsDir = FitImageSnapshotConfigurator.buildSnapshotFitDir(config.customSnapshotsDir, param.fitType, true, param.margin ? param.margin : 0); + config.customDiffDir = param.buildCustomDiffDir(config, param.fitType, param.margin); + return config; + } + + private static buildSnapshotFitDir(parentDir: string, fitType: FitType, withMargin = false, margin?: number): string { + const typeDir = join(parentDir, `type-${fitType}`); + + if (!withMargin) { + return typeDir; + } + return join(typeDir, `margin-${margin == null || margin < 0 ? 0 : margin}`); + } + + static buildOnLoadDiffDir(config: MatchImageSnapshotOptions, fitType: FitType, withMargin = false, margin?: number): string { + const onLoadDir = join(config.customDiffDir, 'on-load'); + return FitImageSnapshotConfigurator.buildSnapshotFitDir(onLoadDir, fitType, withMargin, margin); + } + + static buildAfterLoadDiffDir(config: MatchImageSnapshotOptions, afterLoadFitType: FitType, onLoadFitType: FitType): string { + const afterLoadDir = join(config.customDiffDir, 'after-load'); + const snapshotFitTypeDir = FitImageSnapshotConfigurator.buildSnapshotFitDir(afterLoadDir, afterLoadFitType); + return join(snapshotFitTypeDir, `on-load_type-${onLoadFitType}`); + } } /* eslint-disable @typescript-eslint/no-explicit-any */ @@ -29,10 +59,8 @@ async function initializePage(loadOptions: LoadOptions, fileName: string): Promi await pageTester.expectBpmnDiagramToBeDisplayed(fileName); } -const loadDiffDir = join(ImageSnapshotConfigurator.getDiffDir(), 'load'); - describe('no diagram visual regression', () => { - const imageSnapshotConfigurator = new ImageSnapshotConfigurator( + const imageSnapshotConfigurator = new FitImageSnapshotConfigurator( new Map([ [ 'with.outside.labels', @@ -56,60 +84,55 @@ describe('no diagram visual regression', () => { ); const fitTypes: FitType[] = [FitType.None, FitType.HorizontalVertical, FitType.Horizontal, FitType.Vertical, FitType.Center]; - describe.each(fitTypes)('load options - fit %s', (loadFitType: FitType) => { - const loadFitDiffDir = join(loadDiffDir, `type-${loadFitType}`); - const fitDiffDir = join(loadFitDiffDir, 'fit'); - + describe.each(fitTypes)('load options - fit %s', (onLoadFitType: FitType) => { describe.each(['horizontal', 'vertical', 'with.outside.flows', 'with.outside.labels'])('diagram %s', (fileName: string) => { it('load', async () => { - await initializePage({ fit: { type: loadFitType } }, fileName); + await initializePage({ fit: { type: onLoadFitType } }, fileName); const image = await page.screenshot({ fullPage: true }); - const config = imageSnapshotConfigurator.getConfig(fileName); - expect(image).toMatchImageSnapshot({ - ...config, - customSnapshotIdentifier: fileName, - customSnapshotsDir: getCustomSnapshotDir(config.customSnapshotsDir, loadFitType), - customDiffDir: loadFitDiffDir, + const config = imageSnapshotConfigurator.getConfig({ + fileName, + fitType: onLoadFitType, + buildCustomDiffDir: (config, fitType) => FitImageSnapshotConfigurator.buildOnLoadDiffDir(config, fitType), }); + expect(image).toMatchImageSnapshot(config); }); - it.each(fitTypes)(`load + fit %s`, async (fitType: FitType) => { - await initializePage({ fit: { type: loadFitType } }, fileName); + it.each(fitTypes)(`load + fit %s`, async (afterLoadFitType: FitType) => { + await initializePage({ fit: { type: onLoadFitType } }, fileName); - await page.click(`#${fitType}`); + await page.click(`#${afterLoadFitType}`); // To unselect the button await page.mouse.click(0, 0); const image = await page.screenshot({ fullPage: true }); - const config = imageSnapshotConfigurator.getConfig(fileName); - expect(image).toMatchImageSnapshot({ - ...config, - customSnapshotIdentifier: fileName, - customSnapshotsDir: getCustomSnapshotDir(config.customSnapshotsDir, fitType), - customDiffDir: join(fitDiffDir, `type-${fitType}`), + const config = imageSnapshotConfigurator.getConfig({ + fileName, + fitType: afterLoadFitType, + buildCustomDiffDir: (config, fitType) => FitImageSnapshotConfigurator.buildAfterLoadDiffDir(config, fitType, onLoadFitType), }); + expect(image).toMatchImageSnapshot(config); }); if ( - (loadFitType === FitType.Center && fileName === 'with.outside.flows') || - (loadFitType === FitType.Horizontal && fileName === 'horizontal') || - (loadFitType === FitType.Vertical && fileName === 'vertical') + (onLoadFitType === FitType.Center && fileName === 'with.outside.flows') || + (onLoadFitType === FitType.Horizontal && fileName === 'horizontal') || + (onLoadFitType === FitType.Vertical && fileName === 'vertical') ) { it.each([-100, 0, 20, 50, null])('load with margin %s', async (margin: number) => { - await initializePage({ fit: { type: loadFitType, margin: margin } }, fileName); + await initializePage({ fit: { type: onLoadFitType, margin: margin } }, fileName); const image = await page.screenshot({ fullPage: true }); - const config = imageSnapshotConfigurator.getConfig(fileName); - expect(image).toMatchImageSnapshot({ - ...config, - customSnapshotIdentifier: fileName, - customSnapshotsDir: getCustomSnapshotDir(config.customSnapshotsDir, loadFitType, margin), - customDiffDir: join(loadFitDiffDir, `margin-${margin}`), + const config = imageSnapshotConfigurator.getConfig({ + fileName, + fitType: onLoadFitType, + margin, + buildCustomDiffDir: (config, fitType, margin) => FitImageSnapshotConfigurator.buildOnLoadDiffDir(config, fitType, true, margin), }); + expect(image).toMatchImageSnapshot(config); }); } }); diff --git a/test/e2e/helpers/visu-utils.ts b/test/e2e/helpers/visu-utils.ts index a1ca6cdb0e..a012891355 100644 --- a/test/e2e/helpers/visu-utils.ts +++ b/test/e2e/helpers/visu-utils.ts @@ -52,8 +52,8 @@ const defaultImageSnapshotConfig: MatchImageSnapshotOptions = { }; export class ImageSnapshotConfigurator { - private readonly defaultCustomDiffDir: string; - private readonly defaultCustomSnapshotsDir: string; + protected readonly defaultCustomDiffDir: string; + protected readonly defaultCustomSnapshotsDir: string; /** * About `thresholdConfig` * @@ -69,7 +69,8 @@ export class ImageSnapshotConfigurator { // minimal threshold to make tests for diagram renders pass on local // macOS: Expected image to match or be a close match to snapshot but was 0.00031509446166699817% different from snapshot - getConfig(fileName: string): MatchImageSnapshotOptions { + getConfig(param: string | { fileName: string }): MatchImageSnapshotOptions { + const fileName = typeof param === 'string' ? param : param.fileName; const config = this.thresholdConfig.get(fileName); let failureThreshold = this.defaultFailureThreshold; if (config) {