Exercise for testing react component

Author: himadridev

exercises/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env", "react", "stage-1"]
+}

exercises/package.json

@@ -10,13 +10,33 @@
     "react-helmet": "^5.2.0",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.0",
-    "styled-components": "^3.2.5"
+    "styled-components": "^3.2.5",
+    "classnames": "^2.2.5",
+    "prop-types": "^15.6.1",
+    "react-redux": "^5.0.7",
+    "redux": "^3.7.2"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-jest": "^22.4.3",
+    "babel-loader": "^7.1.4",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-1": "^6.22.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "jest": "^22.4.3",
+    "react-test-renderer": "^16.2.0"
   },
-  "devDependencies": {},
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "test": "jest --watch",
     "eject": "react-scripts eject"
+  },
+  "jest": {
+    "setupFiles": ["<rootDir>/tests/setup.js"],
+    "testEnvironment": "node"
   }
 }

exercises/src/App.js

@@ -2,32 +2,40 @@ import React, { Component } from "react";
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import PerformanceOptimizations from "./performance-optimizations";
 import ErrorBoundaries from "./error-boundaries";
+import { Provider } from 'react-redux'
+import { createStore } from "redux";
+
+import reducer from ".testing-react-component/components/CounterStore/reducer";
+
+const store = createStore(reducer)
 
 class App extends Component {
   render() {
     return (
-      <Router>
-        <div className="container">
-          <div className="sidebar">
-            <ul>
-              <li>
-                <Link to="/">Refs</Link>
-              </li>
-              <li>
-                <Link to="/performance-optimizations">perfromance optimizations</Link>
-              </li>
-              <li>
-                <Link to="/error-boundaries">Error Boundaries</Link>
-              </li>
-            </ul>
-          </div>
-          <div className="content">
-            <Route exact path="/" component={PerformanceOptimizations} />
-            <Route path="/performance-optimizations" component={PerformanceOptimizations} />
-            <Route path="/error-boundaries" component={ErrorBoundaries} />
+      <Provider store={store}>
+        <Router>
+          <div className="container">
+            <div className="sidebar">
+              <ul>
+                <li>
+                  <Link to="/">Refs</Link>
+                </li>
+                <li>
+                  <Link to="/performance-optimizations">perfromance optimizations</Link>
+                </li>
+                <li>
+                  <Link to="/error-boundaries">Error Boundaries</Link>
+                </li>
+              </ul>
+            </div>
+            <div className="content">
+              <Route exact path="/" component={PerformanceOptimizations} />
+              <Route path="/performance-optimizations" component={PerformanceOptimizations} />
+              <Route path="/error-boundaries" component={ErrorBoundaries} />
+            </div>
           </div>
-        </div>
-      </Router>
+        </Router>
+      </Provider>
     );
   }
 }

exercises/src/testing-react-component/README.md

@@ -0,0 +1 @@
+# Testing React Component

exercises/src/testing-react-component/components/Button/Exercise1.test.js

@@ -0,0 +1,61 @@
+import React from "react";
+import { shallow } from "enzyme";
+import renderer from "react-test-renderer";
+import Button from ".";
+
+// Exasice #1
+describe("Rendering", () => {
+  // A sample test.
+  it("Should render a button", () => {
+    const wrapper = shallow(<Button />);
+    expect(wrapper.find('button').length).toEqual(1);
+  });
+
+  it("Should render defaults", () => {
+    // Write test here for default button
+    // ...
+  });
+
+  describe("Render based on size", () => {
+    it("Small Button", () => {
+      // Write test here for 'small' button.
+      // ...
+    });
+
+    it("Medium Button", () => {
+      // Write test here for 'medium' button.
+      // ...
+    });
+
+    it("Large Button", () => {
+      // Write test here for 'large' button.
+      // ...
+    });
+  });
+
+  describe("Button disabled based on props", () => {
+    it("Button should have disabled attribute", () => {
+      const wrapper = shallow(<Button disabled={true}/>);
+      // Expect a button with disabled props
+      // ...
+    });
+
+    it("Button should not have disabled attribute", () => {
+      const wrapper = shallow(<Button disabled={false}/>);
+      // Expect a button without disabled props
+      // ...
+    });
+
+    it("Button should be disabled class", () => {
+      const wrapper = shallow(<Button disabled={true}/>);
+      // Expect a button with disabled class
+      // ...
+    });
+
+    it("Button should be disabled class", () => {
+      const wrapper = shallow(<Button disabled={false}/>);
+      // Expect a button without disabled class
+      // ...
+    });
+  });
+});

