🔀 Merge pull request #45 from alexlee-dev/feature/test-coverage

✅ Add snapshot tests for components

package.json

@@ -36,14 +36,18 @@
   "devDependencies": {
     "coveralls": "^3.0.6",
     "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0"
+    "enzyme-adapter-react-16": "^1.14.0",
+    "jsdom": "^15.1.1",
+    "jsdom-global": "^3.0.2",
+    "redux-mock-store": "^1.5.3"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "eject": "react-scripts eject",
     "test": "react-scripts test",
-    "test:coveralls": "jest --coverage --collectCoverageFrom=src/**/* --coverageReporters=text-lcov | coveralls"
+    "test:coverage": "yarn test --coverage --watchAll=false",
+    "test:coveralls": "yarn test --coverage --watchAll=false --coverageReporters=text-lcov | coveralls"
   },
   "eslintConfig": {
     "extends": "react-app"

src/__tests__/App.test.js

@@ -1,5 +1,53 @@
-describe('Fake Test', () => {
-  it('Should pass.', () => {
-    expect(1 + 1).toBe(2)
+/**
+ * @jest-environment node
+ */
+
+import React from 'react'
+import App from '../App'
+import { mount, shallow } from 'enzyme'
+import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
+
+const middlewares = []
+const mockStore = configureStore(middlewares)
+
+const defaultState = {
+  ship: {
+    cargo: [],
+    location: {
+      name: null,
+      value: null
+    }
+  },
+  ui: {
+    view: 'Ship'
+  },
+  user: {
+    cash: 100
+  },
+  world: {
+    isTimerRunning: false,
+    planets: []
+  }
+}
+
+const rerenderShallow = customState =>
+  shallow(
+    <Provider store={mockStore(customState ? customState : defaultState)}>
+      <App />
+    </Provider>
+  )
+
+const rerenderMount = customState =>
+  mount(
+    <Provider store={mockStore(customState ? customState : defaultState)}>
+      <App />
+    </Provider>
+  )
+
+describe('<App />', () => {
+  it('Should render the <App /> component.', () => {
+    const wrapper = rerenderShallow()
+    expect(wrapper.html()).toMatchSnapshot()
   })
 })

src/__tests__/__snapshots__/App.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<App /> Should render the <App /> component. 1`] = `"<div class=\\"StyledBox-sc-13pk1d4-0 cXRmiT\\"><h1 class=\\"StyledHeading-sc-1rdh4aw-0 rfVJR\\">Hermes</h1><span>10 minutes 0 seconds</span><div class=\\"StyledBox-sc-13pk1d4-0 CAsMy\\"><h2 class=\\"StyledHeading-sc-1rdh4aw-0 gBloPj\\">Cash:</h2><span class=\\"StyledText-sc-1sadyjn-0 fWSbXS\\">100</span></div><div class=\\"StyledBox-sc-13pk1d4-0 dfMVfp\\"><select><option>Ship</option><option>Planets</option></select></div><div><h2>Your Ship</h2><h3>Cargo</h3><h3>Location:</h3><div class=\\"StyledBox-sc-13pk1d4-0 MmWcm\\"><span class=\\"StyledText-sc-1sadyjn-0 isVaoK\\">Value:</span><div class=\\"StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL\\"></div><span class=\\"StyledText-sc-1sadyjn-0 gNZQxf\\"></span><div class=\\"StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL\\"></div><span class=\\"StyledText-sc-1sadyjn-0 isVaoK\\">Name:</span><div class=\\"StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL\\"></div><span class=\\"StyledText-sc-1sadyjn-0 gNZQxf\\"></span></div></div></div>"`;

src/__tests__/components/CashDisplay.test.js

@@ -0,0 +1,53 @@
+/**
+ * @jest-environment node
+ */
+
+import React from 'react'
+import CashDisplay from '../../components/CashDisplay'
+import { mount, shallow } from 'enzyme'
+import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
+
+const middlewares = []
+const mockStore = configureStore(middlewares)
+
+const defaultState = {
+  ship: {
+    cargo: [],
+    location: {
+      name: null,
+      value: null
+    }
+  },
+  ui: {
+    view: 'Ship'
+  },
+  user: {
+    cash: 100
+  },
+  world: {
+    isTimerRunning: false,
+    planets: []
+  }
+}
+
+const rerenderShallow = customState =>
+  shallow(
+    <Provider store={mockStore(customState ? customState : defaultState)}>
+      <CashDisplay />
+    </Provider>
+  )
+
+const rerenderMount = customState =>
+  mount(
+    <Provider store={mockStore(customState ? customState : defaultState)}>
+      <CashDisplay />
+    </Provider>
+  )
+
+describe('<CashDisplay />', () => {
+  it('Should render the <CashDisplay /> component.', () => {
+    const wrapper = rerenderShallow()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

src/__tests__/components/ItemTimer.test.js

@@ -0,0 +1,53 @@
+/**
+ * @jest-environment node
+ */
+
+import React from 'react'
+import ItemTimer from '../../components/ItemTimer'
+import { mount, shallow } from 'enzyme'
+import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
+
+const middlewares = []
+const mockStore = configureStore(middlewares)
+
+const defaultState = {
+  ship: {
+    cargo: [],
+    location: {
+      name: null,
+      value: null
+    }
+  },
+  ui: {
+    view: 'Ship'
+  },
+  user: {
+    cash: 100
+  },
+  world: {
+    isTimerRunning: false,
+    planets: []
+  }
+}
+
+const rerenderShallow = customState =>
+  shallow(
+    <Provider store={mockStore(customState ? customState : defaultState)}>
+      <ItemTimer />
+    </Provider>
+  )
+
+const rerenderMount = customState =>
+  mount(
+    <Provider store={mockStore(customState ? customState : defaultState)}>
+      <ItemTimer />
+    </Provider>
+  )
+
+describe('<ItemTimer />', () => {
+  it('Should render the <ItemTimer /> component.', () => {
+    const wrapper = rerenderShallow()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

src/__tests__/components/Title.test.js

@@ -0,0 +1,53 @@
+/**
+ * @jest-environment node
+ */
+
+import React from 'react'
+import Title from '../../components/Title'
+import { mount, shallow } from 'enzyme'
+import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
+
+const middlewares = []
+const mockStore = configureStore(middlewares)
+
+const defaultState = {
+  ship: {
+    cargo: [],
+    location: {
+      name: null,
+      value: null
+    }
+  },
+  ui: {
+    view: 'Ship'
+  },
+  user: {
+    cash: 100
+  },
+  world: {
+    isTimerRunning: false,
+    planets: []
+  }
+}
+
+const rerenderShallow = customState =>
+  shallow(
+    <Provider store={mockStore(customState ? customState : defaultState)}>
+      <Title />
+    </Provider>
+  )
+
+const rerenderMount = customState =>
+  mount(
+    <Provider store={mockStore(customState ? customState : defaultState)}>
+      <Title />
+    </Provider>
+  )
+
+describe('<Title />', () => {
+  it('Should render the <Title /> component.', () => {
+    const wrapper = rerenderShallow()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

src/__tests__/components/ViewSelector.test.js

@@ -0,0 +1,53 @@
+/**
+ * @jest-environment node
+ */
+
+import React from 'react'
+import ViewSelector from '../../components/ViewSelector'
+import { mount, shallow } from 'enzyme'
+import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
+
+const middlewares = []
+const mockStore = configureStore(middlewares)
+
+const defaultState = {
+  ship: {
+    cargo: [],
+    location: {
+      name: null,
+      value: null
+    }
+  },
+  ui: {
+    view: 'Ship'
+  },
+  user: {
+    cash: 100
+  },
+  world: {
+    isTimerRunning: false,
+    planets: []
+  }
+}
+
+const rerenderShallow = customState =>
+  shallow(
+    <Provider store={mockStore(customState ? customState : defaultState)}>
+      <ViewSelector />
+    </Provider>
+  )
+
+const rerenderMount = customState =>
+  mount(
+    <Provider store={mockStore(customState ? customState : defaultState)}>
+      <ViewSelector />
+    </Provider>
+  )
+
+describe('<ViewSelector />', () => {
+  it('Should render the <ViewSelector /> component.', () => {
+    const wrapper = rerenderShallow()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

src/__tests__/components/__snapshots__/CashDisplay.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CashDisplay /> Should render the <CashDisplay /> component. 1`] = `"<div class=\\"StyledBox-sc-13pk1d4-0 CAsMy\\"><h2 class=\\"StyledHeading-sc-1rdh4aw-0 gBloPj\\">Cash:</h2><span class=\\"StyledText-sc-1sadyjn-0 fWSbXS\\">100</span></div>"`;

src/__tests__/components/__snapshots__/ItemTimer.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ItemTimer /> Should render the <ItemTimer /> component. 1`] = `"<span>10 minutes 0 seconds</span>"`;

src/__tests__/components/__snapshots__/Title.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Title /> Should render the <Title /> component. 1`] = `"<h1 class=\\"StyledHeading-sc-1rdh4aw-0 rfVJR\\">Hermes</h1>"`;

src/__tests__/components/__snapshots__/ViewSelector.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ViewSelector /> Should render the <ViewSelector /> component. 1`] = `"<div class=\\"StyledBox-sc-13pk1d4-0 dfMVfp\\"><select><option>Ship</option><option>Planets</option></select></div>"`;

src/setupTests.js

@@ -1,4 +1,5 @@
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import { configure } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import 'jsdom-global/register'
 
-configure({ adapter: new Adapter() });
+configure({ adapter: new Adapter() })