chore(@clayui/color-picker): Tests and snapshot update

liferay · Sep 4, 2023 · aeada60 · aeada60
1 parent 1b2f055
commit aeada60
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 53 deletions.
diff --git a/packages/clay-color-picker/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-color-picker/src/__tests__/__snapshots__/index.tsx.snap
@@ -213,19 +213,58 @@ exports[`Interactions color editor interactions ability to change color of click
           </div>
         </div>
         <div
-          aria-labelledby="color-range"
-          aria-valuemax="360"
-          aria-valuemin="0"
-          aria-valuenow="0"
-          class="clay-color-range clay-color-range-hue"
-          role="slider"
-          tabindex="0"
+          class="clay-color-form-group"
         >
-          <button
-            class="clay-color-pointer clay-color-range-pointer"
-            style="background: rgb(255, 0, 0); left: -7px;"
-            type="button"
-          />
+          <div
+            class="clay-range clay-color-slider clay-color-slider-hue"
+          >
+            <div
+              class="clay-range-input"
+            >
+              <input
+                class="form-control-range"
+                data-testid="hueSlider"
+                max="360"
+                min="0"
+                step="1"
+                style="color: rgb(255, 0, 0);"
+                type="range"
+                value="0"
+              />
+              <div
+                class="clay-range-track"
+              />
+              <div
+                class="clay-range-progress"
+                style="width: 0%;"
+              >
+                <div
+                  class="clay-range-thumb"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="input-group"
+          >
+            <div
+              class="input-group-item"
+            >
+              <input
+                class="form-control input-group-inset input-group-inset-before"
+                data-testid="hInput"
+                max="360"
+                min="0"
+                type="number"
+                value="0"
+              />
+              <label
+                class="input-group-inset-item input-group-inset-item-before"
+              >
+                H
+              </label>
+            </div>
+          </div>
         </div>
         <div
           class="clay-color-map-group"

diff --git a/packages/clay-color-picker/src/__tests__/index.tsx b/packages/clay-color-picker/src/__tests__/index.tsx
@@ -9,9 +9,7 @@ import {
 	fireEvent,
 	getAllByRole,
 	render,
-	screen,
 } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import getMouseEvent from '../../tests-util';
@@ -342,22 +340,12 @@ describe('Interactions', () => {
 		});
 
 		it('changes the color by changing the hue', () => {
-			const hueSelector = document.querySelector('.clay-color-range-hue');
-
-			mockClientRect(hueSelector as HTMLElement);
-
-			const mouseDown = getMouseEvent('pointerdown', {
-				pageX: 0,
-				pageY: 0,
-			});
-
-			fireEvent(hueSelector as HTMLElement, mouseDown);
-
-			const mouseMove = getMouseEvent('pointermove', {
-				pageX: 50,
-			});
+			const [hueSlider] = getAllByRole(
+				document.body,
+				'slider'
+			) as Array<HTMLElement>;
 
-			fireEvent(hueSelector as HTMLElement, mouseMove);
+			fireEvent.change(hueSlider as HTMLElement, {target: {value: 10}});
 
 			expect(handleColorsChange).toBeCalledTimes(1);
 		});
@@ -368,12 +356,10 @@ describe('Interactions', () => {
 				document.body,
 				'slider'
 			) as Array<HTMLElement>;
-			screen.debug(alphaSlider as HTMLElement);
 
 			fireEvent.change(alphaSlider as HTMLElement, {
 				target: {value: 0.5},
 			});
-			screen.debug(alphaSlider as HTMLElement);
 
 			expect(handleColorsChange).toBeCalledTimes(1);
 		});
@@ -418,36 +404,26 @@ describe('Interactions', () => {
 		});
 
 		it('pressing right arrow key increase hue value', async () => {
-			const hueSlider = document.querySelector(
-				'.clay-color-range-hue'
-			) as HTMLElement;
-
-			userEvent.click(hueSlider);
-			expect(handleColorsChange).toBeCalledTimes(1);
-			expect(handleValueChange).toBeCalledTimes(1);
-
-			userEvent.keyboard('[ArrowRight]');
+			const [hueSlider] = getAllByRole(
+				document.body,
+				'slider'
+			) as Array<HTMLElement>;
 
-			expect(handleColorsChange).toBeCalledTimes(2);
-			expect(handleValueChange).toBeCalledTimes(2);
+			fireEvent.change(hueSlider as HTMLElement, {target: {value: 1}});
 
-			expect(hueSlider.getAttribute('aria-valuenow')).toBe('1');
+			expect(handleColorsChange).toBeCalledTimes(1);
 		});
 
 		it('pressing left arrow key descrease hue value', async () => {
-			const hueSlider = document.querySelector(
-				'.clay-color-range-hue'
-			) as HTMLElement;
+			const [hueSlider] = getAllByRole(
+				document.body,
+				'slider'
+			) as Array<HTMLElement>;
 
-			userEvent.click(hueSlider);
-			expect(handleColorsChange).toBeCalledTimes(1);
-			expect(handleValueChange).toBeCalledTimes(1);
+			fireEvent.change(hueSlider as HTMLElement, {target: {value: 1}});
+			fireEvent.change(hueSlider as HTMLElement, {target: {value: 0}});
 
-			userEvent.keyboard('[ArrowLeft]');
 			expect(handleColorsChange).toBeCalledTimes(2);
-			expect(handleValueChange).toBeCalledTimes(2);
-
-			expect(hueSlider.getAttribute('aria-valuenow')).toBe('0');
 		});
 	});