Update tests

- Fix existing (delete) test that now found two buttons
- Write test for upgrade state changes
- Add missing reducer tests for types/payloads

src/app/DataVault/panels/DeclarativeDetailsDisplay.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { shallow, mount } from 'enzyme'
+import { act } from 'react-dom/test-utils'
 import DeclarativeDetailsDisplay from './DeclarativeDetailsDisplay'
 import { DataVaultKey } from '../../state/reducers/datavault'
 
@@ -9,13 +10,18 @@ describe('Component: DeclarativeDetailsDisplay', () => {
     NAME: [{ id: '5', content: 'Jesse Clark' }]
   }
 
+  const mockedAttributes = {
+    deleteValue: jest.fn(),
+    swapValue: jest.fn()
+  }
+
   it('renders the component', () => {
-    const wrapper = shallow(<DeclarativeDetailsDisplay details={mockDeclarativeDetials} deleteValue={jest.fn()} />)
+    const wrapper = shallow(<DeclarativeDetailsDisplay details={mockDeclarativeDetials} {...mockedAttributes} />)
     expect(wrapper).toBeDefined()
   })
 
   it('shows the content in a row', () => {
-    const wrapper = shallow(<DeclarativeDetailsDisplay details={mockDeclarativeDetials} deleteValue={jest.fn()} />)
+    const wrapper = shallow(<DeclarativeDetailsDisplay details={mockDeclarativeDetials} {...mockedAttributes} />)
     expect(wrapper.find('tbody').children()).toHaveLength(2)
 
     expect(wrapper.find('tr').at(1).find('td').at(0).text()).toBe('EMAIL')
@@ -28,16 +34,46 @@ describe('Component: DeclarativeDetailsDisplay', () => {
       NAME: []
     }
 
-    const wrapper = shallow(<DeclarativeDetailsDisplay details={mockDetails} deleteValue={jest.fn()} />)
+    const wrapper = shallow(<DeclarativeDetailsDisplay details={mockDetails} {...mockedAttributes} />)
     expect(wrapper.find('tbody').children()).toHaveLength(1)
   })
 
-  it('handles delete click', () => {
-    const deleteValue = jest.fn()
-    const wrapper = mount(<DeclarativeDetailsDisplay details={mockDeclarativeDetials} deleteValue={deleteValue} />)
+  it('handles delete click', async () => {
+    const deleteFunction = jest.fn()
+    const deleteValue = (key: string, id: string) => new Promise((resolve) => resolve(deleteFunction(key, id)))
+    const wrapper = mount(<DeclarativeDetailsDisplay details={mockDeclarativeDetials} deleteValue={deleteValue} swapValue={jest.fn()} />)
+
+    wrapper.find('.content-row').at(0).find('button.delete').simulate('click')
+
+    await act(async () => {
+      await wrapper.find('.delete-modal').find('.column').at(1).find('button').simulate('click')
+
+      expect(deleteFunction).toBeCalledTimes(1)
+      expect(deleteFunction).toBeCalledWith('EMAIL', '1')
+    })
+  })
+
+  it('handles swap click', async () => {
+    const editFunction = jest.fn()
+    const swapValue = (key:string, content: string, id: string) => new Promise((resolve) => resolve(editFunction(key, content, id)))
+    const wrapper = mount(<DeclarativeDetailsDisplay details={mockDeclarativeDetials} deleteValue={jest.fn()} swapValue={swapValue} />)
+
+    wrapper.find('.content-row').at(0).find('button.edit').simulate('click')
+    expect(wrapper.find('textarea').props().value).toBe('[email protected]')
+
+    await act(async () => {
+      await wrapper.find('.edit-modal').find('button.submit').simulate('click')
+      wrapper.update()
+      expect(wrapper.find('.modal-content').find('div.alert.error').text()).toBe('New value is the same as the old.')
+
+      wrapper.find('textarea.line').simulate('change', { target: { value: '[email protected]' } })
+      expect(wrapper.find('textarea').props().value).toBe('[email protected]')
+
+      await wrapper.find('.edit-modal').find('button.submit').simulate('click')
+      wrapper.update()
 
-    wrapper.find('.content-row').at(0).find('button').simulate('click')
-    wrapper.find('.delete-modal').find('.column').at(1).find('button').simulate('click')
-    expect(deleteValue).toBeCalledWith('EMAIL', '1')
+      expect(editFunction).toBeCalledTimes(1)
+      expect(editFunction).toBeCalledWith('EMAIL', '[email protected]', '1')
+    })
   })
 })

src/app/state/reducers/datavault.test.ts

@@ -1,5 +1,5 @@
 import { configureStore, Store, AnyAction } from '@reduxjs/toolkit'
-import dataVaultSlice, { DataVaultState, receiveKeyData, initialState, addContentToKey, removeContentfromKey, swapContentById, DataVaultKey, DataVaultContent } from './datavault'
+import dataVaultSlice, { DataVaultState, receiveKeyData, initialState, addContentToKey, removeContentfromKey, swapContentById, DataVaultContent } from './datavault'
 
 describe('dataVault slice', () => {
   describe('action creators', () => {
@@ -8,6 +8,20 @@ describe('dataVault slice', () => {
       expect(receiveKeyData({ key: 'KEY', content }))
         .toEqual({ type: receiveKeyData.type, payload: { key: 'KEY', content } })
     })
+
+    test('addContentToKey', () => {
+      const content = { key: 'KEY', content: { id: '1', content: 'hello' } }
+      expect(addContentToKey(content)).toEqual({ type: addContentToKey.type, payload: content })
+    })
+
+    test('removeContentfromKey', () => {
+      expect(removeContentfromKey({ key: 'KEY', id: '2' })).toEqual({ type: removeContentfromKey.type, payload: { key: 'KEY', id: '2' } })
+    })
+
+    test('swapContentById', () => {
+      const content = { key: 'KEY', id: '2', content: 'new' }
+      expect(swapContentById(content)).toEqual({ type: swapContentById.type, payload: content })
+    })
   })
 
   describe('reducer', () => {