[tech debt] Tests

- convert Enzyme to RTL - add `shouldRenderCustomStyles` - update snapshots
elastic · Jun 24, 2024 · a4a4a5d · a4a4a5d
1 parent 1b91f1e
commit a4a4a5d
Show file tree

Hide file tree

Showing 2 changed files with 367 additions and 429 deletions.
diff --git a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
@@ -1,56 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders EuiColorPicker 1`] = `
-<div
-  class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
->
-  <div
-    class="euiFormControlLayout"
-  >
-    <div
-      class="euiFormControlLayout__childrenWrapper"
-    >
-      <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
-      >
-        <span
-          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
-        >
-          <span
-            aria-hidden="true"
-            class="euiFormControlLayoutCustomIcon__icon"
-            color="rgb(255,238,221)"
-            data-euiicon-type="swatchInput"
-          />
-        </span>
-      </div>
-      <input
-        aria-label="Press the down key to open a popover containing color options"
-        autocomplete="off"
-        class="euiFieldText euiColorPicker__input emotion-euiFieldText-controlOnly"
-        data-test-subj="euiColorPickerAnchor test subject string"
-        type="text"
-        value="#FFEEDD"
-      />
-      <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
-      >
-        <span
-          class="euiFormControlLayoutCustomIcon"
-        >
-          <span
-            aria-hidden="true"
-            class="euiFormControlLayoutCustomIcon__icon"
-            data-euiicon-type="arrowDown"
-          />
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders EuiColorPicker with a clearable input 1`] = `
+exports[`EuiColorPicker EuiColorPicker with a clearable input 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
@@ -110,7 +60,7 @@ exports[`renders EuiColorPicker with a clearable input 1`] = `
 </div>
 `;
 
-exports[`renders EuiColorPicker with a color swatch when color is defined 1`] = `
+exports[`EuiColorPicker EuiColorPicker with a color swatch when color is defined 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
@@ -160,7 +110,7 @@ exports[`renders EuiColorPicker with a color swatch when color is defined 1`] =
 </div>
 `;
 
-exports[`renders EuiColorPicker with a custom placeholder 1`] = `
+exports[`EuiColorPicker EuiColorPicker with a custom placeholder 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
@@ -211,7 +161,7 @@ exports[`renders EuiColorPicker with a custom placeholder 1`] = `
 </div>
 `;
 
-exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
+exports[`EuiColorPicker EuiColorPicker with an empty swatch when color is "" 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
@@ -262,7 +212,7 @@ exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
 </div>
 `;
 
-exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
+exports[`EuiColorPicker EuiColorPicker with an empty swatch when color is null 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
@@ -313,7 +263,7 @@ exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
 </div>
 `;
 
-exports[`renders a EuiColorPicker with a prepend and append 1`] = `
+exports[`EuiColorPicker a EuiColorPicker with a prepend and append 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
@@ -373,7 +323,7 @@ exports[`renders a EuiColorPicker with a prepend and append 1`] = `
 </div>
 `;
 
-exports[`renders a EuiColorPicker with an alpha range selector 1`] = `
+exports[`EuiColorPicker a EuiColorPicker with an alpha range selector 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
@@ -423,7 +373,7 @@ exports[`renders a EuiColorPicker with an alpha range selector 1`] = `
 </div>
 `;
 
-exports[`renders compressed EuiColorPicker 1`] = `
+exports[`EuiColorPicker compressed 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
@@ -473,7 +423,7 @@ exports[`renders compressed EuiColorPicker 1`] = `
 </div>
 `;
 
-exports[`renders disabled EuiColorPicker 1`] = `
+exports[`EuiColorPicker disabled 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
@@ -511,7 +461,7 @@ exports[`renders disabled EuiColorPicker 1`] = `
 </div>
 `;
 
-exports[`renders fullWidth EuiColorPicker 1`] = `
+exports[`EuiColorPicker fullWidth 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
@@ -561,7 +511,7 @@ exports[`renders fullWidth EuiColorPicker 1`] = `
 </div>
 `;
 
-exports[`renders inline EuiColorPicker 1`] = `
+exports[`EuiColorPicker inline 1`] = `
 <div
   class="euiColorPicker testClass1 testClass2 emotion-euiColorPicker-euiTestCss"
 >
@@ -630,79 +580,79 @@ exports[`renders inline EuiColorPicker 1`] = `
     <li>
       <button
         aria-label="Select #54B399 as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        class="euiColorPickerSwatch"
         style="background: rgb(84, 179, 153);"
         type="button"
       />
     </li>
     <li>
       <button
         aria-label="Select #6092C0 as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        class="euiColorPickerSwatch"
         style="background: rgb(96, 146, 192);"
         type="button"
       />
     </li>
     <li>
       <button
         aria-label="Select #D36086 as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        class="euiColorPickerSwatch"
         style="background: rgb(211, 96, 134);"
         type="button"
       />
     </li>
     <li>
       <button
         aria-label="Select #9170B8 as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        class="euiColorPickerSwatch"
         style="background: rgb(145, 112, 184);"
         type="button"
       />
     </li>
     <li>
       <button
         aria-label="Select #CA8EAE as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        class="euiColorPickerSwatch"
         style="background: rgb(202, 142, 174);"
         type="button"
       />
     </li>
     <li>
       <button
         aria-label="Select #D6BF57 as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        class="euiColorPickerSwatch"
         style="background: rgb(214, 191, 87);"
         type="button"
       />
     </li>
     <li>
       <button
         aria-label="Select #B9A888 as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        class="euiColorPickerSwatch"
         style="background: rgb(185, 168, 136);"
         type="button"
       />
     </li>
     <li>
       <button
         aria-label="Select #DA8B45 as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        class="euiColorPickerSwatch"
         style="background: rgb(218, 139, 69);"
         type="button"
       />
     </li>
     <li>
       <button
         aria-label="Select #AA6556 as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        class="euiColorPickerSwatch"
         style="background: rgb(170, 101, 86);"
         type="button"
       />
     </li>
     <li>
       <button
         aria-label="Select #E7664C as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        class="euiColorPickerSwatch"
         style="background: rgb(231, 102, 76);"
         type="button"
       />
@@ -711,7 +661,7 @@ exports[`renders inline EuiColorPicker 1`] = `
 </div>
 `;
 
-exports[`renders readOnly EuiColorPicker 1`] = `
+exports[`EuiColorPicker readOnly 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
@@ -748,3 +698,53 @@ exports[`renders readOnly EuiColorPicker 1`] = `
   </div>
 </div>
 `;
+
+exports[`EuiColorPicker renders 1`] = `
+<div
+  class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
+>
+  <div
+    class="euiFormControlLayout"
+  >
+    <div
+      class="euiFormControlLayout__childrenWrapper"
+    >
+      <div
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      >
+        <span
+          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
+        >
+          <span
+            aria-hidden="true"
+            class="euiFormControlLayoutCustomIcon__icon"
+            color="rgb(255,238,221)"
+            data-euiicon-type="swatchInput"
+          />
+        </span>
+      </div>
+      <input
+        aria-label="Press the down key to open a popover containing color options"
+        autocomplete="off"
+        class="euiFieldText euiColorPicker__input emotion-euiFieldText-controlOnly"
+        data-test-subj="euiColorPickerAnchor test subject string"
+        type="text"
+        value="#FFEEDD"
+      />
+      <div
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+      >
+        <span
+          class="euiFormControlLayoutCustomIcon"
+        >
+          <span
+            aria-hidden="true"
+            class="euiFormControlLayoutCustomIcon__icon"
+            data-euiicon-type="arrowDown"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;