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

.circleci/config.yml

@@ -73,7 +73,7 @@ jobs:
 
       - run:
           name: yarn
-          command: yarn install --cache-folder ~/.cache/yarn
+          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
 
       # Store yarn / webpacker cache
       - save_cache:
@@ -106,7 +106,6 @@ jobs:
             java -jar ~/tmp/openapi-generator-cli-6.3.0.jar validate -i swagger/swagger.json
 
       # Database setup
-      - run: yarn install --check-files
       - run: bundle exec rake db:create
       - run: bundle exec rake db:schema:load
 
@@ -126,6 +125,21 @@ jobs:
           name: eslint
           command: yarn run eslint
 
+      # Run frontend tests
+      - run:
+          name: Run frontend tests
+          command: |
+            mkdir -p ~/tmp/test-results/frontend_specs
+            ~/tmp/cc-test-reporter before-build
+            TESTFILES=$(circleci tests glob **/specs/*.spec.js | circleci tests split --split-by=timings)
+            yarn test:coverage --profile 10 \
+                               --out ~/tmp/test-results/yarn.xml \
+                               -- ${TESTFILES}
+      - run:
+          name: Code Climate Test Coverage
+          command: |
+            ~/tmp/cc-test-reporter format-coverage -t lcov -o "coverage/codeclimate.frontend_$CIRCLE_NODE_INDEX.json"
+
       # Run rails tests
       - run:
           name: Run backend tests
@@ -145,20 +159,6 @@ jobs:
           command: |
             ~/tmp/cc-test-reporter format-coverage -t simplecov -o "coverage/codeclimate.$CIRCLE_NODE_INDEX.json"
 
-      - run:
-          name: Run frontend tests
-          command: |
-            mkdir -p ~/tmp/test-results/frontend_specs
-            ~/tmp/cc-test-reporter before-build
-            TESTFILES=$(circleci tests glob **/specs/*.spec.js | circleci tests split --split-by=timings)
-            yarn test:coverage --profile 10 \
-                               --out ~/tmp/test-results/yarn.xml \
-                               -- ${TESTFILES}
-      - run:
-          name: Code Climate Test Coverage
-          command: |
-            ~/tmp/cc-test-reporter format-coverage -t lcov -o "coverage/codeclimate.frontend_$CIRCLE_NODE_INDEX.json"  
-            
       - persist_to_workspace:
           root: coverage
           paths:

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,
-    };
+    getters = { getSelectedChat: () => currentChat };
 
-    store = new Vuex.Store({
-      state,
-      modules,
-      getters,
+    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>' },
+      },
     });
-
-    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 />' } },
     });
   });
 

app/javascript/shared/components/specs/DateSeparator.spec.js

@@ -37,9 +37,8 @@ describe('dateSeparator', () => {
     dateSeparator = shallowMount(DateSeparator, {
       store,
       localVue,
-      propsData: {
-        date: 'Nov 18, 2019',
-      },
+      propsData: { date: 'Nov 18, 2019' },
+      mocks: { $t: msg => msg },
       i18n: i18nConfig,
       mixins: [darkModeMixin],
     });

app/javascript/shared/mixins/specs/whatsappTemplates/whatsappTemplates.spec.js

@@ -1,52 +1,45 @@
 import TemplateParser from '../../../../dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue';
-import { mount, createLocalVue } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { templates } from './fixtures';
 const localVue = createLocalVue();
 import VueI18n from 'vue-i18n';
-import Vue from 'vue';
-
 import Vuelidate from 'vuelidate';
-Vue.use(Vuelidate);
-
 import i18n from 'dashboard/i18n';
 
 localVue.use(VueI18n);
+localVue.use(Vuelidate);
 
-const i18nConfig = new VueI18n({
-  locale: 'en',
-  messages: i18n,
-});
+const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
+const config = {
+  localVue,
+  i18n: i18nConfig,
+  stubs: {
+    WootButton: { template: '<button />' },
+    WootInput: { template: '<input />' },
+  },
+};
 
 describe('#WhatsAppTemplates', () => {
   it('returns all variables from a template string', () => {
-    const wrapper = mount(TemplateParser, {
-      localVue,
-      propsData: {
-        template: templates[0],
-      },
-      i18n: i18nConfig,
+    const wrapper = shallowMount(TemplateParser, {
+      ...config,
+      propsData: { template: templates[0] },
     });
     expect(wrapper.vm.variables).toEqual(['{{1}}', '{{2}}', '{{3}}']);
   });
 
   it('returns no variables from a template string if it does not contain variables', () => {
-    const wrapper = mount(TemplateParser, {
-      localVue,
-      propsData: {
-        template: templates[12],
-      },
-      i18n: i18nConfig,
+    const wrapper = shallowMount(TemplateParser, {
+      ...config,
+      propsData: { template: templates[12] },
     });
     expect(wrapper.vm.variables).toBeNull();
   });
 
   it('returns the body of a template', () => {
-    const wrapper = mount(TemplateParser, {
-      localVue,
-      propsData: {
-        template: templates[1],
-      },
-      i18n: i18nConfig,
+    const wrapper = shallowMount(TemplateParser, {
+      ...config,
+      propsData: { template: templates[1] },
     });
     const expectedOutput = templates[1].components.find(i => i.type === 'BODY')
       .text;
@@ -54,17 +47,12 @@ describe('#WhatsAppTemplates', () => {
   });
 
   it('generates the templates from variable input', async () => {
-    const wrapper = mount(TemplateParser, {
-      localVue,
-      propsData: {
-        template: templates[0],
-      },
+    const wrapper = shallowMount(TemplateParser, {
+      ...config,
+      propsData: { template: templates[0] },
       data: () => {
-        return {
-          processedParams: {},
-        };
+        return { processedParams: {} };
       },
-      i18n: i18nConfig,
     });
     await wrapper.setData({
       processedParams: { '1': 'abc', '2': 'xyz', '3': 'qwerty' },

app/javascript/v3/components/GoogleOauth/Button.spec.js

@@ -4,11 +4,7 @@ import GoogleOAuthButton from './Button.vue';
 function getWrapper(showSeparator) {
   return shallowMount(GoogleOAuthButton, {
     propsData: { showSeparator: showSeparator },
-    methods: {
-      $t(text) {
-        return text;
-      },
-    },
+    mocks: { $t: text => text },
   });
 }