From be17df2dc989b03269c79ea2be58ddb4146287d6 Mon Sep 17 00:00:00 2001 From: nerdyman Date: Sat, 14 Sep 2024 20:29:38 +0100 Subject: [PATCH 1/2] docs: update readme `clip` link --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4902807..58320a7 100644 --- a/README.md +++ b/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) From 473caa8f9432fd75f37ab9fce3873745031b01ff Mon Sep 17 00:00:00 2001 From: nerdyman Date: Sat, 14 Sep 2024 20:30:01 +0100 Subject: [PATCH 2/2] test: add `clip` tests --- .../stories/99-tests/clip.test.stories.tsx | 128 ++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 docs/storybook/content/stories/99-tests/clip.test.stories.tsx diff --git a/docs/storybook/content/stories/99-tests/clip.test.stories.tsx b/docs/storybook/content/stories/99-tests/clip.test.stories.tsx new file mode 100644 index 0000000..03ab283 --- /dev/null +++ b/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 = { + 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%)'); + }); +};