@griddo/ax 11.14.1 → 11.14.2-rc.1

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

@@ -0,0 +1,109 @@
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import type { IUserFormState } from "@ax/modules/Sites/SitesList/WelcomeModal";
+import DataStep from "@ax/modules/Sites/SitesList/WelcomeModal/DataStep";
+import globalTheme from "@ax/themes/theme.json";
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+
+const defaultForm: IUserFormState = {
+	name: "John Doe",
+	username: "johndoe",
+	position: "Developer",
+	company: "Acme",
+	timezone: "Europe/Madrid",
+};
+
+const renderDataStep = (props = {}) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<DataStep
+				form={defaultForm}
+				setForm={jest.fn()}
+				onClickNext={jest.fn()}
+				onClickBack={jest.fn()}
+				croppedImageUrl={null}
+				{...props}
+			/>
+		</ThemeProvider>,
+	);
+
+afterEach(cleanup);
+
+describe("DataStep rendering", () => {
+	it("should render all three form fields", () => {
+		renderDataStep();
+		const fields = screen.getAllByTestId("fields-behavior-wrapper");
+		expect(fields.length).toEqual(3);
+	});
+
+	it("should render Back and Next step buttons", () => {
+		renderDataStep();
+		expect(screen.getByText("Back")).toBeTruthy();
+		expect(screen.getByText("Next step")).toBeTruthy();
+	});
+
+	it("should disable Next step button when username is empty", () => {
+		renderDataStep({ form: { ...defaultForm, username: "" } });
+		const nextButton = screen.getByText("Next step").closest("button");
+		expect(nextButton).toBeDisabled();
+	});
+
+	it("should enable Next step button when username has value", () => {
+		renderDataStep();
+		const nextButton = screen.getByText("Next step").closest("button");
+		expect(nextButton).not.toBeDisabled();
+	});
+
+	it("should disable Next step button when username is only whitespace", () => {
+		renderDataStep({ form: { ...defaultForm, username: "   " } });
+		const nextButton = screen.getByText("Next step").closest("button");
+		expect(nextButton).toBeDisabled();
+	});
+});
+
+describe("DataStep events", () => {
+	it("should call onClickBack when Back button is clicked", () => {
+		const onClickBack = jest.fn();
+		renderDataStep({ onClickBack });
+		fireEvent.click(screen.getByText("Back"));
+		expect(onClickBack).toHaveBeenCalledTimes(1);
+	});
+
+	it("should call onClickNext when Next step button is clicked", () => {
+		const onClickNext = jest.fn();
+		renderDataStep({ onClickNext });
+		fireEvent.click(screen.getByText("Next step"));
+		expect(onClickNext).toHaveBeenCalledTimes(1);
+	});
+
+	it("should not call onClickNext when username is empty", () => {
+		const onClickNext = jest.fn();
+		renderDataStep({ onClickNext, form: { ...defaultForm, username: "" } });
+		const nextButton = screen.getByText("Next step").closest("button");
+		nextButton && fireEvent.click(nextButton);
+		expect(onClickNext).not.toHaveBeenCalled();
+	});
+});
+
+describe("DataStep position field", () => {
+	it("should display position value from form", () => {
+		renderDataStep({ form: { ...defaultForm, position: "Senior Developer" } });
+		const positionInput = screen.getByDisplayValue("Senior Developer");
+		expect(positionInput).toBeTruthy();
+	});
+
+	it("should display empty position field when not set", () => {
+		renderDataStep({ form: { ...defaultForm, position: "" } });
+		// Check that Job title label exists
+		expect(screen.getByText("Job title")).toBeTruthy();
+	});
+
+	it("should have position field with correct placeholder", () => {
+		renderDataStep();
+		const positionInput = screen.getByPlaceholderText("Type a job title");
+		expect(positionInput).toBeTruthy();
+	});
+});

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

