Merge 5afd503 into 08f0562

uber · May 27, 2020 · 624d3fd · 624d3fd
2 parents 08f0562 + 5afd503
commit 624d3fd
Show file tree

Hide file tree

Showing 56 changed files with 2,465 additions and 3,293 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -25,7 +25,8 @@
   },
   "env": {
     "es6": true,
-    "browser": true
+    "browser": true,
+    "jest": true
   },
   "rules": {
     "consistent-return": 0,

diff --git a/packages/react-vis/jest.config.js b/packages/react-vis/jest.config.js
@@ -0,0 +1,10 @@
+/*eslint-env node*/
+const path = require('path');
+
+module.exports = {
+  testMatch: ['**/?(*-)+(test|tests).[tj]s?(x)'],
+  transform: {
+    '^.+\\.js$': path.resolve(__dirname, './jestBabelTransform.js')
+  },
+  setupFilesAfterEnv: ['./jest.setup.js']
+};
diff --git a/packages/react-vis/jest.setup.js b/packages/react-vis/jest.setup.js
@@ -0,0 +1,18 @@
+/*eslint-env node*/
+import jsdom from 'jsdom';
+import Enzyme from 'enzyme';
+
+import Adapter from 'enzyme-adapter-react-16';
+Enzyme.configure({adapter: new Adapter()});
+
+global.document = jsdom.jsdom('<body></body>');
+global.window = document.defaultView;
+Object.keys(document.defaultView).forEach(function mapProperties(property) {
+  if (typeof global[property] === 'undefined') {
+    global[property] = document.defaultView[property];
+  }
+});
+
+global.navigator = {
+  userAgent: 'node.js'
+};
diff --git a/packages/react-vis/jestBabelTransform.js b/packages/react-vis/jestBabelTransform.js
@@ -0,0 +1,7 @@
+/*eslint-env node*/
+const babelJest = require('babel-jest');
+
+// see https://github.com/facebook/jest/issues/7359#issuecomment-471509996
+module.exports = babelJest.createTransformer({
+  rootMode: 'upward'
+});
diff --git a/packages/react-vis/package.json b/packages/react-vis/package.json
@@ -27,9 +27,9 @@
     "build": "yarn run clean && babel --root-mode upward src -d dist --copy-files && BABEL_ENV=es babel --root-mode upward src -d es --copy-files && node-sass src/main.scss dist/style.css --output-style compressed && yarn run build:browser",
     "lint-styles": "stylelint src/styles/*.scss --syntax scss",
     "test:windows": "babel-node --inspect ./tests/index.js",
-    "test": "node --inspect ./node_modules/.bin/babel-node --root-mode upward ./tests/index.js --only='../showcase/**/*.js,src,tests'",
+    "test": "NODE_ENV=development jest",
     "full-test": "npm run lint && npm run cover",
-    "cover": "nyc --reporter=text --reporter=html --reporter=lcov npm test",
+    "cover": "NODE_ENV=development jest --coverage",
     "prettier": "prettier --write $(git ls-files | grep '.js$')"
   },
   "dependencies": {
@@ -63,15 +63,16 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
     "babel-eslint": "^10.1.0",
+    "babel-jest":"^25.5.1",
     "babel-plugin-module-resolver": "^4.0.0",
     "babelify": "^10.0.0",
     "browserify": "^14.3.0",
     "canvas-prebuilt": "^1.6.11",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
+    "jest":"^25.5.4",
     "jsdom": "^9.9.1",
     "node-sass": "^4.9.3",
-    "nyc": "^13.0.1",
     "prettier": "^1.14.2",
     "react": "^16.0.0",
     "react-addons-test-utils": ">=15.4.2",
@@ -80,7 +81,6 @@
     "react-vis-showcase": "^0.1.0",
     "stylelint": "^7.7.1",
     "stylelint-config-standard": "^15.0.1",
-    "tape": "^4.6.3",
     "uglify-js": "^2.8.22"
   },
   "peerDependencies": {

diff --git a/packages/react-vis/tests/components/animation-tests.js b/packages/react-vis/tests/components/animation-tests.js
@@ -18,7 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import test from 'tape';
 import React from 'react';
 import {mount} from 'enzyme';
 
@@ -28,7 +27,7 @@ import AxisTicks from 'plot/axis/axis-ticks';
 import VerticalBarSeries from 'plot/series/vertical-bar-series';
 import XYPlot from 'plot/xy-plot';
 
-test('Animation interpolates xDomain when specified', t => {
+test('Animation interpolates xDomain when specified', () => {
   const wrapper = mount(
     <XYPlot width={300} height={300}>
       <VerticalBarSeries data={[{x: 1, y: 0}]} />
@@ -42,11 +41,7 @@ test('Animation interpolates xDomain when specified', t => {
 
   const renderedAnimationWrapper = wrapper.find(Animation);
 
-  t.deepEqual(
-    renderedAnimationWrapper.find(AxisTicks).prop('xDomain'),
-    ['Black'],
-    'Axis interpolates props and passes to Animation'
-  );
-
-  t.end();
+  expect(renderedAnimationWrapper.find(AxisTicks).prop('xDomain')).toEqual([
+    'Black'
+  ]);
 });
diff --git a/packages/react-vis/tests/components/arc-series-tests.js b/packages/react-vis/tests/components/arc-series-tests.js
@@ -1,4 +1,3 @@
-import test from 'tape';
 import React from 'react';
 import {mount} from 'enzyme';
 import ArcSeries from 'plot/series/arc-series';
@@ -7,24 +6,10 @@ import ArcSeriesExample from '../../../showcase/radial-chart/arc-series-example'
 
 testRenderWithProps(ArcSeries, GENERIC_XYPLOT_SERIES_PROPS);
 
-test('ArcSeries: Showcase Example - ArcSeriesExample', t => {
+test('ArcSeries: Showcase Example - ArcSeriesExample', () => {
   const $ = mount(<ArcSeriesExample />);
-  t.equal(
-    $.text(),
-    'UPDATE-4-2024-4-2024',
-    'should find the right text content'
-  );
+  expect($.text()).toBe('UPDATE-4-2024-4-2024');
   // multiplied by two to account for shadow listeners
-  t.equal(
-    $.find('.rv-xy-plot__series--arc').length,
-    4,
-    'should find the right number of series'
-  );
-  t.equal(
-    $.find('.rv-xy-plot__series--arc path').length,
-    2 * 8,
-    'with the right number of arc in them'
-  );
-
-  t.end();
+  expect($.find('.rv-xy-plot__series--arc').length).toBe(4);
+  expect($.find('.rv-xy-plot__series--arc path').length).toBe(2 * 8);
 });
diff --git a/packages/react-vis/tests/components/area-series-tests.js b/packages/react-vis/tests/components/area-series-tests.js
@@ -1,4 +1,3 @@
-import test from 'tape';
 import React from 'react';
 import {mount} from 'enzyme';
 
@@ -20,88 +19,33 @@ const AREA_PROPS = {
   ]
 };
 
-test('AreaSeries: basic rendering', t => {
+test('AreaSeries: basic rendering', () => {
   const $ = mount(
     <XYPlot width={300} height={300}>
       <AreaSeries {...AREA_PROPS} />
     </XYPlot>
   );
-  t.equal(
-    $.find('.rv-xy-plot__series').length,
-    1,
-    'should find the right number of series'
-  );
-  t.equal(
-    $.find('path.rv-xy-plot__series').length,
-    1,
-    'should find the right number of series'
-  );
-  t.equal(
-    $.find('path.area-chart-example').length,
-    1,
-    'should find the right number of custom named series'
-  );
+  expect($.find('.rv-xy-plot__series').length).toBe(1);
+  expect($.find('path.rv-xy-plot__series').length).toBe(1);
+  expect($.find('path.area-chart-example').length).toBe(1);
 
   $.setProps({children: <AreaSeries {...{...AREA_PROPS, data: null}} />});
-  t.equal(
-    $.find('.rv-xy-plot__series').length,
-    0,
-    'should find the right number of series'
-  );
-  t.equal(
-    $.find('.rv-xy-plot__series path').length,
-    0,
-    'should find the right number of series'
-  );
-  t.equal(
-    $.find('.area-chart-example').length,
-    0,
-    'should find the right number of custom named series'
-  );
-  t.end();
+  expect($.find('.rv-xy-plot__series').length).toBe(0);
+  expect($.find('.rv-xy-plot__series path').length).toBe(0);
+  expect($.find('.area-chart-example').length).toBe(0);
 });
 
-test('AreaSeries: Showcase Example - AreaChart', t => {
+test('AreaSeries: Showcase Example - AreaChart', () => {
   const $ = mount(<AreaChart />);
-  t.equal(
-    $.find('.rv-xy-plot__series').length,
-    1,
-    'should find the right number of series'
-  );
-  t.equal(
-    $.find('path.rv-xy-plot__series').length,
-    1,
-    'should find the right number of series'
-  );
-  t.equal(
-    $.find('path.area-series-example').length,
-    1,
-    'should find the right number of custom named series'
-  );
-  t.end();
+  expect($.find('.rv-xy-plot__series').length).toBe(1);
+  expect($.find('path.rv-xy-plot__series').length).toBe(1);
+  expect($.find('path.area-series-example').length).toBe(1);
 });
 
-test('AreaSeries: Showcase Example - AreaChartElevated', t => {
+test('AreaSeries: Showcase Example - AreaChartElevated', () => {
   const $ = mount(<AreaChartElevated />);
-  t.equal(
-    $.find('.rv-xy-plot__series').length,
-    5,
-    'should find the right number of series'
-  );
-  t.equal(
-    $.find('path.rv-xy-plot__series').length,
-    3,
-    'should find the right number of pathes'
-  );
-  t.equal(
-    $.find('path.area-elevated-series-1').length,
-    1,
-    'should find the first custom component correctly'
-  );
-  t.equal(
-    $.find('path.area-elevated-series-2').length,
-    1,
-    'should find the second custom component correctly'
-  );
-  t.end();
+  expect($.find('.rv-xy-plot__series').length).toBe(5);
+  expect($.find('path.rv-xy-plot__series').length).toBe(3);
+  expect($.find('path.area-elevated-series-1').length).toBe(1);
+  expect($.find('path.area-elevated-series-2').length).toBe(1);
 });