From 903ce7071fbab3662240ca14f9a8b1e0beddb34e Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 28 May 2025 00:10:58 +0200
Subject: [PATCH] refactor(webapp): remove warnings in unit tests (#8556)

* refactor(webapp): remove warnings in unit tests
---
 webapp/__mocks__/vue/index.js                 |   6 +
 .../components/Modal/DeleteUserModal.spec.js  |   1 +
 .../SearchableInput/SearchableInput.spec.js   |   1 +
 webapp/layouts/default.spec.js                |   3 +
 .../__snapshots__/notifications.spec.js.snap  | 201 +++---------------
 webapp/pages/settings/notifications.spec.js   |  22 +-
 6 files changed, 44 insertions(+), 190 deletions(-)
 create mode 100644 webapp/__mocks__/vue/index.js

diff --git a/webapp/__mocks__/vue/index.js b/webapp/__mocks__/vue/index.js
new file mode 100644
index 000000000..8d3322f81
--- /dev/null
+++ b/webapp/__mocks__/vue/index.js
@@ -0,0 +1,6 @@
+import Vue from 'vue'
+
+Vue.config.productionTip = false
+Vue.config.devtools = false
+
+export default Vue
diff --git a/webapp/components/Modal/DeleteUserModal.spec.js b/webapp/components/Modal/DeleteUserModal.spec.js
index 1a1c152cd..b639c6a15 100644
--- a/webapp/components/Modal/DeleteUserModal.spec.js
+++ b/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)
diff --git a/webapp/components/generic/SearchableInput/SearchableInput.spec.js b/webapp/components/generic/SearchableInput/SearchableInput.spec.js
index 223ee6186..c5fc4b072 100644
--- a/webapp/components/generic/SearchableInput/SearchableInput.spec.js
+++ b/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', () => {
diff --git a/webapp/layouts/default.spec.js b/webapp/layouts/default.spec.js
index cce8c2eca..03a53da84 100644
--- a/webapp/layouts/default.spec.js
+++ b/webapp/layouts/default.spec.js
@@ -40,6 +40,9 @@ describe('default.vue', () => {
           return { showChat: false, roomID: null }
         },
       },
+      mutations: {
+        'chat/SET_OPEN_CHAT': jest.fn(),
+      },
     })
   })
 
diff --git a/webapp/pages/settings/__snapshots__/notifications.spec.js.snap b/webapp/pages/settings/__snapshots__/notifications.spec.js.snap
index fd2c2f56c..2078c26a2 100644
--- a/webapp/pages/settings/__snapshots__/notifications.spec.js.snap
+++ b/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
-  class="base-card"
->
-  <h2
-    class="title"
-  >
-    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>
+<article class="base-card">
+  <h2 class="title">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
-        class="ds-space"
-        style="margin-bottom: 8px;"
-      >
-        <input
-          id="commentOnObservedPost"
-          type="checkbox"
-        />
-         
-        <label
-          class="label"
-          for="commentOnObservedPost"
-        >
-          
+    <div class="notifcation-settings-section">
+      <div class="ds-space" style="margin-bottom: 8px;"><input id="commentOnObservedPost" type="checkbox"> <label for="commentOnObservedPost" class="label">
           settings.notifications.commentOnObservedPost
-        
-        </label>
-      </div>
-      <div
-        class="ds-space"
-        style="margin-bottom: 8px;"
-      >
-        <input
-          id="mention"
-          type="checkbox"
-        />
-         
-        <label
-          class="label"
-          for="mention"
-        >
-          
+        </label></div>
+      <div class="ds-space" style="margin-bottom: 8px;"><input id="mention" type="checkbox"> <label for="mention" class="label">
           settings.notifications.mention
-        
-        </label>
-      </div>
+        </label></div>
     </div>
   </div>
