import * as React from "react";
import { BrowserRouter } from "react-router-dom";

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

import Nav, { INavProps } from "@ax/components/Nav";
import globalTheme from "@ax/themes/theme.json";

afterEach(cleanup);

describe("Nav component rendering", () => {
	it("should render the component with 3 links", () => {
		const items = [
			{ title: "Item 1", path: "/item1", component: "Item1" },
			{ title: "Item 2", path: "/item2", component: "Item2" },
			{ title: "Item 3", path: "/item3", component: "Item3" },
		];

		const defaultProps: INavProps = {
			items,
			current: items[0],
			onClick: jest.fn(),
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Nav {...defaultProps} />
			</ThemeProvider>,
			{ wrapper: BrowserRouter },
		);

		const links = screen.queryAllByTestId("nav-link");
		expect(links).toHaveLength(3);
	});

	it("should render the component with 0 links", () => {
		const defaultProps: INavProps = {
			items: [],
			current: undefined,
			onClick: jest.fn(),
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Nav {...defaultProps} />
			</ThemeProvider>,
			{ wrapper: BrowserRouter },
		);

		const links = screen.queryAllByTestId("nav-link");
		expect(links).toHaveLength(0);
	});
});
