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/widget/store/modules/specs/agent/actions.spec.js

@@ -2,8 +2,8 @@ import { API } from 'widget/helpers/axios';
 import { actions } from '../../agent';
 import { agents } from './data';
 
-const commit = jest.fn();
-jest.mock('widget/helpers/axios');
+const commit = vi.fn();
+vi.mock('widget/helpers/axios');
 
 describe('#actions', () => {
   describe('#fetchAvailableAgents', () => {
@@ -27,7 +27,9 @@ describe('#actions', () => {
   });
 
   describe('#updatePresence', () => {
-    actions.updatePresence({ commit }, { 1: 'online' });
-    expect(commit.mock.calls).toEqual([['updatePresence', { 1: 'online' }]]);
+    it('commits the correct presence value', () => {
+      actions.updatePresence({ commit }, { 1: 'online' });
+      expect(commit.mock.calls).toEqual([['updatePresence', { 1: 'online' }]]);
+    });
   });
 });

app/javascript/widget/store/modules/specs/appConfig/actions.spec.js

@@ -1,6 +1,6 @@
 import { actions } from '../../appConfig';
 
-const commit = jest.fn();
+const commit = vi.fn();
 describe('#actions', () => {
   describe('#setReferrerHost', () => {
     it('creates actions properly', () => {

app/javascript/widget/store/modules/specs/article/actions.spec.js

@@ -1,7 +1,7 @@
 import { mutations, actions, getters } from '../../articles'; // update this import path to your actual module location
 import { getMostReadArticles } from 'widget/api/article';
 
-jest.mock('widget/api/article');
+vi.mock('widget/api/article');
 
 describe('Vuex Articles Module', () => {
   let state;
@@ -57,7 +57,7 @@ describe('Vuex Articles Module', () => {
 
   describe('Actions', () => {
     it('fetches articles correctly', async () => {
-      const commit = jest.fn();
+      const commit = vi.fn();
       const articles = [{ id: 1 }, { id: 2 }];
       getMostReadArticles.mockResolvedValueOnce({
         data: { payload: articles },
@@ -72,7 +72,7 @@ describe('Vuex Articles Module', () => {
     });
 
     it('handles fetch error correctly', async () => {
-      const commit = jest.fn();
+      const commit = vi.fn();
       getMostReadArticles.mockRejectedValueOnce(new Error('Error message'));
 
       await actions.fetch(
@@ -86,7 +86,7 @@ describe('Vuex Articles Module', () => {
     });
 
     it('does not mutate state when fetching returns an empty payload', async () => {
-      const commit = jest.fn();
+      const commit = vi.fn();
       getMostReadArticles.mockResolvedValueOnce({ data: { payload: [] } });
 
       await actions.fetch({ commit }, { slug: 'slug', locale: 'en' });
@@ -98,7 +98,7 @@ describe('Vuex Articles Module', () => {
     });
 
     it('sets error state when fetching fails', async () => {
-      const commit = jest.fn();
+      const commit = vi.fn();
       getMostReadArticles.mockRejectedValueOnce(new Error('Network error'));
 
       await actions.fetch(

app/javascript/widget/store/modules/specs/campaign/actions.spec.js

@@ -2,12 +2,16 @@ import { API } from 'widget/helpers/axios';
 import { actions } from '../../campaign';
 import { campaigns } from './data';
 
-const commit = jest.fn();
-const dispatch = jest.fn();
-jest.mock('widget/helpers/axios');
+const commit = vi.fn();
+const dispatch = vi.fn();
+vi.mock('widget/helpers/axios');
 
 import campaignTimer from 'widget/helpers/campaignTimer';
-jest.mock('widget/helpers/campaignTimer');
+vi.mock('widget/helpers/campaignTimer', () => ({
+  default: {
+    initTimers: vi.fn().mockReturnValue({ mock: true }),
+  },
+}));
 
 describe('#actions', () => {
   describe('#fetchCampaigns', () => {

app/javascript/widget/store/modules/specs/campaign/getters.spec.js

@@ -1,7 +1,8 @@
 import { getters } from '../../campaign';
 import { campaigns } from './data';
-jest.mock('widget/store/index.js');
-
+vi.mock('widget/store/index.js', () => ({
+  default: {},
+}));
 describe('#getters', () => {
   it('getCampaigns', () => {
     const state = {

app/javascript/widget/store/modules/specs/campaign/mutations.spec.js

@@ -1,6 +1,9 @@
 import { mutations } from '../../campaign';
 import { campaigns } from './data';
-jest.mock('widget/store/index.js');
+vi.mock('widget/store/index.js', () => ({
+  default: {},
+}));
+
 describe('#mutations', () => {
   describe('#setCampaigns', () => {
     it('set campaign records', () => {

app/javascript/widget/store/modules/specs/contact/actions.spec.js

@@ -1,11 +1,13 @@
 import { API } from 'widget/helpers/axios';
 import { sendMessage } from 'widget/helpers/utils';
 import { actions } from '../../contacts';
-const commit = jest.fn();
-const dispatch = jest.fn();
-jest.mock('widget/helpers/axios');
-jest.mock('widget/helpers/utils', () => ({
-  sendMessage: jest.fn(),
+
+const commit = vi.fn();
+const dispatch = vi.fn();
+
+vi.mock('widget/helpers/axios');
+vi.mock('widget/helpers/utils', () => ({
+  sendMessage: vi.fn(),
 }));
 
 describe('#actions', () => {
@@ -16,7 +18,9 @@ describe('#actions', () => {
         name: 'Adu Thoma',
         avatar_url: '',
       };
-      API.patch.mockResolvedValue({ data: { widget_auth_token: 'token' } });
+      vi.spyOn(API, 'patch').mockResolvedValue({
+        data: { widget_auth_token: 'token' },
+      });
       await actions.setUser({ commit, dispatch }, { identifier: 1, user });
       expect(sendMessage.mock.calls).toEqual([
         [{ data: { widgetAuthToken: 'token' }, event: 'setAuthCookie' }],
@@ -37,7 +41,7 @@ describe('#actions', () => {
         avatar_url: '',
         identifier_hash: '12345',
       };
-      API.patch.mockResolvedValue({ data: { id: 1 } });
+      vi.spyOn(API, 'patch').mockResolvedValue({ data: { id: 1 } });
       await actions.setUser({ commit, dispatch }, { identifier: 1, user });
       expect(sendMessage.mock.calls).toEqual([]);
       expect(commit.mock.calls).toEqual([]);

app/javascript/widget/store/modules/specs/conversation/actions.spec.js

@@ -2,11 +2,11 @@ import { actions } from '../../conversation/actions';
 import getUuid from '../../../../helpers/uuid';
 import { API } from 'widget/helpers/axios';
 
-jest.mock('../../../../helpers/uuid');
-jest.mock('widget/helpers/axios');
+vi.mock('../../../../helpers/uuid');
+vi.mock('widget/helpers/axios');
 
-const commit = jest.fn();
-const dispatch = jest.fn();
+const commit = vi.fn();
+const dispatch = vi.fn();
 
 describe('#actions', () => {
   describe('#createConversation', () => {
@@ -17,7 +17,7 @@ describe('#actions', () => {
           messages: [{ id: 1, content: 'This is a test message' }],
         },
       });
-      let windowSpy = jest.spyOn(window, 'window', 'get');
+      let windowSpy = vi.spyOn(window, 'window', 'get');
       windowSpy.mockImplementation(() => ({
         WOOT_WIDGET: {
           $root: {
@@ -96,8 +96,8 @@ describe('#actions', () => {
     it('sends correct mutations', async () => {
       const mockDate = new Date(1466424490000);
       getUuid.mockImplementationOnce(() => '1111');
-      const spy = jest.spyOn(global, 'Date').mockImplementation(() => mockDate);
-      const windowSpy = jest.spyOn(window, 'window', 'get');
+      const spy = vi.spyOn(global, 'Date').mockImplementation(() => mockDate);
+      const windowSpy = vi.spyOn(window, 'window', 'get');
       windowSpy.mockImplementation(() => ({
         WOOT_WIDGET: {
           $root: {
@@ -132,7 +132,7 @@ describe('#actions', () => {
     it('sends correct mutations', () => {
       const mockDate = new Date(1466424490000);
       getUuid.mockImplementationOnce(() => '1111');
-      const spy = jest.spyOn(global, 'Date').mockImplementation(() => mockDate);
+      const spy = vi.spyOn(global, 'Date').mockImplementation(() => mockDate);
       const thumbUrl = '';
       const attachment = { thumbUrl, fileType: 'file' };
 

app/javascript/widget/store/modules/specs/conversationAttributes/actions.spec.js

@@ -1,8 +1,8 @@
 import { actions } from '../../conversationAttributes';
 import { API } from 'widget/helpers/axios';
 
-const commit = jest.fn();
-jest.mock('widget/helpers/axios');
+const commit = vi.fn();
+vi.mock('widget/helpers/axios');
 
 describe('#actions', () => {
   describe('#get attributes', () => {

app/javascript/widget/store/modules/specs/message/actions.spec.js

@@ -1,8 +1,8 @@
 import { API } from 'widget/helpers/axios';
 import { actions } from '../../message';
 
-const commit = jest.fn();
-jest.mock('widget/helpers/axios');
+const commit = vi.fn();
+vi.mock('widget/helpers/axios');
 
 describe('#actions', () => {
   describe('#update', () => {