Merge pull request #17 from iCHEF/chore/jest-setup

chenesan · web-flow · commit 64e28325bcb7 · 2019-03-13T18:00:50.000+08:00
Setup unit test with jest, ts-jest and enzyme
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
+- Add `test` and `test:watch` scripts in root directory and every single package.(#17)
+- Add `jest`, `ts-jest`, `enzyme`, `enzyme-adapter-react-16` dependency.(#17)
+- Add a sample test of `ResponsiveLayer`. (#17)
 - Add a custom effect `useChartDimensions` to calculate the outer and inner dimension of the chart. (#16)
 - Add `useCartesianEncodings` to calculate the processed data and the visual encodings that we need in order to draw the graph. (#16)
 - Add a <SvgWithAxisFrame> component to deal with the size of the chart container, SVG, and the axes that generally used across different charts. (#16)
@@ -29,6 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Makes simple components such as `<Foo>` and `<ResponsiveLayer>` as an experiment to see if the project settings go well. (#1)
 
 # Changed
+- Replace `lodash-es` with `lodash`.(#17)
 - Remove `selectors` from `AxisScale` and `ColorScale`. (#16)
 - Modify the config of `tslint` so that it won't continuing warning about the lack of dangling commas in functions. (#16)
 - Fix `HoverLayer` default props. (#14)
diff --git a/config/jest.config.js b/config/jest.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  globals: {
+    'ts-jest': {
+      tsConfig: '<rootDir>/config/tsconfig.base.json',
+    },
+  },
+  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
+  rootDir: '../',
+};
diff --git a/config/tsconfig.base.json b/config/tsconfig.base.json
@@ -3,6 +3,7 @@
     "baseUrl": "./packages",
     "outDir": "lib",
     "module": "es6",
+    "esModuleInterop": true,
     "target": "es5",
     "lib": ["es2015", "dom"],
     "sourceMap": true,
diff --git a/package.json b/package.json
@@ -11,17 +11,26 @@
     "type-check:watch": "lerna run type-check:watch --parallel --stream -- -- --preserveWatchOutput",
     "prepublish": "lerna run prepublish",
     "lint": "lerna run lint --parallel --stream",
-    "clean": "lerna run --parallel clean"
+    "clean": "lerna run --parallel clean",
+    "test": "jest ./packages --config=config/jest.config.js --coverage",
+    "test:watch": "jest ./packages --watch --config=config/jest.config.js"
   },
   "devDependencies": {
     "@types/d3": "^5.7.0",
-    "@types/lodash-es": "^4.17.1",
+    "@types/enzyme": "^3.9.0",
+    "@types/enzyme-adapter-react-16": "^1.0.5",
+    "@types/jest": "^24.0.9",
+    "@types/lodash": "^4.14.122",
     "@types/memoize-one": "^4.1.0",
+    "@types/react": "^16.8.7",
     "@types/react-dom": "^16.8.0",
     "@types/styled-components": "^4.1.6",
     "docz": "^0.13.7",
     "docz-theme-default": "^0.13.7",
     "fork-ts-checker-webpack-plugin": "^1.0.0",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.10.0",
+    "jest": "^24.1.0",
     "lerna": "^3.8.0",
     "npm-run-all": "^4.1.5",
     "prop-types": "^15.7.1",
@@ -30,6 +39,7 @@
     "react-spring": "^8.0.7",
     "rimraf": "^2.6.3",
     "styled-components": "^4.1.3",
+    "ts-jest": "^24.0.0",
     "tslint": "^5.12.0",
     "tslint-config-airbnb": "^5.11.1",
     "tslint-eslint-rules": "^5.4.0",
diff --git a/packages/animation/__tests__/animation.test.js b/packages/animation/__tests__/animation.test.js
diff --git a/packages/animation/package.json b/packages/animation/package.json
@@ -25,7 +25,7 @@
   "scripts": {
     "prepublish": "npm run clean && npm run build",
     "build": "run-p \"build:*\"",
-    "build:esm": "tsc -p ./src",
+    "build:esm": "tsc -p ./src/tsconfig.esm.json",
     "build:cjs": "tsc -p ./src/tsconfig.cjs.json",
     "clean": "rimraf ./dist ./lib ./es5 ./deploy",
     "lint": "tslint --project ./src",
diff --git a/packages/animation/setupTests.js b/packages/animation/setupTests.js
@@ -0,0 +1,4 @@
+var enzyme = require('enzyme');
+var Adapter = require('enzyme-adapter-react-16');
+
+enzyme.configure({ adapter: new Adapter() });
diff --git a/packages/animation/src/tsconfig.cjs.json b/packages/animation/src/tsconfig.cjs.json
@@ -3,5 +3,9 @@
   "compilerOptions": {
     "module": "commonjs",
     "outDir": "../lib/cjs"
-  }
+  },
+  "exclude": [
+    "node_modules",
+    "**/*.test.tsx"
+  ]
 }
diff --git a/packages/animation/src/tsconfig.esm.json b/packages/animation/src/tsconfig.esm.json
@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "../lib/esm"
+  },
+  "exclude": [
+    "node_modules",
+    "**/*.test.tsx"
+  ]
+}
diff --git a/packages/chart/__tests__/chart.test.js b/packages/chart/__tests__/chart.test.js
diff --git a/packages/chart/package.json b/packages/chart/package.json
@@ -25,7 +25,7 @@
   "scripts": {
     "prepublish": "npm run clean && npm run build",
     "build": "run-p \"build:*\"",
-    "build:esm": "tsc -p ./src",
+    "build:esm": "tsc -p ./src/tsconfig.esm.json",
     "build:cjs": "tsc -p ./src/tsconfig.cjs.json",
     "clean": "rimraf ./dist ./lib ./es5 ./deploy",
     "lint": "tslint --project ./src",
@@ -42,9 +42,7 @@
   },
   "dependencies": {
     "@ichef/transcharts-graph": "^0.0.0",
-    "@types/lodash-es": "^4.17.1",
     "@vx/axis": "^0.0.183",
-    "@vx/shape": "^0.0.183",
-    "lodash-es": "^4.17.11"
+    "@vx/shape": "^0.0.183"
   }
 }
diff --git a/packages/chart/setupTests.js b/packages/chart/setupTests.js
@@ -0,0 +1,4 @@
+var enzyme = require('enzyme');
+var Adapter = require('enzyme-adapter-react-16');
+
+enzyme.configure({ adapter: new Adapter() });
diff --git a/packages/chart/src/tsconfig.cjs.json b/packages/chart/src/tsconfig.cjs.json
@@ -3,5 +3,9 @@
   "compilerOptions": {
     "module": "commonjs",
     "outDir": "../lib/cjs"
-  }
+  },
+  "exclude": [
+    "node_modules",
+    "**/*.test.tsx"
+  ]
 }
diff --git a/packages/chart/src/tsconfig.esm.json b/packages/chart/src/tsconfig.esm.json
@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "../lib/esm"
+  },
+  "exclude": [
+    "node_modules",
+    "**/*.test.tsx"
+  ]
+}
diff --git a/packages/graph/__tests__/graph.test.js b/packages/graph/__tests__/graph.test.js
diff --git a/packages/graph/package.json b/packages/graph/package.json
@@ -25,7 +25,7 @@
   "scripts": {
     "prepublish": "npm run clean && npm run build",
     "build": "run-p \"build:*\"",
-    "build:esm": "tsc -p ./src",
+    "build:esm": "tsc -p ./src/tsconfig.esm.json",
     "build:cjs": "tsc -p ./src/tsconfig.cjs.json",
     "clean": "rimraf ./dist ./lib ./es5 ./deploy",
     "lint": "tslint --project ./src",
@@ -49,7 +49,7 @@
     "d3-scale": "^2.1.2",
     "d3-scale-chromatic": "^1.3.3",
     "deepmerge": "^3.2.0",
-    "lodash-es": "^4.17.11",
+    "lodash": "^4.17.11",
     "memoize-one": "^5.0.0",
     "resize-observer-polyfill": "^1.5.1"
   }
diff --git a/packages/graph/setupTests.js b/packages/graph/setupTests.js
@@ -0,0 +1,4 @@
+var enzyme = require('enzyme');
+var Adapter = require('enzyme-adapter-react-16');
+
+enzyme.configure({ adapter: new Adapter() });
diff --git a/packages/graph/src/hooks/useContainerDimension.ts b/packages/graph/src/hooks/useContainerDimension.ts
@@ -5,7 +5,7 @@ import {
   useEffect,
   useCallback,
 } from 'react';
-import { debounce } from 'lodash-es';
+import debounce from 'lodash/debounce';
 import resizeObserverPolyfill from 'resize-observer-polyfill';
 
 import { GraphDimension } from '../common/types';
diff --git a/packages/graph/src/layers/HoverLayer.tsx b/packages/graph/src/layers/HoverLayer.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { throttle } from 'lodash-es';
+import throttle from 'lodash/throttle';
 import { localPoint } from '@vx/event';
 
 import { useAnimationFrame } from '../hooks/useAnimationFrame';
diff --git a/packages/graph/src/layers/__tests__/ResponsiveLayer.test.tsx b/packages/graph/src/layers/__tests__/ResponsiveLayer.test.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import { ResponsiveLayer } from '../ResponsiveLayer';
+
+const MOCKED_DIMENSION = {
+  width: 300,
+  height: 200,
+};
+
+jest.mock('../../hooks/useContainerDimension', () => {
+  return {
+    useContainerDimension: () => MOCKED_DIMENSION,
+  };
+});
+
+describe('<ResponsiveLayer>', () => {
+  it('get dimension info and pass to children', () => {
+    const TestComponent = () => {
+      return (
+        <div className="wrapper">
+          <ResponsiveLayer>
+            {({ width, height }) => (
+              <>
+                <div id="width">{width}</div>
+                <div id="height">{height}</div>
+              </>
+            )}
+          </ResponsiveLayer>
+        </div>
+      );
+    };
+
+    const wrapper = mount(<TestComponent />);
+    expect(wrapper.find('#width').text()).toBe(String(MOCKED_DIMENSION.width));
+    expect(wrapper.find('#height').text()).toBe(String(MOCKED_DIMENSION.height));
+  });
+});
diff --git a/packages/graph/src/tsconfig.cjs.json b/packages/graph/src/tsconfig.cjs.json
@@ -3,5 +3,9 @@
   "compilerOptions": {
     "module": "commonjs",
     "outDir": "../lib/cjs"
-  }
+  },
+  "exclude": [
+    "node_modules",
+    "**/*.test.tsx"
+  ]
 }
