From 518424f0d1f46576e839e1db1fda60d1a018ebc8 Mon Sep 17 00:00:00 2001
From: nerdyman <averynerdyman@gmail.com>
Date: Sat, 14 Sep 2024 21:21:25 +0100
Subject: [PATCH] test: add test to ensure `touchend` 'disconnects' the slider

---
 .../99-tests/pointer-interactions.stories.tsx | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/docs/storybook/content/stories/99-tests/pointer-interactions.stories.tsx b/docs/storybook/content/stories/99-tests/pointer-interactions.stories.tsx
index 9efcf80..c7c8f15 100644
--- a/docs/storybook/content/stories/99-tests/pointer-interactions.stories.tsx
+++ b/docs/storybook/content/stories/99-tests/pointer-interactions.stories.tsx
@@ -184,3 +184,45 @@ ChangePositionOnHoverPointerDown.play = async ({ canvasElement }) => {
     expect(ChangePositionOnHoverPointerDown.args?.onPositionChange).toHaveBeenCalledWith(100);
   });
 };
+
+/**
+ * Ensure slider 'disconnects' when it loses focus on touch devices.
+ */
+export const TouchEvents: StoryFn<ReactCompareSliderDetailedProps> = (props) => {
+  return (
+    <div style={{ width: 400, height: 400, backgroundColor: 'red' }}>
+      <button>Clickaroo</button>
+      <ReactCompareSlider {...props} />
+    </div>
+  );
+};
+
+TouchEvents.args = getArgs({
+  changePositionOnHover: true,
+  style: { width: 200, height: 200 },
+});
+
+TouchEvents.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const sliderRoot = (await canvas.findByTestId(TouchEvents.args?.['data-testid'])) as HTMLElement;
+
+  await waitFor(() => expect(sliderRoot).toBeInTheDocument());
+  await waitFor(() => expect(canvas.getByRole('slider').getAttribute('aria-valuenow')).toBe('50'));
+
+  await new Promise((resolve) => setTimeout(resolve, 250));
+
+  await fireEvent.pointerDown(sliderRoot, {
+    clientX: sliderRoot.clientWidth * 0.65,
+    clientY: sliderRoot.clientHeight * 0.65,
+  });
+
+  await new Promise((resolve) => setTimeout(resolve, 250));
+
+  await waitFor(() => expect(sliderRoot).toHaveStyle({ cursor: 'ew-resize' }));
+
+  await new Promise((resolve) => setTimeout(resolve, 250));
+
+  await fireEvent.touchEnd(sliderRoot);
+
+  await waitFor(() => expect(sliderRoot).toHaveStyle({ cursor: 'auto' }));
+};