Fix vue warnings

- localVue.use(Styleguide) to register components
- find masonryGrid and emit event

- Co-authored-by: Alina Beck <alina.beck@mail.com>
- Co-authored-by: Joseph Ngugi <jngugi88@gmail.com>

webapp/components/MasonryGrid/MasonryGrid.spec.js

@@ -1,22 +1,28 @@
-import { shallowMount } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
+import Styleguide from '@human-connection/styleguide'
 import MasonryGrid from './MasonryGrid'
 
+const localVue = createLocalVue()
+localVue.use(Styleguide)
+
 describe('MasonryGrid', () => {
   let wrapper
+  let masonryGrid
 
   beforeEach(() => {
-    wrapper = shallowMount(MasonryGrid)
+    wrapper = mount(MasonryGrid, { localVue })
+    masonryGrid = wrapper.vm.$children[0]
   })
 
   it('adds the "reset-grid-height" class when one or more children are updating', () => {
-    wrapper.trigger('calculating-item-height')
+    masonryGrid.$emit('calculating-item-height')
 
     expect(wrapper.classes()).toContain('reset-grid-height')
   })
 
   it('removes the "reset-grid-height" class when all children have completed updating', () => {
     wrapper.setData({ itemsCalculating: 1 })
-    wrapper.trigger('finished-calculating-item-height')
+    masonryGrid.$emit('finished-calculating-item-height')
 
     expect(wrapper.classes()).not.toContain('reset-grid-height')
   })

webapp/components/MasonryGrid/MasonryGridItem.spec.js

@@ -1,11 +1,17 @@
-import { shallowMount } from '@vue/test-utils'
+import { config, shallowMount, createLocalVue } from '@vue/test-utils'
+import Styleguide from '@human-connection/styleguide'
 import MasonryGridItem from './MasonryGridItem'
 
+const localVue = createLocalVue()
+localVue.use(Styleguide)
+
+config.stubs['ds-grid-item'] = '<span><slot /></span>'
+
 describe('MasonryGridItem', () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallowMount(MasonryGridItem)
+    wrapper = shallowMount(MasonryGridItem, { localVue })
     wrapper.vm.$parent.$emit = jest.fn()
   })