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>

.circleci/config.yml

@@ -130,10 +130,7 @@ jobs:
           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
-            yarn test:coverage --profile 10 \
-                               --out ~/tmp/test-results/yarn.xml \
-                               -- ${TESTFILES}
       - run:
           name: Code Climate Test Coverage
           command: |

.eslintrc.js

@@ -65,10 +65,10 @@ module.exports = {
   },
   env: {
     browser: true,
-    jest: true,
     node: true,
   },
   globals: {
     bus: true,
+    vi: true,
   },
 };

app/javascript/dashboard/App.Vue.spec.js

@@ -1,11 +0,0 @@
-import App from './App';
-import '../../test-matchers';
-
-describe(`App component`, () => {
-  it(`should be a component`, () => {
-    // Arrange
-    // Act
-    expect(App).toBeVueComponent('App');
-    // Assert
-  });
-});

app/javascript/dashboard/api/enterprise/specs/account.spec.js

@@ -15,10 +15,10 @@ describe('#enterpriseAccountAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/account.spec.js

@@ -15,10 +15,10 @@ describe('#accountAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/accountActions.spec.js

@@ -10,10 +10,10 @@ describe('#ContactsAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/agents.spec.js

@@ -14,7 +14,7 @@ describe('#AgentAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/article.spec.js

@@ -14,10 +14,10 @@ describe('#PortalAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -44,10 +44,10 @@ describe('#PortalAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -71,10 +71,10 @@ describe('#PortalAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -98,10 +98,10 @@ describe('#PortalAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -129,10 +129,10 @@ describe('#PortalAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/assignableAgents.spec.js

@@ -4,10 +4,10 @@ describe('#AssignableAgentsAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/channel/fbChannel.spec.js

@@ -13,10 +13,10 @@ describe('#FBChannel', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/contacts.spec.js

@@ -17,10 +17,10 @@ describe('#ContactsAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/conversations.spec.js

@@ -16,10 +16,10 @@ describe('#ConversationApi', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/csatReports.spec.js

@@ -11,10 +11,10 @@ describe('#Reports API', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/inbox/conversation.spec.js

@@ -24,10 +24,10 @@ describe('#ConversationAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/inbox/message.spec.js

@@ -15,10 +15,10 @@ describe('#ConversationAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/inboxes.spec.js

@@ -17,10 +17,10 @@ describe('#InboxesAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/integrations.spec.js

@@ -18,10 +18,10 @@ describe('#integrationAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/integrations/dyte.spec.js

@@ -11,10 +11,10 @@ describe('#accountAPI', () => {
   describe('createAMeeting', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -39,10 +39,10 @@ describe('#accountAPI', () => {
   describe('addParticipantToMeeting', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/integrations/linear.spec.js

@@ -16,10 +16,10 @@ describe('#linearAPI', () => {
   describe('getTeams', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -41,10 +41,10 @@ describe('#linearAPI', () => {
   describe('getTeamEntities', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -66,10 +66,10 @@ describe('#linearAPI', () => {
   describe('createIssue', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -96,10 +96,10 @@ describe('#linearAPI', () => {
   describe('link_issue', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -125,10 +125,10 @@ describe('#linearAPI', () => {
   describe('getLinkedIssue', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -150,10 +150,10 @@ describe('#linearAPI', () => {
   describe('unlinkIssue', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -178,10 +178,10 @@ describe('#linearAPI', () => {
   describe('searchIssues', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/notifications.spec.js

@@ -13,10 +13,10 @@ describe('#NotificationAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/reports.spec.js

@@ -20,10 +20,10 @@ describe('#Reports API', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/slaReports.spec.js

@@ -12,10 +12,10 @@ describe('#SLAReports API', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/teams.spec.js

@@ -16,10 +16,10 @@ describe('#TeamsAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js

@@ -1,12 +1,12 @@
-import AccountSelector from '../AccountSelector';
+import AccountSelector from '../AccountSelector.vue';
 import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 
 import i18n from 'dashboard/i18n';
-import WootModal from 'dashboard/components/Modal';
+import WootModal from 'dashboard/components/Modal.vue';
-import WootModalHeader from 'dashboard/components/ModalHeader';
+import WootModalHeader from 'dashboard/components/ModalHeader.vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 
 const localVue = createLocalVue();
 localVue.component('woot-modal', WootModal);

app/javascript/dashboard/components/layout/sidebarComponents/specs/AgentDetails.spec.js

@@ -1,12 +1,12 @@
-import AgentDetails from '../AgentDetails';
+import AgentDetails from '../AgentDetails.vue';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 import VTooltip from 'v-tooltip';
 
 import i18n from 'dashboard/i18n';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import WootButton from 'dashboard/components/ui/WootButton';
+import WootButton from 'dashboard/components/ui/WootButton.vue';
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueI18n);

app/javascript/dashboard/components/layout/sidebarComponents/specs/NotificationBell.spec.js

@@ -1,13 +1,15 @@
-import NotificationBell from '../NotificationBell';
+import NotificationBell from '../NotificationBell.vue';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 
 import i18n from 'dashboard/i18n';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueI18n);
+localVue.component('fluent-icon', FluentIcon);
 
 const i18nConfig = new VueI18n({
   locale: 'en',
@@ -27,7 +29,7 @@ describe('notificationBell', () => {
 
   beforeEach(() => {
     actions = {
-      showNotification: jest.fn(),
+      showNotification: vi.fn(),
     };
     modules = {
       auth: {

app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js

@@ -2,15 +2,21 @@ import AvailabilityStatus from '../AvailabilityStatus.vue';
 import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
+import VTooltip from 'v-tooltip';
+
+import WootButton from 'dashboard/components/ui/WootButton.vue';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
+import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider.vue';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 
-import WootButton from 'dashboard/components/ui/WootButton';
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
-import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader';
-import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider';
 import i18n from 'dashboard/i18n';
 
 const localVue = createLocalVue();
+localVue.use(VTooltip, {
+  defaultHtml: false,
+});
 localVue.use(Vuex);
 localVue.use(VueI18n);
 localVue.component('woot-button', WootButton);
@@ -18,12 +24,14 @@ localVue.component('woot-dropdown-header', WootDropdownHeader);
 localVue.component('woot-dropdown-menu', WootDropdownMenu);
 localVue.component('woot-dropdown-divider', WootDropdownDivider);
 localVue.component('woot-dropdown-item', WootDropdownItem);
+localVue.component('fluent-icon', FluentIcon);
 
 const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
 
 describe('AvailabilityStatus', () => {
   const currentAvailability = 'online';
   const currentAccountId = '1';
+  const currentUserAutoOffline = false;
   let store = null;
   let actions = null;
   let modules = null;
@@ -31,7 +39,7 @@ describe('AvailabilityStatus', () => {
 
   beforeEach(() => {
     actions = {
-      updateAvailability: jest.fn(() => {
+      updateAvailability: vi.fn(() => {
         return Promise.resolve();
       }),
     };
@@ -41,6 +49,7 @@ describe('AvailabilityStatus', () => {
         getters: {
           getCurrentUserAvailability: () => currentAvailability,
           getCurrentAccountId: () => currentAccountId,
+          getCurrentUserAutoOffline: () => currentUserAutoOffline,
         },
       },
     };

app/javascript/dashboard/components/specs/SidemenuIcon.spec.js

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

app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`SidemenuIcon matches snapshot 1`] = `
+exports[`SidemenuIcon > matches snapshot 1`] = `
 <button
   class="-ml-3 text-black-900 dark:text-slate-300"
   color-scheme="secondary"

app/javascript/dashboard/components/ui/DatePicker/helpers/specs/DatePickerHelper.spec.js

@@ -18,11 +18,11 @@ describe('Date formatting functions', () => {
   const testDate = new Date(2020, 4, 15); // May 15, 2020
 
   beforeEach(() => {
-    jest.spyOn(navigator, 'language', 'get').mockReturnValue('en-US');
+    vi.spyOn(navigator, 'language', 'get').mockReturnValue('en-US');
   });
 
   afterEach(() => {
-    jest.restoreAllMocks();
+    vi.restoreAllMocks();
   });
 
   it('returns the correct month name from a date', () => {
@@ -39,7 +39,7 @@ describe('Date formatting functions', () => {
   });
 
   it('returns the correct date format for the current locale en-IN', () => {
-    jest.spyOn(navigator, 'language', 'get').mockReturnValue('en-IN');
+    vi.spyOn(navigator, 'language', 'get').mockReturnValue('en-IN');
     const expected = 'dd/MM/yyyy';
     expect(getIntlDateFormatForLocale()).toBe(expected);
   });
@@ -231,13 +231,13 @@ describe('isHoveringNextDayInRange', () => {
 describe('getActiveDateRange', () => {
   const currentDate = new Date(2020, 5, 15, 12, 0); // May 15, 2020, at noon
 
-  beforeAll(() => {
+  beforeEach(() => {
     // Mocking the current date to ensure consistency in tests
-    jest.useFakeTimers().setSystemTime(currentDate.getTime());
+    vi.useFakeTimers().setSystemTime(currentDate.getTime());
   });
 
-  afterAll(() => {
+  afterEach(() => {
-    jest.useRealTimers();
+    vi.useRealTimers();
   });
 
   it('returns the correct range for "last7days"', () => {

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

@@ -197,7 +197,7 @@ import {
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
 
-const EmojiInput = () => import('shared/components/emoji/EmojiInput');
+const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');
 
 export default {
   components: {

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

@@ -2,16 +2,16 @@ import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 import VTooltip from 'v-tooltip';
-import Button from 'dashboard/components/buttons/Button';
+import Button from 'dashboard/components/buttons/Button.vue';
 import i18n from 'dashboard/i18n';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-import MoreActions from '../MoreActions';
+import MoreActions from '../MoreActions.vue';
 
-jest.mock('shared/helpers/mitt', () => ({
+vi.mock('shared/helpers/mitt', () => ({
   emitter: {
-    emit: jest.fn(),
+    emit: vi.fn(),
-    on: jest.fn(),
+    on: vi.fn(),
-    off: jest.fn(),
+    off: vi.fn(),
   },
 }));
 
@@ -26,9 +26,9 @@ localVue.component('fluent-icon', FluentIcon);
 localVue.component('woot-button', Button);
 
 localVue.prototype.$emitter = {
-  emit: jest.fn(),
+  emit: vi.fn(),
-  on: jest.fn(),
+  on: vi.fn(),
-  off: jest.fn(),
+  off: vi.fn(),
 };
 
 const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
@@ -49,8 +49,8 @@ describe('MoveActions', () => {
       currentChat,
     };
 
-    muteConversation = jest.fn(() => Promise.resolve());
+    muteConversation = vi.fn(() => Promise.resolve());
-    unmuteConversation = jest.fn(() => Promise.resolve());
+    unmuteConversation = vi.fn(() => Promise.resolve());
 
     modules = {
       conversations: { actions: { muteConversation, unmuteConversation } },

app/javascript/dashboard/components/widgets/mentions/specs/mentionSelectionKeyboardMixin.spec.js

@@ -8,7 +8,7 @@ const buildComponent = ({ data = {}, methods = {} }) => ({
   data() {
     return { ...data, selectedIndex: 0, items: [1, 2, 3] };
   },
-  methods: { ...methods, onSelect: jest.fn(), adjustScroll: jest.fn() },
+  methods: { ...methods, onSelect: vi.fn(), adjustScroll: vi.fn() },
   mixins: [keyboardEventListenerMixins],
 });
 
@@ -21,7 +21,7 @@ describe('mentionSelectionKeyboardMixin', () => {
   });
 
   it('ArrowUp and Control+KeyP update selectedIndex correctly', () => {
-    const preventDefault = jest.fn();
+    const preventDefault = vi.fn();
     const keyboardEvents = wrapper.vm.getKeyboardEvents();
 
     if (keyboardEvents && keyboardEvents.ArrowUp) {
@@ -39,7 +39,7 @@ describe('mentionSelectionKeyboardMixin', () => {
   });
 
   it('ArrowDown and Control+KeyN update selectedIndex correctly', () => {
-    const preventDefault = jest.fn();
+    const preventDefault = vi.fn();
     const keyboardEvents = wrapper.vm.getKeyboardEvents();
 
     if (keyboardEvents && keyboardEvents.ArrowDown) {
@@ -57,7 +57,7 @@ describe('mentionSelectionKeyboardMixin', () => {
   });
 
   it('Enter key triggers onSelect method', () => {
-    const preventDefault = jest.fn();
+    const preventDefault = vi.fn();
     const keyboardEvents = wrapper.vm.getKeyboardEvents();
 
     if (keyboardEvents && keyboardEvents.Enter) {

app/javascript/dashboard/composables/spec/emitter.spec.js

@@ -2,17 +2,17 @@ import { shallowMount } from '@vue/test-utils';
 import { emitter } from 'shared/helpers/mitt';
 import { useEmitter } from '../emitter';
 
-jest.mock('shared/helpers/mitt', () => ({
+vi.mock('shared/helpers/mitt', () => ({
   emitter: {
-    on: jest.fn(),
+    on: vi.fn(),
-    off: jest.fn(),
+    off: vi.fn(),
   },
 }));
 
 describe('useEmitter', () => {
   let wrapper;
   const eventName = 'my-event';
-  const callback = jest.fn();
+  const callback = vi.fn();
 
   beforeEach(() => {
     wrapper = shallowMount({
@@ -29,10 +29,6 @@ describe('useEmitter', () => {
     });
   });
 
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-
   it('should add an event listener on mount', () => {
     expect(emitter.on).toHaveBeenCalledWith(eventName, callback);
   });

app/javascript/dashboard/helper/AnalyticsHelper/specs/helper.spec.js

@@ -1,13 +1,13 @@
 import helperObject, { AnalyticsHelper } from '../';
 
-jest.mock('@june-so/analytics-next', () => ({
+vi.mock('@june-so/analytics-next', () => ({
   AnalyticsBrowser: {
     load: () => [
       {
-        identify: jest.fn(),
+        identify: vi.fn(),
-        track: jest.fn(),
+        track: vi.fn(),
-        page: jest.fn(),
+        page: vi.fn(),
-        group: jest.fn(),
+        group: vi.fn(),
       },
     ],
   },
@@ -40,7 +40,7 @@ describe('AnalyticsHelper', () => {
 
   describe('identify', () => {
     beforeEach(() => {
-      analyticsHelper.analytics = { identify: jest.fn(), group: jest.fn() };
+      analyticsHelper.analytics = { identify: vi.fn(), group: vi.fn() };
     });
 
     it('should call identify on analytics browser with correct arguments', () => {
@@ -87,7 +87,7 @@ describe('AnalyticsHelper', () => {
 
   describe('track', () => {
     beforeEach(() => {
-      analyticsHelper.analytics = { track: jest.fn() };
+      analyticsHelper.analytics = { track: vi.fn() };
       analyticsHelper.user = { id: '123' };
     });
 
@@ -118,7 +118,7 @@ describe('AnalyticsHelper', () => {
 
   describe('page', () => {
     beforeEach(() => {
-      analyticsHelper.analytics = { page: jest.fn() };
+      analyticsHelper.analytics = { page: vi.fn() };
     });
 
     it('should call the analytics.page method with the correct arguments', () => {

app/javascript/dashboard/helper/AnalyticsHelper/specs/plugin.spec.js

@@ -2,34 +2,35 @@ import Vue from 'vue';
 import plugin from '../plugin';
 import analyticsHelper from '../index';
 
+vi.spyOn(analyticsHelper, 'init');
+vi.spyOn(analyticsHelper, 'track');
+
 describe('Vue Analytics Plugin', () => {
   beforeEach(() => {
-    jest.spyOn(analyticsHelper, 'init');
-    jest.spyOn(analyticsHelper, 'track');
     Vue.use(plugin);
   });
 
-  afterEach(() => {
+  it('should call the init method on analyticsHelper once during plugin installation', () => {
-    jest.resetModules();
+    expect(analyticsHelper.init).toHaveBeenCalledTimes(1);
-    jest.clearAllMocks();
   });
 
-  it('should call the init method on the analyticsHelper', () => {
+  it('should add the analyticsHelper to the Vue prototype as $analytics', () => {
-    expect(analyticsHelper.init).toHaveBeenCalled();
-  });
-
-  it('should add the analyticsHelper to the Vue prototype', () => {
     expect(Vue.prototype.$analytics).toBe(analyticsHelper);
   });
 
-  it('should add the track method to the Vue prototype', () => {
+  it('should add a track method to the Vue prototype as $track', () => {
     expect(typeof Vue.prototype.$track).toBe('function');
     Vue.prototype.$track('eventName');
-    expect(analyticsHelper.track).toHaveBeenCalledWith('eventName');
+    expect(analyticsHelper.track)
+      .toHaveBeenCalledTimes(1)
+      .toHaveBeenCalledWith('eventName');
   });
 
-  it('should call the track method on the analyticsHelper when $track is called', () => {
+  it('should call the track method on analyticsHelper with the correct event name when $track is called', () => {
-    Vue.prototype.$track('eventName');
+    const eventName = 'testEvent';
-    expect(analyticsHelper.track).toHaveBeenCalledWith('eventName');
+    Vue.prototype.$track(eventName);
+    expect(analyticsHelper.track)
+      .toHaveBeenCalledTimes(1)
+      .toHaveBeenCalledWith(eventName);
   });
 });

app/javascript/dashboard/helper/specs/CacheHelper/DataManger.spec.js

@@ -4,7 +4,7 @@ describe('DataManager', () => {
   const accountId = 'test-account';
   let dataManager;
 
-  beforeAll(async () => {
+  beforeEach(async () => {
     dataManager = new DataManager(accountId);
     await dataManager.initDb();
   });

app/javascript/dashboard/helper/specs/ReconnectService.spec.js

@@ -8,26 +8,26 @@ import {
 } from 'dashboard/helper/routeHelpers';
 import ReconnectService from 'dashboard/helper/ReconnectService';
 
-jest.mock('shared/helpers/mitt', () => ({
+vi.mock('shared/helpers/mitt', () => ({
   emitter: {
-    on: jest.fn(),
+    on: vi.fn(),
-    off: jest.fn(),
+    off: vi.fn(),
-    emit: jest.fn(),
+    emit: vi.fn(),
   },
 }));
 
-jest.mock('date-fns', () => ({
+vi.mock('date-fns', () => ({
-  differenceInSeconds: jest.fn(),
+  differenceInSeconds: vi.fn(),
 }));
 
-jest.mock('dashboard/helper/routeHelpers', () => ({
+vi.mock('dashboard/helper/routeHelpers', () => ({
-  isAConversationRoute: jest.fn(),
+  isAConversationRoute: vi.fn(),
-  isAInboxViewRoute: jest.fn(),
+  isAInboxViewRoute: vi.fn(),
-  isNotificationRoute: jest.fn(),
+  isNotificationRoute: vi.fn(),
 }));
 
 const storeMock = {
-  dispatch: jest.fn(),
+  dispatch: vi.fn(),
   getters: {
     getAppliedConversationFiltersQuery: [],
     'customViews/getActiveConversationFolder': { query: {} },
@@ -46,17 +46,17 @@ describe('ReconnectService', () => {
   let reconnectService;
 
   beforeEach(() => {
-    window.addEventListener = jest.fn();
+    window.addEventListener = vi.fn();
-    window.removeEventListener = jest.fn();
+    window.removeEventListener = vi.fn();
     Object.defineProperty(window, 'location', {
       configurable: true,
-      value: { reload: jest.fn() },
+      value: { reload: vi.fn() },
     });
     reconnectService = new ReconnectService(storeMock, routerMock);
   });
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   describe('constructor', () => {
@@ -111,7 +111,7 @@ describe('ReconnectService', () => {
 
   describe('handleOnlineEvent', () => {
     it('should reload the page if disconnected for more than 3 hours', () => {
-      reconnectService.getSecondsSinceDisconnect = jest
+      reconnectService.getSecondsSinceDisconnect = vi
         .fn()
         .mockReturnValue(10801);
       reconnectService.handleOnlineEvent();
@@ -119,7 +119,7 @@ describe('ReconnectService', () => {
     });
 
     it('should not reload the page if disconnected for less than 3 hours', () => {
-      reconnectService.getSecondsSinceDisconnect = jest
+      reconnectService.getSecondsSinceDisconnect = vi
         .fn()
         .mockReturnValue(10799);
       reconnectService.handleOnlineEvent();
@@ -129,9 +129,7 @@ describe('ReconnectService', () => {
 
   describe('fetchConversations', () => {
     it('should dispatch updateChatListFilters and fetchAllConversations', async () => {
-      reconnectService.getSecondsSinceDisconnect = jest
+      reconnectService.getSecondsSinceDisconnect = vi.fn().mockReturnValue(100);
-        .fn()
-        .mockReturnValue(100);
       await reconnectService.fetchConversations();
       expect(storeMock.dispatch).toHaveBeenCalledWith('updateChatListFilters', {
         page: null,
@@ -141,9 +139,7 @@ describe('ReconnectService', () => {
     });
 
     it('should dispatch updateChatListFilters and reset updatedWithin', async () => {
-      reconnectService.getSecondsSinceDisconnect = jest
+      reconnectService.getSecondsSinceDisconnect = vi.fn().mockReturnValue(100);
-        .fn()
-        .mockReturnValue(100);
       await reconnectService.fetchConversations();
       expect(storeMock.dispatch).toHaveBeenCalledWith('updateChatListFilters', {
         updatedWithin: null,
@@ -173,7 +169,7 @@ describe('ReconnectService', () => {
           },
         ],
       };
-      const spy = jest.spyOn(
+      const spy = vi.spyOn(
         reconnectService,
         'fetchFilteredOrSavedConversations'
       );
@@ -191,7 +187,7 @@ describe('ReconnectService', () => {
         query: null,
       };
 
-      const spy = jest.spyOn(reconnectService, 'fetchConversations');
+      const spy = vi.spyOn(reconnectService, 'fetchConversations');
 
       await reconnectService.fetchConversationsOnReconnect();
 
@@ -204,7 +200,7 @@ describe('ReconnectService', () => {
         query: { test: 'activeFolderQuery' },
       };
 
-      const spy = jest.spyOn(
+      const spy = vi.spyOn(
         reconnectService,
         'fetchFilteredOrSavedConversations'
       );
@@ -270,11 +266,11 @@ describe('ReconnectService', () => {
   describe('handleRouteSpecificFetch', () => {
     it('should fetch conversations and messages if current route is a conversation route', async () => {
       isAConversationRoute.mockReturnValue(true);
-      const spyConversations = jest.spyOn(
+      const spyConversations = vi.spyOn(
         reconnectService,
         'fetchConversationsOnReconnect'
       );
-      const spyMessages = jest.spyOn(
+      const spyMessages = vi.spyOn(
         reconnectService,
         'fetchConversationMessagesOnReconnect'
       );
@@ -285,14 +281,14 @@ describe('ReconnectService', () => {
 
     it('should fetch notifications if current route is an inbox view route', async () => {
       isAInboxViewRoute.mockReturnValue(true);
-      const spy = jest.spyOn(reconnectService, 'fetchNotificationsOnReconnect');
+      const spy = vi.spyOn(reconnectService, 'fetchNotificationsOnReconnect');
       await reconnectService.handleRouteSpecificFetch();
       expect(spy).toHaveBeenCalled();
     });
 
     it('should fetch notifications if current route is a notification route', async () => {
       isNotificationRoute.mockReturnValue(true);
-      const spy = jest.spyOn(reconnectService, 'fetchNotificationsOnReconnect');
+      const spy = vi.spyOn(reconnectService, 'fetchNotificationsOnReconnect');
       await reconnectService.handleRouteSpecificFetch();
       expect(spy).toHaveBeenCalled();
     });
@@ -320,7 +316,7 @@ describe('ReconnectService', () => {
 
   describe('onDisconnect', () => {
     it('should set disconnectTime and call setConversationLastMessageId', () => {
-      reconnectService.setConversationLastMessageId = jest.fn();
+      reconnectService.setConversationLastMessageId = vi.fn();
       reconnectService.onDisconnect();
       expect(reconnectService.disconnectTime).toBeInstanceOf(Date);
       expect(reconnectService.setConversationLastMessageId).toHaveBeenCalled();
@@ -329,8 +325,8 @@ describe('ReconnectService', () => {
 
   describe('onReconnect', () => {
     it('should handle route-specific fetch, revalidate caches, and emit WEBSOCKET_RECONNECT_COMPLETED event', async () => {
-      reconnectService.handleRouteSpecificFetch = jest.fn();
+      reconnectService.handleRouteSpecificFetch = vi.fn();
-      reconnectService.revalidateCaches = jest.fn();
+      reconnectService.revalidateCaches = vi.fn();
       await reconnectService.onReconnect();
       expect(reconnectService.handleRouteSpecificFetch).toHaveBeenCalled();
       expect(reconnectService.revalidateCaches).toHaveBeenCalled();

app/javascript/dashboard/helper/specs/commons.spec.js

@@ -36,16 +36,14 @@ describe('#createPendingMessage', () => {
     message: 'hi',
   };
   it('returns the pending message with expected new keys', () => {
-    expect(createPendingMessage(message)).toHaveProperty(
+    expect(createPendingMessage(message)).toMatchObject({
-      'content',
+      content: expect.anything(),
-      'id',
+      id: expect.anything(),
-      'status',
+      status: expect.anything(),
-      'echo_id',
+      echo_id: expect.anything(),
-      'status',
+      created_at: expect.anything(),
-      'created_at',
+      message_type: expect.anything(),
-      'message_type',
+    });
-      'conversation_id'
-    );
   });
 
   it('returns the pending message with status progress', () => {
@@ -61,23 +59,20 @@ describe('#createPendingMessage', () => {
     });
   });
 
-  it('returns the pending message with attachmnet key if file is passed', () => {
+  it('returns the pending message with attachment key if file is passed', () => {
     const messageWithFile = {
       message: 'hi',
       file: {},
     };
-    expect(createPendingMessage(messageWithFile)).toHaveProperty(
+    expect(createPendingMessage(messageWithFile)).toMatchObject({
-      'content',
+      content: expect.anything(),
-      'id',
+      id: expect.anything(),
-      'status',
+      status: expect.anything(),
-      'echo_id',
+      echo_id: expect.anything(),
-      'status',
+      created_at: expect.anything(),
-      'created_at',
+      message_type: expect.anything(),
-      'message_type',
+      attachments: [{ id: expect.anything() }],
-      'conversation_id',
+    });
-      'attachments',
-      'private'
-    );
   });
 
   it('returns the pending message to have one attachment', () => {

app/javascript/dashboard/helper/specs/directives/resize.spec.js

@@ -19,19 +19,19 @@ describe('resize directive', () => {
   beforeEach(() => {
     el = document.createElement('div');
     binding = {
-      value: jest.fn(),
+      value: vi.fn(),
     };
     observer = {
-      observe: jest.fn(),
+      observe: vi.fn(),
-      unobserve: jest.fn(),
+      unobserve: vi.fn(),
-      disconnect: jest.fn(),
+      disconnect: vi.fn(),
     };
     window.ResizeObserver = ResizeObserverMock;
-    jest.spyOn(window, 'ResizeObserver').mockImplementation(() => observer);
+    vi.spyOn(window, 'ResizeObserver').mockImplementation(() => observer);
   });
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('should create ResizeObserver on bind', () => {
@@ -44,7 +44,7 @@ describe('resize directive', () => {
   it('should call callback on observer callback', () => {
     el = document.createElement('div');
     binding = {
-      value: jest.fn(),
+      value: vi.fn(),
     };
 
     resize.bind(el, binding);

app/javascript/dashboard/helper/specs/editorHelper.spec.js

@@ -283,17 +283,17 @@ describe('findNodeToInsertImage', () => {
     mockEditorState = {
       selection: {
         $from: {
-          node: jest.fn(() => ({})),
+          node: vi.fn(() => ({})),
         },
         from: 0,
       },
       schema: {
         nodes: {
           image: {
-            create: jest.fn(attrs => ({ type: { name: 'image' }, attrs })),
+            create: vi.fn(attrs => ({ type: { name: 'image' }, attrs })),
           },
           paragraph: {
-            create: jest.fn((_, node) => ({
+            create: vi.fn((_, node) => ({
               type: { name: 'paragraph' },
               content: [node],
             })),
@@ -381,11 +381,11 @@ describe('setURLWithQueryAndSize', () => {
 
   beforeEach(() => {
     selectedNode = {
-      setAttribute: jest.fn(),
+      setAttribute: vi.fn(),
     };
 
     const tr = {
-      setNodeMarkup: jest.fn().mockReturnValue({
+      setNodeMarkup: vi.fn().mockReturnValue({
         docChanged: true,
       }),
     };
@@ -397,7 +397,7 @@ describe('setURLWithQueryAndSize', () => {
 
     editorView = {
       state,
-      dispatch: jest.fn(),
+      dispatch: vi.fn(),
     };
   });
 
@@ -420,7 +420,7 @@ describe('setURLWithQueryAndSize', () => {
   });
 
   it('does not update the editor view if the document has not changed', () => {
-    editorView.state.tr.setNodeMarkup = jest.fn().mockReturnValue({
+    editorView.state.tr.setNodeMarkup = vi.fn().mockReturnValue({
       docChanged: false,
     });
 

app/javascript/dashboard/helper/specs/themeHelper.spec.js

@@ -1,7 +1,7 @@
 import { setColorTheme } from 'dashboard/helper/themeHelper.js';
 import { LocalStorage } from 'shared/helpers/localStorage';
 
-jest.mock('shared/helpers/localStorage');
+vi.mock('shared/helpers/localStorage');
 
 describe('setColorTheme', () => {
   it('should set body class to dark if selectedColorScheme is dark', () => {

app/javascript/dashboard/helper/specs/uploadHelper.spec.js

@@ -1,9 +1,8 @@
 import { uploadFile } from '../uploadHelper';
 import axios from 'axios';
 
-// Mocking axios using jest-mock-axios
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#Upload Helpers', () => {
   afterEach(() => {

app/javascript/dashboard/mixins/specs/aiMixin.spec.js

@@ -4,8 +4,8 @@ import Vuex from 'vuex';
 import OpenAPI from '../../api/integrations/openapi';
 import { LocalStorage } from '../../../shared/helpers/localStorage';
 
-jest.mock('../../api/integrations/openapi');
+vi.mock('../../api/integrations/openapi');
-jest.mock('../../../shared/helpers/localStorage');
+vi.mock('../../../shared/helpers/localStorage');
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -18,12 +18,12 @@ describe('aiMixin', () => {
   let actions;
 
   beforeEach(() => {
-    OpenAPI.processEvent = jest.fn();
+    OpenAPI.processEvent = vi.fn();
-    LocalStorage.set = jest.fn();
+    LocalStorage.set = vi.fn();
-    LocalStorage.get = jest.fn();
+    LocalStorage.get = vi.fn();
 
     actions = {
-      ['integrations/get']: jest.fn(),
+      ['integrations/get']: vi.fn(),
     };
 
     getters = {
@@ -63,20 +63,20 @@ describe('aiMixin', () => {
       localVue,
     });
 
-    const dispatchSpy = jest.spyOn(wrapper.vm.$store, 'dispatch');
+    const dispatchSpy = vi.spyOn(wrapper.vm.$store, 'dispatch');
     await wrapper.vm.fetchIntegrationsIfRequired();
     expect(dispatchSpy).toHaveBeenCalledWith('integrations/get');
   });
 
   it('does not fetch integrations', async () => {
-    const dispatchSpy = jest.spyOn(wrapper.vm.$store, 'dispatch');
+    const dispatchSpy = vi.spyOn(wrapper.vm.$store, 'dispatch');
     await wrapper.vm.fetchIntegrationsIfRequired();
     expect(dispatchSpy).not.toHaveBeenCalledWith('integrations/get');
     expect(wrapper.vm.isAIIntegrationEnabled).toBeTruthy();
   });
 
   it('fetches label suggestions', async () => {
-    const processEventSpy = jest.spyOn(OpenAPI, 'processEvent');
+    const processEventSpy = vi.spyOn(OpenAPI, 'processEvent');
     await wrapper.vm.fetchLabelSuggestions({
       conversationId: '123',
     });

app/javascript/dashboard/mixins/specs/attributeMixin.spec.js

@@ -11,7 +11,7 @@ describe('attributeMixin', () => {
   let store;
 
   beforeEach(() => {
-    actions = { updateUISettings: jest.fn(), toggleSidebarUIState: jest.fn() };
+    actions = { updateUISettings: vi.fn(), toggleSidebarUIState: vi.fn() };
     getters = {
       getSelectedChat: () => ({
         id: 7165,

app/javascript/dashboard/mixins/specs/fileUploadMixin.spec.js

@@ -1,13 +1,13 @@
 import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
 import Vue from 'vue';
 
-jest.mock('shared/helpers/FileHelper', () => ({
+vi.mock('shared/helpers/FileHelper', () => ({
-  checkFileSizeLimit: jest.fn(),
+  checkFileSizeLimit: vi.fn(),
 }));
 
-jest.mock('activestorage', () => ({
+vi.mock('activestorage', () => ({
-  DirectUpload: jest.fn().mockImplementation(() => ({
+  DirectUpload: vi.fn().mockImplementation(() => ({
-    create: jest.fn(),
+    create: vi.fn(),
   })),
 }));
 
@@ -27,20 +27,20 @@ describe('FileUploadMixin', () => {
     vm.currentUser = {
       access_token: 'token',
     };
-    vm.$t = jest.fn(message => message);
+    vm.$t = vi.fn(message => message);
-    vm.showAlert = jest.fn();
+    vm.showAlert = vi.fn();
-    vm.attachFile = jest.fn();
+    vm.attachFile = vi.fn();
   });
 
   it('should call onDirectFileUpload when direct uploads are enabled', () => {
-    vm.onDirectFileUpload = jest.fn();
+    vm.onDirectFileUpload = vi.fn();
     vm.onFileUpload({});
     expect(vm.onDirectFileUpload).toHaveBeenCalledWith({});
   });
 
   it('should call onIndirectFileUpload when direct uploads are disabled', () => {
     vm.globalConfig.directUploadsEnabled = false;
-    vm.onIndirectFileUpload = jest.fn();
+    vm.onIndirectFileUpload = vi.fn();
     vm.onFileUpload({});
     expect(vm.onIndirectFileUpload).toHaveBeenCalledWith({});
   });
@@ -53,7 +53,7 @@ describe('FileUploadMixin', () => {
 
     it('shows an alert if the file size exceeds the maximum limit', () => {
       const fakeFile = { size: 999999999 };
-      vm.showAlert = jest.fn();
+      vm.showAlert = vi.fn();
       vm.onDirectFileUpload(fakeFile);
       expect(vm.showAlert).toHaveBeenCalledWith(expect.any(String));
     });
@@ -67,7 +67,7 @@ describe('FileUploadMixin', () => {
 
     it('shows an alert if the file size exceeds the maximum limit', () => {
       const fakeFile = { size: 999999999 };
-      vm.showAlert = jest.fn();
+      vm.showAlert = vi.fn();
       vm.onIndirectFileUpload(fakeFile);
       expect(vm.showAlert).toHaveBeenCalledWith(expect.any(String));
     });

app/javascript/dashboard/mixins/specs/time.spec.js

@@ -11,14 +11,14 @@ describe('#messageStamp', () => {
 
 describe('#messageTimestamp', () => {
   beforeEach(() => {
-    jest.useFakeTimers('modern');
+    vi.useFakeTimers('modern');
 
     const mockDate = new Date(2023, 4, 5);
-    jest.setSystemTime(mockDate);
+    vi.setSystemTime(mockDate);
   });
 
   afterEach(() => {
-    jest.useRealTimers();
+    vi.useRealTimers();
   });
 
   it('should return the message date in the specified format if the message was sent in the current year', () => {
@@ -35,7 +35,7 @@ describe('#messageTimestamp', () => {
 
 describe('#dynamicTime', () => {
   it('returns correct value', () => {
-    Date.now = jest.fn(() => new Date(Date.UTC(2023, 1, 14)).valueOf());
+    Date.now = vi.fn(() => new Date(Date.UTC(2023, 1, 14)).valueOf());
     expect(TimeMixin.methods.dynamicTime(1612971343)).toEqual(
       'about 2 years ago'
     );

app/javascript/dashboard/mixins/specs/uiSettings.spec.js

@@ -14,7 +14,7 @@ describe('uiSettingsMixin', () => {
   let store;
 
   beforeEach(() => {
-    actions = { updateUISettings: jest.fn(), toggleSidebarUIState: jest.fn() };
+    actions = { updateUISettings: vi.fn(), toggleSidebarUIState: vi.fn() };
     getters = {
       getUISettings: () => ({
         enter_to_send_enabled: false,

app/javascript/dashboard/routes/dashboard/Dashboard.vue

@@ -41,7 +41,6 @@
 
 <script>
 import Sidebar from '../../components/layout/Sidebar.vue';
-import CommandBar from './commands/commandbar.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal.vue';
 import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
@@ -50,6 +49,7 @@ import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.v
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import wootConstants from 'dashboard/constants/globals';
+const CommandBar = () => import('./commands/commandbar.vue');
 
 export default {
   components: {

app/javascript/dashboard/routes/dashboard/contacts/components/specs/AddReminder.spec.js

@@ -15,7 +15,7 @@ describe('AddReminder', () => {
   });
 
   it('tests resetValue', () => {
-    const resetValue = jest.spyOn(wrapper.vm, 'resetValue');
+    const resetValue = vi.spyOn(wrapper.vm, 'resetValue');
     wrapper.vm.content = 'test';
     wrapper.vm.date = '08/11/2022';
     wrapper.vm.resetValue();
@@ -25,7 +25,7 @@ describe('AddReminder', () => {
   });
 
   it('tests optionSelected', () => {
-    const optionSelected = jest.spyOn(wrapper.vm, 'optionSelected');
+    const optionSelected = vi.spyOn(wrapper.vm, 'optionSelected');
     wrapper.vm.label = '';
     wrapper.vm.optionSelected({ target: { value: 'test' } });
     expect(wrapper.vm.label).toEqual('test');
@@ -33,7 +33,7 @@ describe('AddReminder', () => {
   });
 
   it('tests onAdd', () => {
-    const onAdd = jest.spyOn(wrapper.vm, 'onAdd');
+    const onAdd = vi.spyOn(wrapper.vm, 'onAdd');
     wrapper.vm.label = 'label';
     wrapper.vm.content = 'content';
     wrapper.vm.date = '08/11/2022';

app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js

@@ -1,6 +1,6 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
-const ConversationView = () => import('./ConversationView');
+const ConversationView = () => import('./ConversationView.vue');
 
 export default {
   routes: [

app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue

@@ -59,13 +59,12 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import UpgradePage from './UpgradePage';
+import UpgradePage from './UpgradePage.vue';
 import { frontendURL } from '../../../../helper/URLHelper';
 import Sidebar from 'dashboard/components/layout/Sidebar.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import PortalPopover from '../components/PortalPopover.vue';
 import HelpCenterSidebar from '../components/Sidebar/Sidebar.vue';
-import CommandBar from 'dashboard/routes/dashboard/commands/commandbar.vue';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal.vue';
 import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
@@ -73,6 +72,8 @@ import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import portalMixin from '../mixins/portalMixin';
 import AddCategory from '../pages/categories/AddCategory.vue';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+const CommandBar = () =>
+  import('dashboard/routes/dashboard/commands/commandbar.vue');
 
 export default {
   components: {

app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js

@@ -1,30 +1,32 @@
-import HelpCenterLayout from './components/HelpCenterLayout';
+import HelpCenterLayout from './components/HelpCenterLayout.vue';
 import { getPortalRoute } from './helpers/routeHelper';
 
-const ListAllPortals = () => import('./pages/portals/ListAllPortals');
+const ListAllPortals = () => import('./pages/portals/ListAllPortals.vue');
-const NewPortal = () => import('./pages/portals/NewPortal');
+const NewPortal = () => import('./pages/portals/NewPortal.vue');
 
-const EditPortal = () => import('./pages/portals/EditPortal');
+const EditPortal = () => import('./pages/portals/EditPortal.vue');
-const EditPortalBasic = () => import('./pages/portals/EditPortalBasic');
+const EditPortalBasic = () => import('./pages/portals/EditPortalBasic.vue');
 const EditPortalCustomization = () =>
-  import('./pages/portals/EditPortalCustomization');
+  import('./pages/portals/EditPortalCustomization.vue');
 const EditPortalLocales = () => import('./pages/portals/EditPortalLocales.vue');
-const ShowPortal = () => import('./pages/portals/ShowPortal');
+const ShowPortal = () => import('./pages/portals/ShowPortal.vue');
-const PortalDetails = () => import('./pages/portals/PortalDetails');
+const PortalDetails = () => import('./pages/portals/PortalDetails.vue');
-const PortalCustomization = () => import('./pages/portals/PortalCustomization');
+const PortalCustomization = () =>
+  import('./pages/portals/PortalCustomization.vue');
 const PortalSettingsFinish = () =>
-  import('./pages/portals/PortalSettingsFinish');
+  import('./pages/portals/PortalSettingsFinish.vue');
 
-const ListAllCategories = () => import('./pages/categories/ListAllCategories');
+const ListAllCategories = () =>
-const NewCategory = () => import('./pages/categories/NewCategory');
+  import('./pages/categories/ListAllCategories.vue');
-const EditCategory = () => import('./pages/categories/EditCategory');
+const NewCategory = () => import('./pages/categories/NewCategory.vue');
+const EditCategory = () => import('./pages/categories/EditCategory.vue');
 const ListCategoryArticles = () =>
-  import('./pages/articles/ListCategoryArticles');
+  import('./pages/articles/ListCategoryArticles.vue');
-const ListAllArticles = () => import('./pages/articles/ListAllArticles');
+const ListAllArticles = () => import('./pages/articles/ListAllArticles.vue');
 const DefaultPortalArticles = () =>
-  import('./pages/articles/DefaultPortalArticles');
+  import('./pages/articles/DefaultPortalArticles.vue');
-const NewArticle = () => import('./pages/articles/NewArticle');
+const NewArticle = () => import('./pages/articles/NewArticle.vue');
-const EditArticle = () => import('./pages/articles/EditArticle');
+const EditArticle = () => import('./pages/articles/EditArticle.vue');
 
 const portalRoutes = [
   {

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script>
-const EmojiInput = () => import('shared/components/emoji/EmojiInput');
+const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');
 
 export default {
   components: { EmojiInput },

app/javascript/dashboard/routes/dashboard/settings/inbox/channel-factory.js

@@ -1,12 +1,12 @@
-import Facebook from './channels/Facebook';
+import Facebook from './channels/Facebook.vue';
-import Website from './channels/Website';
+import Website from './channels/Website.vue';
-import Twitter from './channels/Twitter';
+import Twitter from './channels/Twitter.vue';
-import Api from './channels/Api';
+import Api from './channels/Api.vue';
-import Email from './channels/Email';
+import Email from './channels/Email.vue';
-import Sms from './channels/Sms';
+import Sms from './channels/Sms.vue';
-import Whatsapp from './channels/Whatsapp';
+import Whatsapp from './channels/Whatsapp.vue';
-import Line from './channels/Line';
+import Line from './channels/Line.vue';
-import Telegram from './channels/Telegram';
+import Telegram from './channels/Telegram.vue';
 
 const channelViewList = {
   facebook: Facebook,

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersAgents.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import ReportsFiltersAgents from '../../Filters/Agents';
+import ReportsFiltersAgents from '../../Filters/Agents.vue';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -16,7 +16,7 @@ const mockStore = new Vuex.Store({
         getAgents: state => state.agents,
       },
       actions: {
-        get: jest.fn(),
+        get: vi.fn(),
       },
     },
   },
@@ -50,7 +50,7 @@ describe('ReportsFiltersAgents.vue', () => {
   });
 
   it('dispatches the "agents/get" action when the component is mounted', () => {
-    const dispatchSpy = jest.spyOn(mockStore, 'dispatch');
+    const dispatchSpy = vi.spyOn(mockStore, 'dispatch');
 
     shallowMount(ReportsFiltersAgents, mountParams);
 

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateGroupBy.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import ReportsFiltersDateGroupBy from '../../Filters/DateGroupBy';
+import ReportsFiltersDateGroupBy from '../../Filters/DateGroupBy.vue';
 import { GROUP_BY_OPTIONS } from '../../../constants';
 
 const mountParams = {

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateRange.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import ReportFiltersDateRange from '../../Filters/DateRange';
+import ReportFiltersDateRange from '../../Filters/DateRange.vue';
 import { DATE_RANGE_OPTIONS } from '../../../constants';
 
 const mountParams = {

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import ReportsFiltersInboxes from '../../Filters/Inboxes';
+import ReportsFiltersInboxes from '../../Filters/Inboxes.vue';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -26,7 +26,7 @@ describe('ReportsFiltersInboxes.vue', () => {
         ],
       },
       actions: {
-        get: jest.fn(),
+        get: vi.fn(),
       },
     };
 

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersLabels.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import ReportsFiltersLabels from '../../Filters/Labels';
+import ReportsFiltersLabels from '../../Filters/Labels.vue';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -26,7 +26,7 @@ describe('ReportsFiltersLabels.vue', () => {
         ],
       },
       actions: {
-        get: jest.fn(),
+        get: vi.fn(),
       },
     };
 

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersRatings.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
-import ReportFiltersRatings from '../../Filters/Ratings';
+import ReportFiltersRatings from '../../Filters/Ratings.vue';
 import { CSAT_RATINGS } from 'shared/constants/messages';
 
 const mountParams = {

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersTeams.spec.js

@@ -26,7 +26,7 @@ describe('ReportsFiltersTeams.vue', () => {
         ],
       },
       actions: {
-        get: jest.fn(),
+        get: vi.fn(),
       },
     };
 

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`CsatMetrics.vue computes response count correctly 1`] = `
+exports[`CsatMetrics.vue > computes response count correctly 1`] = `
-<div class="flex-col lg:flex-row flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700">
+"<div class="flex-col lg:flex-row flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700">
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL" value="100" infotext="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"></csat-metric-card-stub>
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL" value="--" infotext="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP" disabled="true" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"></csat-metric-card-stub>
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL" value="90%" infotext="CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"></csat-metric-card-stub>
   <!---->
-</div>
+</div>"
 `;

app/javascript/dashboard/routes/index.spec.js

@@ -1,18 +1,11 @@
-import 'expect-more-jest';
 import { validateAuthenticateRoutePermission } from './index';
 
-jest.mock('./dashboard/dashboard.routes', () => ({
-  routes: [],
-}));
-window.roleWiseRoutes = {};
-
 describe('#validateAuthenticateRoutePermission', () => {
   describe(`when route is protected`, () => {
     describe(`when user not logged in`, () => {
       it(`should redirect to login`, () => {
-        // Arrange
         const to = { name: 'some-protected-route', params: { accountId: 1 } };
-        const next = jest.fn();
+        const next = vi.fn();
         const getters = {
           isLoggedIn: false,
           getCurrentUser: {
@@ -30,14 +23,18 @@ describe('#validateAuthenticateRoutePermission', () => {
     describe(`when user is logged in`, () => {
       describe(`when route is not accessible to current user`, () => {
         it(`should redirect to dashboard`, () => {
-          window.roleWiseRoutes.agent = ['dashboard'];
+          const to = {
-          const to = { name: 'admin', params: { accountId: 1 } };
+            name: 'general_settings_index',
-          const next = jest.fn();
+            params: { accountId: 1 },
+            meta: { permissions: ['administrator'] },
+          };
+          const next = vi.fn();
           const getters = {
             isLoggedIn: true,
             getCurrentUser: {
               account_id: 1,
               id: 1,
+              permissions: ['agent'],
               accounts: [{ id: 1, role: 'agent', status: 'active' }],
             },
           };
@@ -47,15 +44,19 @@ describe('#validateAuthenticateRoutePermission', () => {
       });
       describe(`when route is accessible to current user`, () => {
         it(`should go there`, () => {
-          window.roleWiseRoutes.agent = ['dashboard', 'admin'];
+          const to = {
-          const to = { name: 'admin', params: { accountId: 1 } };
+            name: 'general_settings_index',
-          const next = jest.fn();
+            params: { accountId: 1 },
+            meta: { permissions: ['administrator'] },
+          };
+          const next = vi.fn();
           const getters = {
             isLoggedIn: true,
             getCurrentUser: {
               account_id: 1,
               id: 1,
-              accounts: [{ id: 1, role: 'agent', status: 'active' }],
+              permissions: ['administrator'],
+              accounts: [{ id: 1, role: 'administrator', status: 'active' }],
             },
           };
           validateAuthenticateRoutePermission(to, next, { getters });

app/javascript/dashboard/store/modules/helpCenterArticles/specs/action.spec.js

@@ -3,7 +3,7 @@ import { actions } from '../actions';
 import * as types from '../../../mutation-types';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
 
-jest.mock('dashboard/helper/uploadHelper');
+vi.mock('dashboard/helper/uploadHelper');
 
 const articleList = [
   {
@@ -12,10 +12,10 @@ const articleList = [
     title: 'Documents are required to complete KYC',
   },
 ];
-const commit = jest.fn();
+const commit = vi.fn();
-const dispatch = jest.fn();
+const dispatch = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#index', () => {

app/javascript/dashboard/store/modules/helpCenterCategories/specs/actions.spec.js

@@ -2,9 +2,9 @@ import axios from 'axios';
 import { actions } from '../actions';
 import * as types from '../../../mutation-types';
 import { categoriesPayload } from './fixtures';
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#index', () => {

app/javascript/dashboard/store/modules/helpCenterPortals/specs/actions.spec.js

@@ -3,10 +3,10 @@ import { actions } from '../actions';
 import { types } from '../mutations';
 import { apiResponse } from './fixtures';
 
-const commit = jest.fn();
+const commit = vi.fn();
-const dispatch = jest.fn();
+const dispatch = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#index', () => {

app/javascript/dashboard/store/modules/specs/account/actions.spec.js

@@ -12,9 +12,9 @@ const newAccountInfo = {
   accountName: 'Company two',
 };
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/account/getters.spec.js

@@ -5,7 +5,7 @@ const accountData = {
   name: 'Company one',
   locale: 'en',
   features: {
-    auto_resolve_conversations: false,
+    auto_resolve_conversations: true,
     agent_management: false,
   },
 };
@@ -38,17 +38,11 @@ describe('#getters', () => {
     const state = {
       records: [accountData],
     };
-    const rootGetters = {
-      getCurrentUser: {
-        type: 'SuperAdmin',
-      },
-    };
     expect(
       getters.isFeatureEnabledonAccount(
         state,
         null,
-        null,
+        null
-        rootGetters
       )(1, 'auto_resolve_conversations')
     ).toEqual(true);
   });

app/javascript/dashboard/store/modules/specs/agentBots/agentBots.spec.js

@@ -3,9 +3,9 @@ import { actions } from '../../agentBots';
 import types from '../../../mutation-types';
 import { agentBotRecords } from './fixtures';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/agents/actions.spec.js

@@ -3,10 +3,10 @@ import { actions } from '../../agents';
 import * as types from '../../../mutation-types';
 import agentList from './fixtures';
 
-const commit = jest.fn();
+const commit = vi.fn();
-const dispatch = jest.fn();
+const dispatch = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/attributes/actions.spec.js

@@ -3,9 +3,9 @@ import { actions } from '../../attributes';
 import * as types from '../../../mutation-types';
 import attributesList from './fixtures';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/auth/actions.spec.js

@@ -2,23 +2,18 @@ import axios from 'axios';
 import Cookies from 'js-cookie';
 import { actions } from '../../auth';
 import * as types from '../../../mutation-types';
-import { setUser, clearCookiesOnLogout } from '../../../utils/api';
+import * as APIHelpers from '../../../utils/api';
 import '../../../../routes';
 
-jest.mock('../../../../routes', () => {});
+vi.spyOn(APIHelpers, 'setUser');
-jest.mock('../../../utils/api', () => ({
+vi.spyOn(APIHelpers, 'clearCookiesOnLogout');
-  setUser: jest.fn(),
+vi.spyOn(APIHelpers, 'getHeaderExpiry');
-  clearCookiesOnLogout: jest.fn(),
+vi.spyOn(Cookies, 'get');
-  getHeaderExpiry: jest.fn(),
-}));
-jest.mock('js-cookie', () => ({
-  get: jest.fn(),
-}));
 
-const commit = jest.fn();
+const commit = vi.fn();
-const dispatch = jest.fn();
+const dispatch = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#validityCheck', () => {
@@ -28,7 +23,7 @@ describe('#actions', () => {
         headers: { expiry: 581842904 },
       });
       await actions.validityCheck({ commit });
-      expect(setUser).toHaveBeenCalledTimes(1);
+      expect(APIHelpers.setUser).toHaveBeenCalledTimes(1);
       expect(commit.mock.calls).toEqual([
         [types.default.SET_CURRENT_USER, { id: 1, name: 'John' }],
       ]);
@@ -38,7 +33,7 @@ describe('#actions', () => {
         response: { status: 401 },
       });
       await actions.validityCheck({ commit });
-      expect(clearCookiesOnLogout);
+      expect(APIHelpers.clearCookiesOnLogout);
     });
   });
 

app/javascript/dashboard/store/modules/specs/auth/getters.spec.js

@@ -1,8 +1,5 @@
 import { getters } from '../../auth';
 
-import '../../../../routes';
-
-jest.mock('../../../../routes', () => {});
 describe('#getters', () => {
   describe('#isLoggedIn', () => {
     it('return correct value if user data is available', () => {

app/javascript/dashboard/store/modules/specs/automations/actions.spec.js

@@ -3,9 +3,9 @@ import { actions } from '../../automations';
 import * as types from '../../../mutation-types';
 import automationsList from './fixtures';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/bulkActions/actions.spec.js

@@ -2,9 +2,9 @@ import axios from 'axios';
 import { actions } from '../../bulkActions';
 import * as types from '../../../mutation-types';
 import payload from './fixtures';
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#create', () => {

app/javascript/dashboard/store/modules/specs/campaigns/actions.spec.js

@@ -3,9 +3,9 @@ import { actions } from '../../campaigns';
 import * as types from '../../../mutation-types';
 import campaignList from './fixtures';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/contactConversations/actions.spec.js

@@ -8,9 +8,9 @@ import {
 import * as types from '../../../mutation-types';
 import conversationList from './fixtures';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/contactLabels/actions.spec.js

@@ -2,9 +2,9 @@ import axios from 'axios';
 import { actions } from '../../contactLabels';
 import * as types from '../../../mutation-types';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/contactNotes/actions.spec.js

@@ -3,9 +3,9 @@ import { actions } from '../../contactNotes';
 import * as types from '../../../mutation-types';
 import notesData from './fixtures';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/contacts/actions.spec.js

@@ -21,9 +21,9 @@ const filterQueryData = {
   ],
 };
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/conversationLabels/actions.spec.js

@@ -2,9 +2,9 @@ import axios from 'axios';
 import { actions } from '../../conversationLabels';
 import * as types from '../../../mutation-types';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/conversationPage/actions.spec.js

@@ -1,7 +1,7 @@
 import { actions } from '../../conversationPage';
 import * as types from '../../../mutation-types';
 
-const commit = jest.fn();
+const commit = vi.fn();
 
 describe('#actions', () => {
   describe('#setCurrentPage', () => {

app/javascript/dashboard/store/modules/specs/conversationSearch/actions.spec.js

@@ -1,9 +1,9 @@
 import { actions } from '../../conversationSearch';
 import types from '../../../mutation-types';
 import axios from 'axios';
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/conversationStats/actions.spec.js

@@ -2,9 +2,9 @@ import axios from 'axios';
 import { actions } from '../../conversationStats';
 import * as types from '../../../mutation-types';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/conversationTypingStatus/actions.spec.js

@@ -1,7 +1,7 @@
 import { actions } from '../../conversationTypingStatus';
 import * as types from '../../../mutation-types';
 
-const commit = jest.fn();
+const commit = vi.fn();
 
 describe('#actions', () => {
   describe('#create', () => {

app/javascript/dashboard/store/modules/specs/conversationWatchers/actions.spec.js

@@ -2,9 +2,9 @@ import axios from 'axios';
 import { actions } from '../../conversationWatchers';
 import types from '../../../mutation-types';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js

@@ -15,10 +15,10 @@ const dataToSend = {
 };
 import { dataReceived } from './testConversationResponse';
 
-const commit = jest.fn();
+const commit = vi.fn();
-const dispatch = jest.fn();
+const dispatch = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#hasMessageFailedWithExternalError', () => {
   it('returns false if message is sent', () => {
@@ -292,7 +292,7 @@ describe('#actions', () => {
 
   describe('#markMessagesRead', () => {
     beforeEach(() => {
-      jest.useFakeTimers();
+      vi.useFakeTimers();
     });
 
     it('sends correct mutations if api is successful', async () => {
@@ -301,7 +301,7 @@ describe('#actions', () => {
         data: { id: 1, agent_last_seen_at: lastSeen },
       });
       await actions.markMessagesRead({ commit }, { id: 1 });
-      jest.runAllTimers();
+      vi.runAllTimers();
       expect(commit).toHaveBeenCalledTimes(1);
       expect(commit.mock.calls).toEqual([
         [types.UPDATE_MESSAGE_UNREAD_COUNT, { id: 1, lastSeen }],
@@ -321,7 +321,7 @@ describe('#actions', () => {
         data: { id: 1, agent_last_seen_at: lastSeen, unread_count: 1 },
       });
       await actions.markMessagesUnread({ commit }, { id: 1 });
-      jest.runAllTimers();
+      vi.runAllTimers();
       expect(commit).toHaveBeenCalledTimes(1);
       expect(commit.mock.calls).toEqual([
         [

app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js

@@ -1,11 +1,11 @@
 import types from '../../../mutation-types';
 import { mutations } from '../../conversations';
 
-jest.mock('shared/helpers/mitt', () => ({
+vi.mock('shared/helpers/mitt', () => ({
   emitter: {
-    emit: jest.fn(),
+    emit: vi.fn(),
-    on: jest.fn(),
+    on: vi.fn(),
-    off: jest.fn(),
+    off: vi.fn(),
   },
 }));
 
@@ -116,7 +116,7 @@ describe('#mutations', () => {
     });
 
     it('add message to the conversation if it does not exist in the store', () => {
-      global.bus = { $emit: jest.fn() };
+      global.bus = { $emit: vi.fn() };
       const state = {
         allConversations: [{ id: 1, messages: [] }],
         selectedChatId: -1,
@@ -144,7 +144,7 @@ describe('#mutations', () => {
     });
 
     it('add message to the conversation and emit scrollToMessage if it does not exist in the store', () => {
-      global.bus = { $emit: jest.fn() };
+      global.bus = { $emit: vi.fn() };
       const state = {
         allConversations: [{ id: 1, messages: [] }],
         selectedChatId: 1,
@@ -172,7 +172,7 @@ describe('#mutations', () => {
     });
 
     it('update message if it exist in the store', () => {
-      global.bus = { $emit: jest.fn() };
+      global.bus = { $emit: vi.fn() };
       const state = {
         allConversations: [
           {

app/javascript/dashboard/store/modules/specs/csat/actions.spec.js

@@ -2,9 +2,9 @@ import axios from 'axios';
 import { actions } from '../../csat';
 import types from '../../../mutation-types';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/customViews/actions.spec.js

@@ -3,9 +3,9 @@ import { actions } from '../../customViews';
 import * as types from '../../../mutation-types';
 import { customViewList, updateCustomViewList } from './fixtures';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/dashboardApps/actions.spec.js

@@ -2,9 +2,9 @@ import axios from 'axios';
 import { actions } from '../../dashboardApps';
 import types from '../../../mutation-types';
 import { payload, automationsList } from './fixtures';
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/draftMessages/actions.spec.js

@@ -2,9 +2,9 @@ import axios from 'axios';
 import { actions } from '../../draftMessages';
 import types from '../../../mutation-types';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#set', () => {

app/javascript/dashboard/store/modules/specs/inboxAssignableMembers/actions.spec.js

@@ -2,9 +2,9 @@ import axios from 'axios';
 import { actions, types } from '../../inboxAssignableAgents';
 import agentsData from './fixtures';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#fetch', () => {

app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js

@@ -3,14 +3,14 @@ import { actions } from '../../inboxes';
 import * as types from '../../../mutation-types';
 import inboxList from './fixtures';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {
     it('sends correct actions if API is success', async () => {
-      const mockedGet = jest.fn(url => {
+      const mockedGet = vi.fn(url => {
         if (url === '/api/v1/inboxes') {
           return Promise.resolve({ data: { payload: inboxList } });
         }

app/javascript/dashboard/store/modules/specs/integrations/actions.spec.js

@@ -3,9 +3,9 @@ import { actions } from '../../integrations';
 import types from '../../../mutation-types';
 import integrationsList from './fixtures';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 const errorMessage = { message: 'Incorrect header' };
 describe('#actions', () => {

app/javascript/dashboard/store/modules/specs/labels/actions.spec.js

@@ -3,14 +3,14 @@ import { actions } from '../../labels';
 import * as types from '../../../mutation-types';
 import labelsList from './fixtures';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {
     it('sends correct actions if API is success', async () => {
-      const mockedGet = jest.fn(url => {
+      const mockedGet = vi.fn(url => {
         if (url === '/api/v1/labels') {
           return Promise.resolve({ data: { payload: labelsList } });
         }

app/javascript/dashboard/store/modules/specs/macros/actions.spec.js

@@ -3,9 +3,9 @@ import { actions } from '../../macros';
 import * as types from '../../../mutation-types';
 import macrosList from './fixtures';
 
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/notifications/actions.spec.js

@@ -1,9 +1,9 @@
 import axios from 'axios';
 import { actions } from '../../notifications/actions';
 import types from '../../../mutation-types';
-const commit = jest.fn();
+const commit = vi.fn();
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#actions', () => {
   describe('#get', () => {

app/javascript/dashboard/store/modules/specs/reports/actions.spec.js

@@ -1,13 +1,12 @@
 import axios from 'axios';
 import { actions } from '../../reports';
-import DownloadHelper from 'dashboard/helper/downloadHelper';
+import * as DownloadHelper from 'dashboard/helper/downloadHelper';
-global.open = jest.fn();
-global.axios = axios;
-jest.mock('axios');
 
-jest.mock('dashboard/helper/downloadHelper', () => ({
+global.open = vi.fn();
-  downloadCsvFile: jest.fn(),
+global.axios = axios;
-}));
+
+vi.mock('axios');
+vi.spyOn(DownloadHelper, 'downloadCsvFile');
 
 describe('#actions', () => {
   describe('#downloadAgentReports', () => {