Fledge out the test case for ReportModal

@Tirokk I think I could narrow down our problem to an additional call of
Wrapper(). The fact that we have to call it at least twice is a strong
indicator of non-atomic tests, which is bad.

components/ModalTestbed.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
-    <h1> Hello </h1>
-    <portal-target name="modal" />
+    <portal-target
+      id="portal"
+      name="modal"
+    />
     <report-modal />
   </div>
 </template>

components/ReportModal.spec.js

@@ -3,6 +3,7 @@ import ReportModal from './ReportModal.vue'
 import ModalTestbed from './ModalTestbed.vue'
 import Vue from 'vue'
 import Vuex from 'vuex'
+import { getters, mutations } from '../store/modal'
 import Styleguide from '@human-connection/styleguide'
 import portal from 'portal-vue'
 
@@ -14,24 +15,19 @@ localVue.use(portal)
 
 describe('ReportModal.vue', () => {
   let Wrapper
-  let getters
   let store
+  let state
   let mocks
   let $apollo
 
   beforeEach(() => {
-    getters = {
-      'modal/data': () => {
-        return {
-          success: false,
-          loading: false,
-          disabled: false
-        }
-      }
-    }
     $apollo = {
       mutate: jest.fn().mockResolvedValue(null)
     }
+    state = {
+      open: 'report',
+      data: {}
+    }
   })
 
   describe('mount', () => {
@@ -45,33 +41,79 @@ describe('ReportModal.vue', () => {
         $apollo
       }
       store = new Vuex.Store({
-        getters
+        state,
+        getters: {
+          'modal/open': getters.open,
+          'modal/data': getters.data
+        },
+        mutations: {
+          'modal/SET_OPEN': mutations.SET_OPEN
+        }
       })
       return mount(ModalTestbed, { store, mocks, localVue })
     }
 
+    beforeEach(() => {
+      // TODO find out why on earth do we have to call Wrapper() at least twice?
+      // TODO this is a nasty side effect and we have non-atomic tests here
+      Wrapper()
+    })
+
     it('renders', () => {
       expect(Wrapper().is('div')).toBe(true)
     })
 
     describe('modal visible', () => {
       describe('shows a report', () => {
+        let wrapper
         beforeEach(() => {
-          getters['modal/open'] = () => 'report'
+          state = {
+            open: 'report',
+            data: {}
+          }
+          wrapper = Wrapper()
+        })
+
+        describe('by default', () => {
+          it('buttons enabled', () => {
+            const expected = { disabled: 'disabled' }
+            const cancelButton = wrapper.findAll('#portal footer button').at(0)
+            const confirmButton = wrapper.findAll('#portal footer button').at(1)
+            expect(cancelButton.attributes().disabled).toBeUndefined()
+            expect(confirmButton.attributes().disabled).toBeUndefined()
+          })
         })
 
         describe('click confirm button', () => {
-          let wrapper
-
-          beforeEach(() => {
-            wrapper = Wrapper()
+          const clickAction = () => {
             const confirmButton = wrapper.find('.ds-button-danger')
             confirmButton.trigger('click')
-          })
+          }
 
           it('calls report mutation', () => {
+            clickAction()
             expect($apollo.mutate).toHaveBeenCalled()
           })
+
+          it.todo('hides modal')
+
+          it('disables buttons', () => {
+            const expected = { disabled: 'disabled' }
+            // TODO: `wrapper.findAll` behaves in a very odd way
+            // if I call find or findAll first to check the initial attributes
+            // the attributes won't change anymore. Seems to be a caching
+            // problem here.  I made a workaround by checking the inital
+            // in a separate test case above.
+            clickAction()
+            const cancelButton = wrapper.findAll('#portal footer button').at(0)
+            const confirmButton = wrapper.findAll('#portal footer button').at(1)
+            expect(cancelButton.attributes()).toEqual(
+              expect.objectContaining(expected)
+            )
+            expect(confirmButton.attributes()).toEqual(
+              expect.objectContaining(expected)
+            )
+          })
         })
       })
     })
@@ -83,9 +125,7 @@ describe('ReportModal.vue', () => {
         $t: () => {},
         $apollo
       }
-      store = new Vuex.Store({
-        getters
-      })
+      store = new Vuex.Store({})
       return shallowMount(ReportModal, { store, mocks, localVue })
     }