add preliminary tests using jest and react-testing-library

Author: mohsinulhaq

.gitignore

@@ -3,10 +3,11 @@
 *.iml
 .*.haste_cache.*
 .DS_Store
-.idea
 npm-debug.log
 yarn-error.log
-node_modules
-lib
-dist
-.docz
+.idea/
+node_modules/
+lib/
+dist/
+.docz/
+coverage/

package.json

@@ -18,15 +18,23 @@
     "dist",
     "typings/react-popper-tooltip.d.ts"
   ],
+  "sideEffects": [
+    "*.css"
+  ],
   "scripts": {
     "build": "rimraf dist lib && rollup -c && cp src/styles.css dist",
     "prepublishOnly": "yarn lint && yarn build",
     "docs": "docz dev",
     "docs:build": "docz build",
     "docs:deploy": "yarn docs:build && cp .docz/dist/index.html .docz/dist/404.html && gh-pages -d .docz/dist",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
-  "pre-commit": "lint",
+  "pre-commit": [
+    "lint",
+    "test"
+  ],
   "keywords": [
     "react",
     "tooltip",
@@ -37,107 +45,50 @@
   ],
   "author": "Mohsin Ul Haq <[email protected]>",
   "license": "MIT",
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ],
-  "prettier": {
-    "singleQuote": true
-  },
-  "eslintConfig": {
-    "env": {
-      "browser": true,
-      "es6": true,
-      "node": true
-    },
-    "parser": "babel-eslint",
-    "extends": [
-      "eslint:recommended",
-      "plugin:react/recommended",
-      "plugin:jsx-a11y/recommended",
-      "plugin:prettier/recommended"
-    ],
-    "parserOptions": {
-      "ecmaFeatures": {
-        "jsx": true
-      },
-      "ecmaVersion": 2018,
-      "sourceType": "module"
-    },
-    "plugins": [
-      "react",
-      "jsx-a11y"
-    ],
-    "settings": {
-      "react": {
-        "version": "latest"
-      }
-    },
-    "rules": {
-      "indent": [
-        "error",
-        2
-      ],
-      "linebreak-style": [
-        "error",
-        "unix"
-      ],
-      "quotes": [
-        "error",
-        "single"
-      ],
-      "semi": [
-        "error",
-        "always"
-      ]
-    }
-  },
-  "eslintIgnore": [
-    "dist",
-    "lib",
-    "docs"
-  ],
   "peerDependencies": {
-    "react": "^16.6.0",
-    "react-dom": "^16.6.0"
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3"
   },
   "dependencies": {
-    "@babel/runtime": "^7.1.2",
-    "react-popper": "^1.0.2"
+    "@babel/runtime": "^7.2.0",
+    "react-popper": "^1.3.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.1.2",
-    "@babel/core": "^7.1.2",
-    "@babel/plugin-proposal-class-properties": "^7.1.0",
-    "@babel/plugin-transform-runtime": "^7.1.0",
-    "@babel/preset-env": "^7.1.0",
+    "@babel/cli": "^7.2.0",
+    "@babel/core": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.2.1",
+    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/preset-env": "^7.2.0",
     "@babel/preset-react": "^7.0.0",
+    "@types/jest": "^23.3.10",
+    "@types/react": "^16.7.13",
+    "@types/react-dom": "^16.0.11",
+    "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^10.0.1",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.19",
-    "docz": "^0.12.5",
+    "babel-jest": "^23.6.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.21",
+    "docz": "^0.12.15",
     "docz-plugin-css": "^0.11.0",
-    "eslint": "^5.8.0",
-    "eslint-config-prettier": "^3.1.0",
+    "eslint": "^5.9.0",
+    "eslint-config-prettier": "^3.3.0",
+    "eslint-plugin-jest": "^22.1.2",
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.11.1",
     "gh-pages": "^2.0.1",
+    "jest": "^23.6.0",
     "pre-commit": "^1.2.2",
-    "prettier": "^1.14.3",
+    "prettier": "^1.15.3",
     "prop-types": "^15.6.2",
-    "react": "^16.6.0",
-    "react-dom": "^16.6.0",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "react-testing-library": "^5.3.1",
     "rimraf": "^2.6.2",
-    "rollup": "^0.66.6",
+    "rollup": "^0.67.4",
     "rollup-plugin-babel": "^4.0.3",
     "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-plugin-size-snapshot": "^0.7.0",
     "rollup-plugin-terser": "^3.0.0"
-  },
-  "sideEffects": [
-    "*.css"
-  ]
+  }
 }

tests/TooltipTrigger.spec.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import {render} from 'react-testing-library';
+import TooltipTrigger from '../src';
+
+const Tooltip = ({
+  getTooltipProps,
+  getArrowProps,
+  tooltipRef,
+  arrowRef,
+  placement
+}) => (
+  <div
+    {...getTooltipProps({
+      ref: tooltipRef,
+      className: 'tooltip-container'
+    })}
+  >
+    <div
+      {...getArrowProps({
+        ref: arrowRef,
+        'data-placement': placement,
+        className: 'tooltip-arrow'
+      })}
+    />
+    World
+  </div>
+);
+
+const Trigger = ({getTriggerProps, triggerRef}) => (
+  <span
+    {...getTriggerProps({
+      ref: triggerRef,
+      className: 'trigger'
+    })}
+  >
+    Hello
+  </span>
+);
+
+it('matches snapshot', () => {
+  const {container} = render(
+    <TooltipTrigger tooltip={Tooltip}>{Trigger}</TooltipTrigger>
+  );
+  expect(container.firstChild).toMatchSnapshot();
+});

tests/__snapshots__/TooltipTrigger.spec.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<span
+  class="trigger"
+>
+  Hello
+</span>
+`;