SortableList - add driver and test (#2568)

M-i-k-e-l · lidord-wix · commit b8509b509fe8 · 2023-05-15T13:38:42.000+03:00
* SortableList - add driver and test

* Review fixes
diff --git a/GestureDetectorMock.tsx b/GestureDetectorMock.tsx
@@ -6,16 +6,27 @@ type Props = {
   children: any;
 };
 
+const DEFAULT_DATA = {
+  absoluteX: 0,
+  absoluteY: 0,
+  translationX: 0,
+  translationY: 0,
+  velocityX: 0,
+  velocityY: 0,
+  x: 0,
+  y: 0
+};
+
 export class GestureDetectorMock extends React.Component<Props> {
   render() {
     switch (this.props.gesture.type) {
       case 'tap':
         return (
           <TouchableOpacity
             onPress={() => {
-              this.props.gesture._handlers.onTouchesDown();
-              this.props.gesture._handlers.onEnd();
-              this.props.gesture._handlers.onFinalize();
+              this.props.gesture._handlers.onTouchesDown?.();
+              this.props.gesture._handlers.onEnd?.();
+              this.props.gesture._handlers.onFinalize?.();
             }}
           >
             {this.props.children}
@@ -24,37 +35,17 @@ export class GestureDetectorMock extends React.Component<Props> {
       case 'pan':
         return (
           <TouchableOpacity
-            onPress={() => {
-              this.props.gesture._handlers.onStart({
-                absoluteX: 0,
-                absoluteY: 0,
-                translationX: 0,
-                translationY: 0,
-                velocityX: 0,
-                velocityY: 0,
-                x: 0,
-                y: 0
-              });
-              this.props.gesture._handlers.onUpdate({
-                absoluteX: 0,
-                absoluteY: 0,
-                translationX: 0,
-                translationY: 0,
-                velocityX: 0,
-                velocityY: 0,
-                x: 0,
-                y: 0
-              });
-              this.props.gesture._handlers.onEnd({
-                absoluteX: 0,
-                absoluteY: 0,
-                translationX: 0,
-                translationY: 0,
-                velocityX: 0,
-                velocityY: 0,
-                x: 0,
-                y: 0
-              });
+            onPress={(data) => {
+              this.props.gesture._handlers.onStart?.(DEFAULT_DATA);
+              if (Array.isArray(data)) {
+                data.forEach(info => {
+                  this.props.gesture._handlers.onUpdate?.({...DEFAULT_DATA, ...info});
+                });
+              } else {
+                this.props.gesture._handlers.onUpdate?.({...DEFAULT_DATA, ...data});
+              }
+              this.props.gesture._handlers.onEnd?.(DEFAULT_DATA);
+              this.props.gesture._handlers.onFinalize?.(DEFAULT_DATA);
             }}
           >
             {this.props.children}
diff --git a/jest-setup.js b/jest-setup.js
@@ -74,6 +74,11 @@ jest.mock('react-native-gesture-handler',
       PanMock.onStart = getDefaultMockedHandler('onStart');
       PanMock.onUpdate = getDefaultMockedHandler('onUpdate');
       PanMock.onEnd = getDefaultMockedHandler('onEnd');
+      PanMock.onFinalize = getDefaultMockedHandler('onFinalize');
+      PanMock.activateAfterLongPress = getDefaultMockedHandler('activateAfterLongPress');
+      PanMock.enabled = getDefaultMockedHandler('enabled');
+      PanMock.onTouchesMove = getDefaultMockedHandler('onTouchesMove');
+      PanMock.prepare = jest.fn();
       PanMock.initialize = jest.fn();
       PanMock.toGestureArray = jest.fn(() => {
         return [PanMock];
diff --git a/src/components/button/Button.driver.ts b/src/components/button/Button.driver.ts
@@ -4,7 +4,7 @@ import {TextDriver} from '../text/Text.driver';
 
 /**
  * Please run clear after each test
- * */
+ */
 export class ButtonDriver extends ComponentDriver {
   private readonly labelDriver: TextDriver;
   private readonly iconDriver: ImageDriver;
diff --git a/src/components/sortableList/SortableListItem.driver.ts b/src/components/sortableList/SortableListItem.driver.ts
@@ -0,0 +1,35 @@
+import _ from 'lodash';
+import {ComponentDriver} from '../../testkit/Component.driver';
+
+/**
+ * Please run clear after each test
+ */
+export class SortableListItemDriver extends ComponentDriver {
+  dragUp = async (indices: number) => {
+    this.validateIndices(indices);
+    const data = _.times(indices, index => {
+      return {
+        translationY: -52 * (index + 1)
+      };
+    });
+
+    await this.uniDriver.selectorByTestId(this.testID).then(driver => driver.drag(data));
+  };
+
+  dragDown = async (indices: number) => {
+    this.validateIndices(indices);
+    const data = _.times(indices, index => {
+      return {
+        translationY: 52 * (index + 1)
+      };
+    });
+
+    await this.uniDriver.selectorByTestId(this.testID).then(driver => driver.drag(data));
+  };
+
+  private validateIndices = (indices: number) => {
+    if (indices <= 0 || !Number.isInteger(indices)) {
+      throw Error('indices must be a positive integer');
+    }
+  };
+}
diff --git a/src/components/sortableList/__tests__/index.spec.tsx b/src/components/sortableList/__tests__/index.spec.tsx
@@ -0,0 +1,83 @@
+import _ from 'lodash';
+import React, {useCallback} from 'react';
+import Text from '../../text';
+import View from '../../view';
+import SortableList from '../index';
+import {ComponentDriver, SortableListItemDriver} from '../../../testkit';
+
+const defaultProps = {
+  testID: 'sortableList'
+};
+
+const ITEMS = _.times(5, index => {
+  return {
+    text: `${index}`,
+    id: `${index}`
+  };
+});
+
+const TestCase = props => {
+  const renderItem = useCallback(({item}) => {
+    return (
+      <Text center testID={`item${item.id}`}>
+        {item.text}
+      </Text>
+    );
+  }, []);
+
+  return (
+    <View flex>
+      <View flex useSafeArea>
+        <SortableList data={ITEMS} renderItem={renderItem} {...defaultProps} {...props}/>
+      </View>
+    </View>
+  );
+};
+
+describe('SortableList', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  afterEach(() => {
+    ComponentDriver.clear();
+    SortableListItemDriver.clear();
+  });
+
+  it('SortableList onOrderChange is called - down', async () => {
+    const onOrderChange = jest.fn();
+    const component = <TestCase onOrderChange={onOrderChange}/>;
+    const sortableListDriver = new ComponentDriver({component, testID: 'sortableList'});
+    expect(await sortableListDriver.exists()).toBeTruthy();
+    expect(onOrderChange).toHaveBeenCalledTimes(0);
+    const item1Driver = new SortableListItemDriver({component, testID: 'item1'});
+    expect(await item1Driver.exists()).toBeTruthy();
+    await item1Driver.dragDown(1);
+    expect(onOrderChange).toHaveBeenCalledTimes(1);
+    expect(onOrderChange).toHaveBeenCalledWith([
+      {id: '0', text: '0'},
+      {id: '2', text: '2'},
+      {id: '1', text: '1'},
+      {id: '3', text: '3'},
+      {id: '4', text: '4'}
+    ]);
+  });
+
+  it('SortableList onOrderChange is called - up', async () => {
+    const onOrderChange = jest.fn();
+    const component = <TestCase onOrderChange={onOrderChange}/>;
+    const sortableListDriver = new ComponentDriver({component, testID: 'sortableList'});
+    expect(await sortableListDriver.exists()).toBeTruthy();
+    expect(onOrderChange).toHaveBeenCalledTimes(0);
+    const item4Driver = new SortableListItemDriver({component, testID: 'item4'});
+    expect(await item4Driver.exists()).toBeTruthy();
+    await item4Driver.dragUp(3);
+    expect(onOrderChange).toHaveBeenCalledTimes(1);
+    expect(onOrderChange).toHaveBeenCalledWith([
+      {id: '0', text: '0'},
+      {id: '4', text: '4'},
+      {id: '1', text: '1'},
+      {id: '2', text: '2'},
+      {id: '3', text: '3'}
+    ]);
+  });
+});
diff --git a/src/incubator/Dialog/__tests__/index.spec.tsx b/src/incubator/Dialog/__tests__/index.spec.tsx
@@ -41,12 +41,10 @@ const TestCase = props => {
   );
 };
 
-const _TestCase = props => <TestCase {...props}/>;
-
 describe('Incubator.Dialog', () => {
   it('Incubator.Dialog should exist only if visible', async () => {
     const onDismiss = jest.fn();
-    const component = _TestCase({onDismiss});
+    const component = <TestCase onDismiss={onDismiss}/>;
     const dialogDriver = new ComponentDriver({component, testID: 'dialog'});
     expect(await dialogDriver.exists()).toBeFalsy();
     const openButtonDriver = new ButtonDriver({component, testID: 'openButton'});
diff --git a/src/testkit/Component.driver.ts b/src/testkit/Component.driver.ts
@@ -1,4 +1,4 @@
-import {UniDriver, UniDriverClass} from './UniDriver';
+import {DragData, UniDriver, UniDriverClass} from './UniDriver';
 import {TestingLibraryDriver} from './drivers/TestingLibraryDriver';
 
 export type ComponentDriverArgs = {
@@ -9,7 +9,7 @@ export type ComponentDriverArgs = {
 
 /**
  * Please run clear after each test
- * */
+ */
 export class ComponentDriver {
   protected readonly testID: string;
   protected readonly uniDriver: UniDriver;
@@ -45,6 +45,12 @@ export class ComponentDriver {
       .then((driver) => driver.press());
   };
 
+  drag = async (data: DragData | DragData[]) => {
+    return this.uniDriver
+      .selectorByTestId(this.testID)
+      .then((driver) => driver.drag(data));
+  };
+
   focus = async () => {
     return this.uniDriver
       .selectorByTestId(this.testID)
diff --git a/src/testkit/UniDriver.ts b/src/testkit/UniDriver.ts
@@ -1,3 +1,14 @@
+export type DragData = {
+  absoluteX?: number;
+  absoluteY?: number;
+  translationX?: number;
+  translationY?: number;
+  velocityX?: number;
+  velocityY?: number;
+  x?: number;
+  y?: number;
+};
+
 export interface UniDriver {
   selectorByTestId(testId: string): Promise<UniDriver>;
   selectorByText(text: string): Promise<UniDriver>;
@@ -7,6 +18,7 @@ export interface UniDriver {
   instance(): Promise<any>;
   getInstanceProps(): Promise<any>;
   press(): void;
+  drag(data: DragData | DragData[]): void;
   focus(): void;
   blur(): void;
   typeText(text: string): Promise<void>;
diff --git a/src/testkit/drivers/TestingLibraryDriver.tsx b/src/testkit/drivers/TestingLibraryDriver.tsx
@@ -1,4 +1,4 @@
-import {UniDriver} from '../UniDriver';
+import {DragData, UniDriver} from '../UniDriver';
 import {fireEvent, render, RenderAPI} from '@testing-library/react-native';
 import {ReactTestInstance} from 'react-test-renderer';
 import {act} from '@testing-library/react-hooks';
@@ -85,6 +85,15 @@ export class TestingLibraryDriver implements UniDriver {
     fireEvent.press(this.reactTestInstances[0]);
   };
 
+  drag = (data: DragData | DragData[]): void => {
+    if (!this.reactTestInstances) {
+      throw new NoSelectorException();
+    }
+    this.validateExplicitInstance();
+    this.validateSingleInstance();
+    fireEvent.press(this.reactTestInstances[0], data);
+  };
+
   focus = (): void => {
     if (!this.reactTestInstances) {
       throw new NoSelectorException();
diff --git a/src/testkit/index.ts b/src/testkit/index.ts
@@ -1,6 +1,6 @@
 export {ComponentDriver} from './Component.driver';
 export {ImageDriver} from '../components/image/Image.driver';
-export {TextDriver} from '../components/Text/Text.driver';
+export {TextDriver} from '../components/text/Text.driver';
 export {SwitchDriver} from '../components/switch/switch.driver';
 export {ButtonDriver} from '../components/button/Button.driver';
 export {TextFieldDriver} from '../incubator/TextField/TextField.driver';
@@ -10,3 +10,4 @@ export {CheckboxDriver} from '../components/checkbox/Checkbox.driver';
 export {HintDriver} from '../components/hint/Hint.driver';
 export {RadioButtonDriver} from '../components/radioButton/RadioButton.driver';
 export {RadioGroupDriver} from '../components/radioGroup/RadioGroup.driver';
+export {SortableListItemDriver} from '../components/sortableList/SortableListItem.driver';
