Add integration tests

process-analytics · Jul 10, 2023 · bbc9b1e · bbc9b1e
1 parent cb585b1
commit bbc9b1e
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 9 deletions.
diff --git a/test/integration/matchers/matcher-utils.ts b/test/integration/matchers/matcher-utils.ts
@@ -36,6 +36,8 @@ export interface BpmnCellStyle extends StyleMap {
   fillColor: string;
   fillOpacity?: Opacity;
   swimlaneFillColor?: string;
+  gradientColor?: string;
+  gradientDirection?: string;
   fontColor: string;
   fontFamily: string;
   fontSize: number;
@@ -208,6 +210,8 @@ function toBpmnStyle(rawStyle: StyleMap, isEdge: boolean): BpmnCellStyle {
     style.horizontal = rawStyle.horizontal;
     style.swimlaneFillColor = rawStyle.swimlaneFillColor;
     style.fillOpacity = rawStyle.fillOpacity;
+    style.gradientColor = rawStyle.gradientColor;
+    style.gradientDirection = rawStyle.gradientDirection;
   }
   return style;
 }

diff --git a/test/integration/matchers/toBeShape/index.ts b/test/integration/matchers/toBeShape/index.ts
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { isFillColorGradient } from '@lib/component/mxgraph/style/utils';
 import type { BpmnCellStyle, ExpectedCell } from '../matcher-utils';
 import { buildCellMatcher, buildExpectedCellStyleWithCommonAttributes, buildReceivedCellWithCommonAttributes } from '../matcher-utils';
 import type {
@@ -66,18 +67,31 @@ export function buildExpectedShapeCellStyle(expectedModel: ExpectedShapeModelEle
   style.align = expectedModel.align ?? 'center';
   style.strokeWidth = style.strokeWidth ?? expectedStrokeWidth(expectedModel.kind);
 
-  style.fillColor =
-    expectedModel.fill?.color ??
-    ([ShapeBpmnElementKind.LANE, ShapeBpmnElementKind.POOL, ShapeBpmnElementKind.TEXT_ANNOTATION, ShapeBpmnElementKind.GROUP].includes(expectedModel.kind)
-      ? 'none'
-      : style.fillColor);
+  const fill = expectedModel.fill;
+  if (fill) {
+    if (fill.color) {
+      if (isFillColorGradient(fill.color)) {
+        style.fillColor = fill.color.startColor;
+        style.gradientColor = fill.color.endColor;
+        style.gradientDirection = fill.color.direction;
+      } else {
+        style.fillColor = fill.color;
+      }
+    }
+
+    style.fillOpacity = fill.opacity;
+  }
+
+  if (!fill?.color && [ShapeBpmnElementKind.LANE, ShapeBpmnElementKind.POOL, ShapeBpmnElementKind.TEXT_ANNOTATION, ShapeBpmnElementKind.GROUP].includes(expectedModel.kind)) {
+    style.fillColor = 'none';
+  }
+
   style.swimlaneFillColor = [ShapeBpmnElementKind.POOL, ShapeBpmnElementKind.LANE].includes(expectedModel.kind) && style.fillColor !== 'none' ? style.fillColor : undefined;
 
-  style.fillOpacity = expectedModel.fill?.opacity;
-  'isSwimLaneLabelHorizontal' in expectedModel && (style.horizontal = Number(expectedModel.isSwimLaneLabelHorizontal));
+  expectedModel.isSwimLaneLabelHorizontal && (style.horizontal = Number(expectedModel.isSwimLaneLabelHorizontal));
 
   // ignore marker order, which is only relevant when rendering the shape (it has its own order algorithm)
-  'markers' in expectedModel && (style.markers = expectedModel.markers.sort());
+  style.markers = expectedModel.markers?.sort();
 
   return style;
 }

diff --git a/test/integration/mxGraph.model.style.api.test.ts b/test/integration/mxGraph.model.style.api.test.ts
@@ -22,7 +22,7 @@ import { buildReceivedResolvedModelCellStyle, buildReceivedViewStateStyle } from
 import { buildExpectedShapeCellStyle } from './matchers/toBeShape';
 import { readFileSync } from '@test/shared/file-helper';
 import { MessageVisibleKind, ShapeBpmnElementKind, ShapeBpmnEventDefinitionKind } from '@lib/model/bpmn/internal';
-import type { EdgeStyleUpdate, Fill, Font, Stroke, StyleUpdate } from '@lib/component/registry';
+import type { EdgeStyleUpdate, Fill, Font, GradientDirection, Stroke, StyleUpdate } from '@lib/component/registry';
 import type { mxCell } from 'mxgraph';
 
 // Create a dedicated instance with a DOM container as it is required by the CSS API.
@@ -196,6 +196,18 @@ describe('mxGraph model - update style', () => {
       });
     });
 
+    it('Update the fill color as gradient', () => {
+      const fill = { color: { startColor: 'gold', endColor: 'pink', direction: <GradientDirection>'top-to-bottom' } };
+      bpmnVisualization.bpmnElementsRegistry.updateStyle('userTask_2_2', { fill });
+
+      expect('userTask_2_2').toBeUserTask({
+        fill,
+        // not under test
+        parentId: 'lane_02',
+        label: 'User Task 2.2',
+      });
+    });
+
     it('Update all opacity properties with wrong value', () => {
       bpmnVisualization.bpmnElementsRegistry.updateStyle('userTask_2_2', {
         stroke: { opacity: -72 },
@@ -884,6 +896,24 @@ describe('mxGraph model - reset style', () => {
         label: 'Pool 1',
       });
     });
+
+    it('Reset the fill color as gradient', () => {
+      const elementId = 'userTask_2_2';
+
+      // Apply custom style
+      const fill = { color: { startColor: 'gold', endColor: 'pink', direction: <GradientDirection>'top-to-bottom' } };
+      bpmnVisualization.bpmnElementsRegistry.updateStyle(elementId, { fill });
+
+      // Reset style
+      bpmnVisualization.bpmnElementsRegistry.resetStyle(elementId);
+
+      // Check that the style has been reset to default values
+      expect(elementId).toBeUserTask({
+        // not under test
+        parentId: 'lane_02',
+        label: 'User Task 2.2',
+      });
+    });
   });
 
   describe('Edges', () => {