@@ -0,0 +1,157 @@
+import { parseTheme } from "@ax/helpers";
+import FinalStep from "@ax/modules/Sites/SitesList/WelcomeModal/FinalStep";
+import globalTheme from "@ax/themes/theme.json";
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+
+afterEach(cleanup);
+
+const mockRoles = [
+	{
+		id: 1,
+		name: "Editor",
+		hex: "#aabbcc",
+		description: "Editor role",
+		permissions: {} as any,
+		active: true,
+		users: [],
+	},
+	{
+		id: 2,
+		name: "Viewer",
+		hex: "#ddeeff",
+		description: "Viewer role",
+		permissions: {} as any,
+		active: true,
+		users: [],
+	},
+	{
+		id: 3,
+		name: "Administrator",
+		hex: "#ff0000",
+		description: "Administrator role",
+		permissions: {} as any,
+		active: true,
+		users: [],
+	},
+	{
+		id: 4,
+		name: "Webmaster",
+		hex: "#00ff00",
+		description: "Webmaster role",
+		permissions: {} as any,
+		active: true,
+		users: [],
+	},
+	{
+		id: 5,
+		name: "SEO Validator",
+		hex: "#0000ff",
+		description: "SEO Validator role",
+		permissions: {} as any,
+		active: true,
+		users: [],
+	},
+];
+
+const mockSites = [
+	{ id: 1, name: "Site 1", smallAvatar: null } as any,
+	{ id: 2, name: "Site 2", smallAvatar: null } as any,
+];
+
+const renderFinalStep = (props = {}) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<FinalStep
+				isSuperAdmin={false}
+				userRoles={[]}
+				roles={mockRoles}
+				sites={mockSites}
+				onClose={jest.fn()}
+				onViewProfile={jest.fn()}
+				{...props}
+			/>
+		</ThemeProvider>,
+	);
+
+describe("FinalStep rendering", () => {
+	it("should render View profile and Start Using Griddo buttons", () => {
+		renderFinalStep();
+		expect(screen.getByText("View profile")).toBeTruthy();
+		expect(screen.getByText("Start Using Griddo")).toBeTruthy();
+	});
+});
+
+describe("FinalStep learn items", () => {
+	it("should show Administrator learn items when isSuperAdmin is true", () => {
+		renderFinalStep({ isSuperAdmin: true });
+		expect(screen.getByText("Create sites")).toBeTruthy();
+		expect(screen.getByText("Create Add-ons")).toBeTruthy();
+	});
+
+	it("should show Editor learn items when user has Editor role", () => {
+		renderFinalStep({
+			isSuperAdmin: false,
+			userRoles: [{ siteId: 1, roles: [1] }],
+		});
+		expect(screen.getByText("Add and manage Images")).toBeTruthy();
+		expect(screen.getByText("Work with AI")).toBeTruthy();
+	});
+
+	it("should show Viewer learn items when user has Viewer role", () => {
+		renderFinalStep({
+			isSuperAdmin: false,
+			userRoles: [{ siteId: 1, roles: [2] }],
+		});
+		expect(screen.getByText("View pages")).toBeTruthy();
+	});
+
+	it("should fall back to Editor items when role has no matching learn items", () => {
+		// Create a role that has no matching LEARN_ITEMS (id=99)
+		const rolesWithUnmapped = [
+			...mockRoles,
+			{ id: 99, name: "UnmappedRole", hex: "#ffffff", description: "", permissions: {} as any, active: true, users: [] },
+		];
+		renderFinalStep({
+			isSuperAdmin: false,
+			userRoles: [{ siteId: 1, roles: [99] }],
+			roles: rolesWithUnmapped,
+		});
+		// Should fall back to Editor items
+		expect(screen.getByText("Add and manage Images")).toBeTruthy();
+	});
+
+	it("should show Webmaster learn items when user has Webmaster role", () => {
+		renderFinalStep({
+			isSuperAdmin: false,
+			userRoles: [{ siteId: 1, roles: [4] }],
+		});
+		expect(screen.getByText("Work with Categories")).toBeTruthy();
+	});
+
+	it("should show SEO Validator learn items when user has SEO Validator role", () => {
+		renderFinalStep({
+			isSuperAdmin: false,
+			userRoles: [{ siteId: 1, roles: [5] }],
+		});
+		expect(screen.getByText("Manage SEO")).toBeTruthy();
+		expect(screen.getByText("Preview your SEO")).toBeTruthy();
+	});
+});
+
+describe("FinalStep events", () => {
+	it("should call onClose when Start Using Griddo is clicked", () => {
+		const onClose = jest.fn();
+		renderFinalStep({ onClose });
+		fireEvent.click(screen.getByText("Start Using Griddo"));
+		expect(onClose).toHaveBeenCalledTimes(1);
+	});
+
+	it("should call onViewProfile when View profile is clicked", () => {
+		const onViewProfile = jest.fn();
+		renderFinalStep({ onViewProfile });
+		fireEvent.click(screen.getByText("View profile"));
+		expect(onViewProfile).toHaveBeenCalledTimes(1);
+	});
+});

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

