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/dashboard/components/widgets/WootWriter/utils/mp3ConversionUtils.js

@@ -1,6 +1,7 @@
 import lamejs from '@breezystack/lamejs';
 
 const writeString = (view, offset, string) => {
+  // eslint-disable-next-line no-plusplus
   for (let i = 0; i < string.length; i++) {
     view.setUint8(offset + i, string.charCodeAt(i));
   }
@@ -28,7 +29,9 @@ const bufferToWav = async (buffer, numChannels, sampleRate) => {
 
   // WAV Data
   const offset = 44;
+  // eslint-disable-next-line no-plusplus
   for (let i = 0; i < buffer.length; i++) {
+    // eslint-disable-next-line no-plusplus
     for (let channel = 0; channel < numChannels; channel++) {
       const sample = Math.max(
         -1,

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -478,6 +478,7 @@ export default {
     </div>
     <ul class="conversation-panel">
       <transition name="slide-up">
+        <!-- eslint-disable-next-line vue/require-toggle-inside-transition -->
         <li class="min-h-[4rem]">
           <span v-if="shouldShowSpinner" class="spinner message" />
         </li>

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

@@ -1,11 +1,7 @@
-import { createLocalVue, mount } from '@vue/test-utils';
-import Vuex from 'vuex';
-import VueI18n from 'vue-i18n';
-import FloatingVue from 'floating-vue';
-import Button from 'dashboard/components/buttons/Button.vue';
-import i18n from 'dashboard/i18n';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+import { mount } from '@vue/test-utils';
+import { createStore } from 'vuex';
 import MoreActions from '../MoreActions.vue';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 
 vi.mock('shared/helpers/mitt', () => ({
   emitter: {
@@ -15,75 +11,67 @@ vi.mock('shared/helpers/mitt', () => ({
   },
 }));
 
-import { emitter } from 'shared/helpers/mitt';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueI18n);
-localVue.use(FloatingVue);
-
-localVue.component('fluent-icon', FluentIcon);
-localVue.component('woot-button', Button);
-
-localVue.prototype.$emitter = {
-  emit: vi.fn(),
-  on: vi.fn(),
-  off: vi.fn(),
+const mockDirective = {
+  mounted: () => {},
 };
 
-const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
+import { emitter } from 'shared/helpers/mitt';
 
 describe('MoveActions', () => {
   let currentChat = { id: 8, muted: false };
-  let state = null;
+  let store = null;
   let muteConversation = null;
   let unmuteConversation = null;
-  let modules = null;
-  let getters = null;
-  let store = null;
-  let moreActions = null;
 
   beforeEach(() => {
-    state = {
-      authenticated: true,
-      currentChat,
-    };
-
     muteConversation = vi.fn(() => Promise.resolve());
     unmuteConversation = vi.fn(() => Promise.resolve());
 
-    modules = {
-      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>' },
+    store = createStore({
+      state: {
+        authenticated: true,
+        currentChat,
+      },
+      getters: {
+        getSelectedChat: () => currentChat,
+      },
+      modules: {
+        conversations: {
+          namespaced: false,
+          actions: { muteConversation, unmuteConversation },
+        },
       },
     });
   });
 
+  const createWrapper = () =>
+    mount(MoreActions, {
+      global: {
+        plugins: [store],
+        components: {
+          'fluent-icon': FluentIcon,
+        },
+        directives: {
+          'on-clickaway': mockDirective,
+        },
+      },
+    });
+
   describe('muting discussion', () => {
     it('triggers "muteConversation"', async () => {
-      await moreActions.find('button:first-child').trigger('click');
+      const wrapper = createWrapper();
+      await wrapper.find('button:first-child').trigger('click');
 
-      expect(muteConversation).toBeCalledWith(
-        expect.any(Object),
-        currentChat.id,
-        undefined
+      expect(muteConversation).toHaveBeenCalledTimes(1);
+      expect(muteConversation).toHaveBeenCalledWith(
+        expect.any(Object), // First argument is the Vuex context object
+        currentChat.id // Second argument is the ID of the conversation
       );
     });
 
     it('shows alert', async () => {
-      await moreActions.find('button:first-child').trigger('click');
+      const wrapper = createWrapper();
+      await wrapper.find('button:first-child').trigger('click');
 
       expect(emitter.emit).toBeCalledWith('newToastMessage', {
         message:
@@ -99,17 +87,19 @@ describe('MoveActions', () => {
     });
 
     it('triggers "unmuteConversation"', async () => {
-      await moreActions.find('button:first-child').trigger('click');
+      const wrapper = createWrapper();
+      await wrapper.find('button:first-child').trigger('click');
 
-      expect(unmuteConversation).toBeCalledWith(
-        expect.any(Object),
-        currentChat.id,
-        undefined
+      expect(unmuteConversation).toHaveBeenCalledTimes(1);
+      expect(unmuteConversation).toHaveBeenCalledWith(
+        expect.any(Object), // First argument is the Vuex context object
+        currentChat.id // Second argument is the ID of the conversation
       );
     });
 
     it('shows alert', async () => {
-      await moreActions.find('button:first-child').trigger('click');
+      const wrapper = createWrapper();
+      await wrapper.find('button:first-child').trigger('click');
 
       expect(emitter.emit).toBeCalledWith('newToastMessage', {
         message: 'This contact is unblocked successfully.',