exercises/src/testing-react-component/components/Button/Exercise2.test.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { shallow } from "enzyme";
+import Button from ".";
+
+// Exasice #2
+describe("Interaction", () => {
+  it("Callback props onClick", () => {
+    // Write test for button click. Tips: Use a mock (spy) function.
+    const spyFunc = jest.fn()
+    // ...
+  })
+});

exercises/src/testing-react-component/components/Button/index.js

@@ -0,0 +1,34 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classnames from "classnames";
+
+const Button = (props) => {
+  const btnClasses = classnames(props.className, "btn", {
+    "btn-sm": props.size === "small",
+    "btn-md": props.size === "medium",
+    "btn-lg": props.size === "large",
+    "disabled": props.disabled === true
+  });
+
+  return (
+    <button className={ btnClasses } onClick={props.onClick} disabled={props.disabled}>
+      { props.children }
+    </button>
+  );
+}
+
+Button.propTypes = {
+  disabled: PropTypes.bool,
+  children: PropTypes.string,
+  size: PropTypes.oneOf(["small", "medium", "large"]),
+  onClick: PropTypes.func
+};
+
+Button.defaultProps = {
+  disabled: false,
+  children: "Button",
+  size: "medium",
+  onClick: () => {}
+};
+
+export default Button;

exercises/src/testing-react-component/components/Counter/Exercise3.test.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { shallow } from "enzyme";
+import Counter from ".";
+
+// Exasice #3
+describe("Initial state of the counter", () => {
+
+  // A Sample bad test
+  it("initial state in bad way", () => {
+    const wrapper = shallow(<Counter />);
+    expect(wrapper.state().count).toEqual(0);
+  });
+
+  it("initial state should be 0", () => {
+    // We should write test from the user prospective.
+    // ...
+  });
+});

exercises/src/testing-react-component/components/Counter/Exercise4.test.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { shallow } from "enzyme";
+import Counter from ".";
+
+// Exasice #4
+describe("User interactions on counter", () => {
+
+  it("increment the count when the increment button is clicked", () => {
+    const wrapper = shallow(<Counter />);
+    // ...
+    wrapper.find('Button.increment').simulate('click');
+    expect(wrapper.find(".count").text()).toEqual("1");
+  });
+
+  it("decrement the count when the decrement button is clicked", () => {
+    const wrapper = shallow(<Counter />);
+    // ...
+    wrapper.find('Button.decrement').simulate('click');
+    expect(wrapper.find(".count").text()).toEqual("-1");
+  });
+});

exercises/src/testing-react-component/components/Counter/index.js

@@ -0,0 +1,45 @@
+import React, { Component } from "react";
+
+import Button from "../Button";
+
+class Counter extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      count: 0
+    }
+
+    this.increment = this.increment.bind(this);
+    this.decrement = this.decrement.bind(this);
+  }
+
+  increment() {
+    this.setState(prevState => ({ count: prevState.count + 1 }));
+  };
+
+  decrement() {
+    this.setState(prevState => ({ count: prevState.count - 1 }));
+  };
+  
+  render() {
+    return (
+      <div className="counter-card">
+        <h2 className="count">{this.state.count}</h2>
+        <Button
+          className="increment"
+          onClick={this.increment}
+        >
+          Increment
+        </Button>
+        <Button
+          className="decrement"
+          onClick={this.decrement}
+        >
+          Decrement
+        </Button>
+      </div>
+    );
+  }
+}
+
+export default Counter;

exercises/src/testing-react-component/components/CounterStore/Exercise5.test.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { counterIncrement, counterDecrement } from './actions'
+
+import { Counter } from './index'
+
+describe('Counter component connected with redux store', () => {
+  
+  // A sample test
+  it('should renders the count', () => {
+    const props = {
+      dispatch: jest.fn(),
+      count: 1
+    }
+
+    const wrapper = shallow(<Counter {...props} />)
+    expect(wrapper.find('.count').text()).toEqual('1')
+  })
+
+  it('dispatches the right action for incrementing', () => {
+    const props = {
+      dispatch: jest.fn(),
+      count: 3
+    }
+
+    // Write the test here
+    // ...
+  })
+
+  it('dispatches the right action for decrementing', () => {
+    const props = {
+      dispatch: jest.fn(),
+      count: 3
+    }
+
+    // Write the test here
+    // ...
+  })
+})

exercises/src/testing-react-component/components/CounterStore/actions.js

@@ -0,0 +1,10 @@
+export const COUNTER_INCREMENT = '@@Counter/COUNTER_INCREMENT';
+export const COUNTER_DECREMENT = '@@Counter/COUNTER_DECREMENT';
+
+export const counterIncrement = () => ({
+  type: COUNTER_INCREMENT
+});
+
+export const counterDecrement = () => ({
+  type: COUNTER_DECREMENT
+});