Snapshot testing with Dynamic Components

jest.config.json

@@ -0,0 +1,9 @@
+{
+    "setupFiles": [
+        "raf/polyfill",
+        "<rootDir>/src/tests/setupTests.js"
+    ],
+    "snapshotSerializers": [
+        "enzyme-to-json/serializer"
+    ]
+}

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "serve": "live-server public/",
     "build": "webpack",
-    "dev-server": "webpack-dev-server"
+    "dev-server": "webpack-dev-server",
+    "test": "jest --config=jest.config.json"
   },
   "dependencies": {
     "babel-cli": "6.24.1",
@@ -16,17 +17,23 @@
     "babel-plugin-transform-object-rest-spread": "6.23.0",
     "babel-preset-react": "6.24.1",
     "css-loader": "0.28.4",
+    "enzyme": "3.0.0",
+    "enzyme-adapter-react-16": "1.0.0",
+    "enzyme-to-json": "3.0.1",
+    "jest": "20.0.4",
     "live-server": "^1.2.1",
     "moment": "2.18.1",
     "node-sass": "4.13.0",
     "normalize.css": "7.0.0",
+    "raf": "3.3.2",
     "react": "^16.12.0",
     "react-addons-shallow-compare": "15.6.0",
     "react-dates": "12.7.0",
     "react-dom": "^16.12.0",
     "react-modal": "2.2.2",
     "react-redux": "5.0.5",
     "react-router-dom": "4.2.2",
+    "react-test-renderer": "16.0.0",
     "redux": "3.7.2",
     "sass-loader": "6.0.6",
     "style-loader": "0.18.2",

src/components/ExpenseList.js

@@ -3,12 +3,19 @@ import { connect } from 'react-redux';
 import ExpenseListItem from './ExpenseListItem';
 import selectExpenses from '../selectors/expenses';
 
-const ExpenseList = (props) => (
+export const ExpenseList = (props) => (
     <div>
-        <h1>Expense List</h1>
-        {props.expenses.map((expense)=>{
-            return <ExpenseListItem key = {expense.id} {...expense} />
-        })}
+        {
+            props.expenses.length === 0 ? (
+                <p>No Expenses</p>
+            ) : (
+                props.expenses.map((expense) => {
+                    return <ExpenseListItem key = {expense.id} {...expense} />
+                })
+            )
+
+
+    }
     </div>
 );
 const mapStateToProps = (state) => {

src/tests/actions/expenses.test.js

@@ -0,0 +1,54 @@
+import {addExpense, removeExpense, editExpense} from '../../actions/expenses';
+
+
+test('Should setup remove expense object', ()=>{
+const action = removeExpense({id:'123acb'});
+expect(action).toEqual({
+    type: 'REMOVE_EXPENSE',
+    id:'123acb'
+});
+});
+
+test('should setup edit expense object', ()=>{
+    const action = editExpense('123ab',{note:'edit note value'});
+    expect(action).toEqual({
+        type: 'EDIT_EXPENSE',
+        id:'123ab',
+        updates:{note:'edit note value'}
+    });
+});
+
+test('should set up add expense action object with provided values',()=>{
+    const expenseData = {
+        description:'this is add expense',
+        note:'yo yo',
+        amount:123,
+        createdAt:123123
+
+    };
+    const action = addExpense(expenseData);
+    expect(action).toEqual({
+        type:'ADD_EXPENSE',
+        expense:{
+            ...expenseData,
+            id:expect.any(String)
+        }
+    });
+}); 
+
+test('should set up add expense action object with default values',()=>{
+    const expenseData = {
+        description:'',
+        note:'',
+        amount:'',
+        createdAt:''
+    };
+    const action= addExpense(expenseData);
+    expect(action).toEqual({
+        type: 'ADD_EXPENSE',
+        expense: {
+            ...expenseData,
+            id:expect.any(String)
+        }
+    });
+});

src/tests/actions/filters.test.js

@@ -0,0 +1,34 @@
+import {setTextFilter,sortByAmount,sortByDate,setStartDate,setEndDate} from '../../actions/filters';
+import moment from 'moment';
+
+test('should generate action object for set start date action object', ()=>{
+    const action = setStartDate(moment(0));
+    expect(action).toEqual({
+        type:'SET_START_DATE',
+        startDate:moment(0)
+    });
+});
+
+test('should generate action object for set end date action object', ()=>{
+    const action = setEndDate(moment(0));
+    expect(action).toEqual({
+        type:'SET_END_DATE',
+        endDate:moment(0)
+    });
+});
+
+test('should generate action object for set text filter', ()=>{
+    const action = setTextFilter('bill');
+    expect(action).toEqual({
+        type: 'SET_TEXT_FILTER',
+        text:'bill'
+    });
+});
+
+test('should generate action object for sort by amount',()=>{
+    expect(sortByAmount()).toEqual({type:'SORT_BY_AMOUNT'});
+});
+
+test('should generate action object for sort by date',()=>{
+    expect(sortByDate()).toEqual({type:'SORT_BY_DATE'});
+});

src/tests/components/ExpenseDashboardPage.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ExpenseDashboardPage from '../../components/ExpenseDashboardPage';
+import {shallow} from 'enzyme';
+import toJSON from 'enzyme-to-json';
+
+test('should render Expense Dashboard Page correctly',()=>{
+    const wrapper = shallow(< ExpenseDashboardPage/>);
+    expect(toJSON(wrapper)).toMatchSnapshot();
+});

src/tests/components/ExpenseList.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {ExpenseList} from '../../components/ExpenseList';
+import expenses from '../fixtures/expenses';
+
+test('should render Expense List with expenses', ()=>{
+    const wrapper = shallow(<ExpenseList expenses = {expenses}/>);
+    expect(wrapper).toMatchSnapshot();
+});
+
+
+test('should render Expense List with no expenses', ()=>{
+    const wrapper = shallow(<ExpenseList expenses = {[]}/>);
+    expect(wrapper).toMatchSnapshot();
+});

src/tests/components/ExpenseListItem.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import ExpenseListItem from '../../components/ExpenseListItem';
+import expenses from '../fixtures/expenses';
+
+test('should render Expense list item', ()=>{
+    const wrapper = shallow(<ExpenseListItem {...expenses[1]}/>);
+    expect(wrapper).toMatchSnapshot();
+});

src/tests/components/Header.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Header from '../../components/Header';
+import {shallow} from 'enzyme';
+import toJSON from 'enzyme-to-json';
+import ReactShallowRenderer from 'react-test-renderer/shallow';
+
+test('should render Header correctly',()=>{
+    const wrapper = shallow(<Header />);
+    expect(toJSON(wrapper)).toMatchSnapshot();
+    // const renderer = new ReactShallowRenderer();
+    // renderer.render(<Header />);
+    // expect(renderer.getRenderOutput()).toMatchSnapshot();
+});

src/tests/components/NotFoundPage.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import NotFoundPage from '../../components/NotFoundPage';
+import {shallow} from 'enzyme';
+import toJSON from 'enzyme-to-json';
+
+test('should render Not Found Page correctly',()=>{
+    const wrapper = shallow(< NotFoundPage />);
+    expect(toJSON(wrapper)).toMatchSnapshot();
+});

src/tests/components/__snapshots__/ExpenseDashboardPage.test.js.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render Expense Dashboard Page correctly 1`] = `
+<div>
+  <Connect(ExpenseList) />
+  <Connect(ExpenseListFilters) />
+</div>
+`;

src/tests/components/__snapshots__/ExpenseList.test.js.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render Expense List with expenses 1`] = `
+<div>
+  <ExpenseListItem
+    amount={195}
+    createdAt={0}
+    description="aaa"
+    id="0"
+    key="0"
+    note="ajanscjla"
+  />
+  <ExpenseListItem
+    amount={109500}
+    createdAt={-345600000}
+    description="sssaak"
+    id="1"
+    key="1"
+    note="scjla"
+  />
+  <ExpenseListItem
+    amount={4500}
+    createdAt={345600000}
+    description="aako"
+    id="2"
+    key="2"
+    note="anscjla"
+  />
+</div>
+`;
+
+exports[`should render Expense List with no expenses 1`] = `
+<div>
+  <p>
+    No Expenses
+  </p>
+</div>
+`;

src/tests/components/__snapshots__/ExpenseListItem.test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render Expense list item 1`] = `
+<div>
+  <Link
+    replace={false}
+    to="/edit/1"
+  >
+    <h3>
+      sssaak
+    </h3>
+     
+  </Link>
+  <p>
+    109500
+     - 
+    -345600000
+     
+  </p>
+</div>
+`;

src/tests/components/__snapshots__/Header.test.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render Header correctly 1`] = `
+<header>
+  <h1>
+    Expensify App 
+  </h1>
+  <NavLink
+    activeClassName="is-active"
+    ariaCurrent="true"
+    exact={true}
+    to="/"
+  >
+    Dashboard
+  </NavLink>
+  <NavLink
+    activeClassName="is-active"
+    ariaCurrent="true"
+    to="/create"
+  >
+    Create Expense
+  </NavLink>
+  <NavLink
+    activeClassName="is-active"
+    ariaCurrent="true"
+    to="/help"
+  >
+    Help
+  </NavLink>
+</header>
+`;

src/tests/components/__snapshots__/NotFoundPage.test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render Not Found Page correctly 1`] = `
+<div>
+  NotFoundPage - 
+  <Link
+    replace={false}
+    to="/"
+  >
+    Go Home
+  </Link>
+</div>
+`;

src/tests/fixtures/expenses.js

@@ -0,0 +1,23 @@
+import moment from 'moment';
+
+
+export default [{
+    id:'0',
+    description : 'aaa',
+    note:'ajanscjla',
+    amount:195,
+    createdAt:0
+},{
+    id: '1',
+    description : 'sssaak',
+    note:'scjla',
+    amount:109500,
+    createdAt:moment(0).subtract(4,'days').valueOf()
+},{
+    id: '2',
+    description : 'aako',
+    note:'anscjla',
+    amount:4500,
+    createdAt: moment(0).add(4,'days').valueOf()
+}];
+