fix color matching on functional test

markov00 · markov00 · commit 61abc36c896f · 2021-10-07T16:32:27.000+02:00
diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts
@@ -7,7 +7,7 @@
  */
 
 import { Position } from '@elastic/charts';
-import Color from 'color';
+import chroma from 'chroma-js';
 
 import { FtrService } from '../ftr_provider_context';
 
@@ -181,17 +181,17 @@ export class VisualizeChartPageObject extends FtrService {
     return items.some(({ color: c }) => c === color);
   }
 
-  public async doesSelectedLegendColorExistForPie(color: string) {
+  public async doesSelectedLegendColorExistForPie(matchingColor: string) {
     if (await this.isNewLibraryChart(pieChartSelector)) {
+      const hexMatchingColor = chroma(matchingColor).hex().toUpperCase();
       const slices =
         (await this.getEsChartDebugState(pieChartSelector))?.partition?.[0]?.partitions ?? [];
-      return slices.some(({ color: c }) => {
-        const rgbColor = new Color(color).rgb().toString();
-        return c === rgbColor;
+      return slices.some(({ color }) => {
+        return hexMatchingColor === chroma(color).hex().toUpperCase();
       });
     }
 
-    return await this.testSubjects.exists(`legendSelectedColor-${color}`);
+    return await this.testSubjects.exists(`legendSelectedColor-${matchingColor}`);
   }
 
   public async expectError() {
