test(Slider): add interaction tests for ranged mode

src/components/Slider/__stories__/Slider.stories.mdx

@@ -18,7 +18,7 @@ import Slider from "../Slider";
 import Sound from "../../Icon/Icons/components/Sound";
 import Video from "../../Icon/Icons/components/Video";
 import Chips from "../../Chips/Chips";
-import { nonRangedSliderMouseEventsPlaySuite } from "../__tests__/Slider.interactions"
+import { nonRangedSliderMouseEventsPlaySuite, rangedSliderMouseEventsPlaySuite } from "../__tests__/Slider.interactions"
 
 export const argTypes = createStoryMetaSettings({
   component: Slider,
@@ -86,9 +86,9 @@ Sizes small/medium/large are available.
 Slider can define range instead of single value
 
 <Canvas>
-  <Story name="Ranged">
-    <Slider size={Slider.sizes.SMALL} ranged={true} />
-    <Slider size={Slider.sizes.MEDIUM} ranged={true} defaultValue={[12, 55]} />
+  <Story name="Ranged" play={rangedSliderMouseEventsPlaySuite}>
+    <Slider data-testid={"monday-ranged-slider-s"} size={Slider.sizes.SMALL} ranged={true} />
+    <Slider data-testid={"monday-ranged-slider-m"} size={Slider.sizes.MEDIUM} ranged={true} defaultValue={[12, 55]} />
     <Slider size={Slider.sizes.LARGE} ranged={true} defaultValue={[25, 32]} />
   </Story>
 </Canvas>

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

@@ -1,6 +1,6 @@
 import { expect } from "@storybook/jest";
 import { within, userEvent } from "@storybook/testing-library";
-import { delay, interactionSuite, resetFocus, waitForElementVisible } from "../../../__tests__/interactions-helper";
+import { delay, interactionSuite, resetFocus } from "../../../__tests__/interactions-helper";
 
 const CHANGES_DELAY = 1;
 
@@ -9,24 +9,56 @@ const changeSliderValueByClickingOnTrackTest = async canvas => {
   // prepare: take sizes of slider and waiting for render
   const elRail = canvas.getByTestId("monday-slider-show-value-s__rail");
   const rect = elRail.getBoundingClientRect();
-  const elThumb = await waitForElementVisible(() => within(elRail).getByRole("slider"));
+  const elThumb = await within(elRail).findByRole("slider");
   // go to start
   userEvent.click(elRail, { clientX: Math.ceil(rect.left) });
   await delay(CHANGES_DELAY);
   await expect(elThumb.getAttribute("aria-valuenow")).toBe("0");
-  // got to end
+  // go to end
   userEvent.click(elRail, { clientX: Math.floor(rect.right) });
   await delay(CHANGES_DELAY);
   await expect(elThumb.getAttribute("aria-valuenow")).toBe("100");
-  // got to middle
+  // go to middle
   userEvent.click(elRail, { clientX: Math.floor(rect.left + rect.width / 2) });
   await delay(CHANGES_DELAY);
   await expect(elThumb.getAttribute("aria-valuenow")).toBe("50");
 };
 
+// Decrease/Increase value by mouse click on Track/Rail of Slider
+const changeRangedSliderValueByClickingOnTrackTest = async canvas => {
+  // prepare: take sizes of slider and waiting for render
+  const elRail = canvas.getByTestId("monday-ranged-slider-m__rail");
+  const rect = elRail.getBoundingClientRect();
+  const elThumbStart = await within(elRail).findByTestId("monday-ranged-slider-m__thumb-0");
+  const elThumbEnd = await within(elRail).findByTestId("monday-ranged-slider-m__thumb-1");
+  // Start Thumb to Start (0)
+  userEvent.click(elRail, { clientX: Math.ceil(rect.left) });
+  await delay(CHANGES_DELAY);
+  await expect(elThumbStart.getAttribute("aria-valuenow")).toBe("0");
+  // End Thumb to End (100)
+  userEvent.click(elRail, { clientX: Math.floor(rect.right) });
+  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) });
+  await delay(CHANGES_DELAY);
+  await expect(elThumbStart.getAttribute("aria-valuenow")).toBe("33");
+  // Start Thumb to 3/4 (75)
+  userEvent.click(elRail, { clientX: Math.floor(rect.left + rect.width * (3 / 4)) });
+  await delay(CHANGES_DELAY);
+  await expect(elThumbEnd.getAttribute("aria-valuenow")).toBe("75");
+};
+
 export const nonRangedSliderMouseEventsPlaySuite = interactionSuite({
   tests: [changeSliderValueByClickingOnTrackTest],
   afterEach: async () => {
     await resetFocus();
   }
 });
