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