README and inspiration and solution

Author: PavelVanecek

lesson-3/README.md

@@ -0,0 +1,113 @@
+# React Testing
+
+## The Goal
+
+Learn about different types of automated tests and how to apply them in React environment.
+
+## Automated tests
+
+![Test pyramid by Martin Fowler](https://martinfowler.com/bliki/images/testPyramid/test-pyramid.png)
+
+[The test pyramid](https://martinfowler.com/bliki/TestPyramid.html)
+
+- **End To End tests**: Slow, complicated, brittle, complete
+- **Unit tests**: Fast, simple, reliable, isolated
+
+## How to write a good test
+
+1. Write a failing test
+2. Observe that it actually fails!
+3. Make sure that it fails with red
+4. Fix code so that the test passes
+5. GOTO 1
+
+## How to write a code that is easy to test
+
+**Pure functions** for the win:
+- Given an input, always produces the same output
+- No side effects (including changing its arguments)
+
+React Components are usually pure functions. Not a coincidence!
+
+## Tools that we will use
+
+- [Jest - Delightful JavaScript Testing](https://facebook.github.io/jest/) framework and toolset for testing
+- [Enzyme](https://github.com/airbnb/enzyme) library for testing React components
+
+## Tools that we will not use
+
+**E2E testing**: Selenium, Webdrivers, Headless browsers, Robot Framework (because they take too much time to set up and learn)
+
+**Unit testing**: Mocha, Chai, Expect, Istanbul, Sinon (because these are alternatives to Jest)
+
+**Server/API testing**: Supertest (because we focus on frontend only, for now)
+
+## Hands on!
+
+_Excercise 1: Checkout lesson-3 folder and run the app! `npm install`, `npm start`_
+
+_Excercise 2: Find your favourite bug_
+
+_Excercise 3: Write a unit test and `npm test`_
+
+https://facebook.github.io/jest/docs/en/expect.html
+
+Hint:
+```javascript
+import { removeFromArray } from "./functions"
+
+// test suite: organize your tests!
+describe("functions.test.js: removeFromArray", () => {
+
+    // single test
+    it("should remove item from array", () => {
+        const input = ... // prepare data
+        const actual = ... // call the function here
+        const expected = ... // what you want to see?
+        expect(actual).toEqual(expected) // test!
+    })
+})
+```
+
+_Excercise 4: Write a Component test using enzyme_
+
+http://airbnb.io/enzyme/docs/api/shallow.html
+
+https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#testing-components
+
+```javascript
+import React from "react" // because we will use JSX
+import Party from "./Party"
+import { shallow } from "enzyme" // there are multiple kinds of rendering
+
+describe("Party.js", () => {
+
+    it("should display party name", () => {
+        const party = { name: "MyParty", members: 100 } // some data that we pass to props
+        const wrapper = shallow(<Party party={party} />)
+        const text = wrapper.text()
+        expect(text).toMatch("MyParty")
+    })
+
+})
+```
+
+_Excercise 5: Write propTypes_
+
+Technically, this is not a test. But it will help you!
+
+https://reactjs.org/docs/typechecking-with-proptypes.html
+
+
+
+## Reading and more links
+
+(You may think I am biased towards Eric Elliot - perhaps. But he does write well!)
+
+- [5 Questions Every Unit Test Must Answer](https://medium.com/javascript-scene/what-every-unit-test-needs-f6cd34d9836d)
+- [5 Common Misconceptions About TDD & Unit Tests](https://medium.com/javascript-scene/5-common-misconceptions-about-tdd-unit-tests-863d5beb3ce9)
+- [TDD the RITE Way](https://medium.com/javascript-scene/tdd-the-rite-way-53c9b46f45e3)
+- [Learn Test Driven Development (TDD)](https://github.com/dwyl/learn-tdd)
+- https://github.com/msd-code-academy/03-testing-react-app
+- [What is a Pure Function?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976)
+- [Pure Happiness with Pure Functions](https://drboolean.gitbooks.io/mostly-adequate-guide/content/ch3.html)

lesson-3/inspiration/Party.js

@@ -0,0 +1,27 @@
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
+import "./Party.css"
+
+export default class Party extends PureComponent {
+    
+  selectParty = (e) => {
+    this.props.partySelected(this.props.party)
+  }
+  render() {
+    const { party } = this.props
+    return (
+      <a onClick={this.selectParty} key={party.name} className="Party" style={{ borderColor: party.color }}>
+        <h2>{party.name}</h2>
+        <p>
+          Members in parliament: {party.name}
+        </p>
+      </a>
+    )
+  }
+}
+
+Party.propTypes = {
+}
+
+Party.defaultProps = {
+}

lesson-3/inspiration/Party.test.js

@@ -0,0 +1,16 @@
+import React from "react"
+import Party from "./Party"
+import { shallow } from "enzyme"
+
+describe("Party.js", () => {
+    it("should render", () => {
+        shallow(<Party party={{}} />)
+    })
+
+    it("should display party name")
+
+    it("should display amount of members")
+
+    it("should match snapshot")
+
+})

lesson-3/inspiration/functions.test.js

@@ -0,0 +1,16 @@
+import { removeFromArray } from "./functions"
+
+describe("functions.test.js removeFromArray", () => {
+    it.skip("should remove item from array", () => {
+        // TODO implement test here and remove `.skip`
+    })
+
+    // Tests without callback function are automatically pending (as an alternative to .skip)
+    it("should work with empty array")
+
+    it("should not remove anything if needle does not exist")
+
+    it("should not modify the parameter passed (immutable)")
+
+    it("should throw Errors when passed non-Array")
+})

lesson-3/solution/Party.js

@@ -0,0 +1,36 @@
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
+import "./Party.css"
+
+export default class Party extends PureComponent {
+    
+  selectParty = (e) => {
+    this.props.partySelected(this.props.party)
+  }
+  render() {
+    const { party } = this.props
+    return (
+      <a onClick={this.selectParty} key={party.name} className="Party" style={{ borderColor: party.color }}>
+        <h2>{party.name}</h2>
+        <p>
+          Members in parliament: {party.name}
+        </p>
+      </a>
+    )
+  }
+}
+
+Party.propTypes = {
+  party: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    members: PropTypes.number.isRequired,
+    color: PropTypes.string
+  }),
+  partySelected: PropTypes.func
+}
+
+Party.defaultProps = {
+  partySelected: () => {
+    /* Do nothing */
+  }
+}

lesson-3/solution/Party.test.js

@@ -0,0 +1,31 @@
+import React from "react"
+import Party from "./Party"
+import { shallow } from "enzyme"
+
+describe("Party.js", () => {
+    it("should render", () => {
+        shallow(<Party party={{}} />)
+    })
+
+    it("should display party name", () => {
+        const party = { name: "MyParty", members: 100 }
+        const wrapper = shallow(<Party party={party} />)
+        const text = wrapper.text()
+        expect(text).toMatch("MyParty")
+    })
+
+    it("should display amount of members", () => {
+        const party = { name: "MyParty", members: 100 }
+        const wrapper = shallow(<Party party={party} />)
+        const text = wrapper.text()
+        expect(text).toMatch("100")
+    })
+
+    it("should match snapshot", () => {
+        const party = { name: "MyParty", members: 100 }
+        const wrapper = shallow(<Party party={party} />)
+        const component = wrapper.debug()
+        expect(component).toMatchSnapshot()
+    })
+
+})

lesson-3/solution/functions.test.js

@@ -0,0 +1,33 @@
+import { removeFromArray } from "./functions"
+
+describe("functions.test.js removeFromArray", () => {
+    it("should remove item from array", () => {
+        const arr = [1, 2, 3, 4]
+        const expected = [1, 2, 4]
+        const actual = removeFromArray(arr, 3)
+        expect(actual).toEqual(expected)
+    })
+
+    it("should work with empty array", () => {
+        const actual = removeFromArray([], 1)
+        expect(actual).toEqual([])
+    })
+
+    it("should not remove anything if needle does not exist", () => {
+        const arr = [1, 2, 3, 4]
+        const actual = removeFromArray(arr, "Karel")
+        const expected = [1, 2, 3, 4]
+        expect(actual).toEqual(expected)
+    })
+
+    it("should not modify the parameter passed (immutable)", () => {
+        const arr = [1, 2]
+        const actual = removeFromArray(arr, 1)
+        expect(arr).toEqual([1, 2]) // the original array is not modified
+    })
+
+    it("should throw Errors when passed non-Array", () => {
+        expect(() => removeFromArray(undefined, null))
+        .toThrow()
+    })
+})