+
+export const rangedSliderMouseEventsPlaySuite = interactionSuite({
+  tests: [changeRangedSliderValueByClickingOnTrackTest],
+  afterEach: async () => {
+    await resetFocus();
+  }
+});

src/components/Slider/__tests__/__snapshots__/slider-ranged-tests.jest.js.snap

@@ -489,155 +489,3 @@ Snapshot Diff:
         </div>
         <div
 `;
-
-exports[`d. Ranges Slider Mouse Events 01. decrease Start value by mouse click on Track before StartThumb 1`] = `
-Snapshot Diff:
-- Default Render
-+ Current Render
-
-@@ --- --- @@
-        />
-        <div
-          class="monday-slider__filled-track"
--         style="left: 25%; width: 40%;"
-+         style="left: 7%; width: 58%;"
-        />
-        <div
-          aria-disabled="false"
-          aria-valuemax="100"
-          aria-valuemin="0"
--         aria-valuenow="25"
--         aria-valuetext="25%"
-+         aria-valuenow="7"
-+         aria-valuetext="7%"
-          class="monday-slider__thumb monday-slider__thumb--index-0"
-          data-testid="monday-slider__thumb-0"
-          role="slider"
--         style="left: 25%;"
-+         style="left: 7%;"
-          tabindex="0"
-        >
-          <label
-            class="monday-slider__thumb-label"
-          >
--           25%
-+           7%
-          </label>
-        </div>
-        <div
-`;
-
-exports[`d. Ranges Slider Mouse Events 02. increase Start value by mouse click on Track (between near Start) 1`] = `
-Snapshot Diff:
-- Default Render
-+ Current Render
-
-@@ --- --- @@
-        />
-        <div
-          class="monday-slider__filled-track"
--         style="left: 25%; width: 40%;"
-+         style="left: 30%; width: 35%;"
-        />
-        <div
-          aria-disabled="false"
-          aria-valuemax="100"
-          aria-valuemin="0"
--         aria-valuenow="25"
--         aria-valuetext="25%"
-+         aria-valuenow="30"
-+         aria-valuetext="30%"
-          class="monday-slider__thumb monday-slider__thumb--index-0"
-          data-testid="monday-slider__thumb-0"
-          role="slider"
--         style="left: 25%;"
-+         style="left: 30%;"
-          tabindex="0"
-        >
-          <label
-            class="monday-slider__thumb-label"
-          >
--           25%
-+           30%
-          </label>
-        </div>
-        <div
-`;
-
-exports[`d. Ranges Slider Mouse Events 03. decrease value by mouse click on Track (between near End) 1`] = `
-Snapshot Diff:
-- Default Render
-+ Current Render
-
-@@ --- --- @@
-        />
-        <div
-          class="monday-slider__filled-track"
--         style="left: 25%; width: 40%;"
-+         style="left: 25%; width: 24%;"
-        />
-        <div
-          aria-disabled="false"
-@@ --- --- @@
-          aria-disabled="false"
-          aria-valuemax="100"
-          aria-valuemin="0"
--         aria-valuenow="65"
--         aria-valuetext="65%"
-+         aria-valuenow="49"
-+         aria-valuetext="49%"
-          class="monday-slider__thumb monday-slider__thumb--index-1"
-          data-testid="monday-slider__thumb-1"
-          role="slider"
--         style="left: 65%;"
-+         style="left: 49%;"
-          tabindex="0"
-        >
-          <label
-            class="monday-slider__thumb-label"
-          >
--           65%
-+           49%
-          </label>
-        </div>
-      </div>
-`;
-
-exports[`d. Ranges Slider Mouse Events 04. increase End value by mouse click on Track (after End) 1`] = `
-Snapshot Diff:
-- Default Render
-+ Current Render
-
-@@ --- --- @@
-        />
-        <div
-          class="monday-slider__filled-track"
--         style="left: 25%; width: 40%;"
-+         style="left: 25%; width: 51%;"
-        />
-        <div
-          aria-disabled="false"
-@@ --- --- @@
-          aria-disabled="false"
-          aria-valuemax="100"
-          aria-valuemin="0"
--         aria-valuenow="65"
--         aria-valuetext="65%"
-+         aria-valuenow="76"
-+         aria-valuetext="76%"
-          class="monday-slider__thumb monday-slider__thumb--index-1"
-          data-testid="monday-slider__thumb-1"
-          role="slider"
--         style="left: 65%;"
-+         style="left: 76%;"
-          tabindex="0"
-        >
-          <label
-            class="monday-slider__thumb-label"
-          >
--           65%
-+           76%
-          </label>
-        </div>
-      </div>
-`;

src/components/Slider/__tests__/slider-ranged-tests.jest.js

@@ -1,16 +1,15 @@
 import React from "react";
-import { act, screen } from "@testing-library/react";
+import { act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { snapshotDiff } from "../../../../jest/utils";
 import { renderSliderInRangeMode } from "./slider-tests.utils";
 
 jest.useFakeTimers();
 
 jest.mock("../../TextField/TextField", () => {
-  const TextField = props => {
+  return props => {
     return <div data-testid="mock-text-field-comp">{JSON.stringify(props)}</div>;
   };
-  return TextField;
 });
 
 it("a. Ranges Slider: basic renderer", async () => {
@@ -177,84 +176,3 @@ describe("c. Ranges Slider Key Events", () => {
     expect(snapshotDiff(before, after)).toMatchSnapshot();
   });
 });
-
-describe("d. Ranges Slider Mouse Events", () => {
-  let getBoundingClientRectMock;
-  beforeAll(async () => {
-    getBoundingClientRectMock = jest.spyOn(global.HTMLElement.prototype, "getBoundingClientRect");
-    getBoundingClientRectMock.mockImplementation(() => ({
-      bottom: 32,
-      height: 16,
-      left: 24,
-      right: 508,
-      top: 16,
-      width: 484,
-      x: 24,
-      y: 16
-    }));
-  });
-
-  afterAll(async () => {
-    getBoundingClientRectMock.mockRestore();
-  });
-
-  it("01. decrease Start value by mouse click on Track before StartThumb", async () => {
-    let before;
-    let after;
-    await act(async () => {
-      const { asFragment } = await renderSliderInRangeMode({ showValue: true });
-      const elRail = screen.getByTestId("monday-slider__rail");
-      jest.advanceTimersByTime(999);
-      before = asFragment().firstChild;
-      userEvent.click(elRail, { clientX: 60 });
-      jest.advanceTimersByTime(999);
-      after = asFragment().firstChild;
-    });
-    expect(snapshotDiff(before, after)).toMatchSnapshot();
-  });
-
-  it("02. increase Start value by mouse click on Track (between near Start)", async () => {
-    let before;
-    let after;
-    await act(async () => {
-      const { asFragment } = await renderSliderInRangeMode({ showValue: true });
-      const elRail = screen.getByTestId("monday-slider__rail");
-      jest.advanceTimersByTime(999);
-      before = asFragment().firstChild;
-      userEvent.click(elRail, { clientX: 170 });
-      jest.advanceTimersByTime(999);
-      after = asFragment().firstChild;
-    });
-    expect(snapshotDiff(before, after)).toMatchSnapshot();
-  });
-
-  it("03. decrease value by mouse click on Track (between near End)", async () => {
-    let before;
-    let after;
-    await act(async () => {
-      const { asFragment } = await renderSliderInRangeMode({ showValue: true });
-      const elRail = screen.getByTestId("monday-slider__rail");
-      jest.advanceTimersByTime(999);
-      before = asFragment().firstChild;
-      userEvent.click(elRail, { clientX: 260 });
-      jest.advanceTimersByTime(999);
-      after = asFragment().firstChild;
-    });
-    expect(snapshotDiff(before, after)).toMatchSnapshot();
-  });
-
-  it("04. increase End value by mouse click on Track (after End)", async () => {
-    let before;
-    let after;
-    await act(async () => {
-      const { asFragment } = await renderSliderInRangeMode({ showValue: true });
-      const elRail = screen.getByTestId("monday-slider__rail");
-      jest.advanceTimersByTime(999);
-      before = asFragment().firstChild;
-      userEvent.click(elRail, { clientX: 390 });
-      jest.advanceTimersByTime(999);
-      after = asFragment().firstChild;
-    });
-    expect(snapshotDiff(before, after)).toMatchSnapshot();
-  });
-});