chore: fix circleci on vite build (#10214)

- Switch to pnpm based build
- Switch circleci from docker to machine to have more memory
- Fix frontend and backend tests

Fixes
https://linear.app/chatwoot/issue/CW-3610/fix-circle-ci-for-vite-build
---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>

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

@@ -1,18 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+
 import DateSeparator from '../DateSeparator.vue';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import Vuex from 'vuex';
-import VueI18n from 'vue-i18n';
-const localVue = createLocalVue();
-import i18n from 'dashboard/i18n';
-localVue.use(Vuex);
-localVue.use(VueI18n);
 
-const i18nConfig = new VueI18n({
-  locale: 'en',
-  messages: i18n,
-});
-
-describe('dateSeparator', () => {
+describe('DateSeparator', () => {
   let store = null;
   let actions = null;
   let modules = null;
@@ -23,22 +14,28 @@ describe('dateSeparator', () => {
 
     modules = {
       auth: {
+        namespaced: true,
         getters: {
           'appConfig/darkMode': () => 'light',
         },
       },
     };
-    store = new Vuex.Store({
-      actions,
+
+    store = createStore({
       modules,
+      actions,
     });
 
     dateSeparator = shallowMount(DateSeparator, {
-      store,
-      localVue,
-      propsData: { date: 'Nov 18, 2019' },
-      mocks: { $t: msg => msg },
-      i18n: i18nConfig,
+      global: {
+        plugins: [store],
+        mocks: {
+          $t: msg => msg, // Mocking $t function for translations
+        },
+      },
+      props: {
+        date: 'Nov 18, 2019',
+      },
     });
   });
 

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

@@ -1,5 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`DateSeparator > date separator snapshot 1`] = `
+<div
+  class="date--separator text-slate-700"
+  data-v-b24b73fa=""
+>
+  Nov 18, 2019
+</div>
+`;
+
 exports[`dateSeparator > date separator snapshot 1`] = `
 <div
   class="date--separator text-slate-700"

app/javascript/shared/components/specs/__snapshots__/Spinner.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Spinner > matches snapshot 1`] = `
 <span
-  class="spinner small "
+  class="spinner small"
   data-v-3e416633=""
 />
 `;

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

@@ -1,20 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
 import TemplateParser from '../../../../dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { templates } from './fixtures';
-const localVue = createLocalVue();
-import VueI18n from 'vue-i18n';
-import i18n from 'dashboard/i18n';
 import { nextTick } from 'vue';
 
-localVue.use(VueI18n);
-
-const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
 const config = {
-  localVue,
-  i18n: i18nConfig,
-  stubs: {
-    WootButton: { template: '<button />' },
-    WootInput: { template: '<input />' },
+  global: {
+    stubs: {
+      WootButton: { template: '<button />' },
+      WootInput: { template: '<input />' },
+    },
   },
 };
 
@@ -22,7 +16,7 @@ describe('#WhatsAppTemplates', () => {
   it('returns all variables from a template string', async () => {
     const wrapper = shallowMount(TemplateParser, {
       ...config,
-      propsData: { template: templates[0] },
+      props: { template: templates[0] },
     });
     await nextTick();
     expect(wrapper.vm.variables).toEqual(['{{1}}', '{{2}}', '{{3}}']);
@@ -31,7 +25,7 @@ describe('#WhatsAppTemplates', () => {
   it('returns no variables from a template string if it does not contain variables', async () => {
     const wrapper = shallowMount(TemplateParser, {
       ...config,
-      propsData: { template: templates[12] },
+      props: { template: templates[12] },
     });
     await nextTick();
     expect(wrapper.vm.variables).toBeNull();
@@ -40,7 +34,7 @@ describe('#WhatsAppTemplates', () => {
   it('returns the body of a template', async () => {
     const wrapper = shallowMount(TemplateParser, {
       ...config,
-      propsData: { template: templates[1] },
+      props: { template: templates[1] },
     });
     await nextTick();
     const expectedOutput =
@@ -51,13 +45,15 @@ describe('#WhatsAppTemplates', () => {
   it('generates the templates from variable input', async () => {
     const wrapper = shallowMount(TemplateParser, {
       ...config,
-      propsData: { template: templates[0] },
-    });
-    await nextTick();
-    await wrapper.setData({
-      processedParams: { 1: 'abc', 2: 'xyz', 3: 'qwerty' },
+      props: { template: templates[0] },
     });
     await nextTick();
+
+    // Instead of using `setData`, directly modify the `processedParams` using the component's logic
+    await wrapper.vm.$nextTick();
+    wrapper.vm.processedParams = { 1: 'abc', 2: 'xyz', 3: 'qwerty' };
+    await wrapper.vm.$nextTick();
+
     const expectedOutput =
       'Esta é a sua confirmação de voo para abc-xyz em qwerty.';
     expect(wrapper.vm.processedString).toEqual(expectedOutput);