-  <div
-    class="ds-space"
-    style="margin-top: 16px; margin-bottom: 16px;"
-  >
-    <div
-      class="ds-space"
-      style="margin-bottom: 8px;"
-    >
-      <h4>
-        settings.notifications.group
-      </h4>
+  <div class="ds-space" style="margin-top: 16px; margin-bottom: 16px;">
+    <div class="ds-space" style="margin-bottom: 8px;">
+      <h4>settings.notifications.group</h4>
     </div>
-     
-    <div
-      class="notifcation-settings-section"
-    >
-      <div
-        class="ds-space"
-        style="margin-bottom: 8px;"
-      >
-        <input
-          id="groupMemberJoined"
-          type="checkbox"
-        />
-         
-        <label
-          class="label"
-          for="groupMemberJoined"
-        >
-          
+    <div class="notifcation-settings-section">
+      <div class="ds-space" style="margin-bottom: 8px;"><input id="groupMemberJoined" type="checkbox"> <label for="groupMemberJoined" class="label">
           settings.notifications.groupMemberJoined
-        
-        </label>
-      </div>
-      <div
-        class="ds-space"
-        style="margin-bottom: 8px;"
-      >
-        <input
-          id="groupMemberLeft"
-          type="checkbox"
-        />
-         
-        <label
-          class="label"
-          for="groupMemberLeft"
-        >
-          
+        </label></div>
+      <div class="ds-space" style="margin-bottom: 8px;"><input id="groupMemberLeft" type="checkbox"> <label for="groupMemberLeft" class="label">
           settings.notifications.groupMemberLeft
-        
-        </label>
-      </div>
-      <div
-        class="ds-space"
-        style="margin-bottom: 8px;"
-      >
-        <input
-          id="groupMemberRemoved"
-          type="checkbox"
-        />
-         
-        <label
-          class="label"
-          for="groupMemberRemoved"
-        >
-          
+        </label></div>
+      <div class="ds-space" style="margin-bottom: 8px;"><input id="groupMemberRemoved" type="checkbox"> <label for="groupMemberRemoved" class="label">
           settings.notifications.groupMemberRemoved
-        
-        </label>
-      </div>
-      <div
-        class="ds-space"
-        style="margin-bottom: 8px;"
-      >
-        <input
-          id="groupMemberRoleChanged"
-          type="checkbox"
-        />
-         
-        <label
-          class="label"
-          for="groupMemberRoleChanged"
-        >
-          
+        </label></div>
+      <div class="ds-space" style="margin-bottom: 8px;"><input id="groupMemberRoleChanged" type="checkbox"> <label for="groupMemberRoleChanged" class="label">
           settings.notifications.groupMemberRoleChanged
-        
-        </label>
-      </div>
+        </label></div>
     </div>
   </div>
-   
-  <div
-    class="ds-space"
-    style="margin-top: 24px; margin-bottom: 8px;"
-  >
-    <button
-      class="base-button"
-      type="button"
-    >
+  <div class="ds-space" style="margin-top: 24px; margin-bottom: 8px;"><button type="button" class="base-button">
       <!---->
-       
       <!---->
-       
       settings.notifications.checkAll
-    
-    </button>
-     
-    <button
-      class="base-button"
-      type="button"
-    >
+    </button> <button type="button" class="base-button">
       <!---->
-       
       <!---->
-       
       settings.notifications.uncheckAll
-    
-    </button>
-     
-    <button
-      class="save-button base-button --filled"
-      disabled="disabled"
-      type="button"
-    >
+    </button> <button disabled="disabled" type="button" class="save-button base-button --filled">
       <!---->
-       
       <!---->
-       
       actions.save
-    
-    </button>
-  </div>
-   
+    </button></div>
   <!---->
 </article>
 `;
diff --git a/webapp/pages/settings/notifications.spec.js b/webapp/pages/settings/notifications.spec.js
index a16e99ed4..4576d4a53 100644
--- a/webapp/pages/settings/notifications.spec.js
+++ b/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()
     })
   })