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

chatwoot · Jul 6, 2023 · 4e8d17f · 4e8d17f
1 parent 3054a4c
commit 4e8d17f
Show file tree

Hide file tree

Showing 12 changed files with 99 additions and 120 deletions.
diff --git a/.circleci/config.yml b/.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:
@@ -104,9 +104,8 @@ jobs:
             fi
             curl -L https://repo1.maven.org/maven2/org/openapitools/openapi-generator-cli/6.3.0/openapi-generator-cli-6.3.0.jar > ~/tmp/openapi-generator-cli-6.3.0.jar
             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
 
@@ -117,7 +116,7 @@ jobs:
       - run:
           name: Rubocop
           command: bundle exec rubocop
-      
+
       # - run:
       #     name: Brakeman
       #     command: bundle exec brakeman
@@ -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:

diff --git a/app/javascript/dashboard/components/ModalHeader.vue b/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 }}

diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue b/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"
       >

diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js b/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);
   });
 });
diff --git a/app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js b/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 />' } },
     });
   });
 

diff --git a/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js b/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();
   });

diff --git a/app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap b/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"

diff --git a/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js b/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 });
+    moreActions = mount(MoreActions, {
+      store,
+      localVue,
+      i18n: i18nConfig,
+      stubs: {
+        WootModal: { template: '<div><slot/> </div>' },
+        WootModalHeader: { template: '<div><slot/> </div>' },
+      },
+    });
   });
 
   describe('muting discussion', () => {

diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/specs/AddReminder.spec.js b/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 />' } },
     });
   });
 

diff --git a/app/javascript/shared/components/specs/DateSeparator.spec.js b/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],
     });