Include Slider component

Author: Hector Arce De Las Heras

src/components/slider/__tests__/slider.test.tsx

@@ -0,0 +1,249 @@
+import {
+  calcNewRangeValue,
+  calcScaleValue,
+  calcValueByOffset,
+  calculateChange,
+  equalsRangeValues,
+  shouldUpdateLeftThumb,
+  shouldUpdateRightThumb,
+} from '../utils';
+
+describe('Slider utils - equalsRangeValues', () => {
+  it('return false when array length is different', () => {
+    const areEquals = equalsRangeValues([1, 2], [1, 2, 3]);
+    expect(areEquals).toBeFalsy();
+  });
+
+  it('return false when array are differents', () => {
+    const areEquals = equalsRangeValues([1, 2], [1, 4]);
+    expect(areEquals).toBeFalsy();
+  });
+
+  it('return true when array are equals', () => {
+    const areEquals = equalsRangeValues([1, 2], [1, 2]);
+    expect(areEquals).toBeTruthy();
+  });
+});
+
+describe('Slider utils - shouldUpdateLeftThumb', () => {
+  it('return true if the newValue is less or equal than prevValue[0]', () => {
+    const shouldUpdate = shouldUpdateLeftThumb('right', 1, [2, 2]);
+    expect(shouldUpdate).toBeTruthy();
+  });
+  it('return true if the activePointer is the left one and the new value less than prevValue[1]', () => {
+    const shouldUpdate = shouldUpdateLeftThumb('left', 1, [2, 2]);
+    expect(shouldUpdate).toBeTruthy();
+  });
+});
+
+describe('Slider utils - shouldUpdateRightThumb', () => {
+  it('return true if the newValue is greater or equal than prevValue[1]', () => {
+    const shouldUpdate = shouldUpdateRightThumb('left', 3, [1, 2]);
+    expect(shouldUpdate).toBeTruthy();
+  });
+  it('return true if the activePointer is the right one and the new value greater than prevValue[0]', () => {
+    const shouldUpdate = shouldUpdateRightThumb('right', 3, [1, 2]);
+    expect(shouldUpdate).toBeTruthy();
+  });
+});
+
+describe('Slider utils - calcNewRangeValue', () => {
+  it('When shouldUpdateLeftThumb is true, return the new range value with the new value in the first position', () => {
+    const newRangeValue = calcNewRangeValue([2, 4], 1, { current: 'left' });
+    expect(newRangeValue).toEqual([1, 4]);
+  });
+
+  it('When shouldUpdateLeftThumb, but the current active pointer is the right one, the active pointer changes to left', () => {
+    const activePointer = { current: 'right' };
+    const newRangeValue = calcNewRangeValue([2, 4], 1, activePointer);
+    expect(newRangeValue).toEqual([1, 4]);
+    expect(activePointer.current).toEqual('left');
+  });
+
+  it('When shouldUpdateRightThumb is true, return the new range value with the new value in the second position', () => {
+    const newRangeValue = calcNewRangeValue([2, 4], 3, { current: 'right' });
+    expect(newRangeValue).toEqual([2, 3]);
+  });
+
+  it('When shouldUpdateRightThumb, but the current active pointer is the left one, the active pointer changes to left', () => {
+    const activePointer = { current: 'left' };
+    const newRangeValue = calcNewRangeValue([2, 4], 6, activePointer);
+    expect(newRangeValue).toEqual([2, 6]);
+    expect(activePointer.current).toEqual('right');
+  });
+
+  it('When no shouldUpdateLeftThumb nor shouldUpdateRightThumb', () => {
+    const activePointer = { current: 'other' };
+    const newRangeValue = calcNewRangeValue([2, 5], 4, activePointer);
+    expect(newRangeValue).toEqual([2, 5]);
+  });
+});
+
+describe('Slider utils - calcScaleValue', () => {
+  it('When step is 0 or less, return the value without changes', () => {
+    // max: number, min: number, step: number, value: number
+    const max = 10;
+    const min = 0;
+    const step = 0;
+    const value = 5.5;
+    const scaleValue = calcScaleValue(max, min, step, value);
+    expect(scaleValue).toEqual(value);
+  });
+});
+
+describe('Slider utils - calcValueByOffset', () => {
+  it('When step does not have decimals, return the value without decimals', () => {
+    const max = 10;
+    const min = 0;
+    const step = 1;
+    const offset = 50;
+    const offsetBoundaries = { min: 0, max: 100 };
+    const value = calcValueByOffset({ max, min, step, offset, offsetBoundaries });
+    expect(value).toEqual(5);
+  });
+  it('When step has decimals, return the value with the same decimals as the step', () => {
+    const max = 1;
+    const min = 0;
+    const step = 0.1;
+    const offset = 50;
+    const offsetBoundaries = { min: 0, max: 100 };
+    const value = calcValueByOffset({ max, min, step, offset, offsetBoundaries });
+    expect(value).toEqual(0.5);
+  });
+});
+
+describe('Slider utils - calculateChange', () => {
+  let container: HTMLDivElement;
+  let e: MouseEvent;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    Object.defineProperty(container, 'clientWidth', {
+      configurable: true,
+      // Define the property getter
+      get() {
+        return 100;
+      },
+    });
+
+    document.body.appendChild(container);
+
+    e = {
+      pageX: 50,
+      preventDefault: () => ({}),
+      altKey: false,
+      button: 0,
+      buttons: 0,
+      clientX: 0,
+      clientY: 0,
+      ctrlKey: false,
+      metaKey: false,
+      movementX: 0,
+      movementY: 0,
+      offsetX: 0,
+      offsetY: 0,
+      pageY: 0,
+      relatedTarget: null,
+      screenX: 0,
+      screenY: 0,
+      shiftKey: false,
+      x: 0,
+      y: 0,
+      getModifierState: function (): boolean {
+        throw new Error('Function not implemented.');
+      },
+      initMouseEvent: function (): void {
+        throw new Error('Function not implemented.');
+      },
+      detail: 0,
+      view: null,
+      which: 0,
+      initUIEvent: function (): void {
+        throw new Error('Function not implemented.');
+      },
+      bubbles: false,
+      cancelBubble: false,
+      cancelable: false,
+      composed: false,
+      currentTarget: null,
+      defaultPrevented: false,
+      eventPhase: 0,
+      isTrusted: false,
+      returnValue: false,
+      srcElement: null,
+      target: null,
+      timeStamp: 0,
+      type: '',
+      composedPath: function (): EventTarget[] {
+        throw new Error('Function not implemented.');
+      },
+      initEvent: function (): void {
+        throw new Error('Function not implemented.');
+      },
+      stopImmediatePropagation: function (): void {
+        throw new Error('Function not implemented.');
+      },
+      stopPropagation: function (): void {
+        throw new Error('Function not implemented.');
+      },
+      NONE: 0,
+      CAPTURING_PHASE: 1,
+      AT_TARGET: 2,
+      BUBBLING_PHASE: 3,
+    } as unknown as MouseEvent;
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it('returns 0 when click is outside the left boundary', () => {
+    Object.defineProperty(e, 'pageX', {
+      configurable: true,
+      // Define the property getter
+      get() {
+        return -5;
+      },
+    });
+
+    const offsetBoundaries = { min: 0, max: 100 };
+    const result = calculateChange({ event: e, container, offsetBoundaries });
+    expect(result).toBe(0);
+  });
+
+  it('returns 100 when click is outside the right boundary', () => {
+    Object.defineProperty(e, 'pageX', {
+      configurable: true,
+      // Define the property getter
+      get() {
+        return 105;
+      },
+    });
+    const offsetBoundaries = { min: 0, max: 100 };
+    const result = calculateChange({ event: e, container, offsetBoundaries });
+    expect(result).toBe(100);
+  });
+
+  it('returns correct offset when click is within the boundaries', () => {
+    Object.defineProperty(e, 'pageX', {
+      configurable: true,
+      // Define the property getter
+      get() {
+        return 50;
+      },
+    });
+    const offsetBoundaries = { min: 0, max: 100 };
+    const result = calculateChange({ event: e, container, offsetBoundaries });
+    expect(result).toBe(50);
+  });
+
+  it('returns correct offset when click is within the boundaries when touchEvent', () => {
+    const touch = {
+      touches: [{ pageX: 50 }],
+      preventDefault: () => ({}),
+    } as unknown as React.TouchEvent<Element>;
+    const offsetBoundaries = { min: 0, max: 100 };
+    const result = calculateChange({ event: touch, container, offsetBoundaries });
+    expect(result).toBe(50);
+  });
+});

