unit test table shouldComponentUpdate condition

Author: Marc-André Rivet

src/dash-table/components/Table/index.tsx

@@ -20,15 +20,13 @@ import 'react-select/dist/react-select.css';
 import './Table.less';
 import './style';
 import './Dropdown.css';
-import { isEqual } from 'core/comparer';
 import { SingleColumnSyntaxTree } from 'dash-table/syntax-tree';
 import derivedFilterMap from 'dash-table/derived/filter/map';
 
 import controlledPropsHelper from './controlledPropsHelper';
 import derivedPropsHelper from './derivedPropsHelper';
 import DOM from 'core/browser/DOM';
-
-const DERIVED_REGEX = /^derived_/;
+import shouldComponentUpdate from './shouldComponentUpdate';
 
 export default class Table extends Component<SanitizedAndDerivedProps, StandaloneState> {
     constructor(props: SanitizedAndDerivedProps) {
@@ -94,10 +92,7 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
         const props: any = this.props;
         const state: any = this.state;
 
-        return R.any(key =>
-            !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
-            R.keysIn({ ...props, ...nextProps })
-        ) || !isEqual(state, nextState);
+        return shouldComponentUpdate(props, nextProps, state, nextState);
     }
 
     render() {
@@ -159,3 +154,4 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
     private readonly controlledPropsHelper = controlledPropsHelper();
     private readonly updateDerivedProps = derivedPropsHelper();
 }
+

src/dash-table/components/Table/shouldComponentUpdate.ts

@@ -0,0 +1,14 @@
+import * as R from 'ramda';
+import { isEqual } from 'core/comparer';
+
+const DERIVED_REGEX = /^derived_/;
+
+export default (
+    props: any,
+    nextProps: any,
+    state: any,
+    nextState: any
+) => R.any(
+    key => !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
+    R.keysIn({ ...props, ...nextProps })
+) || !isEqual(state, nextState);

tests/cypress/tests/unit/table_update_test.ts

@@ -0,0 +1,27 @@
+import shouldComponentUpdate from 'dash-table/components/Table/shouldComponentUpdate';
+
+describe('shouldComponentUpdate', () => {
+    it('should update on undefined -> defined props', () => {
+        assert(shouldComponentUpdate({}, { a: 0 }, {}, {}));
+    });
+
+    it('should update on undefined -> defined state', () => {
+        assert(shouldComponentUpdate({}, {}, {}, { a: 0 }));
+    });
+
+    it('should update on defined -> undefined props', () => {
+        assert(shouldComponentUpdate({ a: 0 }, {}, {}, {}));
+    });
+
+    it('should update on defined -> undefined state', () => {
+        assert(shouldComponentUpdate({}, {}, { a: 0 }, {}));
+    });
+
+    it('should not update on derived props', () => {
+        assert(!shouldComponentUpdate({ derived_test: 0 }, { derived_test: 1 }, {}, {}));
+    });
+
+    it('should update on derived state', () => {
+        assert(shouldComponentUpdate({}, {}, { derived_test: 0 }, { derived_test: 1 }));
+    });
+});