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

@@ -1,21 +1,44 @@
import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
import { JSDOM } from 'jsdom';
import { InitializationHelpers } from '../portalHelpers';
describe('#navigateToLocalePage', () => {
it('returns correct cookie name', () => {
const elemDiv = document.createElement('div');
elemDiv.classList.add('locale-switcher');
document.body.appendChild(elemDiv);
describe('InitializationHelpers.navigateToLocalePage', () => {
let dom;
let document;
let window;
const allLocaleSwitcher = document.querySelector('.locale-switcher');
beforeEach(() => {
dom = new JSDOM(
'<!DOCTYPE html><html><body><div class="locale-switcher" data-portal-slug="test-slug"><select><option value="en">English</option><option value="fr">French</option></select></div></body></html>',
{ url: 'http://localhost/' }
);
document = dom.window.document;
window = dom.window;
global.document = document;
global.window = window;
});
allLocaleSwitcher.addEventListener = jest
.fn()
.mockImplementationOnce((event, callback) => {
callback({ target: { value: 1 } });
});
afterEach(() => {
dom = null;
document = null;
window = null;
delete global.document;
delete global.window;
});
it('should return false if .locale-switcher is not found', () => {
document.querySelector('.locale-switcher').remove();
const result = InitializationHelpers.navigateToLocalePage();
expect(result).toBe(false);
});
it('should add change event listener to .locale-switcher', () => {
const localeSwitcher = document.querySelector('.locale-switcher');
const addEventListenerSpy = vi.spyOn(localeSwitcher, 'addEventListener');
InitializationHelpers.navigateToLocalePage();
expect(allLocaleSwitcher.addEventListener).toBeCalledWith(
expect(addEventListenerSpy).toHaveBeenCalledWith(
'change',
expect.any(Function)
);

View File

@@ -23,17 +23,17 @@ describe('portalThemeHelper', () => {
appearanceDropdown.id = 'appearance-dropdown';
document.body.appendChild(appearanceDropdown);
window.matchMedia = jest.fn().mockImplementation(query => ({
window.matchMedia = vi.fn().mockImplementation(query => ({
matches: query === '(prefers-color-scheme: dark)',
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
}));
window.portalConfig = { portalColor: '#ff5733' };
document.documentElement.style.setProperty = jest.fn();
document.documentElement.style.setProperty = vi.fn();
document.documentElement.classList.remove('dark', 'light');
jest.clearAllMocks();
vi.clearAllMocks();
});
afterEach(() => {
@@ -72,7 +72,7 @@ describe('portalThemeHelper', () => {
originalLocation = window.location;
delete window.location;
window.location = new URL('http://localhost:3000/');
window.history.replaceState = jest.fn();
window.history.replaceState = vi.fn();
});
afterEach(() => {
@@ -123,7 +123,7 @@ describe('portalThemeHelper', () => {
describe('#switchTheme', () => {
it('should set theme to system theme and update classes', () => {
window.matchMedia = jest.fn().mockReturnValue({ matches: true });
window.matchMedia = vi.fn().mockReturnValue({ matches: true });
switchTheme('system');
expect(localStorage.theme).toBeUndefined();
expect(document.documentElement.classList).toContain('dark');
@@ -198,10 +198,10 @@ describe('portalThemeHelper', () => {
beforeEach(() => {
mediaQuery = {
addEventListener: jest.fn(),
addEventListener: vi.fn(),
matches: false,
};
window.matchMedia = jest.fn().mockReturnValue(mediaQuery);
window.matchMedia = vi.fn().mockReturnValue(mediaQuery);
});
it('adds a listener to the media query', () => {