Refactor shallow render tests; Updated enzyme

Signed-off-by: Joe Lee <[email protected]>

Author: alexthornburg

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 *.iml
 .idea/*
 dist/*
+src/**/*.js

package.json

@@ -20,24 +20,22 @@
     "@types/enzyme": "^2.7.7",
     "@types/jest": "19.2.2",
     "@types/react": "^15.0.21",
-    "@types/react-addons-test-utils": "0.14.18",
     "@types/react-dom": "^15.5.0",
     "@types/react-redux": "^4.4.38",
-    "@types/redux": "3.6.0",
     "@types/redux-actions": "^1.2.3",
     "@types/redux-logger": "^3.0.0",
     "awesome-typescript-loader": "^3.1.2",
     "cross-env": "4.0.0",
-    "enzyme": "^2.8.0",
+    "enzyme": "^2.8.2",
     "extract-text-webpack-plugin": "2.1.0",
     "html-webpack-plugin": "2.28.0",
     "jest": "^19.0.2",
     "karma": "^1.6.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-typescript": "^3.0.0",
     "karma-typescript-preprocessor": "^0.3.1",
-    "react-addons-test-utils": "15.5.1",
     "react-hot-loader": "1.3.1",
+    "react-test-renderer": "^15.5.4",
     "redux-actions": "2.0.2",
     "source-map-loader": "^0.2.1",
     "stylelint-webpack-plugin": "0.7.0",

src/Hello/__test__/actions.test.ts

@@ -3,7 +3,7 @@ import * as ReactDOM from "react-dom";
 import {Provider, Store} from 'react-redux';
 
 import configureStore from "./configureStore";
