ModalWrapper closes if DisableModel closes

components/Modal.spec.js

@@ -1,5 +1,6 @@
 import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
 import Modal from './Modal.vue'
+import DisableModal from './Modal/DisableModal.vue'
 import Vue from 'vue'
 import Vuex from 'vuex'
 import { getters, mutations } from '../store/modal'
@@ -58,17 +59,36 @@ describe('Modal.vue', () => {
       expect(wrapper.isEmpty()).toBe(true)
     })
 
-    describe('store state.open === "disable"', () => {
+    describe('store/modal holds data to disable', () => {
       beforeEach(() => {
         state = {
           open: 'disable',
-          data: {}
+          data: {
+            type: 'contribution',
+            name: 'some title',
+            id: 456
+          }
         }
         wrapper = Wrapper()
       })
 
-      it('renders report modal', () => {
-        expect(wrapper.contains('disable-modal-stub')).toBe(true)
+      it('renders disable modal', () => {
+        expect(wrapper.contains(DisableModal)).toBe(true)
+      })
+
+      it('passes data to disable modal', () => {
+        expect(wrapper.find(DisableModal).props().resource).toEqual({
+          type: 'contribution',
+          name: 'some title',
+          id: 456
+        })
+      })
+
+      describe('click cancel', () => {
+        it('empties wrapper', () => {
+          wrapper.find(DisableModal).vm.$emit('close')
+          expect(wrapper.isEmpty()).toBe(true)
+        })
       })
     })
   })

components/Modal.vue

@@ -1,14 +1,17 @@
 <template>
   <div class="modal-wrapper">
     <disable-modal
-      v-if="showDisableModal"
-      :is-open="showDisableModal"
+      v-if="open === 'disable'"
+      :is-open="open === 'disable'"
+      :resource="data"
+      @close="close"
     />
   </div>
 </template>
 
 <script>
 import DisableModal from '~/components/Modal/DisableModal'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'Modal',
@@ -16,8 +19,14 @@ export default {
     DisableModal
   },
   computed: {
-    showDisableModal() {
-      return this.$store.getters['modal/open'] === 'disable'
+    ...mapGetters({
+      data: 'modal/data',
+      open: 'modal/open'
+    })
+  },
+  methods: {
+    close() {
+      this.$store.commit('modal/SET_OPEN', {})
     }
   }
 }

components/Modal/DisableModal.spec.js

@@ -58,7 +58,7 @@ describe('DisableModal.vue', () => {
         propsData = {
           resource: {
             type: 'contribution',
-            name: 'This is some post content.'
+            name: 'This is some post title.'
           }
         }
       })
@@ -67,10 +67,7 @@ describe('DisableModal.vue', () => {
         Wrapper()
         const calls = mocks.$t.mock.calls
         const expected = [
-          [
-            'disable.contribution.message',
-            { name: 'This is some post content.' }
-          ]
+          ['disable.contribution.message', { name: 'This is some post title.' }]
         ]
         expect(calls).toEqual(expect.arrayContaining(expected))
       })