Merge pull request #6 from filipemerker/add-tests

Add tests

Author: kashishgrover

.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   env: {
     browser: true,
     es6: true,
+    jest: true,
   },
   extends: ['plugin:react/recommended', 'airbnb'],
   globals: {

.prettierrc.js

@@ -5,6 +5,6 @@ module.exports = {
   printWidth: 100,
   singleQuote: true,
   tabWidth: 2,
-  trailingComma: 'always',
+  trailingComma: 'all',
   useTabs: false,
 };

package.json

@@ -16,13 +16,25 @@
     "binary search"
   ],
   "scripts": {
-    "commit": "git-cz"
+    "commit": "git-cz",
+    "test": "jest"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "preset": "@testing-library/react-native",
+    "transform": {
+      "^.+\\.(js)$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!(jest-)?react-native)"
+    ]
   },
   "dependencies": {
     "lodash": "^4.17.19",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
+    "@testing-library/react-native": "^5.0.3",
     "babel-eslint": "^10.1.0",
     "commitizen": "^4.0.3",
     "cz-conventional-changelog": "^3.1.0",
@@ -34,11 +46,12 @@
     "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-react-hooks": "^1.7.0",
     "husky": "^4.2.3",
-    "metro-react-native-babel-preset": "^0.58.0",
+    "jest": "^26.1.0",
     "prettier-eslint": "^9.0.1",
     "react": "^16.9.0",
     "react-native": "^0.61.5",
-    "react-native-text-size": "^4.0.0-rc.1"
+    "react-native-text-size": "^4.0.0-rc.1",
+    "react-test-renderer": "^16.13.1"
   },
   "peerDependencies": {
     "react": "*",
@@ -52,7 +65,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "npx eslint ."
+      "pre-commit": "npx eslint . && yarn test"
     }
   }
 }

src/SeeMore/SeeMore.js

@@ -136,6 +136,7 @@ class SeeMore extends React.Component {
 
     return (
       <Text
+        testID="SeeMore"
         onLayout={isShowingMore ? undefined : this.onLayout}
         numberOfLines={isShowingMore ? undefined : numberOfLines}
         {...this.panResponder.panHandlers}

src/__mocks__/react-native-text-size.js

@@ -0,0 +1,5 @@
+const measure = () => new Promise((a) => a(4305));
+
+export default {
+  measure,
+};

src/__tests__/SeeMore.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import {
+  render, cleanup, fireEvent, wait,
+} from '@testing-library/react-native';
+import SeeMore from '../SeeMore';
+import SeeMoreUtil from '../SeeMore/SeeMoreUtil';
+
+afterEach(cleanup);
+
+describe('SeeMore', () => {
+  it('renders small text correctly', () => {
+    const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+    const { baseElement } = render(<SeeMore numberOfLines={2}>{text}</SeeMore>);
+
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('renders big text correctly', async () => {
+    const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum';
+    const truncationIndex = 222;
+
+    jest
+      .spyOn(SeeMoreUtil, 'getTruncationIndex')
+      .mockImplementation(() => new Promise((a) => a(truncationIndex)));
+
+    const { getByTestId, getByText } = render(
+      <SeeMore numberOfLines={2}>{text}</SeeMore>,
+    );
+
+    fireEvent.layout(getByTestId('SeeMore'), {
+      nativeEvent: {
+        layout: {
+          width: 200,
+        },
+      },
+      persist: Function,
+    });
+
+    await wait(() => {
+      expect(getByText(/see more/)).toBeTruthy();
+      expect(getByText(text.slice(0, truncationIndex))).toBeTruthy();
+    });
+  });
+});

src/__tests__/__snapshots__/SeeMore.test.js.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SeeMore renders small text correctly 1`] = `
+<View
+  pointerEvents="box-none"
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={true}
+    pointerEvents="box-none"
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <Text
+      numberOfLines={2}
+      testID="SeeMore"
+    >
+      <Text
+        linkColor="#2E75F0"
+        linkPressedColor="#163772"
+        numberOfLines={2}
+        seeLessText="see less"
+        seeMoreText="see more"
+        style={
+          Object {
+            "fontFamily": undefined,
+            "fontSize": 14,
+            "fontWeight": "300",
+          }
+        }
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </Text>
+    </Text>
+  </View>
+</View>
+`;