feat: Use vitest instead of jest, run all the specs anywhere in app/ folder in the CI (#9722)

Due to the pattern `**/specs/*.spec.js` defined in CircleCI, none of the
frontend spec in the folders such as
`specs/<domain-name>/getters.spec.js` were not executed in Circle CI.

This PR fixes the issue, along with the following changes: 
- Use vitest instead of jest
- Remove jest dependancies
- Update tests to work with vitest

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

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

@@ -1,4 +1,4 @@
-import DateSeparator from '../DateSeparator';
+import DateSeparator from '../DateSeparator.vue';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';

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

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import Spinner from '../Spinner';
+import Spinner from '../Spinner.vue';
 
 describe('Spinner', () => {
   test('matches snapshot', () => {

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

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

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

@@ -1,7 +1,8 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Spinner matches snapshot 1`] = `
+exports[`Spinner > matches snapshot 1`] = `
 <span
   class="spinner small "
+  data-v-3e416633=""
 />
 `;

app/javascript/shared/helpers/specs/CustomErrors.spec.js

@@ -1,4 +1,4 @@
-const { DuplicateContactException } = require('../CustomErrors');
+import { DuplicateContactException } from '../CustomErrors';
 
 describe('DuplicateContactException', () => {
   it('returns correct exception', () => {

app/javascript/shared/helpers/specs/CustomEventHelper.spec.js

@@ -2,7 +2,7 @@ import { dispatchWindowEvent } from '../CustomEventHelper';
 
 describe('dispatchWindowEvent', () => {
   it('dispatches correct event', () => {
-    window.dispatchEvent = jest.fn();
+    window.dispatchEvent = vi.fn();
     dispatchWindowEvent({ eventName: 'chatwoot:ready' });
     expect(dispatchEvent).toHaveBeenCalled();
   });

app/javascript/shared/helpers/specs/mitt.spec.js

@@ -2,7 +2,7 @@ import { emitter } from '../mitt';
 
 describe('emitter', () => {
   it('should emit and listen to events correctly', () => {
-    const mockCallback = jest.fn();
+    const mockCallback = vi.fn();
 
     // Subscribe to an event
     emitter.on('event', mockCallback);

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

@@ -1,29 +1,26 @@
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { shallowMount } from '@vue/test-utils';
 import rtlMixin from 'shared/mixins/rtlMixin';
 
 describe('rtlMixin', () => {
-  it('returns is direction right-to-left view', () => {
-    const Component = {
+  const createComponent = rtl_view => {
+    return shallowMount({
       render() {},
-      mixins: [rtlMixin, uiSettingsMixin],
-      data() {
-        return { uiSettings: { rtl_view: true } };
+      mixins: [rtlMixin],
+      computed: {
+        uiSettings() {
+          return { rtl_view };
+        },
       },
-    };
-    const wrapper = shallowMount(Component);
+    });
+  };
+
+  it('returns is direction right-to-left view', () => {
+    const wrapper = createComponent(true);
     expect(wrapper.vm.isRTLView).toBe(true);
   });
 
   it('returns is direction left-to-right view', () => {
-    const Component = {
-      render() {},
-      mixins: [rtlMixin, uiSettingsMixin],
-      data() {
-        return { uiSettings: { rtl_view: false } };
-      },
-    };
-    const wrapper = shallowMount(Component);
+    const wrapper = createComponent(false);
     expect(wrapper.vm.isRTLView).toBe(false);
   });
 });