@@ -0,0 +1,51 @@
+import { parseTheme } from "@ax/helpers";
+import CropView from "@ax/modules/Sites/SitesList/WelcomeModal/ImageStep/CropView";
+import globalTheme from "@ax/themes/theme.json";
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+
+afterEach(cleanup);
+
+const renderCropView = (props = {}) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<CropView imageSrc="data:image/jpeg;base64,abc" onConfirm={jest.fn()} onUploadNew={jest.fn()} {...props} />
+		</ThemeProvider>,
+	);
+
+describe("CropView rendering", () => {
+	it("should render the cropper", () => {
+		renderCropView();
+		expect(screen.getByTestId("cropper-mock")).toBeTruthy();
+	});
+
+	it("should render zoom controls", () => {
+		renderCropView();
+		expect(screen.getByLabelText("Zoom in")).toBeTruthy();
+		expect(screen.getByLabelText("Zoom out")).toBeTruthy();
+		expect(screen.getByLabelText("Zoom")).toBeTruthy();
+	});
+
+	it("should render Next step and Upload new image buttons", () => {
+		renderCropView();
+		expect(screen.getByText("Next step")).toBeTruthy();
+		expect(screen.getByText("Upload new image")).toBeTruthy();
+	});
+});
+
+describe("CropView events", () => {
+	it("should call onConfirm with cropped area when Next step is clicked", () => {
+		const onConfirm = jest.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();
+		renderCropView({ onUploadNew });
+		fireEvent.click(screen.getByText("Upload new image"));
+		expect(onUploadNew).toHaveBeenCalledTimes(1);
+	});
+});

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

@@ -0,0 +1,70 @@
+import { parseTheme } from "@ax/helpers";
+import ImageStep from "@ax/modules/Sites/SitesList/WelcomeModal/ImageStep";
+import globalTheme from "@ax/themes/theme.json";
+
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+
+afterEach(cleanup);
+
+const renderImageStep = (props = {}) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<ImageStep onCropConfirmed={jest.fn()} onSkip={jest.fn()} {...props} />
+		</ThemeProvider>,
+	);
+
+describe("ImageStep rendering", () => {
+	it("should render UploadView initially", () => {
+		renderImageStep();
+		expect(screen.getByText("Select image")).toBeTruthy();
+		expect(screen.queryByTestId("cropper-mock")).toBeFalsy();
+	});
+
+	it("should render CropView after image is loaded", async () => {
+		renderImageStep();
+
+		const mockResult = "data:image/jpeg;base64,abc123";
+		const mockFileReader = {
+			onload: null as any,
+			readAsDataURL: jest.fn(function (this: any) {
+				this.onload({ target: { result: mockResult } });
+			}),
+		};
+		jest.spyOn(global, "FileReader" as any).mockImplementation(() => mockFileReader);
+
+		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+		const validFile = new File(["content"], "photo.jpg", { type: "image/jpeg" });
+
+		await act(async () => {
+			fireEvent.change(fileInput, { target: { files: [validFile] } });
+		});
+
+		expect(screen.getByTestId("cropper-mock")).toBeTruthy();
+		expect(screen.queryByText("Select image")).toBeFalsy();
+	});
+
+	it("should go back to UploadView when Upload new image is clicked", async () => {
+		renderImageStep();
+
+		const mockResult = "data:image/jpeg;base64,abc123";
+		const mockFileReader = {
+			onload: null as any,
+			readAsDataURL: jest.fn(function (this: any) {
+				this.onload({ target: { result: mockResult } });
+			}),
+		};
+		jest.spyOn(global, "FileReader" as any).mockImplementation(() => mockFileReader);
+
+		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+		await act(async () => {
+			fireEvent.change(fileInput, { target: { files: [new File([""], "photo.jpg", { type: "image/jpeg" })] } });
+		});
+
+		await act(async () => {
+			fireEvent.click(screen.getByText("Upload new image"));
+		});
+
+		expect(screen.getByText("Select image")).toBeTruthy();
+	});
+});

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

