Implement effects but remove modals from DOM

components/Modal.spec.js

@@ -1,6 +1,7 @@
 import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
 import Modal from './Modal.vue'
 import DisableModal from './Modal/DisableModal.vue'
+import ReportModal from './Modal/ReportModal.vue'
 import Vue from 'vue'
 import Vuex from 'vuex'
 import { getters, mutations } from '../store/modal'
@@ -54,9 +55,10 @@ describe('Modal.vue', () => {
   describe('shallowMount', () => {
     const Wrapper = createWrapper(shallowMount)
 
-    it('renders all modals as closed', () => {
+    it('initially empty', () => {
       wrapper = Wrapper()
-      expect(wrapper.find(DisableModal).vm.isOpen).toBe(false)
+      expect(wrapper.contains(DisableModal)).toBe(false)
+      expect(wrapper.contains(ReportModal)).toBe(false)
     })
 
     describe('store/modal holds data to disable', () => {
@@ -85,9 +87,9 @@ describe('Modal.vue', () => {
       })
 
       describe('child component emits close', () => {
-        it('close DisableModal', () => {
+        it('turns empty', () => {
           wrapper.find(DisableModal).vm.$emit('close')
-          expect(wrapper.find(DisableModal).vm.isOpen).toBe(false)
+          expect(wrapper.contains(DisableModal)).toBe(false)
         })
       })
     })

components/Modal.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="modal-wrapper">
     <disable-modal
-      :is-open="open === 'disable'"
+      v-if="open === 'disable'"
       :resource="data"
       @close="close"
     />
     <report-modal
-      :is-open="open === 'report'"
+      v-if="open === 'report'"
       :resource="data"
       @close="close"
     />

components/Modal/DisableModal.spec.js

@@ -78,11 +78,11 @@ describe('DisableModal.vue', () => {
     const Wrapper = () => {
       return mount(DisableModal, { propsData, mocks, localVue })
     }
+    beforeEach(jest.useFakeTimers)
 
-    describe('given id and opened', () => {
+    describe('given id', () => {
       beforeEach(() => {
         propsData = {
-          isOpen: true,
           resource: {
             id: 4711
           }
@@ -95,12 +95,24 @@ describe('DisableModal.vue', () => {
           await wrapper.find('button.cancel').trigger('click')
         })
 
-        it('emits close', () => {
-          expect(wrapper.emitted().close).toBeTruthy()
+        it('does not emit "close" yet', () => {
+          expect(wrapper.emitted().close).toBeFalsy()
         })
 
-        it('does not call mutation', () => {
-          expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
+        it('fades away', () => {
+          expect(wrapper.vm.isOpen).toBe(false)
+        })
+
+        describe('after timeout', () => {
+          beforeEach(jest.runAllTimers)
+
+          it('does not call mutation', () => {
+            expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
+          })
+
+          it('emits close', () => {
+            expect(wrapper.emitted().close).toBeTruthy()
+          })
         })
       })
 
@@ -110,10 +122,6 @@ describe('DisableModal.vue', () => {
           await wrapper.find('button.confirm').trigger('click')
         })
 
-        it('emits close', () => {
-          expect(wrapper.emitted().close).toBeTruthy()
-        })
-
         it('calls mutation', () => {
           expect(mocks.$apollo.mutate).toHaveBeenCalled()
         })
@@ -123,6 +131,18 @@ describe('DisableModal.vue', () => {
           const [[{ variables }]] = calls
           expect(variables).toEqual({ id: 4711 })
         })
+
+        it('fades away', () => {
+          expect(wrapper.vm.isOpen).toBe(false)
+        })
+
+        describe('after timeout', () => {
+          beforeEach(jest.runAllTimers)
+
+          it('emits close', () => {
+            expect(wrapper.emitted().close).toBeTruthy()
+          })
+        })
       })
     })
   })

components/Modal/DisableModal.vue

@@ -2,7 +2,7 @@
   <ds-modal
     :title="title"
     :is-open="isOpen"
-    @cancel="$emit('close')"
+    @cancel="cancel"
   >
     <!-- eslint-disable-next-line vue/no-v-html -->
     <p v-html="message" />
@@ -10,7 +10,7 @@
     <template slot="footer">
       <ds-button
         class="cancel"
-        @click="$emit('close')"
+        @click="cancel"
       >
         {{ $t('disable.cancel') }}
       </ds-button>
@@ -32,10 +32,6 @@ import gql from 'graphql-tag'
 
 export default {
   props: {
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
     resource: {
       type: Object,
       default() {
@@ -43,6 +39,13 @@ export default {
       }
     }
   },
+  data() {
+    return {
+      isOpen: true,
+      success: false,
+      loading: false
+    }
+  },
   computed: {
     title() {
       return this.$t(`disable.${this.resource.type}.title`)
@@ -53,6 +56,12 @@ export default {
     }
   },
   methods: {
+    cancel() {
+      this.isOpen = false
+      setTimeout(() => {
+        this.$emit('close')
+      }, 1000)
+    },
     async confirm() {
       try {
         await this.$apollo.mutate({
@@ -64,10 +73,12 @@ export default {
           variables: { id: this.resource.id }
         })
         this.$toast.success(this.$t('disable.success'))
+        this.isOpen = false
+        setTimeout(() => {
+          this.$emit('close')
+        }, 1000)
       } catch (err) {
         this.$toast.error(err.message)
-      } finally {
-        this.$emit('close')
       }
     }
   }

components/Modal/ReportModal.spec.js

@@ -38,10 +38,6 @@ describe('ReportModal.vue', () => {
     }
 
     describe('defaults', () => {
-      it('isOpen false', () => {
-        expect(Wrapper().vm.isOpen).toBe(false)
-      })
-
       it('success false', () => {
         expect(Wrapper().vm.success).toBe(false)
       })
@@ -75,14 +71,15 @@ describe('ReportModal.vue', () => {
       return mount(ReportModal, { propsData, mocks, localVue })
     }
 
+    beforeEach(jest.useFakeTimers)
+
     it('renders', () => {
       expect(Wrapper().is('div')).toBe(true)
     })
 
-    describe('given id and opened', () => {
+    describe('given id', () => {
       beforeEach(() => {
         propsData = {
-          isOpen: true,
           resource: {
             id: 4711
           }
@@ -96,18 +93,25 @@ describe('ReportModal.vue', () => {
           wrapper.find('button.cancel').trigger('click')
         })
 
-        it('emits close', () => {
-          expect(wrapper.emitted().close).toBeTruthy()
-        })
+        describe('after timeout', () => {
+          beforeEach(jest.runAllTimers)
 
-        it('does not call mutation', () => {
-          expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
+          it('fades away', () => {
+            expect(wrapper.vm.isOpen).toBe(false)
+          })
+
+          it('emits "close"', () => {
+            expect(wrapper.emitted().close).toBeTruthy()
+          })
+
+          it('does not call mutation', () => {
+            expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
+          })
         })
       })
 
       describe('click confirm button', () => {
         beforeEach(() => {
-          jest.useFakeTimers()
           wrapper.find('button.confirm').trigger('click')
         })
 
@@ -128,6 +132,10 @@ describe('ReportModal.vue', () => {
         describe('after timeout', () => {
           beforeEach(jest.runAllTimers)
 
+          it('fades away', () => {
+            expect(wrapper.vm.isOpen).toBe(false)
+          })
+
           it('emits close', () => {
             expect(wrapper.emitted().close).toBeTruthy()
           })

components/Modal/ReportModal.vue

@@ -2,7 +2,7 @@
   <ds-modal
     :title="title"
     :is-open="isOpen"
-    @cancel="$emit('close')"
+    @cancel="cancel"
   >
     <transition name="ds-transition-fade">
       <ds-flex
@@ -23,7 +23,7 @@
       <ds-button
         class="cancel"
         icon="close"
-        @click="$emit('close')"
+        @click="cancel"
       >
         {{ $t('report.cancel') }}
       </ds-button>
@@ -51,10 +51,6 @@ export default {
     SweetalertIcon
   },
   props: {
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
     resource: {
       type: Object,
       default() {
@@ -64,6 +60,7 @@ export default {
   },
   data() {
     return {
+      isOpen: true,
       success: false,
       loading: false
     }
@@ -78,6 +75,13 @@ export default {
     }
   },
   methods: {
+    async cancel() {
+      console.log('cancel')
+      this.isOpen = false
+      setTimeout(() => {
+        this.$emit('close')
+      }, 1000)
+    },
     async confirm() {
       this.loading = true
       try {
@@ -94,8 +98,11 @@ export default {
         this.success = true
         this.$toast.success(this.$t('report.success'))
         setTimeout(() => {
-          this.success = false
-          this.$emit('close')
+          this.isOpen = false
+          setTimeout(() => {
+            this.success = false
+            this.$emit('close')
+          }, 500)
         }, 1500)
       } catch (err) {
         this.success = false