test(react-color-picker): Added cy and a11y tests for sliders (micros…

…oft#33609)
marcosmoura · Jan 23, 2025 · af2beb8 · af2beb8
1 parent 0cca673
commit af2beb8
Show file tree

Hide file tree

Showing 2 changed files with 317 additions and 0 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
@@ -0,0 +1,192 @@
+import * as React from 'react';
+import { mount } from '@cypress/react';
+import { FluentProvider } from '@fluentui/react-provider';
+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 ?? INITIAL_COLOR_HSV);
+  return (
+    <AlphaSlider
+      color={color}
+      onChange={(_, data) => setColor(data.color)}
+      id="alpha-slider"
+      aria-label="Alpha"
+      aria-valuetext={`${calculateTransparencyValue(transparency, color.a ?? 1)}%`}
+      transparency={transparency}
+    />
+  );
+};
+
+describe('AlphaSlider', () => {
+  describe('keyboard navigation', () => {
+    it('has correct focus behavior', () => {
+      mountFluent(
+        <>
+          <p tabIndex={0} id="before">
+            Before
+          </p>
+          <AlphaSliderExample color={{ h: 106, s: 0.96, v: 0.1 }} />
+          <p tabIndex={0} id="after">
+            After
+          </p>
+        </>,
+      );
+      cy.get('#before').focus();
+      cy.realPress('Tab');
+      cy.get('#alpha-slider').should('have.focus');
+      cy.realPress('Tab');
+      cy.get('#alpha-slider').should('not.have.focus');
+      cy.get('#after').should('have.focus');
+    });
+
+    describe('alpha channel', () => {
+      it('selected correctly', () => {
+        mountFluent(<AlphaSliderExample color={{ h: 106, s: 0.96, v: 0.1, a: 0.5 }} />);
+        cy.get('.fui-AlphaSlider__input').focus();
+
+        // 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');
+      });
+
+      it('selected on left edge correctly', () => {
+        mountFluent(<AlphaSliderExample color={{ h: 111, s: 1, v: 0.03, a: 0.02 }} />);
+        cy.get('.fui-AlphaSlider__input').focus();
+
+        // 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('selected on right edge correctly', () => {
+        mountFluent(<AlphaSliderExample color={{ h: 111, s: 0.03, v: 0.45, a: 0.98 }} />);
+        cy.get('.fui-AlphaSlider__input').focus();
+
+        // 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');
+      });
+    });
+  });
+
+  describe('transparency', () => {
+    it('selected correctly', () => {
+      mountFluent(<AlphaSliderExample color={{ h: 106, s: 0.96, v: 0.1, a: 0.7 }} transparency />);
+      cy.get('.fui-AlphaSlider__input').focus();
+
+      // 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');
+    });
+
+    it('selected on left edge correctly', () => {
+      mountFluent(<AlphaSliderExample color={{ h: 111, s: 1, v: 0.03, a: 0.98 }} transparency />);
+      cy.get('.fui-AlphaSlider__input').focus();
+
+      // 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('selected on right edge correctly', () => {
+      mountFluent(<AlphaSliderExample color={{ h: 111, s: 0.03, v: 0.45, a: 0.02 }} transparency />);
+      cy.get('.fui-AlphaSlider__input').focus();
+
+      // 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');
+    });
+  });
+
+  describe('mouse navigation', () => {
+    it('has correct a11y attributes', () => {
+      mountFluent(<AlphaSliderExample color={{ h: 324, s: 0.5, v: 0.5 }} />);
+      cy.get('#alpha-slider').should('have.attr', 'aria-label', 'Alpha');
+      assertSliderValue('100');
+      cy.get('#alpha-slider').realClick();
+      assertSliderValue('50');
+    });
+  });
+});
+
+function assertSliderValue(value: string) {
+  cy.get('#alpha-slider').should('have.attr', 'aria-valuetext', `${value}%`);
+  cy.get('#alpha-slider').should('have.attr', 'value', value);
+}
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
@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { mount } from '@cypress/react';
+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 ?? INITIAL_COLOR_HSV);
+  return (
+    <ColorSlider
+      color={color}
+      onChange={(_, data) => setColor(data.color)}
+      id="color-slider"
+      aria-label="Hue"
+      aria-valuetext={`${color.h}°`}
+    />
+  );
+};
+
+describe('ColorSlider', () => {
+  describe('keyboard navigation', () => {
+    it('has correct focus behavior', () => {
+      mountFluent(
+        <>
+          <p tabIndex={0} id="before">
+            Before
+          </p>
+          <ColorSliderExample color={{ h: 106, s: 0.96, v: 0.1 }} />
+          <p tabIndex={0} id="after">
+            After
+          </p>
+        </>,
+      );
+      cy.get('#before').focus();
+      cy.realPress('Tab');
+      cy.get('#color-slider').should('have.focus');
+      cy.realPress('Tab');
+      cy.get('#color-slider').should('not.have.focus');
+      cy.get('#after').should('have.focus');
+    });
+
+    it('hue channel selected correctly', () => {
+      mountFluent(<ColorSliderExample color={{ h: 106, s: 0.96, v: 0.1 }} />);
+      cy.get('.fui-ColorSlider__input').focus();
+
+      // 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('.fui-ColorSlider__input').focus();
+
+      // 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('.fui-ColorSlider__input').focus();
+
+      // 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');
+    });
+  });
+
+  describe('mouse navigation', () => {
+    it('has correct a11y attributes', () => {
+      mountFluent(<ColorSliderExample color={{ h: 324, s: 0.5, v: 0.5 }} />);
+      cy.get('#color-slider').should('have.attr', 'aria-label', 'Hue');
+      assertSliderValue('324');
+
+      cy.get('#color-slider').realClick();
+      assertSliderValue('180');
+    });
+  });
+});
+
+function assertSliderValue(value: string) {
+  cy.get('#color-slider').should('have.attr', 'aria-valuetext', `${value}°`);
+  cy.get('#color-slider').should('have.attr', 'value', value);
+}