Added line breaks and comments.

microsoft · Jan 22, 2025 · f326eda · f326eda
1 parent 8fb4a2b
commit f326eda
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 2 deletions.
diff --git a/...mponents/react-color-picker-preview/library/src/components/AlphaSlider/AlphaSlider.cy.tsx b/...mponents/react-color-picker-preview/library/src/components/AlphaSlider/AlphaSlider.cy.tsx
@@ -5,13 +5,15 @@ import { webLightTheme } from '@fluentui/react-theme';
 import { AlphaSlider } from './AlphaSlider';
 import type { AlphaSliderProps } from './AlphaSlider.types';
 import { calculateTransparencyValue } from './alphaSliderUtils';
+import { INITIAL_COLOR_HSV } from '../../utils/constants';
+
 const mountFluent = (element: JSX.Element) => {
   mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);
 };
 
 const AlphaSliderExample = (props: AlphaSliderProps) => {
   const { transparency = false } = props;
-  const [color, setColor] = React.useState(props.color ?? { h: 0, s: 1, v: 1, a: 1 });
+  const [color, setColor] = React.useState(props.color ?? INITIAL_COLOR_HSV);
   return (
     <>
       <p tabIndex={0} id="before">
@@ -53,13 +55,21 @@ describe('AlphaSlider', () => {
         mountFluent(<AlphaSliderExample color={{ h: 106, s: 0.96, v: 0.1, a: 0.5 }} />);
         cy.get('#before').focus();
         cy.realPress('Tab');
+
+        // decrements the value two times
         cy.realPress('ArrowLeft');
         cy.realPress('ArrowLeft');
         assertSliderValue('48');
+
+        // increments the value
         cy.realPress('ArrowRight');
         assertSliderValue('49');
+
+        // increments the value with arrowUp
         cy.realPress('ArrowUp');
         assertSliderValue('50');
+
+        // decrements the value with arrowDown
         cy.realPress('ArrowDown');
         assertSliderValue('49');
       });
@@ -68,11 +78,17 @@ describe('AlphaSlider', () => {
         mountFluent(<AlphaSliderExample color={{ h: 111, s: 1, v: 0.03, a: 0.02 }} />);
         cy.get('#before').focus();
         cy.realPress('Tab');
+
+        // decrements the value two times
         cy.realPress('ArrowLeft');
         cy.realPress('ArrowLeft');
         assertSliderValue('0');
+
+        // decrements the value on left edge
         cy.realPress('ArrowLeft');
         assertSliderValue('0');
+
+        // increments the value
         cy.realPress('ArrowRight');
         assertSliderValue('1');
       });
@@ -81,12 +97,20 @@ describe('AlphaSlider', () => {
         mountFluent(<AlphaSliderExample color={{ h: 111, s: 0.03, v: 0.45, a: 0.98 }} />);
         cy.get('#before').focus();
         cy.realPress('Tab');
+
+        // increments the value
         cy.realPress('ArrowRight');
         assertSliderValue('99');
+
+        // increments the value
         cy.realPress('ArrowRight');
         assertSliderValue('100');
+
+        // increments the value on right edge
         cy.realPress('ArrowRight');
         assertSliderValue('100');
+
+        // decrements the value
         cy.realPress('ArrowLeft');
         assertSliderValue('99');
       });
@@ -98,13 +122,21 @@ describe('AlphaSlider', () => {
       mountFluent(<AlphaSliderExample color={{ h: 106, s: 0.96, v: 0.1, a: 0.7 }} transparency />);
       cy.get('#before').focus();
       cy.realPress('Tab');
+
+      // decrements the value two times
       cy.realPress('ArrowLeft');
       cy.realPress('ArrowLeft');
       assertSliderValue('28');
+
+      // increments the value
       cy.realPress('ArrowRight');
       assertSliderValue('29');
+
+      // increments the value with arrowUp
       cy.realPress('ArrowUp');
       assertSliderValue('30');
+
+      // decrements the value with arrowDown
       cy.realPress('ArrowDown');
       assertSliderValue('29');
     });
@@ -113,11 +145,17 @@ describe('AlphaSlider', () => {
       mountFluent(<AlphaSliderExample color={{ h: 111, s: 1, v: 0.03, a: 0.98 }} transparency />);
       cy.get('#before').focus();
       cy.realPress('Tab');
+
+      // decrements the value two times
       cy.realPress('ArrowLeft');
       cy.realPress('ArrowLeft');
       assertSliderValue('0');
+
+      // decrements the value on left edge
       cy.realPress('ArrowLeft');
       assertSliderValue('0');
+
+      // increments the value
       cy.realPress('ArrowRight');
       assertSliderValue('1');
     });
@@ -126,12 +164,20 @@ describe('AlphaSlider', () => {
       mountFluent(<AlphaSliderExample color={{ h: 111, s: 0.03, v: 0.45, a: 0.02 }} transparency />);
       cy.get('#before').focus();
       cy.realPress('Tab');
+
+      // increments the value
       cy.realPress('ArrowRight');
       assertSliderValue('99');
+
+      // increments the value
       cy.realPress('ArrowRight');
       assertSliderValue('100');
+
+      // increments the value on right edge
       cy.realPress('ArrowRight');
       assertSliderValue('100');
+
+      // decrements the value
       cy.realPress('ArrowLeft');
       assertSliderValue('99');
     });

diff --git a/...mponents/react-color-picker-preview/library/src/components/ColorSlider/ColorSlider.cy.tsx b/...mponents/react-color-picker-preview/library/src/components/ColorSlider/ColorSlider.cy.tsx
@@ -4,13 +4,14 @@ import { FluentProvider } from '@fluentui/react-provider';
 import { webLightTheme } from '@fluentui/react-theme';
 import { ColorSlider } from './ColorSlider';
 import type { ColorSliderProps } from './ColorSlider.types';
+import { INITIAL_COLOR_HSV } from '../../utils/constants';
 
 const mountFluent = (element: JSX.Element) => {
   mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);
 };
 
 const ColorSliderExample = (props: ColorSliderProps) => {
-  const [color, setColor] = React.useState(props.color ?? { h: 0, s: 1, v: 1 });
+  const [color, setColor] = React.useState(props.color ?? INITIAL_COLOR_HSV);
   return (
     <>
       <p tabIndex={0} id="before">
@@ -50,38 +51,62 @@ describe('ColorSlider', () => {
       mountFluent(<ColorSliderExample color={{ h: 106, s: 0.96, v: 0.1 }} />);
       cy.get('#before').focus();
       cy.realPress('Tab');
+
+      // decrements the value two times
       cy.realPress('ArrowLeft');
       cy.realPress('ArrowLeft');
       assertSliderValue('104');
+
+      // increments the value
       cy.realPress('ArrowRight');
       assertSliderValue('105');
+
+      // increments the value with arrowUp
       cy.realPress('ArrowUp');
       assertSliderValue('106');
+
+      // decrements the value with arrowDown
       cy.realPress('ArrowDown');
       assertSliderValue('105');
     });
+
     it('hue channel selected on left edge correctly', () => {
       mountFluent(<ColorSliderExample color={{ h: 2, s: 1, v: 0.03 }} />);
       cy.get('#before').focus();
       cy.realPress('Tab');
+
+      // decrements the value two times
       cy.realPress('ArrowLeft');
       cy.realPress('ArrowLeft');
       assertSliderValue('0');
+
+      // decrements the value on left edge
       cy.realPress('ArrowLeft');
       assertSliderValue('0');
+
+      // increments the value
       cy.realPress('ArrowRight');
       assertSliderValue('1');
     });
+
     it('hue channel selected on right edge correctly', () => {
       mountFluent(<ColorSliderExample color={{ h: 358, s: 0.03, v: 0.45 }} />);
       cy.get('#before').focus();
       cy.realPress('Tab');
+
+      // increments the value
       cy.realPress('ArrowRight');
       assertSliderValue('359');
+
+      // increments the value
       cy.realPress('ArrowRight');
       assertSliderValue('360');
+
+      // increments the value on right edge
       cy.realPress('ArrowRight');
       assertSliderValue('360');
+
+      // decrements the value
       cy.realPress('ArrowLeft');
       assertSliderValue('359');
     });