test: add test

qlik-oss · Mar 31, 2023 · 82992dc · 82992dc
1 parent 8581062
commit 82992dc
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 6 deletions.
diff --git a/...us/src/components/listbox/hooks/selections/__tests__/use-selections-interactions.test.jsx b/...us/src/components/listbox/hooks/selections/__tests__/use-selections-interactions.test.jsx
@@ -94,7 +94,13 @@ describe('use-listbox-interactions', () => {
         await render();
         const arg0 = ref.current.result;
         expect(Object.keys(arg0).sort()).toEqual(['interactionEvents', 'select']);
-        expect(Object.keys(arg0.interactionEvents).sort()).toEqual(['onMouseDown', 'onMouseEnter', 'onMouseUp']);
+        expect(Object.keys(arg0.interactionEvents).sort()).toEqual([
+          'onMouseDown',
+          'onMouseEnter',
+          'onMouseUp',
+          'onTouchEnd',
+          'onTouchStart',
+        ]);
       });
       test('With checkboxes', async () => {
         await render({ checkboxes: true });
@@ -210,7 +216,13 @@ describe('use-listbox-interactions', () => {
       await render();
       const arg0 = ref.current.result;
       expect(Object.keys(arg0)).toEqual(['interactionEvents', 'select']);
-      expect(Object.keys(arg0.interactionEvents).sort()).toEqual(['onMouseDown', 'onMouseEnter', 'onMouseUp']);
+      expect(Object.keys(arg0.interactionEvents).sort()).toEqual([
+        'onMouseDown',
+        'onMouseEnter',
+        'onMouseUp',
+        'onTouchEnd',
+        'onTouchStart',
+      ]);
     });
 
     test('should select a range (in theory)', async () => {
@@ -288,6 +300,70 @@ describe('use-listbox-interactions', () => {
       });
     });
 
+    test('Should handle range select on two finger tap', async () => {
+      const createPage = (s24, s25, s26, s27, s28, s29, s30, s31) =>
+        createPageWithRange(
+          { qElemNumber: 24, qState: s24 },
+          { qElemNumber: 25, qState: s25 },
+          { qElemNumber: 26, qState: s26 },
+          { qElemNumber: 27, qState: s27 },
+          { qElemNumber: 28, qState: s28 },
+          { qElemNumber: 29, qState: s29 },
+          { qElemNumber: 30, qState: s30 },
+          { qElemNumber: 31, qState: s31 }
+        );
+
+      updateSelectionState({
+        pages: createPage('O', 'O', 'O', 'O', 'O', 'O', 'O', 'O'),
+      });
+
+      await render();
+
+      await act(() => {
+        const touchOne = {
+          target: {
+            closest: () => ({ getAttribute: jest.fn().mockReturnValue('24') }),
+          },
+        };
+        const touchTwo = {
+          target: {
+            closest: () => ({ getAttribute: jest.fn().mockReturnValue('29') }),
+          },
+        };
+
+        ref.current.result.interactionEvents.onTouchStart({
+          touches: [touchOne, touchTwo],
+        });
+        ref.current.result.interactionEvents.onTouchEnd();
+      });
+      // Touch range too small
+      expect(listboxSelections.selectValues).not.toHaveBeenCalled();
+
+      await act(() => {
+        const touchOne = {
+          target: {
+            closest: () => ({ getAttribute: jest.fn().mockReturnValue('24') }),
+          },
+        };
+        const touchTwo = {
+          target: {
+            closest: () => ({ getAttribute: jest.fn().mockReturnValue('30') }),
+          },
+        };
+
+        ref.current.result.interactionEvents.onTouchStart({
+          touches: [touchOne, touchTwo],
+        });
+        ref.current.result.interactionEvents.onTouchEnd();
+      });
+      expect(listboxSelections.selectValues).toHaveBeenCalledWith({
+        selections,
+        elemNumbers: [24, 25, 26, 27, 28, 29, 30],
+        isSingleSelect: false,
+        toggle: true,
+      });
+    });
+
     test('Should "toggle" checkboxes', async () => {
       updateSelectionState({
         pages: createPageWithSingle(24, 'O'),

diff --git a/apis/nucleus/src/components/listbox/hooks/selections/useSelectionsInteractions.js b/apis/nucleus/src/components/listbox/hooks/selections/useSelectionsInteractions.js
@@ -13,7 +13,7 @@ export default function useSelectionsInteractions({ selectionState, selections,
     toggle: false,
     active: false,
     touchElemNumbers: [],
-    touchRangeLow: false,
+    touchRangeSmall: false,
   });
 
   // eslint-disable-next-line arrow-body-style
@@ -170,7 +170,7 @@ export default function useSelectionsInteractions({ selectionState, selections,
     currentSelect.current.active = true;
     const range = getRange(startTouchElemNumber, endTouchElemNumber);
     if (range.length < 7) {
-      currentSelect.current.touchRangeLow = true;
+      currentSelect.current.touchRangeSmall = true;
     }
 
     currentSelect.current.elemNumbers = [];
@@ -181,8 +181,8 @@ export default function useSelectionsInteractions({ selectionState, selections,
     if (currentSelect.current.touchElemNumbers.length !== 2) {
       return;
     }
-    if (currentSelect.current.touchRangeLow) {
-      currentSelect.current.touchRangeLow = false;
+    if (currentSelect.current.touchRangeSmall) {
+      currentSelect.current.touchRangeSmall = false;
       currentSelect.current.touchElemNumbers = [];
       currentSelect.current.active = false;
       return;