get all components tests running

webapp/components/Badges.spec.js

@@ -14,7 +14,7 @@ describe('Badges.vue', () => {
     }
 
     it('has class "hc-badges"', () => {
-      expect(Wrapper().contains('.hc-badges')).toBe(true)
+      expect(Wrapper().find('.hc-badges').exists()).toBe(true)
     })
 
     describe('given a badge', () => {
@@ -23,7 +23,7 @@ describe('Badges.vue', () => {
       })
 
       it('proxies badge icon, which is just a URL without metadata', () => {
-        expect(Wrapper().contains('img[src="/api/path/to/some/icon"]')).toBe(true)
+        expect(Wrapper().find('img[src="/api/path/to/some/icon"]').exists()).toBe(true)
       })
     })
   })

webapp/components/Category/index.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 
 import Category from './index'
 
@@ -9,7 +9,7 @@ describe('Category', () => {
   let name
 
   const Wrapper = () => {
-    return shallowMount(Category, {
+    return mount(Category, {
       localVue,
       propsData: {
         icon,
@@ -27,8 +27,9 @@ describe('Category', () => {
     it('shows Name', () => {
       expect(Wrapper().text()).toContain('Peter')
     })
-    it('shows Icon Svg', () => {
+
-      expect(Wrapper().contains('svg'))
+    it('shows base icon', () => {
+      expect(Wrapper().find('.base-icon').exists()).toBe(true)
     })
   })
 })

webapp/components/ContentMenu/GroupContentMenu.spec.js

@@ -1,9 +1,13 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import GroupContentMenu from './GroupContentMenu.vue'
 
 const localVue = global.localVue
 
-config.stubs['router-link'] = '<span><slot /></span>'
+const stubs = {
+  'router-link': {
+    template: '<span><slot /></span>',
+  },
+}
 
 const propsData = {
   usage: 'groupTeaser',
@@ -24,7 +28,7 @@ describe('GroupContentMenu', () => {
 
   describe('mount', () => {
     const Wrapper = () => {
-      return mount(GroupContentMenu, { propsData, mocks, localVue })
+      return mount(GroupContentMenu, { propsData, mocks, localVue, stubs })
     }
 
     beforeEach(() => {

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -166,7 +166,7 @@ describe('ContributionForm.vue', () => {
             .mockImplementation(function () {
               this.onload({ target: { result: 'someUrlToImage' } })
             })
-          wrapper.find(ImageUploader).vm.$emit('addHeroImage', imageUpload)
+          wrapper.findComponent(ImageUploader).vm.$emit('addHeroImage', imageUpload)
           await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
           expect(spy).toHaveBeenCalledWith(imageUpload)

webapp/components/Editor/nodes/Embed.spec.js

@@ -42,7 +42,7 @@ describe('Embed.vue', () => {
         propsData.node = { attrs: { href: 'https://www.youtube.com/watch?v=qkdXAtO40Fo' } }
         const wrapper = Wrapper({ propsData })
         await wrapper.html()
-        expect(wrapper.contains('embed-component-stub')).toBe(true)
+        expect(wrapper.find('embed-component-stub').exists()).toBe(true)
       })
     })
 

webapp/components/InviteButton/InviteButton.spec.js

@@ -2,7 +2,9 @@ import { mount } from '@vue/test-utils'
 import InviteButton from './InviteButton.vue'
 
 const stubs = {
-  'v-popover': true,
+  'v-popover': {
+    template: '<span><slot /></span>',
+  },
 }
 
 describe('InviteButton.vue', () => {
@@ -32,12 +34,12 @@ describe('InviteButton.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.contains('.invite-button')).toBe(true)
+      expect(wrapper.find('.invite-button').exists()).toBe(true)
     })
 
     it('open popup', () => {
       wrapper.find('.base-button').trigger('click')
-      expect(wrapper.contains('.invite-button')).toBe(true)
+      expect(wrapper.find('.invite-button').exists()).toBe(true)
     })
 
     it('invite codes not available', async () => {

webapp/components/LoginButton/LoginButton.spec.js

@@ -3,6 +3,7 @@ import LoginButton from './LoginButton.vue'
 
 const stubs = {
   'v-popover': true,
+  'nuxt-link': true,
 }
 
 describe('LoginButton.vue', () => {
@@ -32,12 +33,12 @@ describe('LoginButton.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.contains('.login-button')).toBe(true)
+      expect(wrapper.find('.login-button').exists()).toBe(true)
     })
 
     it('open popup', () => {
       wrapper.find('.base-button').trigger('click')
-      expect(wrapper.contains('.login-button')).toBe(true)
+      expect(wrapper.find('.login-button').exists()).toBe(true)
     })
   })
 })

webapp/components/Modal.spec.js

@@ -57,9 +57,9 @@ describe('Modal.vue', () => {
 
     it('initially empty', () => {
       wrapper = Wrapper()
-      expect(wrapper.contains(ConfirmModal)).toBe(false)
+      expect(wrapper.findComponent(ConfirmModal).exists()).toBe(false)
-      expect(wrapper.contains(DisableModal)).toBe(false)
+      expect(wrapper.findComponent(DisableModal).exists()).toBe(false)
-      expect(wrapper.contains(ReportModal)).toBe(false)
+      expect(wrapper.findComponent(ReportModal).exists()).toBe(false)
     })
 
     describe('store/modal holds data to disable', () => {
@@ -78,11 +78,11 @@ describe('Modal.vue', () => {
       })
 
       it('renders disable modal', () => {
-        expect(wrapper.contains(DisableModal)).toBe(true)
+        expect(wrapper.findComponent(DisableModal).exists()).toBe(true)
       })
 
       it('passes data to disable modal', () => {
-        expect(wrapper.find(DisableModal).props()).toEqual({
+        expect(wrapper.findComponent(DisableModal).props()).toEqual({
           type: 'contribution',
           name: 'some title',
           id: 'c456',
@@ -91,9 +91,9 @@ describe('Modal.vue', () => {
 
       describe('child component emits close', () => {
         it('turns empty', async () => {
-          wrapper.find(DisableModal).vm.$emit('close')
+          wrapper.findComponent(DisableModal).vm.$emit('close')
           await Vue.nextTick()
-          expect(wrapper.contains(DisableModal)).toBe(false)
+          expect(wrapper.findComponent(DisableModal).exists()).toBe(false)
         })
       })
 
@@ -109,7 +109,7 @@ describe('Modal.vue', () => {
             },
           }
           wrapper = Wrapper()
-          expect(wrapper.find(DisableModal).props()).toEqual({
+          expect(wrapper.findComponent(DisableModal).props()).toEqual({
             type: 'comment',
             name: 'Author name',
             id: 'c456',
@@ -124,7 +124,7 @@ describe('Modal.vue', () => {
             },
           }
           wrapper = Wrapper()
-          expect(wrapper.find(DisableModal).props()).toEqual({
+          expect(wrapper.findComponent(DisableModal).props()).toEqual({
             type: 'comment',
             name: '',
             id: 'c456',
@@ -142,7 +142,7 @@ describe('Modal.vue', () => {
             },
           }
           wrapper = Wrapper()
-          expect(wrapper.find(DisableModal).props()).toEqual({
+          expect(wrapper.findComponent(DisableModal).props()).toEqual({
             type: 'user',
             name: 'Username',
             id: 'u456',
@@ -160,7 +160,7 @@ describe('Modal.vue', () => {
             },
           }
           wrapper = Wrapper()
-          expect(wrapper.find(DisableModal).props()).toEqual({
+          expect(wrapper.findComponent(DisableModal).props()).toEqual({
             type: 'something',
             name: null,
             id: 's456',

webapp/components/NotificationList/NotificationList.spec.js

@@ -52,7 +52,7 @@ describe('NotificationList.vue', () => {
     })
 
     it('renders Notification.vue for each notification of the user', () => {
-      expect(wrapper.findAll(Notification)).toHaveLength(2)
+      expect(wrapper.findAllComponents(Notification)).toHaveLength(2)
     })
   })
 
@@ -97,7 +97,7 @@ describe('NotificationList.vue', () => {
     })
 
     it('renders Notification.vue zero times', () => {
-      expect(wrapper.findAll(Notification)).toHaveLength(0)
+      expect(wrapper.findAllComponents(Notification)).toHaveLength(0)
     })
   })
 })

webapp/components/PasswordReset/Request.spec.js

@@ -22,7 +22,7 @@ describe('Request', () => {
       },
     }
     stubs = {
-      LocaleSwitch: "<div class='stub'></div>",
+      LocaleSwitch: true,
       'sweetalert-icon': true,
       'client-only': true,
       'nuxt-link': true,

webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js

@@ -19,7 +19,7 @@ describe('CounterIcon.vue', () => {
     })
 
     it('renders the icon', () => {
-      expect(wrapper.find(BaseIcon).exists()).toBe(true)
+      expect(wrapper.findComponent(BaseIcon).exists()).toBe(true)
     })
 
     it('renders the count', () => {
@@ -35,7 +35,7 @@ describe('CounterIcon.vue', () => {
     })
 
     it('renders the icon', () => {
-      expect(wrapper.find(BaseIcon).exists()).toBe(true)
+      expect(wrapper.findComponent(BaseIcon).exists()).toBe(true)
     })
 
     it('renders the capped count with a plus', () => {

webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.spec.js

@@ -20,7 +20,7 @@ describe('ProfileAvatar', () => {
   })
 
   it('renders an icon', () => {
-    expect(wrapper.find(BaseIcon).exists()).toBe(true)
+    expect(wrapper.findComponent(BaseIcon).exists()).toBe(true)
   })
 
   describe('given a profile', () => {
@@ -38,7 +38,7 @@ describe('ProfileAvatar', () => {
         it('renders an icon', () => {
           propsData = { profile: { name: null } }
           wrapper = Wrapper()
-          expect(wrapper.find(BaseIcon).exists()).toBe(true)
+          expect(wrapper.findComponent(BaseIcon).exists()).toBe(true)
         })
       })
 
@@ -46,7 +46,7 @@ describe('ProfileAvatar', () => {
         it('renders an icon', () => {
           propsData = { profile: { name: 'Anonymous' } }
           wrapper = Wrapper()
-          expect(wrapper.find(BaseIcon).exists()).toBe(true)
+          expect(wrapper.findComponent(BaseIcon).exists()).toBe(true)
         })
       })
 

webapp/components/features/ReportList/ReportList.spec.js

@@ -56,11 +56,11 @@ describe('ReportList', () => {
       })
 
       it('renders DropdownFilter', () => {
-        expect(wrapper.find(DropdownFilter).exists()).toBe(true)
+        expect(wrapper.findComponent(DropdownFilter).exists()).toBe(true)
       })
 
       it('renders ReportsTable', () => {
-        expect(wrapper.find(ReportsTable).exists()).toBe(true)
+        expect(wrapper.findComponent(ReportsTable).exists()).toBe(true)
       })
     })
 
@@ -68,7 +68,7 @@ describe('ReportList', () => {
       beforeEach(async () => {
         wrapper = Wrapper()
         wrapper.setData({ reports })
-        wrapper.find(ReportsTable).vm.$emit('confirm', reports[0])
+        wrapper.findComponent(ReportsTable).vm.$emit('confirm', reports[0])
       })
 
       it('calls modal/SET_OPEN', () => {

webapp/components/features/ReportRow/ReportRow.spec.js

@@ -84,7 +84,9 @@ describe('ReportRow', () => {
           wrapper = Wrapper()
         })
         it('renders the disabled icon', () => {
-          expect(wrapper.find('.status-line').find(BaseIcon).props().name).toEqual('eye-slash')
+          expect(wrapper.find('.status-line').findComponent(BaseIcon).props().name).toEqual(
+            'eye-slash',
+          )
         })
 
         it('renders its current status', () => {
@@ -98,7 +100,7 @@ describe('ReportRow', () => {
           wrapper = Wrapper()
         })
         it('renders the enabled icon', () => {
-          expect(wrapper.find('.status-line').find(BaseIcon).props().name).toEqual('eye')
+          expect(wrapper.find('.status-line').findComponent(BaseIcon).props().name).toEqual('eye')
         })
 
         it('renders its current status', () => {
@@ -119,7 +121,7 @@ describe('ReportRow', () => {
       })
 
       it('renders a comments icon', () => {
-        const commentsIcon = wrapper.find(BaseIcon).props().name
+        const commentsIcon = wrapper.findComponent(BaseIcon).props().name
         expect(commentsIcon).toEqual('comments')
       })
 
@@ -141,7 +143,7 @@ describe('ReportRow', () => {
       })
 
       it('renders a bookmark icon', () => {
-        const postIcon = wrapper.find(BaseIcon).props().name
+        const postIcon = wrapper.findComponent(BaseIcon).props().name
         expect(postIcon).toEqual('bookmark')
       })
 
@@ -163,7 +165,7 @@ describe('ReportRow', () => {
       })
 
       it('renders a user icon', () => {
-        const userIcon = wrapper.find(BaseIcon).props().name
+        const userIcon = wrapper.findComponent(BaseIcon).props().name
         expect(userIcon).toEqual('user')
       })
 

webapp/components/features/SearchField/SearchField.spec.js

@@ -36,7 +36,7 @@ describe('SearchField.vue', () => {
     describe('Emitted events', () => {
       let searchableInputComponent
       beforeEach(() => {
-        searchableInputComponent = wrapper.find(SearchableInput)
+        searchableInputComponent = wrapper.findComponent(SearchableInput)
       })
 
       describe('query event', () => {