@@ -0,0 +1,92 @@
+import { parseTheme } from "@ax/helpers";
+import UploadView from "@ax/modules/Sites/SitesList/WelcomeModal/ImageStep/UploadView";
+import globalTheme from "@ax/themes/theme.json";
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+
+afterEach(cleanup);
+
+const renderUploadView = (props = {}) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<UploadView onImageLoaded={jest.fn()} onSkip={jest.fn()} {...props} />
+		</ThemeProvider>,
+	);
+
+describe("UploadView rendering", () => {
+	it("should render the skip button", () => {
+		renderUploadView();
+		expect(screen.getByText("Skip profile picture")).toBeTruthy();
+	});
+
+	it("should render the select image button", () => {
+		renderUploadView();
+		expect(screen.getByText("Select image")).toBeTruthy();
+	});
+
+	it("should render the file input", () => {
+		renderUploadView();
+		const fileInput = document.querySelector('input[type="file"]');
+		expect(fileInput).toBeTruthy();
+	});
+
+	it("should not render error message initially", () => {
+		renderUploadView();
+		expect(screen.queryByTestId("upload-view-error")).toBeFalsy();
+	});
+
+	it("should show error for invalid file format", () => {
+		renderUploadView();
+		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+		const invalidFile = new File(["content"], "document.pdf", { type: "application/pdf" });
+		fireEvent.change(fileInput, { target: { files: [invalidFile] } });
+		expect(screen.getByTestId("upload-view-error")).toBeTruthy();
+	});
+});
+
+describe("UploadView events", () => {
+	it("should call onSkip when skip button is clicked", () => {
+		const onSkip = jest.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 mockResult = "data:image/jpeg;base64,abc123";
+
+		const mockFileReader = {
+			onload: null as any,
+			readAsDataURL: jest.fn(function (this: any) {
+				this.onload({ target: { result: mockResult } });
+			}),
+		};
+		jest.spyOn(global, "FileReader" as any).mockImplementation(() => mockFileReader);
+
+		renderUploadView({ onImageLoaded });
+		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+		const validFile = new File(["content"], "photo.jpg", { type: "image/jpeg" });
+		fireEvent.change(fileInput, { target: { files: [validFile] } });
+
+		expect(onImageLoaded).toHaveBeenCalledWith(mockResult);
+	});
+
+	it("should not call onImageLoaded for invalid file format", () => {
+		const onImageLoaded = jest.fn();
+		renderUploadView({ onImageLoaded });
+		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+		const invalidFile = new File(["content"], "document.pdf", { type: "application/pdf" });
+		fireEvent.change(fileInput, { target: { files: [invalidFile] } });
+		expect(onImageLoaded).not.toHaveBeenCalled();
+	});
+
+	it("should show drop title when dragging over", () => {
+		renderUploadView();
+		const dragWrapper = screen.getByTestId("drag-drop-wrapper");
+		fireEvent.dragEnter(dragWrapper);
+		fireEvent.dragOver(dragWrapper);
+		expect(screen.getByText("Drop your image")).toBeTruthy();
+	});
+});

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

@@ -0,0 +1,94 @@
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import type { IUserFormState } from "@ax/modules/Sites/SitesList/WelcomeModal";
+import TimezoneStep from "@ax/modules/Sites/SitesList/WelcomeModal/TimezoneStep";
+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
+
+const defaultForm: IUserFormState = {
+	name: "John Doe",
+	username: "johndoe",
+	position: "Developer",
+	company: "Acme",
+	timezone: "Europe/Madrid",
+};
+
+const renderTimezoneStep = (props = {}) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<TimezoneStep
+				form={defaultForm}
+				setForm={jest.fn()}
+				onClickNext={jest.fn()}
+				onClickBack={jest.fn()}
+				isSaving={false}
+				{...props}
+			/>
+		</ThemeProvider>,
+	);
+
+afterEach(cleanup);
+
+describe("TimezoneStep rendering", () => {
+	it("should render Back and Save profile buttons", () => {
+		renderTimezoneStep();
+		expect(screen.getByText("Back")).toBeTruthy();
+		expect(screen.getByText("Save profile")).toBeTruthy();
+	});
+
+	it("should render the world map", () => {
+		renderTimezoneStep();
+		expect(screen.getByTestId("world-map-mock")).toBeTruthy();
+	});
+
+	it("should render a timezone select", () => {
+		renderTimezoneStep();
+		expect(screen.getByTestId("select-component")).toBeTruthy();
+	});
+
+	it("should disable Save profile button when isSaving is true", () => {
+		renderTimezoneStep({ isSaving: true });
+		const saveButton = screen.getByText("Saving...").closest("button");
+		expect(saveButton).toBeDisabled();
+	});
+
+	it("should show Saving... text when isSaving is true", () => {
+		renderTimezoneStep({ isSaving: true });
+		expect(screen.getByText("Saving...")).toBeTruthy();
+	});
+
+	it("should disable Save profile button when timezone is empty", () => {
+		renderTimezoneStep({ form: { ...defaultForm, timezone: "" } });
+		const saveButton = screen.getByText("Save profile").closest("button");
+		expect(saveButton).toBeDisabled();
+	});
+});
+
+describe("TimezoneStep events", () => {
+	it("should call onClickBack when Back button is clicked", () => {
+		const onClickBack = jest.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();
+		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();
+		renderTimezoneStep({ onClickNext, isSaving: true });
+		const saveButton = screen.getByText("Saving...").closest("button");
+		saveButton && fireEvent.click(saveButton);
+		expect(onClickNext).not.toHaveBeenCalled();
+	});
+});

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

