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

Setup unit test with jest, ts-jest and enzyme

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)

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: '../',
+};

config/tsconfig.base.json

@@ -3,6 +3,7 @@
     "baseUrl": "./packages",
     "outDir": "lib",
     "module": "es6",
+    "esModuleInterop": true,
     "target": "es5",
     "lib": ["es2015", "dom"],
     "sourceMap": true,

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",

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",

packages/animation/setupTests.js

@@ -0,0 +1,4 @@
+var enzyme = require('enzyme');
+var Adapter = require('enzyme-adapter-react-16');
+
+enzyme.configure({ adapter: new Adapter() });

packages/animation/src/tsconfig.cjs.json

@@ -3,5 +3,9 @@
   "compilerOptions": {
     "module": "commonjs",
     "outDir": "../lib/cjs"
-  }
+  },
+  "exclude": [
+    "node_modules",
+    "**/*.test.tsx"
+  ]
 }

packages/animation/src/tsconfig.esm.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "../lib/esm"
+  },
+  "exclude": [
+    "node_modules",
+    "**/*.test.tsx"
+  ]
+}

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"
   }
 }

packages/chart/setupTests.js

@@ -0,0 +1,4 @@
+var enzyme = require('enzyme');
+var Adapter = require('enzyme-adapter-react-16');
+
+enzyme.configure({ adapter: new Adapter() });

packages/chart/src/tsconfig.cjs.json

@@ -3,5 +3,9 @@
   "compilerOptions": {
     "module": "commonjs",
     "outDir": "../lib/cjs"
-  }
+  },
+  "exclude": [
+    "node_modules",
+    "**/*.test.tsx"
+  ]
 }

packages/chart/src/tsconfig.esm.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "../lib/esm"
+  },
+  "exclude": [
+    "node_modules",
+    "**/*.test.tsx"
+  ]
+}

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"
   }

packages/graph/setupTests.js

@@ -0,0 +1,4 @@
+var enzyme = require('enzyme');
+var Adapter = require('enzyme-adapter-react-16');
+
+enzyme.configure({ adapter: new Adapter() });

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';

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';

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));
+  });
+});

packages/graph/src/tsconfig.cjs.json

@@ -3,5 +3,9 @@
   "compilerOptions": {
     "module": "commonjs",
     "outDir": "../lib/cjs"
-  }
+  },
+  "exclude": [
+    "node_modules",
+    "**/*.test.tsx"
+  ]
 }

packages/graph/src/tsconfig.esm.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "../lib/esm"
+  },
+  "exclude": [
+    "node_modules",
+    "**/*.test.tsx"
+  ]
+}

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';
 

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';
 

setupTests.js

@@ -0,0 +1,4 @@
+var enzyme = require('enzyme');
+var Adapter = require('enzyme-adapter-react-16');
+
+enzyme.configure({ adapter: new Adapter() });