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>
This commit is contained in:
Pranav
2024-07-10 08:32:16 -07:00
committed by GitHub
parent 9498d1f003
commit 9de8c27368
140 changed files with 1678 additions and 2810 deletions

View File

@@ -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: {

View File

@@ -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';

View File

@@ -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: [

View File

@@ -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: {

View File

@@ -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 NewPortal = () => import('./pages/portals/NewPortal');
const ListAllPortals = () => import('./pages/portals/ListAllPortals.vue');
const NewPortal = () => import('./pages/portals/NewPortal.vue');
const EditPortal = () => import('./pages/portals/EditPortal');
const EditPortalBasic = () => import('./pages/portals/EditPortalBasic');
const EditPortal = () => import('./pages/portals/EditPortal.vue');
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 PortalDetails = () => import('./pages/portals/PortalDetails');
const PortalCustomization = () => import('./pages/portals/PortalCustomization');
const ShowPortal = () => import('./pages/portals/ShowPortal.vue');
const PortalDetails = () => import('./pages/portals/PortalDetails.vue');
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 NewCategory = () => import('./pages/categories/NewCategory');
const EditCategory = () => import('./pages/categories/EditCategory');
const ListAllCategories = () =>
import('./pages/categories/ListAllCategories.vue');
const NewCategory = () => import('./pages/categories/NewCategory.vue');
const EditCategory = () => import('./pages/categories/EditCategory.vue');
const ListCategoryArticles = () =>
import('./pages/articles/ListCategoryArticles');
const ListAllArticles = () => import('./pages/articles/ListAllArticles');
import('./pages/articles/ListCategoryArticles.vue');
const ListAllArticles = () => import('./pages/articles/ListAllArticles.vue');
const DefaultPortalArticles = () =>
import('./pages/articles/DefaultPortalArticles');
const NewArticle = () => import('./pages/articles/NewArticle');
const EditArticle = () => import('./pages/articles/EditArticle');
import('./pages/articles/DefaultPortalArticles.vue');
const NewArticle = () => import('./pages/articles/NewArticle.vue');
const EditArticle = () => import('./pages/articles/EditArticle.vue');
const portalRoutes = [
{

View File

@@ -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 },

View File

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

View File

@@ -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);

View File

@@ -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 = {

View File

@@ -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 = {

View File

@@ -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(),
},
};

View File

@@ -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(),
},
};

View File

@@ -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 = {

View File

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

View File

@@ -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`] = `
<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">
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">
<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>"
`;

View File

@@ -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 = { name: 'admin', params: { accountId: 1 } };
const next = jest.fn();
const to = {
name: 'general_settings_index',
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 = { name: 'admin', params: { accountId: 1 } };
const next = jest.fn();
const to = {
name: 'general_settings_index',
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 });