test(react-color-picker): added tests for ColorSlider (microsoft#32373)

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);
+  });
 });

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);