From 76469df059391148cc31553268e274b1b1d01ff7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Fri, 31 May 2019 11:36:27 +0200
Subject: [PATCH] Getting Jest Tests to run again.

---
 webapp/components/ContentMenu.vue            | 35 +++++---------
 webapp/components/Modal.spec.js              | 46 +++++++++++++++++--
 webapp/components/Modal.vue                  |  2 +-
 webapp/components/Modal/DeleteModal.spec.js  |  2 +-
 webapp/components/Modal/DisableModal.spec.js | 48 ++++++++++++++++----
 webapp/components/Modal/DisableModal.vue     |  1 +
 webapp/components/Modal/ReportModal.spec.js  | 43 ++++++++++++++----
 7 files changed, 130 insertions(+), 47 deletions(-)

diff --git a/webapp/components/ContentMenu.vue b/webapp/components/ContentMenu.vue
index a8b4db02f..ffa42fec0 100644
--- a/webapp/components/ContentMenu.vue
+++ b/webapp/components/ContentMenu.vue
@@ -1,32 +1,18 @@
 <template>
-  <dropdown
-    class="content-menu"
-    :placement="placement"
-    offset="5"
-  >
-    <template
-      slot="default"
-      slot-scope="{toggleMenu}"
-    >
-      <slot
-        name="button"
-        :toggleMenu="toggleMenu"
-      >
-        <ds-button
-          class="content-menu-trigger"
-          size="small"
-          ghost
-          @click.prevent="toggleMenu"
-        >
+  <dropdown class="content-menu"
+:placement="placement" offset="5">
+    <template slot="default"
+slot-scope="{toggleMenu}">
+      <slot name="button"
+:toggleMenu="toggleMenu">
+        <ds-button class="content-menu-trigger"
+size="small" ghost @click.prevent="toggleMenu">
           <ds-icon name="ellipsis-v" />
         </ds-button>
       </slot>
     </template>
-    <div
-      slot="popover"
-      slot-scope="{toggleMenu}"
-      class="content-menu-popover"
-    >
+    <div slot="popover"
+slot-scope="{toggleMenu}" class="content-menu-popover">
       <ds-menu :routes="routes">
         <ds-menu-item
           slot="menuitem"
@@ -47,6 +33,7 @@
 import Dropdown from '~/components/Dropdown'
 
 export default {
+  name: 'ContentMenu',
   components: {
     Dropdown,
   },
diff --git a/webapp/components/Modal.spec.js b/webapp/components/Modal.spec.js
index 52d13c4a0..0e2158e96 100644
--- a/webapp/components/Modal.spec.js
+++ b/webapp/components/Modal.spec.js
@@ -1,5 +1,6 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
 import Modal from './Modal.vue'
+import DeleteModal from './Modal/DeleteModal.vue'
 import DisableModal from './Modal/DisableModal.vue'
 import ReportModal from './Modal/ReportModal.vue'
 import Vuex from 'vuex'
@@ -29,7 +30,11 @@ describe('Modal.vue', () => {
           'modal/SET_OPEN': mutations.SET_OPEN,
         },
       })
-      return mountMethod(Modal, { store, mocks, localVue })
+      return mountMethod(Modal, {
+        store,
+        mocks,
+        localVue,
+      })
     }
   }
 
@@ -55,6 +60,7 @@ describe('Modal.vue', () => {
 
     it('initially empty', () => {
       wrapper = Wrapper()
+      expect(wrapper.contains(DeleteModal)).toBe(false)
       expect(wrapper.contains(DisableModal)).toBe(false)
       expect(wrapper.contains(ReportModal)).toBe(false)
     })
@@ -69,6 +75,10 @@ describe('Modal.vue', () => {
               id: 'c456',
               title: 'some title',
             },
+            callbacks: {
+              confirm: null,
+              cancel: null,
+            },
           },
         }
         wrapper = Wrapper()
@@ -83,6 +93,10 @@ describe('Modal.vue', () => {
           type: 'contribution',
           name: 'some title',
           id: 'c456',
+          callbacks: {
+            confirm: null,
+            cancel: null,
+          },
         })
       })
 
