From 5c671b32c10347f647b09105695f840824ebee4e Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Tue, 27 Aug 2024 03:56:45 -0700
Subject: [PATCH] test(react-color-picker): added tests for ColorSlider
 (#32373)

---
 .../ColorSlider/ColorSlider.test.tsx          | 49 ++++++++++++++++++-
 .../ColorSlider/useColorSliderState.ts        |  3 +-
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-color-picker-preview/library/src/components/ColorSlider/ColorSlider.test.tsx b/packages/react-components/react-color-picker-preview/library/src/components/ColorSlider/ColorSlider.test.tsx
index faa827fef4cc7..5e34689a56f1c 100644
--- a/packages/react-components/react-color-picker-preview/library/src/components/ColorSlider/ColorSlider.test.tsx
+++ b/packages/react-components/react-color-picker-preview/library/src/components/ColorSlider/ColorSlider.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { isConformant } from '../../testing/isConformant';
 import { ColorSlider } from './ColorSlider';
 
@@ -34,4 +34,51 @@ describe('ColorSlider', () => {
       </div>
     `);
   });
+
+  it('handles id prop', () => {
+    const testId = 'test-id';
+    render(<ColorSlider id={testId} />);
+    expect(screen.getByRole('slider').getAttribute('id')).toEqual(testId);
+  });
+
+  it('applies the defaultValue prop', () => {
+    render(<ColorSlider defaultValue={10} />);
+    expect(screen.getByRole('slider').getAttribute('value')).toEqual('10');
+  });
+
+  it('applies the value prop', () => {
+    render(<ColorSlider value={10} />);
+    expect(screen.getByRole('slider').getAttribute('value')).toEqual('10');
+  });
+
+  it('applies the correct value prop when min is set', () => {
+    render(<ColorSlider value={0} min={20} />);
+    expect(screen.getByRole('slider').getAttribute('value')).toEqual('20');
+  });
+
+  it('applies the correct value prop when max is set', () => {
+    render(<ColorSlider value={30} max={20} />);
+    expect(screen.getByRole('slider').getAttribute('value')).toEqual('20');
+  });
+
+  it('clamps an initial defaultValue that is out of bounds', () => {
+    render(<ColorSlider defaultValue={-10} min={0} max={100} />);
+    expect(screen.getByRole('slider').getAttribute('value')).toEqual('0');
+  });
+
+  it('applies focus to the hidden input', () => {
+    render(<ColorSlider defaultValue={3} />);
+    const input = screen.getByRole('slider');
+
+    input.focus();
+    expect(document.activeElement).toEqual(input);
+  });
+
+  it('applies aria-valuetext', () => {
+    const testValue = 'test-value';
+
+    render(<ColorSlider aria-label={testValue} />);
+
+    expect(screen.getByRole('slider').getAttribute('aria-label')).toEqual(testValue);
+  });
 });
diff --git a/packages/react-components/react-color-picker-preview/library/src/components/ColorSlider/useColorSliderState.ts b/packages/react-components/react-color-picker-preview/library/src/components/ColorSlider/useColorSliderState.ts
index 6bbc204cae75d..03baa8d310543 100644
--- a/packages/react-components/react-color-picker-preview/library/src/components/ColorSlider/useColorSliderState.ts
+++ b/packages/react-components/react-color-picker-preview/library/src/components/ColorSlider/useColorSliderState.ts
@@ -16,10 +16,11 @@ export const useColorSliderState_unstable = (state: ColorSliderState, props: Col
   'use no memo';
 
   const { dir } = useFluent();
-  const { min = 0, max = MAX_COLOR_HUE, onChange, value } = props;
+  const { defaultValue, min = 0, max = MAX_COLOR_HUE, onChange, value } = props;
 
   const [currentValue, setCurrentValue] = useControllableState({
     state: value,
+    defaultState: defaultValue,
     initialState: 0,
   });
   const clampedValue = clamp(currentValue, min, max);