chore: Tests revamp (#102)

* test: 💍 added basic tree rendering tests

this test if the tree renders the expected html for a custom renderer,
this will make sure that actual errors are caught unlike shallow
rendering all components

* test: 💍 minor change in exposed mock data

* chore: 🤖 updated jest to latest version

* test: 💍 moved export from sample data

* chore: 🤖 finished moving sample data

* test: 💍 added integration tests to Expandable Renderer

This tests assert that when a Expandable Renderer is used in a simple
tree nodes collapse and expand as expected

* chore: 🤖 moved deletable nodes samples inside file

* chore: 🤖 remove unused files

* test: 💍 added NodeDiff class

added a class that helps figure out the node changes inside the tree
when a certain action is executed

* test: 💍 added Deletable tests and small restructure

* test: 💍 added tree integration tests to Favorite Renderer

* chore: 🤖 re-organized tree tests

* chore: 🤖 remove old Tree tests

* test: 💍 added Tree extensions tests

* test: 💍 removed old TreeContainer tests

* test: 💍 moved Deletable renderer tests to react-testing-library

* test: 💍 moved Expandable tests to use react-testing-library

* test: 💍 moved Favorite renderer tests to use react-testing-lib

* test: 💍 moved DefaultGroupRenderer tests to react-testing-lib

* test: 💍 moved FilteringContainer tests to use react-testing-lib

* chore: 🤖 removed enzyme from project

* test: 💍 added integration tests for Tree filtering no groups

* test: 💍 finished filtering integration tests

Author: diogofcunha

__mocks__/react-virtualized.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+export class CellMeasurerCache {}
+
+export const AutoSizer = ({children}) => <React.Fragment>{children({width: 1000, height: 1000})}</React.Fragment>;
+// const mockInifiteLoader = ({children}) => (
+//   <React.Fragment>{children({registerChild: jest.fn(), onRowsRendered: jest.fn()})}</React.Fragment>
+// );
+
+export const CellMeasurer = ({children}) => <React.Fragment>{children({measure: jest.fn()})}</React.Fragment>;
+
+export const List = p =>
+  Array.from({length: p.rowCount}).map((_, i) =>
+    p.rowRenderer({
+      key: String(i),
+      columnIndex: 0,
+      index: i,
+      rowIndex: i,
+      isScrolling: false,
+      isVisible: true,
+      parent: {},
+      style: {},
+    }),
+  );

package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "classnames": "^2.2.5",
+    "jest": "^24.8.0",
     "lodash": "^4.17.4",
     "lodash.debounce": "^4.0.8",
     "lodash.findindex": "^4.6.0",
@@ -44,14 +45,11 @@
     "babel-preset-react-app": "^3.1.0",
     "deep-diff": "^1.0.2",
     "deep-freeze": "^0.0.1",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
     "flag-icon-css": "^2.9.0",
     "focus-trap-react": "^5.0.1",
     "gh-pages": "^1.1.0",
     "husky": "^1.0.0-rc.13",
     "immutability-helper": "^2.6.4",
-    "jest": "^22.0.4",
     "lint-staged": "^7.2.0",
     "nwb": "^0.21.5",
     "prettier": "1.13.7",
@@ -65,6 +63,7 @@
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "react-test-renderer": "^16.2.0",
+    "react-testing-library": "^7.0.0",
     "react-virtualized": "^9.18.5",
     "semantic-release": "^15.6.3",
     "semantic-ui-react": "^0.77.1",
@@ -76,7 +75,9 @@
       "src/**/*.{js,jsx,mjs}",
       "!src/**/index.js"
     ],
