diff --git a/src/component/mxgraph/style/utils.ts b/src/component/mxgraph/style/utils.ts
index e884a9aeae..37a7dbe267 100644
--- a/src/component/mxgraph/style/utils.ts
+++ b/src/component/mxgraph/style/utils.ts
@@ -120,6 +120,8 @@ const convertDirection = (direction: GradientDirection): string => {
       return mxConstants.DIRECTION_NORTH;
     case 'top-to-bottom':
       return mxConstants.DIRECTION_SOUTH;
+    default:
+      return mxConstants.DIRECTION_EAST;
   }
 };
 
@@ -154,6 +156,6 @@ export const isShapeStyleUpdate = (style: StyleUpdate): style is ShapeStyleUpdat
   return style && typeof style === 'object' && 'fill' in style;
 };
 
-export const isFillColorGradient = (color: string | FillColorGradient): color is FillColorGradient => {
-  return color && typeof color !== 'string';
+const isFillColorGradient = (color: string | FillColorGradient): color is FillColorGradient => {
+  return color && typeof color === 'object';
 };
diff --git a/test/integration/mxGraph.model.style.api.test.ts b/test/integration/mxGraph.model.style.api.test.ts
index 7d8e1a8b62..4d866a608d 100644
--- a/test/integration/mxGraph.model.style.api.test.ts
+++ b/test/integration/mxGraph.model.style.api.test.ts
@@ -310,7 +310,7 @@ describe('mxGraph model - update style', () => {
           label: 'Service Task 1.2',
         });
 
-        const fill: Fill = { color: { startColor: 'gold', endColor: 'pink', direction: <GradientDirection>'right-to-left' } };
+        const fill: Fill = { color: { startColor: 'gold', endColor: 'pink', direction: 'right-to-left' } };
         bpmnVisualization.bpmnElementsRegistry.updateStyle('serviceTask_1_2', { fill });
 
         // Check that the style has been updated
@@ -953,7 +953,7 @@ describe('mxGraph model - reset style', () => {
       const elementId = 'userTask_2_2';
 
       // Apply custom style
-      const fill = { color: { startColor: 'gold', endColor: 'pink', direction: <GradientDirection>'top-to-bottom' } };
+      const fill = { color: { startColor: 'gold', endColor: 'pink', direction: 'top-to-bottom' } };
       bpmnVisualization.bpmnElementsRegistry.updateStyle(elementId, { fill });
 
       // Reset style
diff --git a/test/shared/visu/bpmn-page-utils.ts b/test/shared/visu/bpmn-page-utils.ts
index 38a409e3fb..af89477f05 100644
--- a/test/shared/visu/bpmn-page-utils.ts
+++ b/test/shared/visu/bpmn-page-utils.ts
@@ -224,7 +224,7 @@ export class PageTester {
       if ('fill' in styleUpdate) {
         const fill = (<ShapeStyleUpdate>styleUpdate).fill;
 
-        if (typeof fill.color !== 'string') {
+        if (typeof fill.color === 'object') {
           fill.color.startColor && (url += `&style.api.fill.color.startColor=${fill.color.startColor}`);
           fill.color.endColor && (url += `&style.api.fill.color.endColor=${fill.color.endColor}`);
           fill.color.direction && (url += `&style.api.fill.color.direction=${fill.color.direction}`);