import * as React from "react";

import { ThemeProvider } from "styled-components";
import { render, cleanup, screen, fireEvent } from "@testing-library/react";
import { parseTheme } from "@ax/helpers";
import "@testing-library/jest-dom";

import SubNotification, { ISubNotificationProps } from "@ax/components/Notification/SubNotification";
import globalTheme from "@ax/themes/theme.json";

afterEach(cleanup);

describe("SubNotification component rendering", () => {
	it("should render the subnotification", () => {
		const defaultProps: ISubNotificationProps = {
			text: "SubNotification text",
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<SubNotification {...defaultProps} />
			</ThemeProvider>,
		);

		const subnotificationWrapper = screen.getByTestId("subnotification-wrapper");
		expect(subnotificationWrapper).toBeTruthy();
	});

	it("should close the subnotification", () => {
		const defaultProps: ISubNotificationProps = {
			text: "SubNotification text",
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<SubNotification {...defaultProps} />
			</ThemeProvider>,
		);

		const subnotificationButton = screen.getByTestId("subnotification-close-button");
		expect(subnotificationButton).toBeTruthy();
		fireEvent.click(subnotificationButton);
		const subnotificationWrapper = screen.queryByTestId("subnotification-wrapper");
		expect(subnotificationWrapper).not.toBeVisible();
	});
});