src/components/slider/__tests__/slider.utils.test.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import { renderProvider } from 'tests/renderProvider/renderProvider.utility';
+
+import { SliderHelperTextStandAlone } from '../components/sliderHelperTextStandAlone';
+import { SliderBaseStylesType, SliderStateType } from '../types';
+
+const mockHelperTextProps = {
+  styles: {} as SliderBaseStylesType,
+  state: SliderStateType.DEFAULT,
+};
+
+describe('<sliderHelperTextStandAlone />', () => {
+  it('when no text, nothing should be render', () => {
+    const { container } = renderProvider(<SliderHelperTextStandAlone {...mockHelperTextProps} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+  it('should render left and right helper text', () => {
+    const { getByText } = renderProvider(
+      <SliderHelperTextStandAlone
+        {...mockHelperTextProps}
+        leftHelperText="left"
+        rightHelperText="right"
+      />
+    );
+    expect(getByText('left')).toBeInTheDocument();
+    expect(getByText('right')).toBeInTheDocument();
+  });
+});

src/components/slider/__tests__/sliderHelperTextStandAlone.test.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import { renderProvider } from 'tests/renderProvider/renderProvider.utility';
+
+import { SliderScaleStandAlone } from '../components/sliderScaleStandAlone';
+import { SliderBaseStylesType } from '../types';
+
+const mockScaleProps = {
+  showScale: true,
+  scaleArray: [0, 1, 2, 3, 4, 5],
+  max: 100,
+  min: 1,
+  step: 1,
+  scaleCount: 100,
+  style: undefined,
+  styles: {} as SliderBaseStylesType,
+};
+
+describe('<SliderScaleStandAlone />', () => {
+  it('when showScale is false, nothing should be render', () => {
+    const { container } = renderProvider(
+      <SliderScaleStandAlone {...mockScaleProps} showScale={false} />
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+  it('when showScale is true, should be render', () => {
+    const { container } = renderProvider(<SliderScaleStandAlone {...mockScaleProps} />);
+    expect(container).not.toBeEmptyDOMElement();
+  });
+});

src/components/slider/__tests__/sliderScaleStandAlone.test.tsx

@@ -0,0 +1,75 @@
+import userEvent from '@testing-library/user-event';
+
+import * as React from 'react';
+
+import { renderProvider } from 'tests/renderProvider/renderProvider.utility';
+
+import { ROLES } from '@/types';
+
+import { SliderStandAlone } from '../sliderStandAlone';
+import { SliderBaseStylesType } from '../types';
+
+const mockSliderStandAlone = {
+  // Original props
+  range: false,
+  min: 0,
+  max: 100,
+  step: 1,
+  disabled: false,
+  // Scale
+  showScale: false,
+  scaleArray: [],
+  scaleCount: 0,
+  // Generated props
+  value: 50,
+  offset: 50,
+  offsetLeft: 0,
+  offsetRight: 0,
+  hover: false,
+  pressed: false,
+  activePointer: { current: '' },
+  containerRef: { current: null },
+  // Modifier functions
+  onMouseDown: jest.fn(),
+  onChange: jest.fn(),
+  onTouchStart: jest.fn(),
+  onKeyPress: jest.fn(),
+  // Styles
+  styles: { states: {} } as SliderBaseStylesType,
+};
+
+describe('Slider - Mouse interactions', () => {
+  it('Slider - Simple - when user hover slider, component controls the interaction', async () => {
+    const setHover = jest.fn();
+    const { getByRole } = renderProvider(
+      <SliderStandAlone {...mockSliderStandAlone} setHover={setHover} />
+    );
+    const slider = getByRole(ROLES.SLIDER);
+    await userEvent.hover(slider);
+    expect(setHover).toHaveBeenCalledWith(true);
+    await userEvent.unhover(slider);
+    expect(setHover).toHaveBeenCalledWith(false);
+  });
+  it('Slider - Range - when user hover left slider, component controls the interaction', async () => {
+    const setHover = jest.fn();
+    const { getAllByRole } = renderProvider(
+      <SliderStandAlone {...mockSliderStandAlone} range={true} setHover={setHover} />
+    );
+    const slider = getAllByRole(ROLES.SLIDER);
+    await userEvent.hover(slider[0]);
+    expect(setHover).toHaveBeenCalledWith(true);
+    await userEvent.unhover(slider[0]);
+    expect(setHover).toHaveBeenCalledWith(false);
+  });
+  it('Slider - Range - when user hover right slider, component controls the interaction', async () => {
+    const setHover = jest.fn();
+    const { getAllByRole } = renderProvider(
+      <SliderStandAlone {...mockSliderStandAlone} range={true} setHover={setHover} />
+    );
+    const slider = getAllByRole(ROLES.SLIDER);
+    await userEvent.hover(slider[1]);
+    expect(setHover).toHaveBeenCalledWith(true);
+    await userEvent.unhover(slider[1]);
+    expect(setHover).toHaveBeenCalledWith(false);
+  });
+});

src/components/slider/__tests__/sliderStandAlone.test.tsx

@@ -0,0 +1,4 @@
+export * from './sliderHelperTextStandAlone';
+export * from './sliderScaleStandAlone';
+export * from './sliderThumbStandAlone';
+export * from './sliderButtonStandAlone';