@@ -97,23 +111,49 @@ describe('Modal.vue', () => {
         it('passes author name to disable modal', () => {
           state.data = {
             type: 'comment',
-            resource: { id: 'c456', author: { name: 'Author name' } },
+            resource: {
+              id: 'c456',
+              author: {
+                name: 'Author name',
+              },
+            },
+            callbacks: {
+              confirm: null,
+              cancel: null,
+            },
           }
           wrapper = Wrapper()
           expect(wrapper.find(DisableModal).props()).toEqual({
             type: 'comment',
             name: 'Author name',
             id: 'c456',
+            callbacks: {
+              confirm: null,
+              cancel: null,
+            },
           })
         })
 
         it('does not crash if author is undefined', () => {
-          state.data = { type: 'comment', resource: { id: 'c456' } }
+          state.data = {
+            type: 'comment',
+            resource: {
+              id: 'c456',
+            },
+            callbacks: {
+              confirm: null,
+              cancel: null,
+            },
+          }
           wrapper = Wrapper()
           expect(wrapper.find(DisableModal).props()).toEqual({
             type: 'comment',
             name: '',
             id: 'c456',
+            callbacks: {
+              confirm: null,
+              cancel: null,
+            },
           })
         })
       })
diff --git a/webapp/components/Modal.vue b/webapp/components/Modal.vue
index f06ed497a..efe1b8ab6 100644
--- a/webapp/components/Modal.vue
+++ b/webapp/components/Modal.vue
@@ -29,9 +29,9 @@
 </template>
 
 <script>
+import DeleteModal from '~/components/Modal/DeleteModal'
 import DisableModal from '~/components/Modal/DisableModal'
 import ReportModal from '~/components/Modal/ReportModal'
-import DeleteModal from '~/components/Modal/DeleteModal'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/webapp/components/Modal/DeleteModal.spec.js b/webapp/components/Modal/DeleteModal.spec.js
index 008acdada..c5e9df001 100644
--- a/webapp/components/Modal/DeleteModal.spec.js
+++ b/webapp/components/Modal/DeleteModal.spec.js
@@ -8,7 +8,7 @@ const localVue = createLocalVue()
 localVue.use(Vuex)
 localVue.use(Styleguide)
 
