From fa100e4a8c66fc7a2c9df04b2fef487ed4f6894c Mon Sep 17 00:00:00 2001
From: Omri Lavi <omrila@monday.com>
Date: Thu, 31 Mar 2022 08:48:03 +0300
Subject: [PATCH] color picker testids fix (#614)

* fix testids and tests
---
 src/__tests__/interactions-helper.js          |  4 +-
 .../__tests__/ColorPicker.interactions.js     | 24 +++---
 .../__snapshots__/colorPicker.jest.js.snap    | 80 +++++++++----------
 .../ColorPickerColorsGrid.jsx                 |  1 -
 .../ColorPickerItemComponent.jsx              |  3 +-
 src/utils/test-utils.js                       |  3 +-
 6 files changed, 61 insertions(+), 54 deletions(-)

diff --git a/src/__tests__/interactions-helper.js b/src/__tests__/interactions-helper.js
index 90588d4c6d..1e3e3e87b4 100644
--- a/src/__tests__/interactions-helper.js
+++ b/src/__tests__/interactions-helper.js
@@ -128,8 +128,8 @@ export const waitForElementVisible = getterFunc => {
   });
 };
 
-export const keyboardMultipleTimes = async (text, times, options = { delay: 70 }) => {
-  text = text.repeat(times);
+export const keyboardMultipleTimes = async (text, count, options = { delay: 70 }) => {
+  text = text.repeat(count);
   await userEvent.keyboard(text, options);
 };
 
diff --git a/src/components/ColorPicker/__tests__/ColorPicker.interactions.js b/src/components/ColorPicker/__tests__/ColorPicker.interactions.js
index b45e92304d..7222e33408 100644
--- a/src/components/ColorPicker/__tests__/ColorPicker.interactions.js
+++ b/src/components/ColorPicker/__tests__/ColorPicker.interactions.js
@@ -1,7 +1,13 @@
 import { userEvent, within } from "@storybook/testing-library";
 import { contentColorsByName } from "../../../utils/colors-vars-map";
-import { interactionSuite, keyboardMultipleTimes, resetFocus } from "../../../__tests__/interactions-helper";
+import {
+  ELEMENT_TYPES,
+  interactionSuite,
+  keyboardMultipleTimes,
+  resetFocus
+} from "../../../__tests__/interactions-helper";
 import { expect } from "@storybook/jest";
+import { getTestId } from "../../../utils/test-utils";
 
 async function selectAndResetWithKeyboard(canvas) {
   await clickOnColor(canvas, contentColorsByName.BRIGHT_GREEN);
@@ -63,31 +69,31 @@ export const multiSelectionInteractionSuite = interactionSuite({
 });
 
 async function clickOnColor(canvas, color) {
-  const element = await getColorItem(canvas, color);
-  const toClick = within(element).getByLabelText(color);
+  const element = await findColorItem(canvas, color);
+  const toClick = await within(element).findByLabelText(color);
   await userEvent.click(toClick);
 }
 
 async function expectColorToBeSelected(canvas, color) {
-  const element = await getColorItem(canvas, color);
+  const element = await findColorItem(canvas, color);
   expect(element).toHaveClass("selected-color");
 }
 
 async function expectColorToBeNotSelected(canvas, color) {
-  const element = await getColorItem(canvas, color);
+  const element = await findColorItem(canvas, color);
   expect(element).not.toHaveClass("selected-color");
 }
 
 async function expectColorToBeActive(canvas, color) {
-  const element = await getColorItem(canvas, color);
+  const element = await findColorItem(canvas, color);
   expect(element).toHaveClass("active");
 }
 
 async function expectColorToBeNotActive(canvas, color) {
-  const element = await getColorItem(canvas, color);
+  const element = await findColorItem(canvas, color);
   expect(element).not.toHaveClass("active");
 }
 
-async function getColorItem(canvas, color) {
-  return await canvas.getByTestId(`color-picker-item-${color}`);
+async function findColorItem(canvas, color) {
+  return await canvas.findByTestId(getTestId(ELEMENT_TYPES.COLOR_PICKER_ITEM, color));
 }
diff --git a/src/components/ColorPicker/__tests__/__snapshots__/colorPicker.jest.js.snap b/src/components/ColorPicker/__tests__/__snapshots__/colorPicker.jest.js.snap
index c7b43ab74b..bf95277ad4 100644
--- a/src/components/ColorPicker/__tests__/__snapshots__/colorPicker.jest.js.snap
+++ b/src/components/ColorPicker/__tests__/__snapshots__/colorPicker.jest.js.snap
@@ -27,7 +27,7 @@ exports[`renders correctly with empty props 1`] = `
     >
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-grass_green"
+        data-testid="color-picker-item_grass_green"
       >
         <div
           className="feedback-indicator"
@@ -55,7 +55,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-done-green"
+        data-testid="color-picker-item_done-green"
       >
         <div
           className="feedback-indicator"
@@ -83,7 +83,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-bright-green"
+        data-testid="color-picker-item_bright-green"
       >
         <div
           className="feedback-indicator"
@@ -111,7 +111,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-saladish"
+        data-testid="color-picker-item_saladish"
       >
         <div
           className="feedback-indicator"
@@ -139,7 +139,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-egg_yolk"
+        data-testid="color-picker-item_egg_yolk"
       >
         <div
           className="feedback-indicator"
@@ -167,7 +167,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-working_orange"
+        data-testid="color-picker-item_working_orange"
       >
         <div
           className="feedback-indicator"
@@ -195,7 +195,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-dark-orange"
+        data-testid="color-picker-item_dark-orange"
       >
         <div
           className="feedback-indicator"
@@ -223,7 +223,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-peach"
+        data-testid="color-picker-item_peach"
       >
         <div
           className="feedback-indicator"
@@ -251,7 +251,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-sunset"
+        data-testid="color-picker-item_sunset"
       >
         <div
           className="feedback-indicator"
@@ -279,7 +279,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-stuck-red"
+        data-testid="color-picker-item_stuck-red"
       >
         <div
           className="feedback-indicator"
@@ -307,7 +307,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-dark-red"
+        data-testid="color-picker-item_dark-red"
       >
         <div
           className="feedback-indicator"
@@ -335,7 +335,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-sofia_pink"
+        data-testid="color-picker-item_sofia_pink"
       >
         <div
           className="feedback-indicator"
@@ -363,7 +363,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-lipstick"
+        data-testid="color-picker-item_lipstick"
       >
         <div
           className="feedback-indicator"
@@ -391,7 +391,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-bubble"
+        data-testid="color-picker-item_bubble"
       >
         <div
           className="feedback-indicator"
@@ -419,7 +419,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-purple"
+        data-testid="color-picker-item_purple"
       >
         <div
           className="feedback-indicator"
@@ -447,7 +447,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-dark_purple"
+        data-testid="color-picker-item_dark_purple"
       >
         <div
           className="feedback-indicator"
@@ -475,7 +475,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-berry"
+        data-testid="color-picker-item_berry"
       >
         <div
           className="feedback-indicator"
@@ -503,7 +503,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-dark_indigo"
+        data-testid="color-picker-item_dark_indigo"
       >
         <div
           className="feedback-indicator"
@@ -531,7 +531,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-indigo"
+        data-testid="color-picker-item_indigo"
       >
         <div
           className="feedback-indicator"
@@ -559,7 +559,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-navy"
+        data-testid="color-picker-item_navy"
       >
         <div
           className="feedback-indicator"
@@ -587,7 +587,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-bright-blue"
+        data-testid="color-picker-item_bright-blue"
       >
         <div
           className="feedback-indicator"
@@ -615,7 +615,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-dark-blue"
+        data-testid="color-picker-item_dark-blue"
       >
         <div
           className="feedback-indicator"
@@ -643,7 +643,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-aquamarine"
+        data-testid="color-picker-item_aquamarine"
       >
         <div
           className="feedback-indicator"
@@ -671,7 +671,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-chili-blue"
+        data-testid="color-picker-item_chili-blue"
       >
         <div
           className="feedback-indicator"
@@ -699,7 +699,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-river"
+        data-testid="color-picker-item_river"
       >
         <div
           className="feedback-indicator"
@@ -727,7 +727,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-winter"
+        data-testid="color-picker-item_winter"
       >
         <div
           className="feedback-indicator"
@@ -755,7 +755,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-explosive"
+        data-testid="color-picker-item_explosive"
       >
         <div
           className="feedback-indicator"
@@ -783,7 +783,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-american_gray"
+        data-testid="color-picker-item_american_gray"
       >
         <div
           className="feedback-indicator"
@@ -811,7 +811,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-blackish"
+        data-testid="color-picker-item_blackish"
       >
         <div
           className="feedback-indicator"
@@ -839,7 +839,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-brown"
+        data-testid="color-picker-item_brown"
       >
         <div
           className="feedback-indicator"
@@ -867,7 +867,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-orchid"
+        data-testid="color-picker-item_orchid"
       >
         <div
           className="feedback-indicator"
@@ -895,7 +895,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-tan"
+        data-testid="color-picker-item_tan"
       >
         <div
           className="feedback-indicator"
@@ -923,7 +923,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-sky"
+        data-testid="color-picker-item_sky"
       >
         <div
           className="feedback-indicator"
@@ -951,7 +951,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-coffee"
+        data-testid="color-picker-item_coffee"
       >
         <div
           className="feedback-indicator"
@@ -979,7 +979,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-royal"
+        data-testid="color-picker-item_royal"
       >
         <div
           className="feedback-indicator"
@@ -1007,7 +1007,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-teal"
+        data-testid="color-picker-item_teal"
       >
         <div
           className="feedback-indicator"
@@ -1035,7 +1035,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-lavender"
+        data-testid="color-picker-item_lavender"
       >
         <div
           className="feedback-indicator"
@@ -1063,7 +1063,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-steel"
+        data-testid="color-picker-item_steel"
       >
         <div
           className="feedback-indicator"
@@ -1091,7 +1091,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-lilac"
+        data-testid="color-picker-item_lilac"
       >
         <div
           className="feedback-indicator"
@@ -1119,7 +1119,7 @@ exports[`renders correctly with empty props 1`] = `
       </li>
       <li
         className="monday-style-color-item-wrapper"
-        data-testid="color-picker-item-pecan"
+        data-testid="color-picker-item_pecan"
       >
         <div
           className="feedback-indicator"
diff --git a/src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.jsx b/src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.jsx
index fe01be77d4..dbd7293715 100644
--- a/src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.jsx
+++ b/src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.jsx
@@ -55,7 +55,6 @@ export const ColorPickerColorsGrid = React.forwardRef(
               colorSize={colorSize}
               tooltipContent={tooltipContentByColor[color]}
               colorShape={colorShape}
-              data-testid={`color-picker-item-${color}`}
             />
           );
         })}
