Test+implement modal wrapper for DisableModal

components/Modal.spec.js

@@ -1,4 +1,4 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
 import Modal from './Modal.vue'
 import Vue from 'vue'
 import Vuex from 'vuex'
@@ -12,23 +12,13 @@ localVue.use(Styleguide)
 
 describe('Modal.vue', () => {
   let Wrapper
+  let wrapper
   let store
   let state
   let mocks
 
-  beforeEach(() => {
-    mocks = {
-      $t: () => {}
-    }
-    state = {
-      open: null,
-      data: {}
-    }
-  })
-
-  describe('mount', () => {
-    let wrapper
-    const Wrapper = () => {
+  const createWrapper = mountMethod => {
+    return () => {
       store = new Vuex.Store({
         state,
         getters: {
@@ -39,25 +29,46 @@ describe('Modal.vue', () => {
           'modal/SET_OPEN': mutations.SET_OPEN
         }
       })
-      return mount(Modal, { store, mocks, localVue })
+      return mountMethod(Modal, { store, mocks, localVue })
     }
+  }
+
+  beforeEach(() => {
+    mocks = {
+      $filters: {
+        truncate: a => a
+      },
+      $toast: {
+        success: () => {},
+        error: () => {}
+      },
+      $t: () => {}
+    }
+    state = {
+      open: null,
+      data: {}
+    }
+  })
+
+  describe('shallowMount', () => {
+    const Wrapper = createWrapper(shallowMount)
 
     it('renders nothing', () => {
       wrapper = Wrapper()
       expect(wrapper.isEmpty()).toBe(true)
     })
 
-    describe('store opens a report', () => {
+    describe('store state.open === "disable"', () => {
       beforeEach(() => {
         state = {
-          open: 'report',
+          open: 'disable',
           data: {}
         }
         wrapper = Wrapper()
       })
 
       it('renders report modal', () => {
-        expect(wrapper.contains('#modal-report')).toBe(true)
+        expect(wrapper.contains('disable-modal-stub')).toBe(true)
       })
     })
   })

components/Modal.vue

@@ -1,23 +1,23 @@
 <template>
-  <report-modal v-if="showReportModal" />
+  <div class="modal-wrapper">
+    <disable-modal
+      v-if="showDisableModal"
+      :is-open="showDisableModal"
+    />
+  </div>
 </template>
 
 <script>
-import ReportModal from '~/components/ReportModal'
+import DisableModal from '~/components/Modal/DisableModal'
 
 export default {
   name: 'Modal',
   components: {
-    ReportModal
+    DisableModal
   },
   computed: {
-    showReportModal() {
-      return this.$store.getters['modal/open'] === 'report'
-    }
-  },
-  methods: {
-    close() {
-      this.$store.commit('modal/SET_OPEN', {})
+    showDisableModal() {
+      return this.$store.getters['modal/open'] === 'disable'
     }
   }
 }

layouts/default.vue

@@ -93,7 +93,7 @@
     </ds-container>
     <div id="overlay" />
     <no-ssr>
-      <report-modal />
+      <modal />
     </no-ssr>
   </div>
 </template>
@@ -102,13 +102,13 @@
 import { mapGetters } from 'vuex'
 import LocaleSwitch from '~/components/LocaleSwitch'
 import Dropdown from '~/components/Dropdown'
-import ReportModal from '~/components/ReportModal'
+import Modal from '~/components/Modal'
 import seo from '~/components/mixins/seo'
 
 export default {
   components: {
     Dropdown,
-    ReportModal,
+    Modal,
     LocaleSwitch
   },
   mixins: [seo],

locales/de.json

@@ -128,6 +128,9 @@
     "delete": "Kommentar löschen"
   },
   "disable": {
+    "submit": "Deaktivieren",
+    "cancel": "Abbrechen",
+    "success": "Erfolgreich deaktiviert",
     "user": {
       "title": "Nutzer sperren",
       "type": "Nutzer",

locales/en.json

@@ -128,6 +128,9 @@
     "delete": "Delete Comment"
   },
   "disable": {
+    "submit": "Disable",
+    "cancel": "Cancel",
+    "success": "Disabled successfully",
     "user": {
       "title": "Disable User",
       "type": "User",