import React from "react";

import { ThemeProvider } from "styled-components";
import { render, screen, cleanup } from "@testing-library/react";

import { parseTheme } from "@ax/helpers";
import globalTheme from "@ax/themes/theme.json";
import TableCounter, { ITableCounter } from "@ax/components/TableCounter";

afterEach(cleanup);

const props: ITableCounter = {
	totalItems: 0,
};

describe("TableCounter component", () => {
	test("should render the component", () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<TableCounter {...props} />
			</ThemeProvider>,
		);

		const tableCounter = screen.getAllByTestId("table-counter");
		expect(tableCounter).toBeTruthy();
	});

	test("should render the total items value", () => {
		const defaultProps = { totalItems: 0 };

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<TableCounter {...defaultProps} />
			</ThemeProvider>,
		);
		const tableCounter = screen.getByTestId("table-counter");
		expect(tableCounter.textContent).toEqual("0 results");
	});

	test("should render results label in singular when totalItems equal 1", () => {
		const defaultProps = { totalItems: 1 };

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<TableCounter {...defaultProps} />
			</ThemeProvider>,
		);
		const tableCounter = screen.getByTestId("table-counter");
		expect(tableCounter.textContent).toEqual("1 result");
	});
});