diff --git a/packages/graph/src/tsconfig.esm.json b/packages/graph/src/tsconfig.esm.json
@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "../lib/esm"
+  },
+  "exclude": [
+    "node_modules",
+    "**/*.test.tsx"
+  ]
+}
diff --git a/packages/graph/src/utils/getColorScale.ts b/packages/graph/src/utils/getColorScale.ts
@@ -1,4 +1,5 @@
-import { map, sortedUniq } from 'lodash-es';
+import map from 'lodash/map';
+import sortedUniq from 'lodash/sortedUniq'
 import { extent as d3Extent } from 'd3-array';
 import { scaleOrdinal, scaleSequential } from 'd3-scale';
 
diff --git a/packages/graph/src/utils/getDataGroupByEncodings.ts b/packages/graph/src/utils/getDataGroupByEncodings.ts
@@ -1,4 +1,5 @@
-import { values, groupBy } from 'lodash-es';
+import groupBy from 'lodash/groupBy';
+import values from 'lodash/values';
 
 import { Encoding } from '../common/types';
 
diff --git a/setupTests.js b/setupTests.js
@@ -0,0 +1,4 @@
+var enzyme = require('enzyme');
+var Adapter = require('enzyme-adapter-react-16');
+
+enzyme.configure({ adapter: new Adapter() });
diff --git a/yarn.lock b/yarn.lock