-import Hello from "./Hello/Hello";
+import Hello from "./main/components/Hello";
 
 const store : Store<any> = configureStore();
 ReactDOM.render(

src/index.tsx

@@ -0,0 +1,19 @@
+import {decrementAction, INCREMENT, incrementAction, DECREMENT} from "../actions";
+
+describe("incrementAction", () => {
+    it("returns action of type increment", () => {
+        let action = {
+            type: INCREMENT
+        };
+        expect(incrementAction()).toEqual(action);
+    });
+});
+
+describe("decrementAction", () => {
+    it("returns action of type decrement", () => {
+        let action = {
+            type: DECREMENT
+        };
+        expect(decrementAction()).toEqual(action);
+    });
+});

src/main/actions/__test__/actions.test.ts

@@ -1,18 +1,16 @@
 import {createAction} from "redux-actions";
 
-export enum actionTypes {
-    INCREMENT,
-    DECREMENT
-}
+export const INCREMENT = "INCREMENT";
+export const DECREMENT = "DEVREMENT";
 
 export const incrementAction : any = createAction<void>(
-    actionTypes.INCREMENT.toString(),
+    INCREMENT,
     () => {
     }
 );
 
 export const decrementAction : any = createAction<void>(
-    actionTypes.DECREMENT.toString(),
+    DECREMENT,
     () => {
     }
 );

src/Hello/actions.ts renamed to src/main/actions/actions.ts

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var Counter = function (props) {
+    var counter = props.counter, increment = props.increment, decrement = props.decrement;
+    return (<div>
+            <p>Counter: {counter}</p>
+            <button onClick={increment} label="Increment" id="increment"/>
+            <button onClick={decrement} label="Decrement" id="decrement"/>
+        </div>);
+};
+exports.default = Counter;

src/main/components/Counter.jsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import DefaultState from "../interfaces/defaultState"
 
-export interface IProps extends DefaultState {
+export interface CounterProps extends DefaultState {
     increment(): void;
     decrement(): void;
 }
 
-const Counter = (props: IProps) => {
-    const { counter, increment, decrement } = props;
+const Counter: any = (props: CounterProps) => {
+    const {counter, increment, decrement} = props;
 
     return (
         <div>

src/Hello/containers/Counter.tsx renamed to src/main/components/Counter.tsx

@@ -0,0 +1,49 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var react_redux_1 = require("react-redux");
+var redux_1 = require("redux");
+var Counter_1 = require("./Counter");
+var actions_1 = require("../actions/actions");
+var Hello = (function (_super) {
+    __extends(Hello, _super);
+    function Hello(props) {
+        var _this = _super.call(this, props) || this;
+        _this.increment = _this.increment.bind(_this);
+        _this.decrement = _this.decrement.bind(_this);
+        return _this;
+    }
+    Hello.prototype.increment = function () {
+        this.props.actions.incrementAction();
+    };
+    Hello.prototype.decrement = function () {
+        this.props.actions.decrementAction();
+    };
+    Hello.prototype.render = function () {
+        return <div>
+            <h1>Hello typescript and react!</h1>
+            <Counter_1.default counter={this.props.counter} decrement={this.decrement} increment={this.increment}/>
+        </div>;
+    };
+    return Hello;
+}(React.Component));
+exports.Hello = Hello;
+exports.mapStateToProps = function (state) {
+    return state.counters;
+};
+exports.mapDispatchToProps = function (dispatch) {
+    return {
+        actions: redux_1.bindActionCreators(actions_1.default, dispatch)
+    };
+};
+exports.default = react_redux_1.connect(exports.mapStateToProps, exports.mapDispatchToProps)(Hello);

src/main/components/Hello.jsx

@@ -3,9 +3,9 @@ import * as React from "react";
 import {connect, Dispatch} from "react-redux";
 import {bindActionCreators} from "redux";
 
-import Counter from "./containers/Counter";
-import {IRootState} from "../rootReducer";
-import actions from "./actions";
+import Counter from "./Counter";
+import {IRootState} from "../../rootReducer";
+import actions from "../actions/actions";
 
 export interface HelloProps {
     counter: number,

src/Hello/Hello.tsx renamed to src/main/components/Hello.tsx

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var Counter_1 = require("../Counter");
+var enzyme_1 = require("enzyme");
+describe("counter container", function () {
+    var subject, mockIncrement, mockDecrement;
+    var incrementButtonProps;
+    var decrementButtonProps;
+    beforeEach(function () {
+        mockIncrement = jest.fn();
+        mockDecrement = jest.fn();
+        subject = enzyme_1.shallow(<Counter_1.default increment={mockIncrement} decrement={mockDecrement} counter={1}/>);
+        incrementButtonProps = subject.find("#increment").props();
+        decrementButtonProps = subject.find("#decrement").props();
+    });
+    it("it shows the counter", function () {
+        expect(subject.text()).toContain("1");
+    });
+    it("clicking on the increment button call property increment", function () {
+        incrementButtonProps.onClick();
+        expect(mockIncrement).toBeCalled();
+    });
+    it("clicking on the decrement button call property decrement", function () {
+        decrementButtonProps.onClick();
+        expect(mockDecrement).toBeCalled();
+    });
+});

src/main/components/__test__/Counter.test.jsx

@@ -1,30 +1,38 @@
 import * as React from "react";
-import {shallow, ShallowWrapper} from "enzyme";
-
 import Counter from "../Counter";
+import {EnzymePropSelector, shallow, ShallowWrapper} from "enzyme";
+import {Hello} from "../Hello";
 
 describe("counter container", () => {
-    let subject: ShallowWrapper<T, any>,
+    let subject: ShallowWrapper<Hello, any>,
         mockIncrement: () => {},
         mockDecrement: () => {};
+
+    let incrementButtonProps: EnzymePropSelector;
+    let decrementButtonProps: EnzymePropSelector;
+
     beforeEach(() => {
         mockIncrement = jest.fn();
         mockDecrement = jest.fn();
         subject = shallow(<Counter increment={mockIncrement} decrement={mockDecrement} counter={1}/>);
+
+        incrementButtonProps = subject.find("#increment").props();
+        decrementButtonProps = subject.find("#decrement").props();
+
     });
 
     it("it shows the counter", () => {
         expect(subject.text()).toContain("1");
     });
 
     it("clicking on the increment button call property increment", () => {
-        subject.find("#increment").props().onClick();
+        incrementButtonProps.onClick();
 
         expect(mockIncrement).toBeCalled();
     });
 
     it("clicking on the decrement button call property decrement", () => {
-        subject.find("#decrement").props().onClick();
+        decrementButtonProps.onClick();
 
         expect(mockDecrement).toBeCalled();
     });

src/Hello/containers/__test__/Counter.test.tsx renamed to src/main/components/__test__/Counter.test.tsx

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+jest.mock("../../actions/actions");
+var React = require("react");
+var enzyme_1 = require("enzyme");
+var Hello_1 = require("../Hello");
+var Counter_1 = require("../Counter");
+var actions_1 = require("../../actions/actions");
+describe("Hello Component", function () {
+    var helloComponent;
+    var props;
+    var increment;
+    var decrement;
+    var counter;
+    var counterProps;
+    beforeEach(function () {
+        increment = jest.fn();
+        decrement = jest.fn();
+        props = {
+            counter: 2,
+            actions: {
+                incrementAction: increment,
+                decrementAction: decrement
+            }
+        };
+        helloComponent = enzyme_1.shallow(<Hello_1.Hello actions={props.actions} counter={props.counter}/>);
+        counterProps = helloComponent.find(Counter_1.default).props();
+    });
+    it("says hello", function () {
+        expect(helloComponent.find("h1").text()).toContain("Hello typescript and react!");
+    });
+    describe("Counter component", function () {
+        it("shows the counter component", function () {
+            expect(helloComponent.find(Counter_1.default).length).toEqual(1);
+        });
+        it("passes counter property", function () {
+            expect(counterProps.counter).toEqual(2);
+        });
+        it("passes functions of increment the counter", function () {
+            counterProps.increment();
+            expect(increment).toBeCalled();
+        });
+        it("passes functions of decrement the counter", function () {
+            counterProps.decrement();
+            expect(decrement).toBeCalled();
+        });
+    });
+    describe("mapStateToProps", function () {
+        it("maps the counter from the state", function () {
+            var counters = {
+                counter: 1
+            };
+            var state = {
+                counters: counters
+            };
+            var props = Hello_1.mapStateToProps(state);
+            expect(props.counter).toBe(1);
+        });
+    });
+    describe("mapDispatchToProps", function () {
+        it("maps action functions to decrement the counter", function () {
+            actions_1.decrementAction.mockReturnValue("you are going down, sorry!");
+            var dispatch = jest.fn();
+            var props = Hello_1.mapDispatchToProps(dispatch);
+            props.actions.decrementAction();
+            expect(actions_1.decrementAction).toBeCalled();
+            expect(dispatch).toBeCalledWith("you are going down, sorry!");
+        });
+        it("maps action functions to increment the counter", function () {
+            actions_1.incrementAction.mockReturnValue("you are going up, congratulations!");
+            var dispatch = jest.fn();
+            var props = Hello_1.mapDispatchToProps(dispatch);
+            props.actions.incrementAction();
+            expect(actions_1.incrementAction).toBeCalled();
+            expect(dispatch).toBeCalledWith("you are going up, congratulations!");
+        });
+    });
+});