chore: Update specs and warnings in console (#7467)

app/javascript/dashboard/components/ModalHeader.vue

@@ -1,10 +1,17 @@
 <template>
   <div class="column page-top-bar">
     <img v-if="headerImage" :src="headerImage" alt="No image" />
-    <h2 class="text-slate-800 text-lg dark:text-slate-100">
+    <h2
+      ref="modalHeaderTitle"
+      class="text-slate-800 text-lg dark:text-slate-100"
+    >
       {{ headerTitle }}
     </h2>
-    <p v-if="headerContent" class="small-12 column wrap-content">
+    <p
+      v-if="headerContent"
+      ref="modalHeaderContent"
+      class="small-12 column wrap-content"
+    >
       {{ headerContent }}
       <span v-if="headerContentValue" class="content-value">
         {{ headerContentValue }}

app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue

@@ -10,6 +10,7 @@
     <div class="px-8 pt-4 pb-8">
       <div
         v-for="account in currentUser.accounts"
+        :id="`account-${account.id}`"
         :key="account.id"
         class="pt-0 pb-0"
       >

app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js

@@ -4,7 +4,6 @@ import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 
 import i18n from 'dashboard/i18n';
-
 import WootModal from 'dashboard/components/Modal';
 import WootModalHeader from 'dashboard/components/ModalHeader';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
@@ -38,9 +37,7 @@ describe('accountSelctor', () => {
       },
     ],
   };
-  const accountId = 1;
-  const globalConfig = { createNewAccountFromDashboard: false };
-  let store = null;
+
   let actions = null;
   let modules = null;
 
@@ -49,44 +46,46 @@ describe('accountSelctor', () => {
     modules = {
       auth: {
         getters: {
-          getCurrentAccountId: () => accountId,
+          getCurrentAccountId: () => 1,
           getCurrentUser: () => currentUser,
         },
       },
       globalConfig: {
         getters: {
-          'globalConfig/get': () => globalConfig,
+          'globalConfig/get': () => ({ createNewAccountFromDashboard: false }),
         },
       },
     };
 
-    store = new Vuex.Store({
-      actions,
-      modules,
-    });
+    let store = new Vuex.Store({ actions, modules });
     accountSelector = mount(AccountSelector, {
       store,
       localVue,
       i18n: i18nConfig,
-      propsData: {
-        showAccountModal: true,
-      },
+      propsData: { showAccountModal: true },
+      stubs: { WootButton: { template: '<button />' } },
     });
   });
 
   it('title and sub title exist', () => {
     const headerComponent = accountSelector.findComponent(WootModalHeader);
-    const topBar = headerComponent.find('.page-top-bar');
-    const titleComponent = topBar.find('.page-sub-title');
-    expect(titleComponent.text()).toBe('Switch Account');
-    const subTitleComponent = topBar.find('p');
-    expect(subTitleComponent.text()).toBe(
-      'Select an account from the following list'
-    );
+    const title = headerComponent.findComponent({ ref: 'modalHeaderTitle' });
+    expect(title.text()).toBe('Switch Account');
+    const content = headerComponent.findComponent({
+      ref: 'modalHeaderContent',
+    });
+    expect(content.text()).toBe('Select an account from the following list');
   });
 
   it('first account item is checked', () => {
-    const accountFirstItem = accountSelector.find('.account-selector svg');
-    expect(accountFirstItem.exists()).toBe(true);
+    const selectedAccountCheckmark = accountSelector.find(
+      '#account-1 > button > svg'
+    );
+    expect(selectedAccountCheckmark.exists()).toBe(true);
+
+    const otherAccountCheckmark = accountSelector.find(
+      '#account-2 > button > svg'
+    );
+    expect(otherAccountCheckmark.exists()).toBe(true);
   });
 });

app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js

@@ -19,10 +19,7 @@ localVue.component('woot-dropdown-menu', WootDropdownMenu);
 localVue.component('woot-dropdown-divider', WootDropdownDivider);
 localVue.component('woot-dropdown-item', WootDropdownItem);
 
-const i18nConfig = new VueI18n({
-  locale: 'en',
-  messages: i18n,
-});
+const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
 
 describe('AvailabilityStatus', () => {
   const currentAvailability = 'online';
@@ -48,15 +45,13 @@ describe('AvailabilityStatus', () => {
       },
     };
 
-    store = new Vuex.Store({
-      actions,
-      modules,
-    });
+    store = new Vuex.Store({ actions, modules });
 
     availabilityStatus = mount(AvailabilityStatus, {
       store,
       localVue,
       i18n: i18nConfig,
+      stubs: { WootSwitch: { template: '<button />' } },
     });
   });
 

app/javascript/dashboard/components/specs/SidemenuIcon.spec.js

@@ -3,7 +3,9 @@ import SidemenuIcon from '../SidemenuIcon';
 
 describe('SidemenuIcon', () => {
   test('matches snapshot', () => {
-    const wrapper = shallowMount(SidemenuIcon);
+    const wrapper = shallowMount(SidemenuIcon, {
+      stubs: { WootButton: { template: '<button><slot /></button>' } },
+    });
     expect(wrapper.vm).toBeTruthy();
     expect(wrapper.element).toMatchSnapshot();
   });

app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SidemenuIcon matches snapshot 1`] = `
-<woot-button
-  class="toggle-sidebar"
+<button
+  class="-ml-3 text-black-900 dark:text-slate-300"
   color-scheme="secondary"
   icon="list"
   size="small"

app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js

@@ -16,10 +16,7 @@ localVue.use(VTooltip);
 localVue.component('fluent-icon', FluentIcon);
 localVue.component('woot-button', Button);
 
-const i18nConfig = new VueI18n({
-  locale: 'en',
-  messages: i18n,
-});
+const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
 
 describe('MoveActions', () => {
   let currentChat = { id: 8, muted: false };
@@ -47,25 +44,22 @@ describe('MoveActions', () => {
     unmuteConversation = jest.fn(() => Promise.resolve());
 
     modules = {
-      conversations: {
-        actions: {
-          muteConversation,
-          unmuteConversation,
-        },
+      conversations: { actions: { muteConversation, unmuteConversation } },
+    };
+
+    getters = { getSelectedChat: () => currentChat };
+
+    store = new Vuex.Store({ state, modules, getters });
+
+    moreActions = mount(MoreActions, {
+      store,
+      localVue,
+      i18n: i18nConfig,
+      stubs: {
+        WootModal: { template: '<div><slot/> </div>' },
+        WootModalHeader: { template: '<div><slot/> </div>' },
       },
-    };
-
-    getters = {
-      getSelectedChat: () => currentChat,
-    };
-
-    store = new Vuex.Store({
-      state,
-      modules,
-      getters,
     });
-
-    moreActions = mount(MoreActions, { store, localVue, i18n: i18nConfig });
   });
 
   describe('muting discussion', () => {

app/javascript/dashboard/routes/dashboard/contacts/components/specs/AddReminder.spec.js

@@ -8,11 +8,9 @@ describe('AddReminder', () => {
     wrapper = shallowMount(AddReminder, {
       mocks: {
         $t: x => x,
-        $store: {
-          getters: {},
-          state: {},
-        },
+        $store: { getters: {}, state: {} },
       },
+      stubs: { WootButton: { template: '<button />' } },
     });
   });