-    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js",
+    "setupFiles": [
+      "<rootDir>/src/setupTests.js"
+    ],
     "testMatch": [
       "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"

src/__tests__/FilteringContainer.test.js

@@ -1,21 +1,33 @@
 import React from 'react';
-import {shallow} from 'enzyme';
+import {render, cleanup} from 'react-testing-library';
+import ReactTestUtils from 'react-dom/test-utils';
 
 import FilteringContainer from '../FilteringContainer';
 import {Nodes} from '../../testData/sampleTree';
-import DefaultGroupRenderer from '../filtering/DefaultGroupRenderer';
 
 describe('FilteringContainer', () => {
+  afterEach(cleanup);
+
   const setup = (extraProps = {}) => {
-    const child = jest.fn();
+    const child = jest.fn().mockImplementation(() => <div>Child</div>);
 
     const props = {nodes: Nodes, debouncer: v => v, ...extraProps};
 
-    const wrapper = shallow(<FilteringContainer {...props}>{child}</FilteringContainer>);
+    const wrapper = render(<FilteringContainer {...props}>{child}</FilteringContainer>);
 
     return {
-      changeFilter: value => wrapper.find('input').simulate('change', {target: {value}}),
-      getInjectedNodes: () => child.mock.calls.slice(-1)[0][0].nodes,
+      changeFilter: value => {
+        const input = wrapper.getByPlaceholderText('Search...');
+
+        ReactTestUtils.Simulate.change(input, {
+          target: {
+            value,
+          },
+        });
+      },
+      getInjectedNodes: () => {
+        return child.mock.calls.slice(-1)[0][0].nodes;
+      },
       wrapper,
       child,
       props,
@@ -24,47 +36,47 @@ describe('FilteringContainer', () => {
 
   describe('filtering', () => {
     it('should not filter when searchTerm is empty', () => {
-      const {wrapper, changeFilter, props, getInjectedNodes} = setup();
+      const {changeFilter, props, getInjectedNodes} = setup();
 
       changeFilter('');
 
       expect(getInjectedNodes()).toEqual(props.nodes);
     });
 
-    it('should filter for deepsearch', () => {
-      const {wrapper, changeFilter, getInjectedNodes} = setup();
+    it('should filter for deepsearch', async () => {
+      const {changeFilter, getInjectedNodes} = setup();
 
       changeFilter('2');
 
       expect(getInjectedNodes()).toMatchSnapshot();
     });
 
     it('should filter when results match more then 1 node', () => {
-      const {wrapper, changeFilter, getInjectedNodes} = setup();
+      const {changeFilter, getInjectedNodes} = setup();
 
       changeFilter('1');
 
       expect(getInjectedNodes()).toMatchSnapshot();
     });
 
     it('should filter when there are no results', () => {
-      const {wrapper, changeFilter, getInjectedNodes} = setup();
+      const {changeFilter, getInjectedNodes} = setup();
 
       changeFilter('Node');
 
       expect(getInjectedNodes()).toEqual([]);
     });
 
     it('should ignore boundarie spaces when filtering', () => {
-      const {wrapper, changeFilter, getInjectedNodes} = setup();
+      const {changeFilter, getInjectedNodes} = setup();
 
       changeFilter('1 ');
 
       expect(getInjectedNodes()).toMatchSnapshot();
     });
 
     it('should ignore casing when filtering', () => {
-      const {wrapper, changeFilter, getInjectedNodes} = setup();
+      const {changeFilter, getInjectedNodes} = setup();
 
       changeFilter('LEAf 3');
 
@@ -76,14 +88,8 @@ describe('FilteringContainer', () => {
     it('when groups do not exist should not render groups related info', () => {
       const {wrapper} = setup();
 
-      expect(
-        wrapper
-          .find('div')
-          .at(1)
-          .hasClass('group'),
-      ).toBe(false);
-
-      expect(wrapper.find(DefaultGroupRenderer).length).toEqual(0);
+      expect(wrapper.container.querySelector('.group')).toBeNull();
+      expect(wrapper.container.querySelector('.tree-group')).toBeNull();
     });
 
     describe('when groups exist', () => {
@@ -109,36 +115,23 @@ describe('FilteringContainer', () => {
       it('should render the expected className', () => {
         const {wrapper} = setupWithGroups();
 
-        expect(
-          wrapper
-            .find('div')
-            .at(1)
-            .hasClass('group'),
-        ).toBe(true);
+        expect(wrapper.container.querySelector('.group')).not.toBeNull();
       });
 
       it('should render the DefaultGroupRenderer when one is not injected as a prop', () => {
-        const {wrapper, props} = setupWithGroups();
+        const {wrapper} = setupWithGroups();
 
-        expect(wrapper.find(DefaultGroupRenderer).props()).toEqual({
-          groups: props.groups,
-          selectedGroup: props.selectedGroup,
-          onChange: props.onSelectedGroupChange,
-        });
+        expect(wrapper.container.querySelector('.tree-group')).toMatchSnapshot();
       });
 
       it('should render a injected groupRenderer', () => {
-        const GroupRenderer = () => <div>Group renderer!</div>;
+        const GroupRenderer = props => <div data-testid="group-renderer">Group renderer! {JSON.stringify(props)}</div>;
 
-        const {wrapper, props} = setupWithGroups({
+        const {wrapper} = setupWithGroups({
           groupRenderer: GroupRenderer,
         });
 
-        expect(wrapper.find(GroupRenderer).props()).toEqual({
-          groups: props.groups,
-          selectedGroup: props.selectedGroup,
-          onChange: props.onSelectedGroupChange,
-        });
+        expect(wrapper.getByTestId('group-renderer')).toMatchSnapshot();
       });
 
       it('should filter results based on the selected group', () => {