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

2025-10-29 18:22:53 +00:00 · 2023-07-05 18:32:55 -07:00
parent 3054a4cb59
commit 4e8d17f017
12 changed files with 101 additions and 122 deletions
--- 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:
--- 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 }}
--- 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"
      >
--- 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);
  });
 });
--- 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 />' } },
    });
  });

--- 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();
  });
--- 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"
--- 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 };
+
+    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', () => {
--- 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 />' } },
    });
  });

--- 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],
    });
--- a/app/javascript/shared/mixins/specs/whatsappTemplates/whatsappTemplates.spec.js
+++ b/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' },
--- a/app/javascript/v3/components/GoogleOauth/Button.spec.js
+++ b/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 },
  });
 }