Merge pull request #41 from frankyma/Testing

Testing

Author: adriansun1

src/actions/components.js

@@ -81,8 +81,8 @@ export const parentReassignment = (({ index, id, parent }) => ({
   },
 }));
 
-export const addComponent = ({ title }) => (dispatch) => {
-  dispatch({ type: ADD_COMPONENT, payload: { title } });
+export const addComponent = title => (dispatch) => {
+  dispatch({ type: ADD_COMPONENT, payload: title });
   dispatch({ type: SET_SELECTABLE_PARENTS });
 };
 

src/components/__tests__/App.test.js renamed to src/components/__tests__.1/App.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 // import '../../setupTests';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import App from '../App.jsx';
 import AppContainer from '../../containers/AppContainer.jsx';
 

src/components/__tests__.1/RouteDisplay.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import renderer from 'react-test-renderer';
+import RouteDisplay from '../RouteDisplay.jsx';
+
+describe('React unit tests', () => {
+  describe('RouteDisplay', () => {
+    let wrapper;
+    const handleDeleteRoute = jest.fn();
+    const classes = {};
+
+    const props = {
+      componentTitle: 'TestComp',
+      pathName: 'TestPath',
+      routeCompId: '2',
+      handleDeleteRoute,
+      classes,
+      routerCompId: '1',
+    };
+
+    beforeAll(() => {
+      wrapper = mount(<RouteDisplay {...props} />);
+    });
+
+    it('snapshot test', () => {
+      const tree = renderer.create(<RouteDisplay {...props} />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('Should show the path name and comp name, with one line break', () => {
+      expect(wrapper.text()).toEqual('Path: / TestPathComponent: TestComp');
+      expect(wrapper.find('br')).toHaveLength(1);
+    });
+
+    it('clicks delete handler when button clicked', () => {
+      wrapper.find('button').simulate('click');
+      expect(handleDeleteRoute.mock.calls.length).toEqual(1);
+    });
+  });
+});

src/components/__tests__.1/__snapshots__/RouteDisplay.test.js.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`React unit tests RouteDisplay snapshot test 1`] = `
+<div
+  align="stretch"
+  className="MuiGrid-container-1 MuiGrid-align-items-xs-baseline-12"
+>
+  <div
+    className="MuiGrid-item-2 MuiGrid-grid-xs-10-39"
+  >
+    Path: / 
+    TestPath
+    <br />
+    Component: 
+    TestComp
+  </div>
+  <div
+    className="MuiGrid-item-2 MuiGrid-grid-xs-2-31"
+  >
+    <button
+      aria-label="Delete"
+      className="MuiButtonBase-root-104 MuiIconButton-root-98"
+      disabled={false}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      tabIndex="0"
+      type="button"
+    >
+      <span
+        className="MuiIconButton-label-103"
+      >
+        <svg
+          aria-hidden="true"
+          className="MuiSvgIcon-root-107"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+          />
+          <path
+            d="M0 0h24v24H0z"
+            fill="none"
+          />
+        </svg>
+      </span>
+      <span
+        className="MuiTouchRipple-root-114"
+      />
+    </button>
+  </div>
+</div>
+`;

src/containers/LeftContainer.jsx

@@ -13,7 +13,7 @@ import createModal from '../utils/createModal.util';
 import * as actions from '../actions/components';
 
 const mapDispatchToProps = dispatch => ({
-  addComponent: ({ title }) => dispatch(actions.addComponent({ title })),
+  addComponent: title => dispatch(actions.addComponent(title)),
   updateComponent:
     ({
       id, index, parent = null, newParentId = null, color = null, stateful = null, router = null,
@@ -91,7 +91,7 @@ class LeftContainer extends Component {
   }
 
   handleAddComponent = () => {
-    this.props.addComponent({ title: this.state.componentName });
+    this.props.addComponent(this.state.componentName);
     this.setState({
       componentName: '',
     });

src/containers/RoutesContainer.jsx

@@ -24,7 +24,7 @@ const mapStateToProps = ({ workspace: { components } }) => ({
   components,
 });
 
-class RoutesContainer extends Component {
+export class RoutesContainer extends Component {
   constructor(props) {
     super(props);
     this.state = {

src/containers/__tests__/RoutesContainer.test.js

@@ -0,0 +1,103 @@
+import React, { Component, Children } from 'react';
+import renderer from 'react-test-renderer';
+import TextField from '@material-ui/core/TextField';
+import { shallow, mount } from 'enzyme';
+import Select from '@material-ui/core/Select';
+import Button from '@material-ui/core/Button';
+import ConnectedRoutesContainer, { RoutesContainer } from '../RoutesContainer.jsx';
+import { styles } from '../LeftComponentContainer.jsx';
+import RouteDisplay from '../../components/RouteDisplay.jsx';
+
+describe('Routes Container Tests', () => {
+  let wrapper;
+  const addRoute = jest.fn();
+
+  const props = {
+    classes: {},
+    addRoute,
+    deleteRoute: () => null,
+    setSelectableRoutes: () => null,
+    setVisible: () => null,
+    component: {
+      id: '3',
+      selectableRoutes: [
+        {
+          id: '1',
+          title: 'route1',
+        },
+        {
+          id: '2',
+          title: 'route2',
+        },
+      ],
+      routes: [
+        {
+          routeCompId: '3',
+          title: 'route3',
+        },
+        {
+          routeCompId: '4',
+          title: 'route4',
+        },
+      ],
+    },
+  };
+
+  beforeAll(() => {
+    wrapper = mount(<RoutesContainer {...props} />);
+  });
+
+  it('snapshot test', () => {
+    const tree = renderer.create(<RoutesContainer {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should contain an input field that calls handleUpdate when changed', () => {
+    const inputField = wrapper.find(TextField);
+    expect(inputField).toHaveLength(1);
+    const instance = wrapper.instance();
+
+    expect(inputField.prop('onChange')).toBeDefined();
+    expect(inputField.prop('onChange')).toBeInstanceOf(Function);
+    expect(inputField.prop('onChange')).toEqual(instance.handleChange);
+  });
+
+  it('should have a handleUpdate function which sets the state to the current string', () => {
+    expect(wrapper.state().pathName).toBe('');
+    wrapper.find(TextField).prop('onChange')({ target: { value: 'a' }, preventDefault: () => null });
+    expect(wrapper.state().pathName).toBe('a');
+  });
+
+  it('should contain two RoutesContainer MUI components', () => {
+    expect(wrapper.find(RouteDisplay)).toHaveLength(2);
+  });
+
+  it('should contain three route child options', () => {
+    const optionslist = wrapper.find('option');
+    expect(optionslist).toHaveLength(3);
+    expect(optionslist.at(0).text()).toBe('None');
+    expect(optionslist.at(1).text()).toBe('route1');
+    expect(optionslist.at(2).text()).toBe('route2');
+  });
+
+  it('should set the selectedRouteId in state when routeChild is selected', () => {
+    const selectComp = wrapper.find('Select');
+    selectComp.prop('onChange')({ target: { value: '2' } });
+    expect(wrapper.state().selectedRouteId).toBe('2');
+  });
+
+  it('should run handleAddRoute when the add button is clicked', () => {
+    const instance = wrapper.instance();
+    const buttonClickHandler = wrapper.find(Button).prop('onClick');
+    expect(buttonClickHandler).toEqual(instance.handleAddRoute);
+  });
+
+  it('should pass route object into AddRoute when the add button is clicked', () => {
+    wrapper.find(Button).prop('onClick')();
+    expect(addRoute).toBeCalledWith({ path: 'a', routeCompId: '2', routerCompId: '3' });
+  });
+
+  it('should contain two RoutesContainer MUI components', () => {
+    expect(wrapper.find(RouteDisplay)).toHaveLength(2);
+  });
+});