tests: setup jest, testing library and add tests (#239)

Co-authored-by: Daniel Merrill <[email protected]>

Author: brunohkbx

.gitignore

@@ -1,2 +1,3 @@
 node_modules/**/*
 /lib
+coverage/

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["module:metro-react-native-babel-preset"]
+}

package.json

@@ -5,7 +5,7 @@
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
     "build": "tsc"
   },
   "husky": {
@@ -32,22 +32,35 @@
   "bugs": {
     "url": "https://github.com/computerjazz/react-native-draggable-flatlist/issues"
   },
+  "jest": {
+    "preset": "react-native",
+    "setupFiles": [
+      "./node_modules/react-native-gesture-handler/jestSetup.js"
+    ],
+    "transform": {
+      "^.+\\.[t|j]sx?$": "babel-jest"
+    }
+  },
   "homepage": "https://github.com/computerjazz/react-native-draggable-flatlist#readme",
   "peerDependencies": {
     "react-native": ">=0.59.0",
     "react-native-gesture-handler": "^1.0.0",
     "react-native-reanimated": "^1.0.0"
   },
   "devDependencies": {
+    "@testing-library/react-native": "^7.1.0",
     "@types/react": "^16.8.8",
     "@types/react-native": "^0.60.8",
+    "babel-jest": "^26.6.1",
     "husky": "^4.2.0",
+    "jest": "^26.6.1",
     "prettier": "1.19.1",
     "pretty-quick": "^2.0.1",
-    "react": "^16.12.0",
+    "react": "^16.13.1",
     "react-native": "^0.61.5",
     "react-native-gesture-handler": "^1.5.3",
     "react-native-reanimated": "^1.13.0",
+    "react-test-renderer": "~16.11.0",
     "typescript": "^3.7.3"
   }
 }

tests/index.test.js

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { Text, View } from "react-native";
+import { fireEvent, render } from "@testing-library/react-native";
+import DraggableFlatList from "../src/index";
+
+jest.mock("react-native-reanimated", () =>
+  require("react-native-reanimated/mock")
+);
+
+const DummyFlatList = props => {
+  const [data, setData] = useState([
+    { id: "1", name: "item 1" },
+    { id: "2", name: "item 2" }
+  ]);
+
+  return (
+    <DraggableFlatList
+      keyExtractor={item => item.id}
+      renderItem={({ item, drag }) => (
+        <View onLongPress={drag}>
+          <Text>{item.name}</Text>
+        </View>
+      )}
+      testID="draggable-flat-list"
+      data={data}
+      {...props}
+    />
+  );
+};
+
+describe("DraggableFlatList", () => {
+  const setup = propOverrides => {
+    const defaultProps = {
+      ...propOverrides
+    };
+
+    return render(<DummyFlatList {...defaultProps} />);
+  };
+
+  it("calls onDragBegin with the index of the element when the drag starts", () => {
+    const mockOnDragBegin = jest.fn();
+    const { getByText } = setup({ onDragBegin: mockOnDragBegin });
+
+    fireEvent(getByText("item 1"), "longPress");
+
+    expect(mockOnDragBegin).toHaveBeenCalledWith(0);
+  });
+
+  it("renders a placeholder when renderPlaceholder is defined", () => {
+    const renderPlaceholder = () => <View testID="some-placeholder" />;
+    const { getByText, getByTestId } = setup({
+      renderPlaceholder: renderPlaceholder
+    });
+
+    fireEvent(getByText("item 1"), "longPress");
+
+    expect(getByTestId("some-placeholder")).toBeDefined();
+  });
+});