Add tests

Author: Rizchel Dayao

.babelrc

@@ -1,36 +1,3 @@
 {
-  "plugins": [
-    ["transform-es2015-template-literals", { "loose": true }],
-    "transform-es2015-literals",
-    "transform-es2015-function-name",
-    "transform-es2015-arrow-functions",
-    "transform-es2015-block-scoped-functions",
-    ["transform-es2015-classes", { "loose": true }],
-    "transform-es2015-object-super",
-    "transform-es2015-shorthand-properties",
-    ["transform-es2015-computed-properties", { "loose": true }],
-    ["transform-es2015-for-of", { "loose": true }],
-    "transform-es2015-sticky-regex",
-    "transform-es2015-unicode-regex",
-    "check-es2015-constants",
-    ["transform-es2015-spread", { "loose": true }],
-    "transform-es2015-parameters",
-    ["transform-es2015-destructuring", { "loose": true }],
-    "transform-es2015-block-scoping",
-    "transform-object-rest-spread",
-    "transform-es3-member-expression-literals",
-    "transform-es3-property-literals"
-  ],
-  "env": {
-    "commonjs": {
-      "plugins": [
-        ["transform-es2015-modules-commonjs", { "loose": true }]
-      ]
-    },
-    "es": {
-      "plugins": [
-        "./build/use-lodash-es"
-      ]
-    }
-  }
+  "presets": ["env", "react", "stage-2"]
 }

.travis.yml

@@ -6,7 +6,7 @@ install:
   - npm install
 script:
   - npm run eslint
-  # - npm run test
+  - npm run test
 cache:
   directories:
   - node_modules

README.md

