#24 added dispatch calls tests

owlbeardm · Jan 15, 2021 · eb793ef · eb793ef
1 parent bf99686
commit eb793ef
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 46 deletions.
diff --git a/src/components/page-content/page-content.js b/src/components/page-content/page-content.js
@@ -6,7 +6,7 @@ import EquipmentTable from '../equipment-table/equipment-table'
 import InventoryItemPanel from '../inventory-item-panel'
 import { connect } from 'react-redux'
 
-const PageContent = ({ editingItem, setEditingItem, itemAddToList, itemEditData }) => {
+export const UnconnectedPageContent = ({ editingItem, setEditingItem, itemAddToList, itemEditData }) => {
   const [view, setView] = useState('mainView')
 
   const onAdding = () => {
@@ -98,4 +98,4 @@ const mapDispatchToProps = (dispatch) => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(PageContent)
+export default connect(mapStateToProps, mapDispatchToProps)(UnconnectedPageContent)
diff --git a/src/components/page-content/page-content.test.js b/src/components/page-content/page-content.test.js
@@ -3,64 +3,108 @@ import { shallow, mount } from 'enzyme'
 import { storeFactory } from '../../utils/test-utils'
 import { Provider } from 'react-redux'
 
-import PageContent from './page-content'
+import PageContent, { UnconnectedPageContent } from './page-content'
 
-const shallowSetup = (initialState = {}) => {
-  const store = storeFactory(initialState)
-  return shallow(<PageContent store={store} />).dive()
+const oneItemState = {
+  main: {
+    equipment: {
+      editingItem: 0,
+      weightUnits: {
+        bulksWeight: 1,
+        lightCount: 0,
+        negligibleCount: 0
+      },
+      data: [{
+        id: 0,
+        name: 'The thing',
+        amount: 1,
+        slot: 'slotless',
+        costInGp: 0.2,
+        weight: 1,
+        weightRadio: 'bulk',
+        description: ''
+      }]
+    }
+  }
 }
 
-const mountSetup = (initialState = {}) => {
+const defaultProps = { editingItem: 0, itemAddToList: () => { }, itemEditData: () => { }, setEditingItem: () => { } }
+
+/**
+ * @function sets up the wrapper to test the component
+ * @param {string} renderType defines rendering type (shallow, mount) and component connection
+ * @param {Object} props defines custom props for unconnected component
+ * @param {Object} initialState defines initial store state
+ * @returns wrapper of the selected type
+ */
+const setup = (renderType, props, initialState = {}) => {
   const store = storeFactory(initialState)
-  return mount(<Provider store={store} ><PageContent /></Provider>)
+  switch (renderType) {
+    case 'mount':
+      return mount(<Provider store={store} ><PageContent /></Provider>)
+    case 'unconnectedMount':
+      return mount(<Provider store={store}><UnconnectedPageContent {...defaultProps} {...props} /></Provider>)
+    case 'shallow':
+    default:
+      return shallow(<PageContent store={store} />).dive()
+  }
 }
 
 describe('rendering testing', () => {
-  describe('renders correct elements depending on view', () => {
-    let wrapper
+  let wrapper
 
+  describe('renders correct elements depending on view', () => {
     test('renders main view on app mount', () => {
-      wrapper = shallowSetup().dive()
+      wrapper = setup('shallow').dive()
       const mainViewContent = wrapper.find('[data-test="main-page"]')
       expect(mainViewContent.length).toBe(1)
     })
 
     test('renders form to add item for addingView', () => {
-      wrapper = mountSetup()
+      wrapper = setup('mount')
       const addItemButton = wrapper.find('[data-test="add-button"]')
       addItemButton.simulate('click')
       const addItemInput = wrapper.find('input[name="name"]')
       expect(addItemInput.prop('value')).toBe('')
     })
 
     test('renders form to add item for addingView', () => {
-      const initialState = {
-        main: {
-          equipment: {
-            editingItem: 0,
-            weightUnits: {
-              bulksWeight: 1,
-              lightCount: 0,
-              negligibleCount: 0
-            },
-            data: [{
-              id: 0,
-              name: 'The thing',
-              amount: 1,
-              slot: 'slotless',
-              costInGp: 0.2,
-              weight: 1,
-              weightRadio: 'bulk',
-              description: ''
-            }]
-          }
-        }
-      }
-      wrapper = mountSetup(initialState)
+      wrapper = setup('mount', {}, oneItemState)
       const editItemButton = wrapper.find('[data-test="equipment-row-component"] button[data-test="edit-button"]')
       editItemButton.simulate('click')
       const editItemInput = wrapper.find('input[name="name"]')
-      expect(editItemInput.prop('value')).toBe(initialState.main.equipment.data[0].name)
+      expect(editItemInput.prop('value')).toBe(oneItemState.main.equipment.data[0].name)
+    })
+  })
+
+  describe('dispatches correct actions', () => {
+    test('calls itemAddToList to add an item', () => {
+      const mockItemAddToList = jest.fn()
+      wrapper = setup('unconnectedMount', { itemAddToList: mockItemAddToList })
+      const addItemButton = wrapper.find('[data-test="add-button"]')
+      addItemButton.simulate('click')
+      wrapper.find('input[name="name"]').simulate('change', { target: { value: 'New item' } })
+      const submitButton = wrapper.find('button[type="submit"]')
+      submitButton.simulate('click')
+      expect(mockItemAddToList).toHaveBeenCalled()
+    })
+
+    test('calls itemEditData to apply changes to existing item', () => {
+      const mockItemEditData = jest.fn()
+      wrapper = setup('unconnectedMount', { itemEditData: mockItemEditData }, oneItemState)
+      const editItemButton = wrapper.find('[data-test="equipment-row-component"] button[data-test="edit-button"]')
+      editItemButton.simulate('click')
+      const submitButton = wrapper.find('button[type="submit"]')
+      submitButton.simulate('click')
+      expect(mockItemEditData).toHaveBeenCalled()
+    })
+
+    test('calls setEditingItem on edit button click', () => {
+      const mockSetEditingItem = jest.fn()
+      wrapper = setup('unconnectedMount', { setEditingItem: mockSetEditingItem }, oneItemState)
+      const editItemButton = wrapper.find('[data-test="equipment-row-component"] button[data-test="edit-button"]')
+      editItemButton.simulate('click')
+      expect(mockSetEditingItem).toHaveBeenCalled()
     })
   })
 })
@@ -69,19 +113,12 @@ describe('redux props testing', () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallowSetup()
+    wrapper = setup('shallow')
   })
 
   test('has editingItems prop', () => {
-    const initialState = {
-      main: {
-        equipment: {
-          editingItem: 0
-        }
-      }
-    }
-    wrapper = shallowSetup(initialState)
-    expect(wrapper.prop('editingItem')).toBe(initialState.main.equipment.editingItem)
+    wrapper = setup('shallow', {}, oneItemState)
+    expect(wrapper.prop('editingItem')).toBe(oneItemState.main.equipment.editingItem)
   })
 
   test('has itemAddToList prop', () => {