add tests for notification container

setup-jest.js

@@ -37,6 +37,11 @@ window.Trello = {
   get: jest.fn(() => Promise.resolve({})),
 }
 
+// mock browser's localStorage
+global.localStorage = {
+  removeItem: jest.fn(),
+}
+
 // mock trello's embed.min.js
 window.TrelloCards = {
   create: jest.fn((cardId, cardSelector, options) => {

src/components/notification/__mocks__/notification.js

@@ -0,0 +1,34 @@
+export const props = { message: 'some notification' }
+
+export const storeStateMock = {
+  boards: {
+    isLoading: false,
+    error: null,
+  },
+  lists: {
+    'board-1': {
+      isLoading: false,
+      error: null,
+    },
+  },
+  members: {
+    isLoading: false,
+    error: null,
+  },
+}
+
+export const storeWithBoardError = {
+  boards: {
+    isLoading: false,
+    error: {
+      status: 401,
+      responseText: 'example response',
+    },
+  },
+}
+
+export const storeWithAnyError = {
+  user: {
+    error: { message: 'some error user message ' },
+  },
+}

src/components/notification/__tests__/index.test.js

@@ -0,0 +1,74 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import configureMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+
+import {
+  props,
+  storeStateMock,
+  storeWithBoardError,
+  storeWithAnyError,
+} from '../__mocks__/notification'
+
+// inspired by https://github.com/reactjs/redux/issues/1534#issuecomment-205061049
+const mockStore = configureMockStore([thunk])
+
+describe('Component/NotificationContainer', () => {
+  let store
+  beforeEach(() => {
+    window.localStorage.removeItem.mockReset()
+    store = mockStore(storeStateMock)
+  })
+
+  afterAll(() => {
+    jest.resetModules()
+  })
+
+  test('should get data from the store and prepare props without throwing an error', () => {
+    const NotificationContainer = require('../').default
+    const wrapper = shallow(<NotificationContainer store={store} {...props} someOtherProp />)
+
+    const expectedProps = {
+      autoHideDuration: 10000,
+      message: 'some notification',
+      someOtherProp: true,
+    }
+
+    expect(wrapper.props()).toEqual(expect.objectContaining(expectedProps))
+  })
+
+  test('should show a different message when board.error met certain conditions', () => {
+    store = mockStore(storeWithBoardError)
+    const NotificationContainer = require('../').default
+    const wrapper = shallow(<NotificationContainer store={store} {...props} />)
+
+    const expectedProps = {
+      autoHideDuration: 60000,
+      message:
+        'example response: Please reload the page and try it again. Optional: delete localStorage as well.',
+    }
+
+    expect(wrapper.props()).toEqual(expect.objectContaining(expectedProps))
+  })
+
+  test('should remove an item from localStorage when board.error met certain conditions', () => {
+    store = mockStore(storeWithBoardError)
+    const NotificationContainer = require('../').default
+    shallow(<NotificationContainer store={store} {...props} />)
+    expect(window.localStorage.removeItem).toHaveBeenCalledTimes(1)
+    expect(window.localStorage.removeItem).toHaveBeenCalledWith('trello_token')
+  })
+
+  test('should show a default error message when other errors then the 401-board.error are available', () => {
+    store = mockStore(storeWithAnyError)
+    const NotificationContainer = require('../').default
+    const wrapper = shallow(<NotificationContainer store={store} {...props} />)
+
+    const expectedProps = {
+      autoHideDuration: 10000,
+      message: 'An error occured. Please try it again later.',
+    }
+
+    expect(wrapper.props()).toEqual(expect.objectContaining(expectedProps))
+  })
+})

src/components/notification/index.js

@@ -1,21 +1,17 @@
 import { connect } from 'react-redux'
 import { get } from 'lodash'
-import { isAppLoading as isAppLoadingCheck, getAppErrorsList } from '../../utils/utils'
+import { getAppErrorsList } from '../../utils/utils'
 
 import Notification from './component'
 
 const mapStateToProps = state => {
-  // we check if the app is still in a loading state
-  const isAppLoading = isAppLoadingCheck(state)
-
   // evaluate if one of the stores has an error and make them (if one occurs)
   // available to the <Component /> so we can tell the user about it
   const appErrors = getAppErrorsList(state)
 
   return {
     appErrors,
-    error: get(state, 'boards.error') || undefined,
-    isAppLoading,
+    error: get(state, 'boards.error') || null,
   }
 }
 
@@ -24,6 +20,7 @@ const mapDispatchToProps = () => ({})
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
   // if we have an error present, we prepare a message already here
   const { appErrors, error } = stateProps
+
   let customMessage = null
   let autoHideDuration = 10000
   if (error) {
@@ -38,11 +35,12 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
       autoHideDuration = 60 * 1000 // 1 minute
     }
   } else if (appErrors && appErrors.length > 0) {
+    // NOTE: currently we do not differ between any other errors, we just raise
+    // the notification/error hint
     customMessage = 'An error occured. Please try it again later.'
   }
 
   return {
-    ...stateProps,
     ...ownProps,
     autoHideDuration,
     message: customMessage || ownProps.message,

src/utils/__tests__/utils.test.js

@@ -26,7 +26,7 @@ describe('utils', () => {
       },
       members: { isLoading: true },
       lists: {
-        'list-1': { isLoading: true },
+        'board-1': { isLoading: true },
       },
     }
     test('returns an array of values with default, fallback and current values', () => {
@@ -48,16 +48,19 @@ describe('utils', () => {
         },
         members: { error: null },
         lists: {
-          'list-1': { error: { message: 'some error list-1 message ' } },
-          'list-2': { error: { message: 'some error list-2 message ' } },
+          'board-1': { error: { message: 'some error board-1 message ' } },
+          'board-2': { error: { message: 'some error board-2 message ' } },
         },
         user: {
           error: { message: 'some error user message ' },
         },
       }
       expect(getAppErrorsList(mockState)).toEqual([
         { key: 'cardError', message: ['some error card message '] },
-        { key: 'listError', message: ['some error list-1 message ', 'some error list-2 message '] },
+        {
+          key: 'listError',
+          message: ['some error board-1 message ', 'some error board-2 message '],
+        },
         { key: 'userError', message: 'some error user message ' },
       ])
     })
@@ -70,8 +73,8 @@ describe('utils', () => {
         },
         members: { error: null },
         lists: {
-          'list-1': { error: null },
-          'list-2': { error: null },
+          'board-1': { error: null },
+          'board-2': { error: null },
         },
         user: {
           error: null,