Repo maintenance and cleanups (adazzle#1875)

* rm react-is

* Update other deps

* rename less files

* rm unused markdown dependency

* eslint config update and cleanup

* Add eslint-plugin-jest

Author: nstepien

.eslintrc.js

@@ -9,7 +9,7 @@ const rules = {
   'no-await-in-loop': 0,
   'no-compare-neg-zero': 2,
   'no-cond-assign': 2,
-  'no-console': 0,
+  'no-console': 1,
   'no-constant-condition': 2,
   'no-control-regex': 2,
   'no-debugger': 2,
@@ -22,7 +22,7 @@ const rules = {
   'no-ex-assign': 2,
   'no-extra-boolean-cast': 2,
   'no-extra-parens': 0, // replaced by @typescript-eslint/no-extra-parens
-  'no-extra-semi': 2,
+  'no-extra-semi': 0, // replaced by @typescript-eslint/no-extra-semi
   'no-func-assign': 2,
   'no-import-assign': 2,
   'no-inner-declarations': 0,
@@ -346,7 +346,7 @@ const rules = {
   'react/jsx-curly-newline': 1,
   'react/jsx-curly-spacing': 1,
   'react/jsx-equals-spacing': 1,
-  'react/jsx-filename-extension': [1, { extensions: ['.js', '.tsx'] }],
+  'react/jsx-filename-extension': [1, { extensions: ['.js', '.tsx'] }], // TODO: remove .js
   'react/jsx-first-prop-new-line': 1,
   'react/jsx-handler-names': 0,
   'react/jsx-indent': [1, 2],
@@ -392,6 +392,48 @@ const rules = {
   'react-hooks/rules-of-hooks': 2,
   'react-hooks/exhaustive-deps': 1,
 
+  // https://github.com/jest-community/eslint-plugin-jest#rules
+  'jest/consistent-test-it': 1,
+  'jest/expect-expect': 0,
+  'jest/lowercase-name': 0,
+  'jest/no-alias-methods': 1,
+  'jest/no-commented-out-tests': 0, // TODO
+  'jest/no-disabled-tests': 0,
+  'jest/no-duplicate-hooks': 2,
+  'jest/no-expect-resolves': 0,
+  'jest/no-export': 1,
+  'jest/no-focused-tests': 1,
+  'jest/no-hooks': 0, // TODO
+  'jest/no-identical-title': 2,
+  'jest/no-if': 1,
+  'jest/no-jasmine-globals': 1,
+  'jest/no-jest-import': 1,
+  'jest/no-large-snapshots': 0,
+  'jest/no-mocks-import': 1,
+  'jest/no-standalone-expect': 2,
+  'jest/no-test-callback': 0,
+  'jest/no-test-prefixes': 0,
+  'jest/no-test-return-statement': 0,
+  'jest/no-truthy-falsy': 1,
+  'jest/no-try-expect': 1,
+  'jest/prefer-called-with': 0,
+  'jest/prefer-expect-assertions': 0,
+  'jest/prefer-hooks-on-top': 0,
+  'jest/prefer-inline-snapshots': 0,
+  'jest/prefer-spy-on': 2,
+  'jest/prefer-strict-equal': 1,
+  'jest/prefer-to-be-null': 1,
+  'jest/prefer-to-be-undefined': 1,
+  'jest/prefer-to-contain': 1,
+  'jest/prefer-to-have-length': 1,
+  'jest/prefer-todo': 1,
+  'jest/require-top-level-describe': 0,
+  'jest/require-to-throw-message': 0,
+  'jest/valid-describe': 2,
+  'jest/valid-expect-in-promise': 1,
+  'jest/valid-expect': [1, { alwaysAwait: true }],
+  'jest/valid-title': 2,
+
   // SonarJS rules
   // https://github.com/SonarSource/eslint-plugin-sonarjs#rules
   'sonarjs/no-all-duplicated-branches': 2,
@@ -430,7 +472,7 @@ const rules = {
   '@typescript-eslint/brace-style': [1, '1tbs', { allowSingleLine: true }],
   '@typescript-eslint/camelcase': 0,
   '@typescript-eslint/class-name-casing': 0,
-  '@typescript-eslint/consistent-type-assertions': [2, { assertionStyle: 'as', objectLiteralTypeAssertions: 'allow' }],
+  '@typescript-eslint/consistent-type-assertions': [2, { assertionStyle: 'as', objectLiteralTypeAssertions: 'allow' }], // TODO: allow -> never
   '@typescript-eslint/consistent-type-definitions': [1, 'interface'],
   '@typescript-eslint/explicit-function-return-type': 0,
   '@typescript-eslint/explicit-member-accessibility': 0,
@@ -451,9 +493,11 @@ const rules = {
     nestedBinaryExpressions: false,
     ignoreJSX: 'all'
   }],
+  '@typescript-eslint/no-extra-semi': 2,
   '@typescript-eslint/no-extraneous-class': 2,
   '@typescript-eslint/no-floating-promises': 0,
   '@typescript-eslint/no-for-in-array': 0,
+  '@typescript-eslint/no-implied-eval': 0,
   '@typescript-eslint/no-inferrable-types': 1,
   '@typescript-eslint/no-magic-numbers': 0,
   '@typescript-eslint/no-misused-new': 2,
@@ -463,6 +507,7 @@ const rules = {
   '@typescript-eslint/no-parameter-properties': 0,
   '@typescript-eslint/no-require-imports': 1,
   '@typescript-eslint/no-this-alias': 0,
+  '@typescript-eslint/no-throw-literal': 0,
   '@typescript-eslint/no-type-alias': 0,
   '@typescript-eslint/no-unnecessary-condition': 0,
   '@typescript-eslint/no-unnecessary-qualifier': 0,
@@ -518,22 +563,21 @@ module.exports = {
   plugins: [
     'react',
     'react-hooks',
+    'jest',
     'sonarjs',
     '@typescript-eslint'
   ],
   rules,
   overrides: [{
+    // TODO: remove
     files: [
-      'examples/**/*',
-      'src/**/*'
+      'examples/**/*'
     ],
     env: {
       browser: true
-    },
-    globals: {
-      process: 'readable'
     }
   }, {
+    // TODO: remove
     files: [
       'src/**/__tests__/**/*'
     ],
@@ -550,8 +594,7 @@ module.exports = {
     files: [
       'babel.config.js',
       'jest.config.js',
-      'webpack-dev-server.mjs',
-      'tools/**/*.mjs'
+      '*.mjs'
     ],
     env: {
       node: true
@@ -571,9 +614,6 @@ module.exports = {
     ],
     parserOptions: {
       sourceType: 'script'
-    },
-    rules: {
-      '@typescript-eslint/no-require-imports': 0
     }
   }]
 };

examples/demos/example14-all-features-immutable.js

@@ -32,12 +32,7 @@ const columns = [
     name: 'Title',
     editor: <DropDownEditor options={titles} />,
     width: 200,
-    resizable: true,
-    events: {
-      onDoubleClick() {
-        console.log('The user double clicked on title column');
-      }
-    }
+    resizable: true
   },
   {
     key: 'firstName',

examples/demos/example19-column-events.js

@@ -20,12 +20,7 @@ export default class extends React.Component {
         key: 'title',
         name: 'Title',
         editor: <DropDownEditor options={titles} />,
-        resizable: true,
-        events: {
-          onDoubleClick(ev, args) {
-            console.log(`The user entered edit mode on title column with rowIdx: ${args.rowIdx} & rowId: ${args.rowId}`);
-          }
-        }
+        resizable: true
       },
       {
         key: 'name',

package.json

@@ -36,37 +36,36 @@
     "postpublish": "git push --follow-tags origin HEAD"
   },
   "dependencies": {
-    "@material-ui/core": "^4.7.2",
+    "@material-ui/core": "^4.8.3",
     "@material-ui/icons": "^4.5.1",
-    "classnames": "^2.2.6",
-    "react-is": "^16.12.0"
+    "classnames": "^2.2.6"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",
     "@babel/plugin-proposal-class-properties": "^7.7.4",
     "@babel/plugin-transform-runtime": "^7.7.6",
     "@babel/preset-env": "^7.7.7",
     "@babel/runtime": "^7.7.7",
-    "@testing-library/react": "^9.3.2",
+    "@testing-library/react": "^9.4.0",
     "@types/classnames": "^2.2.9",
-    "@types/enzyme": "^3.10.3",
+    "@types/enzyme": "^3.10.4",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/faker": "^4.1.8",
-    "@types/jest": "^24.0.23",
-    "@types/react": "^16.9.14",
+    "@types/jest": "^24.0.25",
+    "@types/react": "^16.9.17",
     "@types/react-dom": "^16.9.4",
-    "@types/react-is": "^16.7.1",
     "@types/react-router-dom": "^5.1.3",
     "@types/react-virtualized": "^9.21.7",
-    "@typescript-eslint/eslint-plugin": "^2.10.0",
-    "@typescript-eslint/parser": "^2.10.0",
+    "@typescript-eslint/eslint-plugin": "^2.15.0",
+    "@typescript-eslint/parser": "^2.15.0",
     "babel-loader": "^8.0.6",
     "clean-css": "^4.2.1",
     "core-js": "^3.6.2",
-    "css-loader": "^3.2.1",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
-    "eslint": "^6.7.2",
+    "css-loader": "^3.4.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^6.8.0",
+    "eslint-plugin-jest": "^23.4.0",
     "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-react-hooks": "^2.3.0",
     "eslint-plugin-sonarjs": "^0.5.0",
@@ -75,20 +74,19 @@
     "jest": "^24.9.0",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
-    "markdown": "^0.5.0",
     "react": "^16.12.0",
     "react-contextmenu": "^2.13.0",
     "react-dnd-test-backend": "^2.6.0",
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",
     "react-virtualized": "^9.21.2",
-    "recharts": "^1.7.1",
-    "style-loader": "^1.0.1",
-    "ts-jest": "^24.2.0",
+    "recharts": "^1.8.5",
+    "style-loader": "^1.1.2",
+    "ts-jest": "^24.3.0",
     "ts-loader": "^6.2.1",
-    "typescript": "~3.7.3",
-    "webpack": "^4.41.2",
-    "webpack-dev-server": "^3.9.0"
+    "typescript": "~3.7.4",
+    "webpack": "^4.41.5",
+    "webpack-dev-server": "^3.10.1"
   },
   "peerDependencies": {
     "react": "^16.8",

src/__tests__/Cell.spec.tsx

@@ -37,7 +37,7 @@ describe('Cell Tests', () => {
   it('should render a SimpleCellFormatter with value', () => {
     const wrapper = renderComponent();
     const formatter = wrapper.find(SimpleCellFormatter);
-    expect(formatter.props().row[defaultColumn.key]).toEqual('Wicklow');
+    expect(formatter.props().row[defaultColumn.key]).toStrictEqual('Wicklow');
   });
 
   it('should render a custom formatter when specified on column', () => {
@@ -50,7 +50,7 @@ describe('Cell Tests', () => {
 
     const wrapper = renderComponent({ column });
     const formatterInstance = wrapper.find(CustomFormatter);
-    expect(formatterInstance.prop('row')[column.key]).toEqual('Wicklow');
+    expect(formatterInstance.prop('row')[column.key]).toStrictEqual('Wicklow');
   });
 
   it('should render children when those are passed', () => {
@@ -79,7 +79,7 @@ describe('Cell Tests', () => {
     it('passes classname property', () => {
       const wrapper = shallowRenderComponent(requiredProperties);
       const cellDiv = wrapper.find('div').at(0);
-      expect(cellDiv.hasClass('rdg-cell'));
+      expect(cellDiv.hasClass('rdg-cell')).toBe(true);
     });
     it('passes style property', () => {
       const wrapper = shallowRenderComponent(requiredProperties);

src/__tests__/HeaderCell.spec.tsx

@@ -59,12 +59,12 @@ describe('Header Cell Tests', () => {
   describe('Render draggableHeaderCell', () => {
     it('should not render DraggableHeaderCell when draggable is false', () => {
       const { wrapper } = setup({}, { draggable: false });
-      expect(wrapper.find(DraggableHeaderCell).length).toBe(0);
+      expect(wrapper.find(DraggableHeaderCell)).toHaveLength(0);
     });
 
     it('should not render DraggableHeaderCell when draggable is true', () => {
       const { wrapper } = setup({}, { draggable: true });
-      expect(wrapper.find(DraggableHeaderCell).length).toBe(1);
+      expect(wrapper.find(DraggableHeaderCell)).toHaveLength(1);
     });
   });
 });

src/__tests__/HeaderRow.spec.tsx

@@ -94,7 +94,7 @@ describe('Header Row Unit Tests', () => {
     it('passes classname property', () => {
       const wrapper = renderComponent(requiredProps);
       const headerRowDiv = wrapper.find('div').at(0);
-      expect(headerRowDiv.hasClass('rdg-header-row'));
+      expect(headerRowDiv.hasClass('rdg-header-row')).toBe(true);
     });
     it('does not pass width if not available from props', () => {
       const wrapper = renderComponent(requiredProps);
@@ -104,7 +104,7 @@ describe('Header Row Unit Tests', () => {
     it('does pass the height if available from props', () => {
       const wrapper = renderComponent(requiredProps);
       const headerRowDiv = wrapper.find('div').at(0);
-      expect(headerRowDiv.props().style).toEqual({ height: 35, width: 1000 });
+      expect(headerRowDiv.props().style).toStrictEqual({ height: 35, width: 1000 });
     });
   });
 });

src/__tests__/Row.spec.tsx

@@ -34,7 +34,7 @@ describe('Row', () => {
   it('passes classname property', () => {
     const { wrapper } = setup(requiredProperties);
     const draggableDiv = wrapper.find('div').at(0);
-    expect(draggableDiv.hasClass('rdg-row'));
+    expect(draggableDiv.hasClass('rdg-row')).toBe(true);
   });
 
   it('passes style property', () => {

src/editors/__tests__/EditorContainer.spec.tsx

@@ -83,9 +83,9 @@ describe('Editor Container Tests', () => {
       const { wrapper } = setup();
       const editor = wrapper.find(SimpleTextEditor);
 
-      expect(editor.length).toBe(1);
-      expect(editor.props().value).toEqual('Adwolf');
-      expect(editor.props().column).toEqual(fakeColumn);
+      expect(editor).toHaveLength(1);
+      expect(editor.props().value).toStrictEqual('Adwolf');
+      expect(editor.props().column).toStrictEqual(fakeColumn);
     });
 
     it('should render the editor container div with correct properties', () => {
@@ -124,7 +124,7 @@ describe('Editor Container Tests', () => {
       const { wrapper } = innerSetup();
       const editor = wrapper.find(TestEditor);
 
-      expect(editor.length).toBe(1);
+      expect(editor).toHaveLength(1);
       expect(editor.prop('value')).toBe('SupernaviX');
       expect(editor.prop('onCommit')).toBeDefined();
       expect(editor.prop('onCommitCancel')).toBeDefined();

src/masks/__tests__/DragMask.spec.tsx

@@ -36,7 +36,7 @@ describe('DragMask', () => {
   it('should not render the CellMask component if the drag handle is on the same row as the dragged cell', () => {
     const mask = setup({ idx: 0, rowIdx: 2, overRowIdx: 2 });
 
-    expect(mask.length).toBe(0);
+    expect(mask).toHaveLength(0);
   });
 
   it('should render the CellMask component with correct position for the dragged down cell', () => {