Update template

Author: alexandr-g

template/README.md

@@ -1,22 +1,28 @@
-# A quick start Redux Create React App template
+# A quick start Redux + TypeScript Create React App template
 
-An opinionated quick start [Create React App](https://github.com/facebook/create-react-app) (CRA) template with **Redux**, **TypeScript**, **React Router**, **Enzyme** and custom ESlint configuration.
+An opinionated quick start [Create React App](https://github.com/facebook/create-react-app) (CRA) _template_ with configured **Redux**, **TypeScript**, **React Router**, **Enzyme** and custom **ESlint** configuration.
 
 Original Create React App README available [here](./README_CRA.md)
 
 ## Usage
 
-`npx create-react-app <your-project_name> --template typescript-redux`
+```bash
+npx create-react-app your-project-name --template typescript-redux
+```
 
 Or
 
-`yarn create react-app <your-project_name> --template typescript-redux`
+```bash
+yarn create react-app your-project-name --template typescript-redux
+```
 
-`npx` command installs most recent stable version of CRA from npm. `--template` parameter points to this template, note that `cra-template-` prefix is omitted.
+`npx` command installs the most recent stable version of CRA from npm.
+
+`--template` parameter points to this template, note that `cra-template-` prefix is omitted.
 
 ## Motivation
 
-You know the pain. You start a new project and need to configure it again and again. It needs routing, ok you setup Router, then you need Redux - ok, oh. Wait... All of these tools you get used to. Redux boilerplate is taking some much to type. I want just to focus on building amazing projects and not spending hours configuring tools. That's why I've created this template. It's for you to use.
+You know the pain. You start a new project from scratch and need to configure it again and again. It needs routing, ok you setup Router, then you need Redux - ok, oh 😩Redux boilerplate is taking so much time to type. Wait... what if you could have all the tools you want just from the beginning? I want to focus on building amazing projects and not spending hours configuring. That's why I've created this template. It's here for you to use.
 
 ## Available Scripts
 
@@ -38,21 +44,21 @@ Due to CRA template limitations (we can change only `scripts` and `dependencies`
 
 ## Redux configuration
 
-Template provides basic Redux configuration with [feature based](https://redux.js.org/style-guide/style-guide/#structure-files-as-feature-folders-or-ducks) folder structure. You can use [Redux devtools browser extension](http://extension.remotedev.io/). Sample feature included in `src/features` folder, note technology agnostic `features` folder name. Based on Redux maintainers recommendation.
+The template provides basic Redux configuration with [feature based](https://redux.js.org/style-guide/style-guide/#structure-files-as-feature-folders-or-ducks) folder structure. You can use [Redux devtools browser extension](http://extension.remotedev.io/). Sample feature included in `src/features` folder, note technology agnostic `features` folder name. Based on Redux maintainers recommendation.
 
 ## Testing
 
-Snapshot testing done with [Enzyme](https://airbnb.io/enzyme/).
+Testing is done with [Enzyme](https://airbnb.io/enzyme/).
 
 ## [Prettier](https://prettier.io/)
 
 I added `prettier` to force consistent formatting. Don't like trailing semicolons? Feel free to [tweak prettier rules](https://prettier.io/docs/en/configuration.html) inside `.prettierrc` file to match your code style.
 
 ## Eslint configurations
 
-Template extends CRA eslint rules with custom set, tailored for reasonable and clean development process.
+The template extends CRA ESLint rules with a custom set, tailored for the reasonable and clean development process.
 
-Eslint rules are commented for your convenience feel free to tweak or remove them inside `.eslintrc`. No judgement.
+Eslint rules are commented for your convenience feel free to tweak or remove them inside `.eslintrc`. No judgment.
 
 ## Thank you
 

template/src/components/counter/Counter.spec.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+import { mount } from 'enzyme'
+import configureStore from 'redux-mock-store'
+
+import { actionTypes } from '../../features/counter'
+import Counter from './Counter'
+
+describe('Counter', () => {
+  const mockStore = configureStore([])
+  const store = mockStore({
+    count: {
+      value: 42,
+    },
+  })
+
+  // Add jest mock spy to watch for store.dispatch method. See https://jestjs.io/docs/en/jest-object#jestspyonobject-methodname for more info
+  jest.spyOn(store, 'dispatch')
+
+  beforeEach(() => {
+    // Clear any saved mock data from previous tests, because jest saves calls data for spies and mocks, https://jestjs.io/docs/en/mock-function-api#mockfnmockclear
+    store.dispatch.mockClear()
+  })
+
+  it('renders without crashing.', () => {
+    const wrapper = mount(
+      <Provider store={store}>
+        <Counter />
+      </Provider>
+    )
+
+    const countValue = wrapper.find('strong').text()
+    expect(countValue).toBe('42')
+  })
+
+  it('should be possible to increment counter.', () => {
+    const wrapper = mount(
+      <Provider store={store}>
+        <Counter />
+      </Provider>
+    )
+
+    wrapper
+      .find('button')
+      .filter({ 'data-qa': 'increment-counter' })
+      .simulate('click')
+
+    expect(store.dispatch).toBeCalledTimes(1)
+
+    expect(store.dispatch).toBeCalledWith({
+      type: actionTypes.INCREMENT_COUNTER,
+    })
+  })
+
+  it('should be possible to decrement counter.', () => {
+    const wrapper = mount(
+      <Provider store={store}>
+        <Counter />
+      </Provider>
+    )
+
+    wrapper
+      .find('button')
+      .filter({ 'data-qa': 'decrement-counter' })
+      .simulate('click')
+
+    expect(store.dispatch).toHaveBeenCalledTimes(1)
+
+    expect(store.dispatch).toHaveBeenCalledWith({
+      type: actionTypes.DECREMENT_COUNTER,
+    })
+  })
+})

template/src/components/counter/Counter.tsx

@@ -26,6 +26,7 @@ const Counter: React.FC = () => {
                 <button
                   className="waves-effect waves-teal btn-flat blue"
                   type="button"
+                  data-qa="decrement-counter"
                   onClick={() =>
                     dispatch({ type: actionTypes.DECREMENT_COUNTER })
                   }
@@ -35,6 +36,7 @@ const Counter: React.FC = () => {
                 <button
                   className="waves-effect waves-teal btn-flat red"
                   type="button"
+                  data-qa="increment-counter"
                   onClick={() =>
                     dispatch({ type: actionTypes.INCREMENT_COUNTER })
                   }

template/src/features/counter/counterReducer.spec.ts

@@ -0,0 +1,37 @@
+import { INCREMENT_COUNTER, DECREMENT_COUNTER } from './actionTypes'
+import counterReducer from './counterReducer'
+import { CounterActionTypes } from './types'
+
+describe('features > counter > counterReducer', () => {
+  it(`increments value, if ${INCREMENT_COUNTER} action is provided`, () => {
+    const initialState = {
+      value: 0,
+    }
+
+    const expectedState = {
+      value: 1,
+    }
+
+    const action: CounterActionTypes = {
+      type: INCREMENT_COUNTER,
+    }
+
+    expect(counterReducer(initialState, action)).toEqual(expectedState)
+  })
+
+  it(`increments value, if ${DECREMENT_COUNTER} action is provided`, () => {
+    const initialState = {
+      value: 0,
+    }
+
+    const expectedState = {
+      value: -1,
+    }
+
+    const action: CounterActionTypes = {
+      type: DECREMENT_COUNTER,
+    }
+
+    expect(counterReducer(initialState, action)).toEqual(expectedState)
+  })
+})