diff --git a/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.jsx b/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.jsx
index 98e142ec9c..d2cdad19ef 100644
--- a/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.jsx
+++ b/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.jsx
@@ -9,6 +9,7 @@ import Icon from "../../../Icon/Icon";
 import Tooltip from "../../../Tooltip/Tooltip";
 import Clickable from "../../../Clickable/Clickable";
 import { COLOR_SHAPES } from "../../ColorPickerConstants";
+import { getTestId } from "../../../../utils/test-utils";
 
 const ColorPickerItemComponent = ({
   color,
@@ -63,7 +64,7 @@ const ColorPickerItemComponent = ({
           active: isActive,
           circle: colorShape === COLOR_SHAPES.CIRCLE
         })}
-        data-testid={dataTestId}
+        data-testid={dataTestId || getTestId("color-picker-item", color)}
       >
         <div className="feedback-indicator" />
         <Clickable
diff --git a/src/utils/test-utils.js b/src/utils/test-utils.js
index 235d2c1f98..34bbc3cc89 100644
--- a/src/utils/test-utils.js
+++ b/src/utils/test-utils.js
@@ -2,7 +2,8 @@ export const ELEMENT_TYPES = {
   COMBOBOX: "combobox",
   DROPDOWN: "dropdown",
   BUTTON: "button",
-  CLICKABLE: "clickable"
+  CLICKABLE: "clickable",
+  COLOR_PICKER_ITEM: "color-picker-item"
 };
 
 export const NAVIGATIONS_COMMANDS = {