Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[REFACTOR] update bpmn div id in test pages #893

Merged
merged 9 commits into from
Nov 19, 2020
Merged

[REFACTOR] update bpmn div id in test pages #893

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
584aef8
update 'bpmn-container' in 'lib integration' tests
tbouffard Nov 18, 2020
228f476
update comments in test utils code
tbouffard Nov 18, 2020
7e489c0
update div id in non-regression.html
tbouffard Nov 18, 2020
e6a657a
update div id in demo
tbouffard Nov 18, 2020
f7bcfca
fix remaining wrong div id in e2e test file
tbouffard Nov 18, 2020
70f5616
refactor: rename variable in test code to avoid 'viewport'
tbouffard Nov 18, 2020
93ab10d
fix demo and view tests
tbouffard Nov 18, 2020
c417f73
view tests: refactor 'describe' names to match what is under tests
tbouffard Nov 18, 2020
00ba0a5
Integrate review feedbacks: rename remaining 'viewport' references
tbouffard Nov 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ <h3>Options</h3>
</div>

<div style="position:relative; width:100%; height:800px">
<div id="graph"/>
<div id="bpmn-container"></div>
</div>


Expand Down
2 changes: 1 addition & 1 deletion src/lib-integration.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<link rel="shortcut icon" href="./static/img/favicon.ico">
</head>
<body>
<div id="bpmn-visualization-viewport"></div>
<div id="bpmn-container-custom"></div>

<!-- load global settings -->
<script src="./static/js/configureMxGraphGlobals.js"></script>
Expand Down
4 changes: 2 additions & 2 deletions src/non-regression.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<title>BPMN Visualization Non Regression</title>
<link rel="shortcut icon" href="./static/img/favicon.ico">
<style>
.graph-container {
#bpmn-container {
top: 10px;
bottom: 10px;
left: 10px;
Expand All @@ -21,7 +21,7 @@
</head>
<body>
<div id="fetch-status"></div>
<div id="viewport" class="graph-container"></div>
<div id="bpmn-container"></div>

<!-- load global settings -->
<script src="./static/js/configureMxGraphGlobals.js"></script>
Expand Down
14 changes: 7 additions & 7 deletions src/static/js/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
}

Expand Down Expand Up @@ -61,7 +61,7 @@ function configureFitTypeSelect() {
const fitTypeSelectedElt = document.getElementById('fitType-selected');
fitTypeSelectedElt.onchange = event => {
updateFitConfig({ type: event.target.value });
configureBpmnViewport();
configureBpmnContainer();
fit(fitOptions);
};

Expand All @@ -71,7 +71,7 @@ function configureFitTypeSelect() {
updateFitConfig({ type: fitTypeSelectedElt.value });
}

configureBpmnViewport();
configureBpmnContainer();
}

// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/static/js/lib-integration.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/static/js/non-regression.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,4 @@ function statusFetchKO(errorMsg) {
statusElt.className = 'status-ko';
}

documentReady(() => startBpmnVisualization({ container: 'viewport', statusFetchKoNotifier: statusFetchKO }));
documentReady(() => startBpmnVisualization({ container: 'bpmn-container', statusFetchKoNotifier: statusFetchKO }));
4 changes: 2 additions & 2 deletions test/e2e/bpmn.navigation.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
});
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/bpmn.rendering.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/diagram.rendering.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ describe('no diagram visual regression', () => {
const bpmnDiagramPreparation = new BpmnDiagramPreparation(new Map<string, BpmnLoadMethod>([]), { 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);

Expand Down
12 changes: 6 additions & 6 deletions test/e2e/helpers/visu-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<ElementHandle<Element>> {
const url = this.bpmnDiagramPreparation.prepareTestResourcesAndGetPageUrl(fileName);
Expand All @@ -152,11 +152,11 @@ 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
// <div id="viewport" class="graph-container" style="touch-action: none;">
// <div id="bpmn-container" style="touch-action: none;">
// <svg style="left: 0px; top: 0px; width: 100%; height: 100%; display: block; min-width: 1px; min-height: 1px;">
// <g>
// <g></g>
Expand All @@ -168,7 +168,7 @@ export class PageTester {
// </div>
//
// After loading, the DOM looks like
// <div id="viewport" class="graph-container" style="touch-action: none;">
// <div id="bpmn-container" style="touch-action: none;">
// <svg style="left: 0px; top: 0px; width: 100%; height: 100%; display: block; min-width: 900px; min-height: 181px;">
// <g>
// <g></g>
Expand All @@ -182,9 +182,9 @@ export class PageTester {
// </div>
//
// 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;
}
}

Expand Down
24 changes: 12 additions & 12 deletions test/e2e/mxGraph.view.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<void> {
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<void> {
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');
Expand All @@ -36,7 +36,7 @@ async function expectEvent(cellId: string, expectedText: string): Promise<void>
}

async function expectTask(cellId: string, expectedText: string): Promise<void> {
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');
Expand All @@ -45,20 +45,20 @@ async function expectTask(cellId: string, expectedText: string): Promise<void> {
}

async function expectSequenceFlow(cellId: string, expectedText?: string): Promise<void> {
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);
}

describe('BpmnVisu view - index page', () => {
describe('demo 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');
});

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');
Expand All @@ -69,12 +69,12 @@ describe('BpmnVisu view - index page', () => {
});
});

describe('BpmnVisu view - lib-integration page', () => {
it('should display graph in page', async () => {
graphContainerId = 'bpmn-visualization-viewport';
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');
await page.waitForSelector(`#${graphContainerId}`);
await page.waitForSelector(`#${bpmnContainerId}`);

await expectEvent('StartEvent_1', 'Start Event Only');
});
Expand Down
4 changes: 2 additions & 2 deletions test/e2e/performance/bpmn.navigation.performance.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
});
Expand Down