@griddo/ax 12.3.0 → 12.4.0

package/src/__tests__/modules/Sites/SitesList/WelcomeModal/ImageStep/CropView/CropView.test.tsx

@@ -10,7 +10,7 @@ afterEach(cleanup);
 const renderCropView = (props = {}) =>
 	render(
 		<ThemeProvider theme={parseTheme(globalTheme)}>
-			<CropView imageSrc="data:image/jpeg;base64,abc" onConfirm={jest.fn()} onUploadNew={jest.fn()} {...props} />
+			<CropView imageSrc="data:image/jpeg;base64,abc" onConfirm={vi.fn()} onUploadNew={vi.fn()} {...props} />
 		</ThemeProvider>,
 	);
 
@@ -36,14 +36,14 @@ describe("CropView rendering", () => {
 
 describe("CropView events", () => {
 	it("should call onConfirm with cropped area when Next step is clicked", () => {
-		const onConfirm = jest.fn();
+		const onConfirm = vi.fn();
 		renderCropView({ onConfirm });
 		fireEvent.click(screen.getByText("Next step"));
 		expect(onConfirm).toHaveBeenCalledWith({ x: 0, y: 0, width: 100, height: 100 });
 	});
 
 	it("should call onUploadNew when Upload new image is clicked", () => {
-		const onUploadNew = jest.fn();
+		const onUploadNew = vi.fn();
 		renderCropView({ onUploadNew });
 		fireEvent.click(screen.getByText("Upload new image"));
 		expect(onUploadNew).toHaveBeenCalledTimes(1);

package/src/__tests__/modules/Sites/SitesList/WelcomeModal/ImageStep/ImageStep.test.tsx

@@ -10,7 +10,7 @@ afterEach(cleanup);
 const renderImageStep = (props = {}) =>
 	render(
 		<ThemeProvider theme={parseTheme(globalTheme)}>
-			<ImageStep onCropConfirmed={jest.fn()} onSkip={jest.fn()} {...props} />
+			<ImageStep onCropConfirmed={vi.fn()} onSkip={vi.fn()} {...props} />
 		</ThemeProvider>,
 	);
 
@@ -27,11 +27,13 @@ describe("ImageStep rendering", () => {
 		const mockResult = "data:image/jpeg;base64,abc123";
 		const mockFileReader = {
 			onload: null as any,
-			readAsDataURL: jest.fn(function (this: any) {
+			readAsDataURL: vi.fn(function (this: any) {
 				this.onload({ target: { result: mockResult } });
 			}),
 		};
-		jest.spyOn(global, "FileReader" as any).mockImplementation(() => mockFileReader);
+		vi.spyOn(global, "FileReader" as any).mockImplementation(function () {
+			return mockFileReader;
+		});
 
 		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
 		const validFile = new File(["content"], "photo.jpg", { type: "image/jpeg" });
@@ -50,11 +52,13 @@ describe("ImageStep rendering", () => {
 		const mockResult = "data:image/jpeg;base64,abc123";
 		const mockFileReader = {
 			onload: null as any,
-			readAsDataURL: jest.fn(function (this: any) {
+			readAsDataURL: vi.fn(function (this: any) {
 				this.onload({ target: { result: mockResult } });
 			}),
 		};
-		jest.spyOn(global, "FileReader" as any).mockImplementation(() => mockFileReader);
+		vi.spyOn(global, "FileReader" as any).mockImplementation(function () {
+			return mockFileReader;
+		});
 
 		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
 		await act(async () => {

package/src/__tests__/modules/Sites/SitesList/WelcomeModal/ImageStep/UploadView/UploadView.test.tsx

@@ -10,7 +10,7 @@ afterEach(cleanup);
 const renderUploadView = (props = {}) =>
 	render(
 		<ThemeProvider theme={parseTheme(globalTheme)}>
-			<UploadView onImageLoaded={jest.fn()} onSkip={jest.fn()} {...props} />
+			<UploadView onImageLoaded={vi.fn()} onSkip={vi.fn()} {...props} />
 		</ThemeProvider>,
 	);
 
@@ -47,23 +47,25 @@ describe("UploadView rendering", () => {
 
 describe("UploadView events", () => {
 	it("should call onSkip when skip button is clicked", () => {
-		const onSkip = jest.fn();
+		const onSkip = vi.fn();
 		renderUploadView({ onSkip });
 		fireEvent.click(screen.getByText("Skip profile picture"));
 		expect(onSkip).toHaveBeenCalledTimes(1);
 	});
 
 	it("should call onImageLoaded with data URL for valid file", () => {
-		const onImageLoaded = jest.fn();
+		const onImageLoaded = vi.fn();
 		const mockResult = "data:image/jpeg;base64,abc123";
 
 		const mockFileReader = {
 			onload: null as any,
-			readAsDataURL: jest.fn(function (this: any) {
+			readAsDataURL: vi.fn(function (this: any) {
 				this.onload({ target: { result: mockResult } });
 			}),
 		};
-		jest.spyOn(global, "FileReader" as any).mockImplementation(() => mockFileReader);
+		vi.spyOn(global, "FileReader" as any).mockImplementation(function () {
+			return mockFileReader;
+		});
 
 		renderUploadView({ onImageLoaded });
 		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
@@ -74,7 +76,7 @@ describe("UploadView events", () => {
 	});
 
 	it("should not call onImageLoaded for invalid file format", () => {
-		const onImageLoaded = jest.fn();
+		const onImageLoaded = vi.fn();
 		renderUploadView({ onImageLoaded });
 		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
 		const invalidFile = new File(["content"], "document.pdf", { type: "application/pdf" });

package/src/__tests__/modules/Sites/SitesList/WelcomeModal/TimezoneStep/TimezoneStep.test.tsx

@@ -8,7 +8,7 @@ import globalTheme from "@ax/themes/theme.json";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { ThemeProvider } from "styled-components";
 
-// react-timezone-map-select is mocked globally via jest.config.ts moduleNameMapper
+// react-timezone-map-select is mocked globally via the alias in vitest.config.ts
 
 const defaultForm: IUserFormState = {
 	name: "John Doe",
@@ -23,9 +23,9 @@ const renderTimezoneStep = (props = {}) =>
 		<ThemeProvider theme={parseTheme(globalTheme)}>
 			<TimezoneStep
 				form={defaultForm}
-				setForm={jest.fn()}
-				onClickNext={jest.fn()}
-				onClickBack={jest.fn()}
+				setForm={vi.fn()}
+				onClickNext={vi.fn()}
+				onClickBack={vi.fn()}
 				isSaving={false}
 				{...props}
 			/>
@@ -71,21 +71,21 @@ describe("TimezoneStep rendering", () => {
 
 describe("TimezoneStep events", () => {
 	it("should call onClickBack when Back button is clicked", () => {
-		const onClickBack = jest.fn();
+		const onClickBack = vi.fn();
 		renderTimezoneStep({ onClickBack });
 		fireEvent.click(screen.getByText("Back"));
 		expect(onClickBack).toHaveBeenCalledTimes(1);
 	});
 
 	it("should call onClickNext when Save profile button is clicked", () => {
-		const onClickNext = jest.fn();
+		const onClickNext = vi.fn();
 		renderTimezoneStep({ onClickNext });
 		fireEvent.click(screen.getByText("Save profile"));
 		expect(onClickNext).toHaveBeenCalledTimes(1);
 	});
 
 	it("should not call onClickNext when isSaving is true", () => {
-		const onClickNext = jest.fn();
+		const onClickNext = vi.fn();
 		renderTimezoneStep({ onClickNext, isSaving: true });
 		const saveButton = screen.getByText("Saving...").closest("button");
 		saveButton && fireEvent.click(saveButton);

package/src/__tests__/modules/Sites/SitesList/WelcomeModal/WelcomeModal.test.tsx

@@ -25,7 +25,7 @@ const renderWelcomeModal = (props = {}, storeData = initialStore) => {
 	return render(
 		<Provider store={store}>
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<WelcomeModal isOpen={true} toggleModal={jest.fn()} {...props} />
+				<WelcomeModal isOpen={true} toggleModal={vi.fn()} {...props} />
 			</ThemeProvider>
 		</Provider>,
 	);

package/src/__tests__/modules/Sites/SitesList/WelcomeModal/WelcomeStep/WelcomeStep.test.tsx

@@ -10,7 +10,7 @@ afterEach(cleanup);
 const renderWelcomeStep = (props = {}) =>
 	render(
 		<ThemeProvider theme={parseTheme(globalTheme)}>
-			<WelcomeStep onSkip={jest.fn()} onClickNext={jest.fn()} {...props} />
+			<WelcomeStep onSkip={vi.fn()} onClickNext={vi.fn()} {...props} />
 		</ThemeProvider>,
 	);
 
@@ -24,14 +24,14 @@ describe("WelcomeStep rendering", () => {
 
 describe("WelcomeStep events", () => {
 	it("should call onSkip when skip button is clicked", () => {
-		const onSkip = jest.fn();
+		const onSkip = vi.fn();
 		renderWelcomeStep({ onSkip });
 		fireEvent.click(screen.getByText("Skip, I\u2019ll do it later"));
 		expect(onSkip).toHaveBeenCalledTimes(1);
 	});
 
 	it("should call onClickNext when complete profile button is clicked", () => {
-		const onClickNext = jest.fn();
+		const onClickNext = vi.fn();
 		renderWelcomeStep({ onClickNext });
 		fireEvent.click(screen.getByText("Complete profile"));
 		expect(onClickNext).toHaveBeenCalledTimes(1);

package/src/__tests__/modules/Users/Roles/BulkHeader/BulkHeader.test.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { ThemeProvider } from "styled-components";
 import { render, screen, cleanup, act, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import { CalledWithMock, mock } from "jest-mock-extended";
+import { CalledWithMock, mock } from "vitest-mock-extended";
 
 import { parseTheme } from "@ax/helpers";
 
@@ -117,7 +117,7 @@ describe("BulkHeader module events", () => {
 		defaultProps.showBulk = true;
 		defaultProps.isSiteView = false;
 		defaultProps.checkState.isAllSelected = true;
-		const activateRolesMock = jest.fn();
+		const activateRolesMock = vi.fn();
 
 		defaultProps.activateRoles = activateRolesMock as CalledWithMock<void, [active: boolean]> &
 			((active: boolean) => void);
@@ -138,7 +138,7 @@ describe("BulkHeader module events", () => {
 	it("should call activate role on click option", async () => {
 		defaultProps.showBulk = true;
 		defaultProps.checkState.isAllSelected = true;
-		const activateRolesMock = jest.fn();
+		const activateRolesMock = vi.fn();
 
 		defaultProps.activateRoles = activateRolesMock as CalledWithMock<void, [active: boolean]> &
 			((active: boolean) => void);

package/src/__tests__/modules/Users/Roles/Roles.test.tsx

@@ -1,9 +1,10 @@
+import type { MockedFunction } from "vitest";
 import React from "react";
 import axios from "axios";
 
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
-import { CalledWithMock, mock } from "jest-mock-extended";
+import { CalledWithMock, mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
 import { Router } from "react-router-dom";
@@ -13,20 +14,20 @@ import { history } from "@ax/routes";
 import globalTheme from "@ax/themes/theme.json";
 import Roles, { IRolesProps } from "@ax/modules/Users/Roles";
 
-import { render, cleanup, screen, act, fireEvent } from "./../../../../../config/jest/test-utils";
+import { render, cleanup, screen, act, fireEvent } from "./../../../../../config/tests/test-utils";
 import { rolesDataMock, usersDataMock } from "./../../../../__mocks__/store/Roles";
 import { rolesDataResponse } from "./../../../../__mocks__/axios/Roles";
 
 afterEach(cleanup);
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 const defaultProps = mock<IRolesProps>();
 
 describe("Roles module rendering", () => {
 	it("should render component", async () => {
 		mockedAxios.mockResolvedValue(rolesDataResponse);
-		window.HTMLElement.prototype.scrollIntoView = jest.fn();
+		window.HTMLElement.prototype.scrollIntoView = vi.fn();
 		const initialStore = {
 			app: { isLoading: false },
 			users: { roles: rolesDataMock },
@@ -60,7 +61,7 @@ describe("Roles module rendering", () => {
 
 	it("should render role items", async () => {
 		mockedAxios.mockResolvedValue(rolesDataResponse);
-		window.HTMLElement.prototype.scrollIntoView = jest.fn();
+		window.HTMLElement.prototype.scrollIntoView = vi.fn();
 		const initialStore = {
 			app: { isLoading: false },
 			users: { roles: rolesDataMock },
@@ -92,7 +93,7 @@ describe("Roles module rendering", () => {
 
 	it("should render tag colors", async () => {
 		mockedAxios.mockResolvedValue(rolesDataResponse);
-		window.HTMLElement.prototype.scrollIntoView = jest.fn();
+		window.HTMLElement.prototype.scrollIntoView = vi.fn();
 		const initialStore = {
 			app: { isLoading: false },
 			users: { roles: rolesDataMock },
@@ -426,9 +427,9 @@ describe("Roles module events", () => {
 
 	it("should render FullArrowDown icon if is filtered by descending name", async () => {
 		mockedAxios.mockResolvedValue(rolesDataResponse);
-		window.HTMLElement.prototype.scrollIntoView = jest.fn();
-		const getRolesMock = jest.fn();
-		const activateRolesMock = jest.fn();
+		window.HTMLElement.prototype.scrollIntoView = vi.fn();
+		const getRolesMock = vi.fn();
+		const activateRolesMock = vi.fn();
 		defaultProps.getRoles = getRolesMock as CalledWithMock<Promise<void>, [params?: IGetRoles | undefined]>;
 		defaultProps.activateRoles = activateRolesMock as CalledWithMock<Promise<boolean>, [params: IActivateRole]> &
 			((params: IActivateRole) => Promise<boolean>);

package/src/__tests__/modules/Users/UserCreate/SiteItem/RolesModal/RoleItem/RoleItem.test.tsx

@@ -7,8 +7,8 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import RoleItem, { IRoleItemProps } from "./../../../../../../../modules/Users/UserCreate/SiteItem/RolesModal/RoleItem";
 
-const onClickMock = jest.fn();
-const onChangeMock = jest.fn();
+const onClickMock = vi.fn();
+const onChangeMock = vi.fn();
 const defaultProps: IRoleItemProps = {
 	role: {
 		id: 1,
@@ -25,7 +25,7 @@ const defaultProps: IRoleItemProps = {
 };
 
 afterEach(() => {
-	jest.clearAllMocks();
+	vi.clearAllMocks();
 	cleanup();
 });
 

package/src/__tests__/modules/Users/UserCreate/SiteItem/RolesModal/RolesModal.test.tsx

@@ -7,8 +7,8 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import RolesModal, { IRolesModalProps } from "./../../../../../../modules/Users/UserCreate/SiteItem/RolesModal";
 
-const addRolesMock = jest.fn();
-const toggleModalMock = jest.fn();
+const addRolesMock = vi.fn();
+const toggleModalMock = vi.fn();
 const defaultProps: IRolesModalProps = {
 	roles: [
 		{
@@ -47,7 +47,7 @@ const defaultProps: IRolesModalProps = {
 };
 
 afterEach(() => {
-	jest.clearAllMocks();
+	vi.clearAllMocks();
 	cleanup();
 });
 

package/src/__tests__/modules/Users/UserCreate/SiteItem/SiteItem.test.tsx

@@ -7,8 +7,8 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import SiteItem, { ISiteItemProps } from "./../../../../../modules/Users/UserCreate/SiteItem";
 
-const itemOnChangeMock = jest.fn();
-const addRolesMock = jest.fn();
+const itemOnChangeMock = vi.fn();
+const addRolesMock = vi.fn();
 const defaultProps: ISiteItemProps = {
 	item: { id: 1, name: "Site 1", onChange: itemOnChangeMock },
 	sites: [1, 2, 3],
@@ -38,7 +38,7 @@ const defaultProps: ISiteItemProps = {
 };
 
 afterEach(() => {
-	jest.clearAllMocks();
+	vi.clearAllMocks();
 	cleanup();
 });
 

package/src/__tests__/modules/Users/UserCreate/UserCreate.test.tsx

@@ -1,12 +1,13 @@
+import type { MockedFunction } from "vitest";
 import React from "react";
 import axios, { AxiosResponse } from "axios";
 import { ThemeProvider } from "styled-components";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
 import { Router } from "react-router-dom";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import "@testing-library/jest-dom";
-import { render, cleanup, screen, act } from "./../../../../../config/jest/test-utils";
+import { render, cleanup, screen, act } from "./../../../../../config/tests/test-utils";
 import userEvent from "@testing-library/user-event";
 import { createMemoryHistory } from "history";
 
@@ -21,8 +22,8 @@ import {
 	appStoreMock,
 } from "../../../../__mocks__/store/UsersCreate";
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 
 const middlewares: any = [thunk];
 const mockStore = configureStore(middlewares);
@@ -35,7 +36,7 @@ const history = createMemoryHistory();
 
 afterEach(() => {
 	cleanup();
-	jest.clearAllMocks();
+	vi.clearAllMocks();
 });
 
 describe("UserCreate module rendering", () => {

package/src/__tests__/modules/Users/UserList/UserItem/UserItem.test.tsx

@@ -14,7 +14,7 @@ import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
 import { ThemeProvider } from "styled-components";
 
-import { act, cleanup, render, screen, waitFor } from "./../../../../../../config/jest/test-utils";
+import { act, cleanup, render, screen, waitFor } from "./../../../../../../config/tests/test-utils";
 import { defaultStore } from "./../../../../../__mocks__/store/GenericStore";
 import {
 	appStoreMock,
@@ -33,13 +33,13 @@ const history = createMemoryHistory();
 
 let mockedAxios: MockAdapter;
 
-const onChangeMock = jest.fn();
-const onClickMock = jest.fn();
-const deleteUserMock = jest.fn();
-const resendInvitationMock = jest.fn();
-const getUsersMock = jest.fn();
-const removeUserFromSiteMock = jest.fn();
-const toggleDeleteToastMock = jest.fn();
+const onChangeMock = vi.fn();
+const onClickMock = vi.fn();
+const deleteUserMock = vi.fn();
+const resendInvitationMock = vi.fn();
+const getUsersMock = vi.fn();
+const removeUserFromSiteMock = vi.fn();
+const toggleDeleteToastMock = vi.fn();
 const defaultProps: IUserItemProps = {
 	user: {
 		id: 171,
@@ -186,7 +186,7 @@ beforeAll(() => {
 
 afterEach(() => {
 	cleanup();
-	jest.clearAllMocks();
+	vi.clearAllMocks();
 });
 
 describe("UserItem module rendering", () => {

package/src/__tests__/modules/Users/UserList/UserList.test.tsx

@@ -9,13 +9,13 @@ import userEvent from "@testing-library/user-event";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import { createMemoryHistory } from "history";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import type { Middleware } from "redux";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
 import { ThemeProvider } from "styled-components";
 
-import { act, cleanup, fireEvent, render, screen } from "./../../../../../config/jest/test-utils";
+import { act, cleanup, fireEvent, render, screen } from "./../../../../../config/tests/test-utils";
 import {
 	deletedUserResponse,
 	removeUserSiteResponse,
@@ -46,12 +46,12 @@ let mockedAxios: MockAdapter;
 
 beforeAll(() => {
 	mockedAxios = new MockAdapter(axios);
-	window.HTMLElement.prototype.scrollIntoView = jest.fn();
+	window.HTMLElement.prototype.scrollIntoView = vi.fn();
 });
 
 afterEach(() => {
 	cleanup();
-	jest.clearAllMocks();
+	vi.clearAllMocks();
 	mockedAxios.reset();
 });
 

package/src/components/Flag/components/index.ts

@@ -0,0 +1,30 @@
+import type { ComponentType } from "react";
+
+import Ca_ES from "./Ca_ES";
+import De_DE from "./De_DE";
+import En_GB from "./En_GB";
+import Es_ES from "./Es_ES";
+import Eu_ES from "./Eu_ES";
+import Fr_FR from "./Fr_FR";
+import It_IT from "./It_IT";
+import Pt_PT from "./Pt_PT";
+
+/**
+ * Static registry of every flag. Replaces the dynamic `require()` this
+ * component used to do: a template-literal require only resolves through
+ * webpack's CommonJS context modules, so it breaks under ESM.
+ *
+ * When adding a flag, import it above and register it here.
+ */
+const flags: Record<string, ComponentType<any>> = {
+	Ca_ES,
+	De_DE,
+	En_GB,
+	Es_ES,
+	Eu_ES,
+	Fr_FR,
+	It_IT,
+	Pt_PT,
+};
+
+export default flags;

package/src/components/Flag/index.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import flags from "./components";
+
 const getImage = (name: string) => {
 	const simpleIcons: any = {
 		es: "Es_ES",
@@ -11,11 +13,7 @@ const getImage = (name: string) => {
 	};
 	const filename = simpleIcons[name?.toLowerCase()] || name;
 
-	try {
-		return require(`./components/${filename}`).default;
-	} catch (err) {
-		return null;
-	}
+	return flags[filename] ?? null;
 };
 const Flag = (props: IProps) => {
 	const name = props.name.charAt(0).toUpperCase() + props.name.slice(1);