test(slider): add Thumb drag interaction tests

src/__tests__/interactions-helper.js

@@ -1,4 +1,4 @@
-import { within, userEvent } from "@storybook/testing-library";
+import { within, userEvent, fireEvent } from "@storybook/testing-library";
 import { waitFor } from "@testing-library/react";
 import { getTestId, ELEMENT_TYPES as types, NAVIGATIONS_COMMANDS } from "../utils/test-utils";
 import { expect } from "@storybook/jest";
@@ -123,3 +123,58 @@ export const waitForElementVisible = getterFunc => {
 function logFunctionStart(name) {
   expect(` ➡️ ${name}`).toBeDefined();
 }
+
+function getElementClientCenter(element) {
+  const { left, top, width, height } = element.getBoundingClientRect();
+  return {
+    x: left + width / 2,
+    y: top + height / 2
+  };
+}
+
+const getCoords = ({ toElm, toCoords, delta, from }) => {
+  if (toCoords) {
+    return { ...from, ...toCoords };
+  }
+  if (toElm) {
+    return getElementClientCenter(toElm);
+  }
+  if (delta) {
+    return {
+      x: from.x + delta.x,
+      y: from.y + delta.y
+    };
+  }
+  return {
+    x: from.x + 10,
+    y: from.y + 0
+  };
+};
+
+export async function drag(
+  element,
+  { delta = undefined, toCoords = undefined, toElm = undefined, steps = 20, duration = 100 }
+) {
+  const from = getElementClientCenter(element);
+  const to = getCoords({ toElm, toCoords, delta, from });
+  const step = {
+    x: (to.x - from.x) / steps,
+    y: (to.y - from.y) / steps
+  };
+  const current = {
+    clientX: from.x,
+    clientY: from.y
+  };
+  userEvent.hover(element);
+  fireEvent.pointerEnter(element, current);
+  fireEvent.pointerOver(element, current);
+  fireEvent.pointerMove(element, current);
+  fireEvent.pointerDown(element, current);
+  for (let i = 0; i < steps; i++) {
+    current.clientX += step.x;
+    current.clientY += step.y;
+    await delay(duration / steps);
+    fireEvent.pointerMove(element, current);
+  }
+  fireEvent.pointerUp(element, current);
+}

src/components/Slider/__tests__/Slider.interactions.js

@@ -1,10 +1,17 @@
 import { expect } from "@storybook/jest";
-import { within, userEvent } from "@storybook/testing-library";
-import { delay, interactionSuite, resetFocus } from "../../../__tests__/interactions-helper";
+import { userEvent, within } from "@storybook/testing-library";
+import {
+  delay,
+  drag,
+  interactionSuite,
+  resetFocus,
+  waitForElementVisible
+} from "../../../__tests__/interactions-helper";
 
 const CHANGES_DELAY = 1;
+const MOVE_DURATION = 100;
 
-// Decrease/Increase value by mouse click on Track/Rail of Slider
+// Decrease/Increase value by mouse click on Track/Rail of Slider (NON-Ranged)
 const changeSliderValueByClickingOnTrackTest = async canvas => {
   // prepare: take sizes of slider and waiting for render
   const elRail = canvas.getByTestId("monday-slider-show-value-s__rail");
@@ -19,12 +26,29 @@ const changeSliderValueByClickingOnTrackTest = async canvas => {
   await delay(CHANGES_DELAY);
   await expect(elThumb.getAttribute("aria-valuenow")).toBe("100");
   // go to middle
-  userEvent.click(elRail, { clientX: Math.floor(rect.left + rect.width / 2) });
+  userEvent.click(elRail, { clientX: Math.floor(rect.left + rect.width * 0.5) });
   await delay(CHANGES_DELAY);
   await expect(elThumb.getAttribute("aria-valuenow")).toBe("50");
 };
 
-// Decrease/Increase value by mouse click on Track/Rail of Slider
+// Decrease value by drug Thumb of Slider (NON-Ranged)
+const changeSliderValueByDragThumbTest = async canvas => {
+  const elRail = canvas.getByTestId("monday-slider-show-value-m__rail");
+  const rect = elRail.getBoundingClientRect();
+  const elThumb = await waitForElementVisible(() => within(elRail).getByRole("slider"));
+  await drag(elThumb, {
+    duration: MOVE_DURATION,
+    toCoords: { x: Math.ceil(rect.left + rect.width * 0.25) }
+  });
+  await expect(elThumb.getAttribute("aria-valuenow")).toBe("25");
+  await drag(elThumb, {
+    duration: MOVE_DURATION,
+    toCoords: { x: Math.ceil(rect.left + rect.width * 0.75) }
+  });
+  await expect(elThumb.getAttribute("aria-valuenow")).toBe("75");
+};
+
+// Decrease/Increase values by mouse click on Track/Rail of Ranged Slider
 const changeRangedSliderValueByClickingOnTrackTest = async canvas => {
   // prepare: take sizes of slider and waiting for render
   const elRail = canvas.getByTestId("monday-ranged-slider-m__rail");
@@ -40,24 +64,62 @@ const changeRangedSliderValueByClickingOnTrackTest = async canvas => {
   await delay(CHANGES_DELAY);
   await expect(elThumbEnd.getAttribute("aria-valuenow")).toBe("100");
   // Start Thumb to 1/3 (33)
-  userEvent.click(elRail, { clientX: Math.floor(rect.left + rect.width / 3) });
+  userEvent.click(elRail, { clientX: Math.floor(rect.left + rect.width * 0.25) });
   await delay(CHANGES_DELAY);
-  await expect(elThumbStart.getAttribute("aria-valuenow")).toBe("33");
+  await expect(elThumbStart.getAttribute("aria-valuenow")).toBe("25");
   // Start Thumb to 3/4 (75)
-  userEvent.click(elRail, { clientX: Math.floor(rect.left + rect.width * (3 / 4)) });
+  userEvent.click(elRail, { clientX: Math.floor(rect.left + rect.width * 0.75) });
   await delay(CHANGES_DELAY);
   await expect(elThumbEnd.getAttribute("aria-valuenow")).toBe("75");
 };
 
+// Change value by drug Thumbs of Ranged Slider
+const changeRangedSliderValueByDragThumbTest = async canvas => {
+  // prepare slider tests
+  const elRail = canvas.getByTestId("monday-ranged-slider-s__rail");
+  const rect = elRail.getBoundingClientRect();
+  const elThumbStart = await within(elRail).findByTestId("monday-ranged-slider-s__thumb-0");
+  const elThumbEnd = await within(elRail).findByTestId("monday-ranged-slider-s__thumb-1");
+
+  // move Start Thumb from 0% to 25%
+  await drag(elThumbStart, {
+    duration: MOVE_DURATION,
+    toCoords: { x: Math.ceil(rect.left + rect.width * 0.25) }
+  });
+  await expect(elThumbStart.getAttribute("aria-valuenow")).toBe("25");
+
+  // move End Thumb from 100% to 65%
+  await drag(elThumbEnd, {
+    duration: MOVE_DURATION,
+    toCoords: { x: Math.ceil(rect.left + rect.width * 0.65) }
+  });
+  await expect(elThumbEnd.getAttribute("aria-valuenow")).toBe("65");
+
+  // move Start Thumb to 95% --> switch End/Start Thumbs when crossing
+  await drag(elThumbStart, {
+    duration: MOVE_DURATION,
+    toCoords: { x: Math.ceil(rect.left + rect.width * 0.95) }
+  });
+  // drag Start Thumb but after crossing it switching to End Thumb - should be checked
+  await expect(elThumbEnd.getAttribute("aria-valuenow")).toBe("95");
+
+  // move Start Thumb from 75% to 5%
+  await drag(elThumbStart, {
+    duration: MOVE_DURATION,
+    toCoords: { x: Math.ceil(rect.left + rect.width * 0.05) }
+  });
+  await expect(elThumbStart.getAttribute("aria-valuenow")).toBe("5");
+};
+
 export const nonRangedSliderMouseEventsPlaySuite = interactionSuite({
-  tests: [changeSliderValueByClickingOnTrackTest],
+  tests: [changeSliderValueByClickingOnTrackTest, changeSliderValueByDragThumbTest],
   afterEach: async () => {
     await resetFocus();
   }
 });
 
 export const rangedSliderMouseEventsPlaySuite = interactionSuite({
-  tests: [changeRangedSliderValueByClickingOnTrackTest],
+  tests: [changeRangedSliderValueByClickingOnTrackTest, changeRangedSliderValueByDragThumbTest],
   afterEach: async () => {
     await resetFocus();
   }