@@ -35,6 +35,7 @@ When the reader has completed this Code Pattern, they will understand how to:
 
 ## Prerequisites
 1. You must get an API key from [OMDb API](http://www.omdbapi.com/) in order to get a response from the API. You will insert your API key in /src/actions/index.js on line 42
+[OMDb API](http://www.omdbapi.com/) by Brian Fitz is licensed under [CC BY-NC 4.0](https://creativecommons.org/licenses/by-nc/4.0/)
 
 2. Create an environment variable for your docker username
 ```
@@ -58,7 +59,7 @@ $ git clone https://github.com/IBM/deploy-react-kubernetes
 2. Run the following commands in a terminal: 
 
 ```
-$ npm install`
+$ npm install
 
 $ npm run build-css
 

__tests__/client-unit/actions/index.js

@@ -0,0 +1,36 @@
+
+import {
+  retrieveMoviesStart,
+  retrieveMoviesError,
+  retrieveMoviesSuccess,
+} from '../../../src/actions'
+import ActionTypes from '../../../src/constants'
+
+const testObject = {
+  title: 'Finding Nemo',
+  year: '2002',
+  plot: 'testing'
+}
+
+describe('actions', () => {
+  it('should start retrieving movies', () => {
+    const retrieveMoviesStartAction = {
+      type: ActionTypes.RETRIEVE_MOVIES_START
+    }
+    expect(retrieveMoviesStart()).toEqual(retrieveMoviesStartAction)
+  })
+  it('should give an error', () => {
+    const retrieveMoviesErrorAction = {
+      type: ActionTypes.RETRIEVE_MOVIES_ERROR,
+      payload: 'error'
+    }
+    expect(retrieveMoviesError('error')).toEqual(retrieveMoviesErrorAction)
+  })
+  it('should give a successful response', () => {
+    const retrieveMoviesSuccessAction = {
+      type: ActionTypes.RETRIEVE_MOVIES_SUCCESS,
+      payload: testObject
+    }
+    expect(retrieveMoviesSuccess(testObject)).toEqual(retrieveMoviesSuccessAction)
+  })
+})

__tests__/client-unit/components/Input.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import Input from '../../../src/components/Input'
+
+describe('<Input />', () => {
+  it('Basic render', () => {
+    const wrapper = mount(<Input input='Finding Nemo' handleChange={jest.fn()} handleKeyPress={jest.fn()} handleResponse={jest.fn()} />);
+    expect(wrapper.find('.set').length).toEqual(1);
+    expect(wrapper.find('input').length).toEqual(1);
+    expect(wrapper.find('button').length).toEqual(1);
+    expect(wrapper.instance().props.input).toEqual('Finding Nemo');
+  })
+})

__tests__/client-unit/components/ListItem.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import ListItem from '../../../src/components/ListItem'
+
+const testArray = [ 'Title: Finding Nemo', 'Year: 2002', 'Plot: testing']
+
+describe('<ListItem />', () => {
+  it('Basic render with empty list', () => {
+    const wrapper = mount(<ListItem list={[]} />);
+    expect(wrapper.find('.list-item').length).toEqual(1);
+    expect(wrapper.find('ul').length).toEqual(1);
+    expect(wrapper.find('li').length).toEqual(0);
+    expect(wrapper.instance().props.list).toEqual([]);
+  })
+  it('Basic render with one item', () => {
+    const wrapper = mount(<ListItem list={testArray} />);
+    expect(wrapper.find('.list-item').length).toEqual(1);
+    expect(wrapper.find('ul').length).toEqual(1);
+    expect(wrapper.instance().props.list).toEqual(testArray);
+  })
+})

__tests__/client-unit/containers/InputSet.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import InputSet from '../../../src/containers/InputSet'
+import configureStore from 'redux-mock-store'
+import { Provider } from 'react-redux'
+
+const testObject = {
+  title: 'Finding Nemo',
+  year: 2002,
+  plot: 'testing'
+}
+
+const initialState = {
+  movies: testObject
+}
+
+const mockStore = configureStore()
+let wrapper
+let store
+
+beforeEach(() => {
+  store = mockStore(initialState)
+  wrapper = mount(<Provider store={store}><InputSet movies={testObject} retrieveMovies={jest.fn()} /></Provider>)
+})
+
+describe('<InputSet />', () => {
+  it('Basic render', () => {
+    expect(wrapper.find('.input-set').length).toEqual(1);
+  })
+})

__tests__/client-unit/containers/List.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import List from '../../../src/containers/List'
+import configureStore from 'redux-mock-store'
+import { Provider } from 'react-redux'
+
+const testObject = [{
+  title: 'Finding Nemo',
+  year: 2002,
+  plot: 'testing'
+}]
+
+const initialState = {
+  movies: testObject
+}
+
+const mockStore = configureStore()
+let wrapper
+let store
+
+beforeEach(() => {
+  store = mockStore(initialState)
+  wrapper = mount(<Provider store={store} movies={testObject}><List /></Provider>)
+})
+
+describe('<List />', () => {
+  it('Basic render with a movie', () => {
+    expect(wrapper.find('.list').length).toEqual(1);
+    expect(wrapper.instance().props.movies).toEqual(testObject);
+  })
+  it('Basic render without a movie', () => {
+    const emptyWrapper = mount(<Provider store={store} movies={[]}><List /></Provider>)
+    expect(emptyWrapper.find('.list').length).toEqual(1);
+    expect(emptyWrapper.instance().props.movies).toEqual([]);
+  })
+})

__tests__/client-unit/reducers/index.js

@@ -0,0 +1,57 @@
+import { movies } from '../../../src/reducers'
+import ActionTypes from '../../../src/constants'
+
+const testObject = {
+  title: 'Finding Nemo',
+  year: '2002',
+  plot: 'testing'
+}
+
+describe('movies reducer', () => {
+  it('should return the initial state', () => {
+    expect(movies(undefined, {})).toEqual(
+      {
+        isFetching: false,
+        items: [],
+        errorDetails: ''
+      }
+    )
+  })
+  it('should handle RETRIEVE_MOVIES_START', () => {
+    expect(
+      movies([], {
+        type: ActionTypes.RETRIEVE_MOVIES_START,
+      })
+    ).toEqual(
+      {
+        isFetching: true
+      }
+    )
+  })
+  it('should handle RETRIEVE_MOVIES_ERROR', () => {
+    expect(
+      movies([], {
+        type: ActionTypes.RETRIEVE_MOVIES_ERROR,
+        payload: 'error',
+      })
+    ).toEqual(
+      {
+        isFetching: false,
+        errorDetails: 'Error'
+      }
+    )
+  })
+  it('should handle RETRIEVE_MOVIES_SUCCESS', () => {
+    expect(
+      movies([], {
+        type: ActionTypes.RETRIEVE_MOVIES_SUCCESS,
+        payload: testObject,
+      })
+    ).toEqual(
+      {
+        isFetching: false,
+        items: testObject
+      }
+    )
+  })
+})

package.json

@@ -3,18 +3,26 @@
   "version": "0.0.1",
   "description": "React Redux application that calls the OMDb api to get information on a specific movie",
   "repository": "git+https://github.com/IBM/deploy-react-kubernetes",
+  "license": "Apache-2.0",
   "devDependencies": {
+    "babel-cli": "^6.26.0",
     "babel-eslint": "^7.2.3",
-    "enzyme": "^2.4.1",
+    "babel-jest": "^23.0.0-alpha.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "enzyme": "^2.9.1",
     "eslint": "^4.18.2",
     "eslint-config-react-app": "^2.1.0",
     "eslint-plugin-flowtype": "^2.46.1",
     "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-jsx-a11y": "^5.1.1",
     "eslint-plugin-react": "^7.7.0",
+    "jest": "^22.4.2",
     "node-sass": "^4.5.0",
     "react-scripts": "^1.1.1",
     "redux-logger": "^2.8.1",
+    "redux-mock-store": "^1.5.1",
     "redux-router": "^2.1.2",
     "redux-thunk": "^2.2.0",
     "sass-loader": "^6.0.2"
@@ -34,7 +42,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "eject": "react-scripts eject",
-    "test": "react-scripts test",
-    "eslint": "eslint . --ext .js"
+    "eslint": "eslint . --ext .js",
+    "test": "jest",
+    "test:watch": "npm test -- --watch"
   }
 }