Merge pull request #513 from axonivy/fix-tests

XIVY-13496 Fix tests for changes swimlane colors
axonivy · Mar 15, 2024 · 4393495 · 4393495
2 parents 91bcf6d + 6daa611
commit 4393495
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/packages/editor/src/diagram/lanes/lane-views.test.tsx b/packages/editor/src/diagram/lanes/lane-views.test.tsx
@@ -60,7 +60,7 @@ describe('LaneNodeView', () => {
     const vnode = view.render(graph.index.getById('pool') as GNode, context);
     const expectation =
       '<g><rect class="sprotty-node" x="0" y="0" rx="4px" ry="4px" width="800" height="499" />' +
-      '<path class="sprotty-node pool-label-rect" d="M23,0 v499 h-19 q-4,0 -4,-4 v-491 q0,-4 4,-4 z" /><g></g>' +
+      '<path class="sprotty-node pool-label-rect" d="M23,0 v499 h-19 q-4,0 -4,-4 v-491 q0,-4 4,-4 z" />' +
       '<text id="sprotty_poolLabel" class="sprotty-label label" transform="rotate(270) translate(-250 15)" data-svg-metadata-type="lanes:label" data-svg-metadata-parent-id="sprotty_pool">' +
       '<tspan dy="0" x="0" /></text></g>';
     expect(toHTML(vnode)).to.be.equal(expectation);
@@ -71,7 +71,7 @@ describe('LaneNodeView', () => {
     const vnode = view.render(graph.index.getById('pool2') as GNode, context);
     const expectation =
       '<g><rect class="sprotty-node" x="0" y="0" rx="4px" ry="4px" width="800" height="499" />' +
-      '<path class="sprotty-node pool-label-rect" d="M37,0 v499 h-33 q-4,0 -4,-4 v-491 q0,-4 4,-4 z" /><g></g>' +
+      '<path class="sprotty-node pool-label-rect" d="M37,0 v499 h-33 q-4,0 -4,-4 v-491 q0,-4 4,-4 z" />' +
       '<text id="sprotty_poolLabel2" class="sprotty-label label" transform="rotate(270) translate(-250 15)" data-svg-metadata-type="lanes:label" data-svg-metadata-parent-id="sprotty_pool2">' +
       '<tspan dy="0" x="0" /><tspan dy="1.2em" x="0" /></text></g>';
     expect(toHTML(vnode)).to.be.equal(expectation);
@@ -81,7 +81,7 @@ describe('LaneNodeView', () => {
     const view = viewRegistry.get(LaneTypes.LANE);
     const vnode = view.render(graph.index.getById('lane') as GNode, context);
     const expectation =
-      '<g><rect class="sprotty-node" x="0" y="0" rx="4px" ry="4px" width="770" height="499" /><g></g><g></g>' +
+      '<g><rect class="sprotty-node" x="0" y="0" rx="4px" ry="4px" width="770" height="499" /><g></g>' +
       '<text id="sprotty_laneLabel" class="sprotty-label label" transform="rotate(270) translate(-250 15)" data-svg-metadata-type="lanes:label" data-svg-metadata-parent-id="sprotty_lane">' +
       '<tspan dy="0" x="0" /></text></g>';
     expect(toHTML(vnode)).to.be.equal(expectation);
@@ -92,7 +92,6 @@ describe('LaneNodeView', () => {
     const lane = graph.index.getById('lane') as LaneNode;
     lane.args = { color: 'red' };
     const vnode = view.render(lane, context);
-    const colorDot = '<circle r="6" cx="12" cy="487" style="fill: red" />';
-    expect(toHTML(vnode)).to.contain(colorDot);
+    expect(toHTML(vnode)).to.contain('style="--lane-color: red"');
   });
 });
diff --git a/playwright/tests/page-objects/element.ts b/playwright/tests/page-objects/element.ts
@@ -153,6 +153,14 @@ export class Lane extends Element {
   async expectResizeHandles(handles: number) {
     await expect(this.element.locator('.lane-resize-handle')).toHaveCount(handles);
   }
+
+  async expectColor(color?: string) {
+    if (color) {
+      await expect(this.colorLocator).toHaveAttribute('style', `--lane-color: ${color};`);
+    } else {
+      await expect(this.colorLocator).not.toHaveAttribute('style', /--lane-color: /);
+    }
+  }
 }
 
 export class Pool extends Lane {

diff --git a/playwright/tests/standalone/quick-actions/color.spec.ts b/playwright/tests/standalone/quick-actions/color.spec.ts
@@ -24,7 +24,7 @@ test.describe('quick actions - color', () => {
     const lane = await processEditor.createLane({ x: 10, y: 90 });
     await lane.expectColor();
     await lane.quickActionBar().addColor();
-    await lane.expectColor('rgb(0, 0, 255)');
+    await lane.expectColor('#0000ff');
   });
 
   test('colorize multiple elements', async ({ page, browserName }) => {