From 584aef89e79de0d332afb7d23807a167dd26e4dd Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Wed, 18 Nov 2020 14:04:00 +0100 Subject: [PATCH 1/9] update 'bpmn-container' in 'lib integration' tests --- src/lib-integration.html | 2 +- src/static/js/lib-integration.js | 2 +- test/e2e/mxGraph.view.test.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib-integration.html b/src/lib-integration.html index ee97002e30..6f7ab1a8a6 100644 --- a/src/lib-integration.html +++ b/src/lib-integration.html @@ -6,7 +6,7 @@ -
+
diff --git a/src/static/js/lib-integration.js b/src/static/js/lib-integration.js index 39c05e5836..3beab9cd35 100644 --- a/src/static/js/lib-integration.js +++ b/src/static/js/lib-integration.js @@ -26,7 +26,7 @@ if (bpmnParameterValue) { bpmn = bpmnDefaultContent(); } // -const bpmnVisualizationIntegration = new BpmnVisualization(window.document.getElementById('bpmn-visualization-viewport')); +const bpmnVisualizationIntegration = new BpmnVisualization(window.document.getElementById('bpmn-container-custom')); bpmnVisualizationIntegration.load(bpmn); // eslint-disable-next-line @typescript-eslint/explicit-function-return-type diff --git a/test/e2e/mxGraph.view.test.ts b/test/e2e/mxGraph.view.test.ts index 557e90a9f7..9387aad92d 100644 --- a/test/e2e/mxGraph.view.test.ts +++ b/test/e2e/mxGraph.view.test.ts @@ -71,7 +71,7 @@ describe('BpmnVisu view - index page', () => { describe('BpmnVisu view - lib-integration page', () => { it('should display graph in page', async () => { - graphContainerId = 'bpmn-visualization-viewport'; + graphContainerId = 'bpmn-container-custom'; await page.goto(`http://localhost:10002/lib-integration.html?bpmn=${loadBpmnContentForUrlQueryParam('../fixtures/bpmn/simple-start-only.bpmn')}`); await expect(page.title()).resolves.toMatch('BPMN Visualization Lib Integration'); await page.waitForSelector(`#${graphContainerId}`); From 228f476a5176f58de2f169f7d4bf50d1173f1560 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Wed, 18 Nov 2020 14:36:21 +0100 Subject: [PATCH 2/9] update comments in test utils code --- test/e2e/helpers/visu-utils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/e2e/helpers/visu-utils.ts b/test/e2e/helpers/visu-utils.ts index a6d29e598b..43fc35fc70 100644 --- a/test/e2e/helpers/visu-utils.ts +++ b/test/e2e/helpers/visu-utils.ts @@ -156,7 +156,7 @@ export class PageTester { await expect(page.title()).resolves.toMatch(this.expectedPageTitle); // Prior loading a BPMN diagram, the DOM looks like - //
+ //
// // // @@ -168,7 +168,7 @@ export class PageTester { //
// // After loading, the DOM looks like - //
+ //
// // // From 7e489c0f7fff082b45d59526d95f2a71cf8b3694 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Wed, 18 Nov 2020 14:36:55 +0100 Subject: [PATCH 3/9] update div id in non-regression.html --- src/non-regression.html | 4 ++-- src/static/js/non-regression.js | 2 +- test/e2e/bpmn.rendering.test.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/non-regression.html b/src/non-regression.html index b54272a786..2910aa03a8 100644 --- a/src/non-regression.html +++ b/src/non-regression.html @@ -5,7 +5,7 @@ BPMN Visualization Non Regression
-
+
diff --git a/src/static/js/non-regression.js b/src/static/js/non-regression.js index a2f7a91809..468687582b 100644 --- a/src/static/js/non-regression.js +++ b/src/static/js/non-regression.js @@ -22,4 +22,4 @@ function statusFetchKO(errorMsg) { statusElt.className = 'status-ko'; } -documentReady(() => startBpmnVisualization({ container: 'viewport', statusFetchKoNotifier: statusFetchKO })); +documentReady(() => startBpmnVisualization({ container: 'bpmn-container', statusFetchKoNotifier: statusFetchKO })); diff --git a/test/e2e/bpmn.rendering.test.ts b/test/e2e/bpmn.rendering.test.ts index a525ed090d..041cb4d21e 100644 --- a/test/e2e/bpmn.rendering.test.ts +++ b/test/e2e/bpmn.rendering.test.ts @@ -119,7 +119,7 @@ describe('no BPMN elements visual regression', () => { 'non-regression', ); - const pageTester = new PageTester(bpmnDiagramPreparation, 'viewport', 'BPMN Visualization Non Regression'); + const pageTester = new PageTester(bpmnDiagramPreparation, 'bpmn-container', 'BPMN Visualization Non Regression'); const bpmnFileNames = findFiles('../fixtures/bpmn/non-regression/') .filter(filename => { From e6a657a92d625ae84750c14e088c6243355cfd8c Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Wed, 18 Nov 2020 14:38:11 +0100 Subject: [PATCH 4/9] update div id in demo --- src/index.html | 2 +- src/static/js/demo.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index 9cb0bdbc51..e3deedd059 100644 --- a/src/index.html +++ b/src/index.html @@ -38,7 +38,7 @@

Options

-
+
diff --git a/src/static/js/demo.js b/src/static/js/demo.js index e23baf89f1..4d74b4476d 100644 --- a/src/static/js/demo.js +++ b/src/static/js/demo.js @@ -98,7 +98,7 @@ function configureControlPanel() { // eslint-disable-next-line @typescript-eslint/explicit-function-return-type function startDemo() { - startBpmnVisualization({ container: 'graph' }); + startBpmnVisualization({ container: 'bpmn-container' }); // Configure custom html elements document.getElementById('bpmn-file').addEventListener('change', handleFileSelect, false); From f7bcfca166eaebc3d3626941cc6da2cf1e8719c7 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Wed, 18 Nov 2020 15:00:37 +0100 Subject: [PATCH 5/9] fix remaining wrong div id in e2e test file --- test/e2e/diagram.rendering.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/diagram.rendering.test.ts b/test/e2e/diagram.rendering.test.ts index 7bdf9fc0b4..e0db56853c 100644 --- a/test/e2e/diagram.rendering.test.ts +++ b/test/e2e/diagram.rendering.test.ts @@ -130,7 +130,7 @@ describe('no diagram visual regression', () => { const bpmnDiagramPreparation = new BpmnDiagramPreparation(new Map([]), { name: 'non-regression' }, 'diagram', { fit: { type: fitType, margin: margin }, }); - const pageTester = new PageTester(bpmnDiagramPreparation, 'viewport', 'BPMN Visualization Non Regression'); + const pageTester = new PageTester(bpmnDiagramPreparation, 'bpmn-container', 'BPMN Visualization Non Regression'); await pageTester.expectBpmnDiagramToBeDisplayed(fileName); From 70f56165bf81f087b3272a0b228b3096e972d08f Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Wed, 18 Nov 2020 15:02:40 +0100 Subject: [PATCH 6/9] refactor: rename variable in test code to avoid 'viewport' --- test/e2e/bpmn.navigation.test.ts | 4 ++-- test/e2e/helpers/visu-utils.ts | 8 ++++---- test/e2e/performance/bpmn.navigation.performance.test.ts | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/test/e2e/bpmn.navigation.test.ts b/test/e2e/bpmn.navigation.test.ts index b6c655ea06..8726e76eb9 100644 --- a/test/e2e/bpmn.navigation.test.ts +++ b/test/e2e/bpmn.navigation.test.ts @@ -43,8 +43,8 @@ describe('diagram navigation', () => { let viewportCenterX: number; let viewportCenterY: number; beforeEach(async () => { - const bpmnViewportElementHandle = await pageTester.expectBpmnDiagramToBeDisplayed(fileName); - const bounding_box = await bpmnViewportElementHandle.boundingBox(); + const bpmnContainerElementHandle = await pageTester.expectBpmnDiagramToBeDisplayed(fileName); + const bounding_box = await bpmnContainerElementHandle.boundingBox(); viewportCenterX = bounding_box.x + bounding_box.width / 2; viewportCenterY = bounding_box.y + bounding_box.height / 2; }); diff --git a/test/e2e/helpers/visu-utils.ts b/test/e2e/helpers/visu-utils.ts index 43fc35fc70..c939e7238d 100644 --- a/test/e2e/helpers/visu-utils.ts +++ b/test/e2e/helpers/visu-utils.ts @@ -140,7 +140,7 @@ export class BpmnDiagramPreparation { } export class PageTester { - constructor(readonly bpmnDiagramPreparation: BpmnDiagramPreparation, readonly bpmnViewportContainerId: string, readonly expectedPageTitle: string) {} + constructor(readonly bpmnDiagramPreparation: BpmnDiagramPreparation, readonly bpmnContainerId: string, readonly expectedPageTitle: string) {} async expectBpmnDiagramToBeDisplayed(fileName: string): Promise> { const url = this.bpmnDiagramPreparation.prepareTestResourcesAndGetPageUrl(fileName); @@ -152,7 +152,7 @@ export class PageTester { expect(response.status()).toBe(200); const waitForSelectorOptions = { timeout: 5_000 }; - const bpmnViewportElementHandle = await page.waitForSelector(`#${this.bpmnViewportContainerId}`, waitForSelectorOptions); + const bpmnContainerElementHandle = await page.waitForSelector(`#${this.bpmnContainerId}`, waitForSelectorOptions); await expect(page.title()).resolves.toMatch(this.expectedPageTitle); // Prior loading a BPMN diagram, the DOM looks like @@ -182,9 +182,9 @@ export class PageTester { //
// // In the 2nd 'g' node, children 'g' nodes with the 'data-cell-id' attribute (extra attribute generated by the lib) are only available when the rendering is done - await page.waitForSelector(`#${this.bpmnViewportContainerId} > svg > g > g > g[data-cell-id]`, waitForSelectorOptions); + await page.waitForSelector(`#${this.bpmnContainerId} > svg > g > g > g[data-cell-id]`, waitForSelectorOptions); - return bpmnViewportElementHandle; + return bpmnContainerElementHandle; } } diff --git a/test/e2e/performance/bpmn.navigation.performance.test.ts b/test/e2e/performance/bpmn.navigation.performance.test.ts index 9fc56f0fc1..e0b11e5b13 100644 --- a/test/e2e/performance/bpmn.navigation.performance.test.ts +++ b/test/e2e/performance/bpmn.navigation.performance.test.ts @@ -32,8 +32,8 @@ describe.each([1, 2, 3, 4, 5])('zoom performance', run => { let viewportCenterY: number; beforeEach(async () => { - const bpmnViewportElementHandle = await pageTester.expectBpmnDiagramToBeDisplayed(fileName); - const bounding_box = await bpmnViewportElementHandle.boundingBox(); + const bpmnContainerElementHandle = await pageTester.expectBpmnDiagramToBeDisplayed(fileName); + const bounding_box = await bpmnContainerElementHandle.boundingBox(); viewportCenterX = bounding_box.x + bounding_box.width / 2; viewportCenterY = bounding_box.y + bounding_box.height / 2; }); From 93ab10d23801cf1b175714e4198e6c82aac25b70 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Wed, 18 Nov 2020 16:22:03 +0100 Subject: [PATCH 7/9] fix demo and view tests --- src/static/js/demo.js | 12 ++++++------ test/e2e/mxGraph.view.test.ts | 16 ++++++++-------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/static/js/demo.js b/src/static/js/demo.js index 4d74b4476d..96a0731d64 100644 --- a/src/static/js/demo.js +++ b/src/static/js/demo.js @@ -19,14 +19,14 @@ let fitOnLoad = true; let fitOptions = {}; // eslint-disable-next-line @typescript-eslint/explicit-function-return-type -function configureBpmnViewport() { - const viewport = document.getElementById('graph'); +function configureBpmnContainer() { + const container = document.getElementById('bpmn-container'); const useFixedSize = !(fitOptions.type && FitType[fitOptions.type] === 'None'); // !== 'None' if (useFixedSize) { - viewport.classList.add('fixed-size'); + container.classList.add('fixed-size'); } else { - viewport.classList.remove('fixed-size'); + container.classList.remove('fixed-size'); } } @@ -61,7 +61,7 @@ function configureFitTypeSelect() { const fitTypeSelectedElt = document.getElementById('fitType-selected'); fitTypeSelectedElt.onchange = event => { updateFitConfig({ type: event.target.value }); - configureBpmnViewport(); + configureBpmnContainer(); fit(fitOptions); }; @@ -71,7 +71,7 @@ function configureFitTypeSelect() { updateFitConfig({ type: fitTypeSelectedElt.value }); } - configureBpmnViewport(); + configureBpmnContainer(); } // eslint-disable-next-line @typescript-eslint/explicit-function-return-type diff --git a/test/e2e/mxGraph.view.test.ts b/test/e2e/mxGraph.view.test.ts index 9387aad92d..c8282f66a5 100644 --- a/test/e2e/mxGraph.view.test.ts +++ b/test/e2e/mxGraph.view.test.ts @@ -15,19 +15,19 @@ */ import { loadBpmnContentForUrlQueryParam } from '../helpers/file-helper'; -let graphContainerId = 'graph'; +let bpmnContainerId = 'bpmn-container'; async function expectLabel(cellId: string, expectedText?: string): Promise { if (!expectedText) { return; } - const svgElementHandle = await page.waitForSelector(`#${graphContainerId} svg g g[data-cell-id="${cellId}"] g foreignObject`); + const svgElementHandle = await page.waitForSelector(`#${bpmnContainerId} svg g g[data-cell-id="${cellId}"] g foreignObject`); // contains 3 div expect(await svgElementHandle.evaluate(node => (node.firstChild.firstChild.firstChild as HTMLElement).innerHTML)).toBe(expectedText); } async function expectEvent(cellId: string, expectedText: string): Promise { - const svgElementHandle = await page.waitForSelector(`#${graphContainerId} svg g g[data-cell-id="${cellId}"]`); + const svgElementHandle = await page.waitForSelector(`#${bpmnContainerId} svg g g[data-cell-id="${cellId}"]`); // TODO do we test class? expect(await svgElementHandle.evaluate(node => node.firstChild.nodeName)).toBe('ellipse'); expect(await svgElementHandle.evaluate(node => (node.firstChild as SVGGElement).getAttribute('rx'))).toBe('18'); @@ -36,7 +36,7 @@ async function expectEvent(cellId: string, expectedText: string): Promise } async function expectTask(cellId: string, expectedText: string): Promise { - const svgElementHandle = await page.waitForSelector(`#${graphContainerId} svg g g[data-cell-id="${cellId}"]`); + const svgElementHandle = await page.waitForSelector(`#${bpmnContainerId} svg g g[data-cell-id="${cellId}"]`); expect(await svgElementHandle.evaluate(node => node.getAttribute('class'))).toBe('class-state-cell-style-task'); expect(await svgElementHandle.evaluate(node => node.firstChild.nodeName)).toBe('rect'); expect(await svgElementHandle.evaluate(node => (node.firstChild as SVGGElement).getAttribute('width'))).toBe('100'); @@ -45,7 +45,7 @@ async function expectTask(cellId: string, expectedText: string): Promise { } async function expectSequenceFlow(cellId: string, expectedText?: string): Promise { - const svgElementHandle = await page.waitForSelector(`#${graphContainerId} svg g g[data-cell-id="${cellId}"]`); + const svgElementHandle = await page.waitForSelector(`#${bpmnContainerId} svg g g[data-cell-id="${cellId}"]`); expect(await svgElementHandle.evaluate(node => node.getAttribute('class'))).toBe('class-state-cell-style-sequenceFlow-normal'); expect(await svgElementHandle.evaluate(node => node.firstChild.nodeName)).toBe('path'); await expectLabel(cellId, expectedText); @@ -54,7 +54,7 @@ async function expectSequenceFlow(cellId: string, expectedText?: string): Promis describe('BpmnVisu view - index page', () => { it('should display page title', async () => { await page.goto('http://localhost:10002'); - await page.waitForSelector(`#${graphContainerId}`); + await page.waitForSelector(`#${bpmnContainerId}`); await expect(page.title()).resolves.toMatch('BPMN Visualization Demo'); }); @@ -71,10 +71,10 @@ describe('BpmnVisu view - index page', () => { describe('BpmnVisu view - lib-integration page', () => { it('should display graph in page', async () => { - graphContainerId = 'bpmn-container-custom'; + bpmnContainerId = 'bpmn-container-custom'; await page.goto(`http://localhost:10002/lib-integration.html?bpmn=${loadBpmnContentForUrlQueryParam('../fixtures/bpmn/simple-start-only.bpmn')}`); await expect(page.title()).resolves.toMatch('BPMN Visualization Lib Integration'); - await page.waitForSelector(`#${graphContainerId}`); + await page.waitForSelector(`#${bpmnContainerId}`); await expectEvent('StartEvent_1', 'Start Event Only'); }); From c417f73e51fc74db67c51fdf6d5fa45feebe2c90 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Wed, 18 Nov 2020 16:24:24 +0100 Subject: [PATCH 8/9] view tests: refactor 'describe' names to match what is under tests --- test/e2e/mxGraph.view.test.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/e2e/mxGraph.view.test.ts b/test/e2e/mxGraph.view.test.ts index c8282f66a5..27352891cd 100644 --- a/test/e2e/mxGraph.view.test.ts +++ b/test/e2e/mxGraph.view.test.ts @@ -51,14 +51,14 @@ async function expectSequenceFlow(cellId: string, expectedText?: string): Promis await expectLabel(cellId, expectedText); } -describe('BpmnVisu view - index page', () => { +describe('demo page', () => { it('should display page title', async () => { await page.goto('http://localhost:10002'); await page.waitForSelector(`#${bpmnContainerId}`); await expect(page.title()).resolves.toMatch('BPMN Visualization Demo'); }); - it('should display graph in page', async () => { + it('should display diagram in page', async () => { await page.goto(`http://localhost:10002?bpmn=${loadBpmnContentForUrlQueryParam('../fixtures/bpmn/simple-start-task-end.bpmn')}`); await expectEvent('StartEvent_1', 'Start Event 1'); @@ -69,8 +69,8 @@ describe('BpmnVisu view - index page', () => { }); }); -describe('BpmnVisu view - lib-integration page', () => { - it('should display graph in page', async () => { +describe('lib-integration page', () => { + it('should display diagram in page', async () => { bpmnContainerId = 'bpmn-container-custom'; await page.goto(`http://localhost:10002/lib-integration.html?bpmn=${loadBpmnContentForUrlQueryParam('../fixtures/bpmn/simple-start-only.bpmn')}`); await expect(page.title()).resolves.toMatch('BPMN Visualization Lib Integration'); From 00ba0a5966f30ac2b6b9ba01d51d220e5a5f337c Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Wed, 18 Nov 2020 17:55:11 +0100 Subject: [PATCH 9/9] Integrate review feedbacks: rename remaining 'viewport' references --- src/component/options.ts | 2 +- test-bundle/lib-integration-iife.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/component/options.ts b/src/component/options.ts index 02b26465d1..923b0b126e 100644 --- a/src/component/options.ts +++ b/src/component/options.ts @@ -65,7 +65,7 @@ export interface FitOptions { export enum FitType { /** No fit, use dimensions and coordinates from the BPMN diagram. */ None, - /** Fit the whole viewport. */ + /** Fit the whole html container available to render the BPMN diagram. */ HorizontalVertical, /** Fit only horizontally. */ Horizontal, diff --git a/test-bundle/lib-integration-iife.html b/test-bundle/lib-integration-iife.html index c2da6dd785..613fc093ab 100644 --- a/test-bundle/lib-integration-iife.html +++ b/test-bundle/lib-integration-iife.html @@ -5,12 +5,12 @@ BPMN Visualization IIFE bundle -
+