refactor(webapp): remove warnings in unit tests (#8556)

* refactor(webapp): remove warnings in unit tests

webapp/__mocks__/vue/index.js

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+
+Vue.config.productionTip = false
+Vue.config.devtools = false
+
+export default Vue

webapp/components/Modal/DeleteUserModal.spec.js

@@ -6,6 +6,7 @@ const localVue = global.localVue
 const stubs = {
   'sweetalert-icon': true,
   'nuxt-link': true,
+  'client-only': true,
 }
 
 localVue.use(DeleteUserModal)

webapp/components/generic/SearchableInput/SearchableInput.spec.js

@@ -11,6 +11,7 @@ localVue.filter('dateTime', () => Date.now)
 
 const stubs = {
   'nuxt-link': true,
+  'client-only': true,
 }
 
 describe('SearchableInput.vue', () => {

webapp/layouts/default.spec.js

@@ -40,6 +40,9 @@ describe('default.vue', () => {
           return { showChat: false, roomID: null }
         },
       },
+      mutations: {
+        'chat/SET_OPEN_CHAT': jest.fn(),
+      },
     })
   })
 

webapp/pages/settings/__snapshots__/notifications.spec.js.snap

@@ -1,202 +1,53 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`notifications.vue mount renders 1`] = `
-<article
+<article class="base-card">
-  class="base-card"
+  <h2 class="title">settings.notifications.name</h2>
->
+  <div class="ds-space" style="margin-top: 16px; margin-bottom: 16px;">
-  <h2
+    <div class="ds-space" style="margin-bottom: 8px;">
-    class="title"
+      <h4>settings.notifications.post</h4>
-  >
-    settings.notifications.name
-  </h2>
-   
-  <div
-    class="ds-space"
-    style="margin-top: 16px; margin-bottom: 16px;"
-  >
-    <div
-      class="ds-space"
-      style="margin-bottom: 8px;"
-    >
-      <h4>
-        settings.notifications.post
-      </h4>
     </div>
-     
+    <div class="notifcation-settings-section">
-    <div
+      <div class="ds-space" style="margin-bottom: 8px;"><input id="commentOnObservedPost" type="checkbox"> <label for="commentOnObservedPost" class="label">
-      class="notifcation-settings-section"
-    >
-      <div
-        class="ds-space"
-        style="margin-bottom: 8px;"
-      >
-        <input
-          id="commentOnObservedPost"
-          type="checkbox"
-        />
-         
-        <label
-          class="label"
-          for="commentOnObservedPost"
-        >
-          
           settings.notifications.commentOnObservedPost
-        
+        </label></div>
-        </label>
+      <div class="ds-space" style="margin-bottom: 8px;"><input id="mention" type="checkbox"> <label for="mention" class="label">
-      </div>
-      <div
-        class="ds-space"
-        style="margin-bottom: 8px;"
-      >
-        <input
-          id="mention"
-          type="checkbox"
-        />
-         
-        <label
-          class="label"
-          for="mention"
-        >
-          
           settings.notifications.mention
-        
+        </label></div>
-        </label>
-      </div>
     </div>
   </div>
-  <div
+  <div class="ds-space" style="margin-top: 16px; margin-bottom: 16px;">
-    class="ds-space"
+    <div class="ds-space" style="margin-bottom: 8px;">
-    style="margin-top: 16px; margin-bottom: 16px;"
+      <h4>settings.notifications.group</h4>
-  >
-    <div
-      class="ds-space"
-      style="margin-bottom: 8px;"
-    >
-      <h4>
-        settings.notifications.group
-      </h4>
     </div>
-     
+    <div class="notifcation-settings-section">
-    <div
+      <div class="ds-space" style="margin-bottom: 8px;"><input id="groupMemberJoined" type="checkbox"> <label for="groupMemberJoined" class="label">
-      class="notifcation-settings-section"
-    >
-      <div
-        class="ds-space"
-        style="margin-bottom: 8px;"
-      >
-        <input
-          id="groupMemberJoined"
-          type="checkbox"
-        />
-         
-        <label
-          class="label"
-          for="groupMemberJoined"
-        >
-          
           settings.notifications.groupMemberJoined
-        
+        </label></div>
-        </label>
+      <div class="ds-space" style="margin-bottom: 8px;"><input id="groupMemberLeft" type="checkbox"> <label for="groupMemberLeft" class="label">
-      </div>
-      <div
-        class="ds-space"
-        style="margin-bottom: 8px;"
-      >
-        <input
-          id="groupMemberLeft"
-          type="checkbox"
-        />
-         
-        <label
-          class="label"
-          for="groupMemberLeft"
-        >
-          
           settings.notifications.groupMemberLeft
-        
+        </label></div>
-        </label>
+      <div class="ds-space" style="margin-bottom: 8px;"><input id="groupMemberRemoved" type="checkbox"> <label for="groupMemberRemoved" class="label">
-      </div>
-      <div
-        class="ds-space"
-        style="margin-bottom: 8px;"
-      >
-        <input
-          id="groupMemberRemoved"
-          type="checkbox"
-        />
-         
-        <label
-          class="label"
-          for="groupMemberRemoved"
-        >
-          
           settings.notifications.groupMemberRemoved
-        
+        </label></div>
-        </label>
+      <div class="ds-space" style="margin-bottom: 8px;"><input id="groupMemberRoleChanged" type="checkbox"> <label for="groupMemberRoleChanged" class="label">
-      </div>
-      <div
-        class="ds-space"
-        style="margin-bottom: 8px;"
-      >
-        <input
-          id="groupMemberRoleChanged"
-          type="checkbox"
-        />
-         
-        <label
-          class="label"
-          for="groupMemberRoleChanged"
-        >
-          
           settings.notifications.groupMemberRoleChanged
-        
+        </label></div>
-        </label>
-      </div>
     </div>
   </div>
-   
+  <div class="ds-space" style="margin-top: 24px; margin-bottom: 8px;"><button type="button" class="base-button">
-  <div
-    class="ds-space"
-    style="margin-top: 24px; margin-bottom: 8px;"
-  >
-    <button
-      class="base-button"
-      type="button"
-    >
       <!---->
-       
       <!---->
-       
       settings.notifications.checkAll
-    
+    </button> <button type="button" class="base-button">
-    </button>
-     
-    <button
-      class="base-button"
-      type="button"
-    >
       <!---->
-       
       <!---->
-       
       settings.notifications.uncheckAll
-    
+    </button> <button disabled="disabled" type="button" class="save-button base-button --filled">
-    </button>
-     
-    <button
-      class="save-button base-button --filled"
-      disabled="disabled"
-      type="button"
-    >
       <!---->
-       
       <!---->
-       
       actions.save
-    
+    </button></div>
-    </button>
-  </div>
-   
   <!---->
 </article>
 `;

webapp/pages/settings/notifications.spec.js

@@ -1,12 +1,10 @@
 import Vuex from 'vuex'
-import { mount } from '@vue/test-utils'
 import { render, fireEvent, screen } from '@testing-library/vue'
 import Notifications from './notifications.vue'
 
 const localVue = global.localVue
 
 describe('notifications.vue', () => {
-  let wrapper
   let mocks
   let store
 
@@ -70,20 +68,14 @@ describe('notifications.vue', () => {
   })
 
   describe('mount', () => {
-    const Wrapper = () => {
-      return mount(Notifications, {
-        store,
-        mocks,
-        localVue,
-      })
-    }
-
-    beforeEach(() => {
-      wrapper = Wrapper()
-    })
-
     it('renders', () => {
-      expect(wrapper.element).toMatchSnapshot()
+      expect(
+        render(Notifications, {
+          store,
+          mocks,
+          localVue,
+        }),
+      ).toMatchSnapshot()
     })
   })