-describe('DeleteModal', () => {
+describe('DeleteModal.vue', () => {
   let Wrapper
   let wrapper
   let propsData
diff --git a/webapp/components/Modal/DisableModal.spec.js b/webapp/components/Modal/DisableModal.spec.js
index c1cf38c60..02ae3fa5d 100644
--- a/webapp/components/Modal/DisableModal.spec.js
+++ b/webapp/components/Modal/DisableModal.spec.js
@@ -14,9 +14,12 @@ describe('DisableModal.vue', () => {
   beforeEach(() => {
     propsData = {
       type: 'contribution',
-      name: 'blah',
-      callbacks: { confirm: null, cancel: null },
       id: 'c42',
+      name: 'blah',
+      callbacks: {
+        confirm: jest.fn(),
+        cancel: jest.fn(),
+      },
     }
     mocks = {
       $filters: {
@@ -35,22 +38,34 @@ describe('DisableModal.vue', () => {
 
   describe('shallowMount', () => {
     const Wrapper = () => {
-      return shallowMount(DisableModal, { propsData, mocks, localVue })
+      return shallowMount(DisableModal, {
+        propsData,
+        mocks,
+        localVue,
+      })
     }
 
     describe('given a user', () => {
       beforeEach(() => {
         propsData = {
+          ...propsData,
           type: 'user',
-          id: 'u2',
           name: 'Bob Ross',
+          id: 'u2',
         }
       })
 
       it('mentions user name', () => {
         Wrapper()
         const calls = mocks.$t.mock.calls
-        const expected = [['disable.user.message', { name: 'Bob Ross' }]]
+        const expected = [
+          [
+            'disable.user.message',
+            {
+              name: 'Bob Ross',
+            },
+          ],
+        ]
         expect(calls).toEqual(expect.arrayContaining(expected))
       })
     })
@@ -58,16 +73,24 @@ describe('DisableModal.vue', () => {
     describe('given a contribution', () => {
       beforeEach(() => {
         propsData = {
+          ...propsData,
           type: 'contribution',
-          id: 'c3',
           name: 'This is some post title.',
+          id: 'c3',
         }
       })
 
       it('mentions contribution title', () => {
         Wrapper()
         const calls = mocks.$t.mock.calls
-        const expected = [['disable.contribution.message', { name: 'This is some post title.' }]]
+        const expected = [
+          [
+            'disable.contribution.message',
+            {
+              name: 'This is some post title.',
+            },
+          ],
+        ]
         expect(calls).toEqual(expect.arrayContaining(expected))
       })
     })
@@ -75,13 +98,18 @@ describe('DisableModal.vue', () => {
 
   describe('mount', () => {
     const Wrapper = () => {
-      return mount(DisableModal, { propsData, mocks, localVue })
+      return mount(DisableModal, {
+        propsData,
+        mocks,
+        localVue,
+      })
     }
     beforeEach(jest.useFakeTimers)
 
     describe('given id', () => {
       beforeEach(() => {
         propsData = {
+          ...propsData,
           type: 'user',
           id: 'u4711',
         }
@@ -127,7 +155,9 @@ describe('DisableModal.vue', () => {
         it('passes id to mutation', () => {
           const calls = mocks.$apollo.mutate.mock.calls
           const [[{ variables }]] = calls
-          expect(variables).toEqual({ id: 'u4711' })
+          expect(variables).toEqual({
+            id: 'u4711',
+          })
         })
 
         it('fades away', () => {
diff --git a/webapp/components/Modal/DisableModal.vue b/webapp/components/Modal/DisableModal.vue
index fe9921511..47ecce8e5 100644
--- a/webapp/components/Modal/DisableModal.vue
+++ b/webapp/components/Modal/DisableModal.vue
@@ -31,6 +31,7 @@
 import gql from 'graphql-tag'
 
 export default {
+  name: 'DisableModal',
   props: {
     name: { type: String, default: '' },
     type: { type: String, required: true },
diff --git a/webapp/components/Modal/ReportModal.spec.js b/webapp/components/Modal/ReportModal.spec.js
index 46c5a02bc..27262e998 100644
--- a/webapp/components/Modal/ReportModal.spec.js
+++ b/webapp/components/Modal/ReportModal.spec.js
@@ -17,7 +17,10 @@ describe('ReportModal.vue', () => {
     propsData = {
       type: 'contribution',
       id: 'c43',
-      callbacks: { confirm: null, cancel: null },
+      callbacks: {
+        confirm: jest.fn(),
+        cancel: jest.fn(),
+      },
     }
     mocks = {
       $t: jest.fn(),
@@ -36,7 +39,11 @@ describe('ReportModal.vue', () => {
 
   describe('shallowMount', () => {
     const Wrapper = () => {
-      return shallowMount(ReportModal, { propsData, mocks, localVue })
+      return shallowMount(ReportModal, {
+        propsData,
+        mocks,
+        localVue,
+      })
     }
 
     describe('defaults', () => {
@@ -52,17 +59,24 @@ describe('ReportModal.vue', () => {
     describe('given a user', () => {
       beforeEach(() => {
         propsData = {
+          ...propsData,
           type: 'user',
           id: 'u4',
           name: 'Bob Ross',
-          callbacks: { confirm: null, cancel: null },
         }
       })
 
       it('mentions user name', () => {
         Wrapper()
         const calls = mocks.$t.mock.calls
-        const expected = [['report.user.message', { name: 'Bob Ross' }]]
+        const expected = [
+          [
+            'report.user.message',
+            {
+              name: 'Bob Ross',
+            },
+          ],
+        ]
         expect(calls).toEqual(expect.arrayContaining(expected))
       })
     })
@@ -70,17 +84,24 @@ describe('ReportModal.vue', () => {
     describe('given a post', () => {
       beforeEach(() => {
         propsData = {
-          id: 'p23',
+          ...propsData,
           type: 'post',
+          id: 'p23',
           name: 'It is a post',
-          callbacks: { confirm: null, cancel: null },
         }
       })
 
       it('mentions post title', () => {
         Wrapper()
         const calls = mocks.$t.mock.calls
-        const expected = [['report.post.message', { name: 'It is a post' }]]
+        const expected = [
+          [
+            'report.post.message',
+            {
+              name: 'It is a post',
+            },
+          ],
+        ]
         expect(calls).toEqual(expect.arrayContaining(expected))
       })
     })
@@ -88,7 +109,11 @@ describe('ReportModal.vue', () => {
 
   describe('mount', () => {
     const Wrapper = () => {
-      return mount(ReportModal, { propsData, mocks, localVue })
+      return mount(ReportModal, {
+        propsData,
+        mocks,
+        localVue,
+      })
     }
 
     beforeEach(jest.useFakeTimers)
@@ -100,9 +125,9 @@ describe('ReportModal.vue', () => {
     describe('given id', () => {
       beforeEach(() => {
         propsData = {
+          ...propsData,
           type: 'user',
           id: 'u4711',
-          callbacks: { confirm: null, cancel: null },
         }
         wrapper = Wrapper()
       })