@@ -0,0 +1,78 @@
+import { Provider } from "react-redux";
+
+import { parseTheme } from "@ax/helpers";
+import WelcomeModal from "@ax/modules/Sites/SitesList/WelcomeModal";
+import globalTheme from "@ax/themes/theme.json";
+
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+import { sitesDataMock, userDataMock } from "../../../../../__mocks__/store/SitesList";
+
+afterEach(cleanup);
+
+const mockStore = configureStore([thunk]);
+
+const initialStore = {
+	users: userDataMock,
+	sites: { allSites: sitesDataMock.sites },
+};
+
+const renderWelcomeModal = (props = {}, storeData = initialStore) => {
+	const store = mockStore(storeData);
+	return render(
+		<Provider store={store}>
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<WelcomeModal isOpen={true} toggleModal={jest.fn()} {...props} />
+			</ThemeProvider>
+		</Provider>,
+	);
+};
+
+describe("WelcomeModal rendering", () => {
+	it("should render the modal when open", () => {
+		renderWelcomeModal({ isOpen: true });
+		expect(screen.getByTestId("modal-wrapper")).toBeTruthy();
+	});
+
+	it("should not render the modal when closed", () => {
+		renderWelcomeModal({ isOpen: false });
+		expect(screen.queryByTestId("modal-wrapper")).toBeFalsy();
+	});
+
+	it("should display WelcomeStep with correct title and buttons on initial load", () => {
+		renderWelcomeModal();
+		expect(screen.getByText("Welcome")).toBeTruthy();
+		expect(screen.getByText("Complete profile")).toBeTruthy();
+		expect(screen.getByText("Skip, I\u2019ll do it later")).toBeTruthy();
+	});
+});
+
+describe("WelcomeModal step navigation", () => {
+	it("should navigate through all steps from welcome to timezone", async () => {
+		renderWelcomeModal();
+
+		// Step 1: Welcome
+		expect(screen.getByText("Welcome")).toBeTruthy();
+
+		// Step 2: Image
+		await act(async () => {
+			fireEvent.click(screen.getByText("Complete profile"));
+		});
+		expect(screen.getByText("Step 1 of 3: Profile Picture")).toBeTruthy();
+
+		// Step 3: Data
+		await act(async () => {
+			fireEvent.click(screen.getByText("Skip profile picture"));
+		});
+		expect(screen.getByText("Step 2 of 3: Profile data")).toBeTruthy();
+
+		// Step 4: Timezone
+		await act(async () => {
+			fireEvent.click(screen.getByText("Next step"));
+		});
+		expect(screen.getByText("Step 3 of 3: Define timezone")).toBeTruthy();
+	});
+});

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

@@ -0,0 +1,39 @@
+import { parseTheme } from "@ax/helpers";
+import WelcomeStep from "@ax/modules/Sites/SitesList/WelcomeModal/WelcomeStep";
+import globalTheme from "@ax/themes/theme.json";
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+
+afterEach(cleanup);
+
+const renderWelcomeStep = (props = {}) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<WelcomeStep onSkip={jest.fn()} onClickNext={jest.fn()} {...props} />
+		</ThemeProvider>,
+	);
+
+describe("WelcomeStep rendering", () => {
+	it("should render skip and complete profile buttons", () => {
+		renderWelcomeStep();
+		expect(screen.getByText("Skip, I\u2019ll do it later")).toBeTruthy();
+		expect(screen.getByText("Complete profile")).toBeTruthy();
+	});
+});
+
+describe("WelcomeStep events", () => {
+	it("should call onSkip when skip button is clicked", () => {
+		const onSkip = jest.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();
+		renderWelcomeStep({ onClickNext });
+		fireEvent.click(screen.getByText("Complete profile"));
+		expect(onClickNext).toHaveBeenCalledTimes(1);
+	});
+});