Tests for multitouch feature

Author: omgovich

src/components/common/Interactive.tsx

@@ -73,7 +73,8 @@ const InteractiveBase = ({ onMove, onKey, ...rest }: Props) => {
 
       if (isTouch(nativeEvent)) {
         hasTouch.current = true;
-        touchId.current = nativeEvent.changedTouches[0].identifier;
+        const changedTouches = nativeEvent.changedTouches || [];
+        if (changedTouches.length) touchId.current = changedTouches[0].identifier;
       }
 
       el.focus();

tests/components.test.js

@@ -91,9 +91,7 @@ it("Doesn't call `onChange` when user changes a hue of a grayscale color", () =>
   const { container } = render(<HexColorPicker color="#000" onChange={handleChange} />);
   const hue = container.querySelector(".react-colorful__hue .react-colorful__interactive");
 
-  fireEvent.touchStart(hue, {
-    touches: [{ pageX: 0, pageY: 0 }],
-  });
+  fireEvent.touchStart(hue, { touches: [{ pageX: 0, pageY: 0 }] });
   fireEvent.touchMove(hue, { touches: [{ pageX: 100, pageY: 0 }] });
 
   expect(handleChange).not.toHaveBeenCalled();
@@ -113,20 +111,51 @@ it("Triggers `onChange` after a mouse interaction", async () => {
 });
 
 it("Triggers `onChange` after a touch interaction", async () => {
-  const handleChange = jest.fn((hex) => hex);
+  const handleChange = jest.fn((hsv) => hsv);
   const initialValue = { h: 0, s: 100, v: 100 };
   const result = render(<HsvColorPicker color={initialValue} onChange={handleChange} />);
   const hue = result.container.querySelector(".react-colorful__hue .react-colorful__interactive");
 
-  fireEvent.touchStart(hue, {
-    changedTouches: [{ pageX: 0, pageY: 0 }],
-    touches: [{ pageX: 0, pageY: 0, bubbles: true }],
-  });
+  fireEvent.touchStart(hue, { touches: [{ pageX: 0, pageY: 0, bubbles: true }] });
   fireEvent.touchMove(hue, { touches: [{ pageX: 55, pageY: 0, bubbles: true }] });
 
   expect(handleChange).toHaveReturnedWith({ h: 180, s: 100, v: 100 });
 });
 
+it("Supports multitouch", async () => {
+  const handleChange = jest.fn((hsva) => hsva);
+  const initialValue = { h: 0, s: 100, v: 100, a: 0 };
+  const result = render(<HsvaColorPicker color={initialValue} onChange={handleChange} />);
+  const hue = result.container.querySelector(".react-colorful__hue .react-colorful__interactive");
+  const alpha = result.container.querySelector(
+    ".react-colorful__alpha .react-colorful__interactive"
+  );
+
+  const firstFingerBefore = { pageX: 0, pageY: 0, identifier: 0, bubbles: true };
+  const firstFingerAfter = { pageX: 55, pageY: 0, identifier: 0, bubbles: true };
+
+  const secondFingerBefore = { pageX: 0, pageY: 0, identifier: 1, bubbles: true };
+  const secondFingerAfter = { pageX: 200, pageY: 0, identifier: 1, bubbles: true };
+
+  const extraTouch = { pageX: 10, pageY: 10, identifier: 2, bubbles: true };
+
+  fireEvent.touchStart(hue, {
+    changedTouches: [firstFingerBefore],
+    touches: [firstFingerBefore],
+  });
+
+  fireEvent.touchStart(alpha, {
+    changedTouches: [secondFingerBefore],
+    touches: [firstFingerBefore, secondFingerBefore],
+  });
+
+  fireEvent.touchMove(hue, { touches: [firstFingerAfter, secondFingerAfter] });
+  fireEvent.touchMove(alpha, { touches: [extraTouch] }); // test touch fallback
+  fireEvent.touchMove(alpha, { touches: [firstFingerAfter, secondFingerAfter] });
+
+  expect(handleChange).toHaveReturnedWith({ h: 180, s: 100, v: 100, a: 1 });
+});
+
 it("Pointer doesn't follow the mouse if it was released outside of the document bounds", async () => {
   const handleChange = jest.fn();
   const result = render(<RgbaColorPicker onChange={handleChange} />);
@@ -166,10 +195,7 @@ it("Doesn't react on mouse events after a touch interaction", () => {
   const result = render(<HslStringColorPicker color="hsl(100, 0%, 0%)" onChange={handleChange} />);
   const hue = result.container.querySelector(".react-colorful__hue .react-colorful__interactive");
 
-  fireEvent.touchStart(hue, {
-    changedTouches: [{ pageX: 0, pageY: 0 }],
-    touches: [{ pageX: 0, pageY: 0, bubbles: true }],
-  }); // 1
+  fireEvent.touchStart(hue, { touches: [{ pageX: 0, pageY: 0, bubbles: true }] }); // 1
   fireEvent.touchMove(hue, { touches: [{ pageX: 55, pageY: 0, bubbles: true }] }); // 2
 
   // Should be skipped