Add clip tests

README.md

@@ -69,7 +69,7 @@ export const Example = () => {
 | ---- | ---- | :------: | ------- | ----------- |
 | [`boundsPadding`](https://react-compare-slider.vercel.app/?path=/story/demos--bounds-padding)                   | `number`                     |   | `0`           | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait).
 | [`browsingContext`](https://react-compare-slider.vercel.app/?path=/story/demos--browsing-context)               | `globalThis`                 |   | `globalThis`  | Context to bind events to (useful for iframes).
-| [`clip`](https://react-compare-slider.vercel.app/?path=/story/docs/docs-clip--docs)           | `` both\|itemOne\|itemTwo ``   |   | `5%`          | Percentage or pixel amount to move when the slider handle is focused and keyboard arrow is pressed.
+| [`clip`](https://react-compare-slider.vercel.app/?path=/docs/docs-clip--docs)           | `` both\|itemOne\|itemTwo ``   |   | `5%`          | Percentage or pixel amount to move when the slider handle is focused and keyboard arrow is pressed.
 | [`changePositionOnHover`](https://react-compare-slider.vercel.app/?path=/story/demos--change-position-on-hover) | `boolean`                    |   | `false`       | Whether the slider should follow the pointer on hover.
 | [`disabled`](https://react-compare-slider.vercel.app/?path=/story/demos--disabled)                              | `boolean`                    |   | `false`       |  Whether to disable slider movement (items are still interactable).
 | [`handle`](https://react-compare-slider.vercel.app/?path=/story/demos--handle)                                  | `ReactNode`                  |   | `undefined`   | Custom handle component.
@@ -93,4 +93,4 @@ Checkout out the [Real World Examples page](https://react-compare-slider.vercel.
 ## Requirements
 
 - React 16.8+
-- The latest two versions of each major browser are officially supported
+- The latest two versions of each major browser are officially supported (at time of publishing)

docs/storybook/content/stories/99-tests/clip.test.stories.tsx

@@ -0,0 +1,128 @@
+import { expect } from '@storybook/jest';
+import type { Meta } from '@storybook/react';
+import { fireEvent, waitFor, within } from '@storybook/testing-library';
+import type { ReactCompareSlider } from 'react-compare-slider';
+
+import { Template, getArgs } from './test-utils.test';
+
+const meta: Meta<typeof ReactCompareSlider> = {
+  title: 'Tests/Browser/Clip',
+};
+export default meta;
+
+export const ClipBoth = Template.bind({});
+ClipBoth.args = getArgs({
+  clip: 'both',
+  style: { width: 256, height: 256 },
+});
+
+ClipBoth.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const slider = canvas.getByRole('slider') as Element;
+  const sliderRoot = (await canvas.findByTestId(ClipBoth.args?.['data-testid'])) as Element;
+
+  await waitFor(() => expect(slider).toBeInTheDocument());
+  await waitFor(async () => expect(await canvas.findAllByRole('img')).toHaveLength(2));
+  await waitFor(() => {
+    const [itemOne, itemTwo] = Array.from(
+      sliderRoot.querySelectorAll('[data-rcs="clip-item"]'),
+    ) as HTMLElement[];
+    expect(itemOne?.style.clipPath).toBe('inset(0px 50% 0px 0px)');
+    expect(itemTwo?.style.clipPath).toBe('inset(0px 0px 0px 50%)');
+  });
+
+  await new Promise((resolve) => setTimeout(resolve, 500));
+
+  await fireEvent.pointerDown(sliderRoot, {
+    clientX: sliderRoot.clientWidth * 0.75,
+    clientY: sliderRoot.clientHeight * 0.75,
+  });
+
+  await new Promise((resolve) => setTimeout(resolve, 500));
+
+  await waitFor(() => {
+    const [itemOne, itemTwo] = Array.from(
+      sliderRoot.querySelectorAll('[data-rcs="clip-item"]'),
+    ) as HTMLElement[];
+    expect(itemOne?.style.clipPath).toBe('inset(0px 25% 0px 0px)');
+    expect(itemTwo?.style.clipPath).toBe('inset(0px 0px 0px 75%)');
+  });
+};
+
+export const ClipItemOne = Template.bind({});
+ClipItemOne.args = getArgs({
+  clip: 'itemOne',
+  style: { width: 256, height: 256 },
+});
+
+ClipItemOne.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const slider = canvas.getByRole('slider') as Element;
+  const sliderRoot = (await canvas.findByTestId(ClipBoth.args?.['data-testid'])) as Element;
+
+  await waitFor(() => expect(slider).toBeInTheDocument());
+  await waitFor(async () => expect(await canvas.findAllByRole('img')).toHaveLength(2));
+  await waitFor(() => {
+    const [itemOne, itemTwo] = Array.from(
+      sliderRoot.querySelectorAll('[data-rcs="clip-item"]'),
+    ) as HTMLElement[];
+    expect(itemOne?.style.clipPath).toBe('inset(0px 50% 0px 0px)');
+    expect(itemTwo?.style.clipPath).toBe('none');
+  });
+
+  await new Promise((resolve) => setTimeout(resolve, 500));
+
+  await fireEvent.pointerDown(sliderRoot, {
+    clientX: sliderRoot.clientWidth * 0.75,
+    clientY: sliderRoot.clientHeight * 0.75,
+  });
+
+  await new Promise((resolve) => setTimeout(resolve, 500));
+
+  await waitFor(() => {
+    const [itemOne, itemTwo] = Array.from(
+      sliderRoot.querySelectorAll('[data-rcs="clip-item"]'),
+    ) as HTMLElement[];
+    expect(itemOne?.style.clipPath).toBe('inset(0px 25% 0px 0px)');
+    expect(itemTwo?.style.clipPath).toBe('none');
+  });
+};
+
+export const ClipItemTwo = Template.bind({});
+ClipItemTwo.args = getArgs({
+  clip: 'itemTwo',
+  style: { width: 256, height: 256 },
+});
+
+ClipItemTwo.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const slider = canvas.getByRole('slider') as Element;
+  const sliderRoot = (await canvas.findByTestId(ClipBoth.args?.['data-testid'])) as Element;
+
+  await waitFor(() => expect(slider).toBeInTheDocument());
+  await waitFor(async () => expect(await canvas.findAllByRole('img')).toHaveLength(2));
+  await waitFor(() => {
+    const [itemOne, itemTwo] = Array.from(
+      sliderRoot.querySelectorAll('[data-rcs="clip-item"]'),
+    ) as HTMLElement[];
+    expect(itemOne?.style.clipPath).toBe('none');
+    expect(itemTwo?.style.clipPath).toBe('inset(0px 0px 0px 50%)');
+  });
+
+  await new Promise((resolve) => setTimeout(resolve, 500));
+
+  await fireEvent.pointerDown(sliderRoot, {
+    clientX: sliderRoot.clientWidth * 0.25,
+    clientY: sliderRoot.clientHeight * 0.25,
+  });
+
+  await new Promise((resolve) => setTimeout(resolve, 500));
+
+  await waitFor(() => {
+    const [itemOne, itemTwo] = Array.from(
+      sliderRoot.querySelectorAll('[data-rcs="clip-item"]'),
+    ) as HTMLElement[];
+    expect(itemOne?.style.clipPath).toBe('none');
+    expect(itemTwo?.style.clipPath).toBe('inset(0px 0px 0px 25%)');
+  });
+};