Add eslint-plugin-jest and rename all test files as *.test.js (#1339)

* Add eslint-plugin-jest and enforce recommended rules

* Add top-level describe block to all tests and enforce related lint rule

* Remove eslint-plugin-no-only-tests

* Rename all test files as *.test.js

* fixup! Remove eslint-plugin-no-only-tests

* Drop node 8 test in CI

.eslintrc

@@ -2,6 +2,7 @@
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
+    "plugin:jest/recommended",
     "prettier",
     "prettier/react"
   ],
@@ -10,7 +11,7 @@
     "react",
     "prettier",
     "babel",
-    "no-only-tests"
+    "jest"
   ],
   "ignorePatterns": [
     "node_modules",
@@ -34,7 +35,7 @@
     "max-params": ["error", 6],
     "object-curly-spacing": 0,
     "babel/object-curly-spacing": 2,
-    "no-only-tests/no-only-tests": 2,
+    "jest/require-top-level-describe":"error",
     "react/prop-types": "off",
     "prettier/prettier": "warn"
   }

.travis.yml

@@ -1,6 +1,5 @@
 language: node_js
 node_js:
-  - '8'
   - '10'
 script:
   - npm run lint

package.json

@@ -35,7 +35,6 @@
     "eslint": "6.8.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-babel": "^5.3.0",
-    "eslint-plugin-no-only-tests": "^2.4.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.20.0",
     "husky": "^1.1.2"

packages/react-vis/jest.config.js

@@ -2,7 +2,6 @@
 const path = require('path');
 
 module.exports = {
-  testMatch: ['**/?(*-)+(test|tests).[tj]s?(x)'],
   transform: {
     '^.+\\.js$': path.resolve(__dirname, './jestBabelTransform.js')
   },

packages/react-vis/package.json

@@ -70,6 +70,7 @@
     "canvas-prebuilt": "^1.6.11",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
+    "eslint-plugin-jest":"^23.13.2",
     "jest":"^25.5.4",
     "jsdom": "^9.9.1",
     "node-sass": "^4.9.3",

packages/react-vis/tests/components/animation-tests.js → packages/react-vis/tests/components/animation.test.js

@@ -27,21 +27,23 @@ 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', () => {
-  const wrapper = mount(
-    <XYPlot width={300} height={300}>
-      <VerticalBarSeries data={[{x: 1, y: 0}]} />
-      <Axis
-        attr={'x'}
-        animation={{nonAnimatedProps: ['xDomain']}}
-        xDomain={['Black']}
-      />
-    </XYPlot>
-  );
+describe('Animation', () => {
+  test('interpolates xDomain when specified', () => {
+    const wrapper = mount(
+      <XYPlot width={300} height={300}>
+        <VerticalBarSeries data={[{x: 1, y: 0}]} />
+        <Axis
+          attr={'x'}
+          animation={{nonAnimatedProps: ['xDomain']}}
+          xDomain={['Black']}
+        />
+      </XYPlot>
+    );
 
-  const renderedAnimationWrapper = wrapper.find(Animation);
+    const renderedAnimationWrapper = wrapper.find(Animation);
 
-  expect(renderedAnimationWrapper.find(AxisTicks).prop('xDomain')).toEqual([
-    'Black'
-  ]);
+    expect(renderedAnimationWrapper.find(AxisTicks).prop('xDomain')).toEqual([
+      'Black'
+    ]);
+  });
 });

packages/react-vis/tests/components/arc-series.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import ArcSeries from 'plot/series/arc-series';
+import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils';
+import ArcSeriesExample from '../../../showcase/radial-chart/arc-series-example';
+
+testRenderWithProps(ArcSeries, GENERIC_XYPLOT_SERIES_PROPS);
+
+describe('ArcSeries', () => {
+  test('Showcase Example - ArcSeriesExample', () => {
+    const $ = mount(<ArcSeriesExample />);
+    expect($.text()).toBe('UPDATE-4-2024-4-2024');
+    // multiplied by two to account for shadow listeners
+    expect($.find('.rv-xy-plot__series--arc').length).toBe(4);
+    expect($.find('.rv-xy-plot__series--arc path').length).toBe(2 * 8);
+  });
+});

packages/react-vis/tests/components/area-series.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import {mount} from 'enzyme';
+
+import XYPlot from 'plot/xy-plot';
+import AreaSeries from 'plot/series/area-series';
+import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils';
+import AreaChartElevated from '../../../showcase/plot/area-chart-elevated';
+import AreaChart from '../../../showcase/plot/area-chart';
+
+testRenderWithProps(AreaSeries, GENERIC_XYPLOT_SERIES_PROPS);
+
+const AREA_PROPS = {
+  className: 'area-chart-example',
+  color: '#12939a',
+  data: [
+    {x: 1, y: 5, y0: 6},
+    {x: 2, y: 20, y0: 11},
+    {x: 3, y: 10, y0: 9}
+  ]
+};
+
+describe('AreaSeries', () => {
+  test('basic rendering', () => {
+    const $ = mount(
+      <XYPlot width={300} height={300}>
+        <AreaSeries {...AREA_PROPS} />
+      </XYPlot>
+    );
+    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}} />});
+    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', () => {
+    const $ = mount(<AreaChart />);
+    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', () => {
+    const $ = mount(<AreaChartElevated />);
+    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);
+  });
+});