import { render } from "@testing-library/react";

import { List } from "../List";

//conditional wrapper component inside List requires child to render
describe("rendering List", () => {
  describe("initial state", () => {
    it("has default class list", () => {
      const { getByTestId } = render(<List data-testid="test-id" />);
      expect(getByTestId("test-id")).toHaveClass("list");
    });
  });
  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(
        <List data-testid="test-id">test-child</List>,
      );
      expect(getByText("test-child")).toBeInTheDocument();
    });
    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <List data-testid="test-id" className="test-class" />,
      );
      expect(getByTestId("test-id")).toHaveClass("list");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("has class list--enclosed when isEnclosed prop is passed", () => {
      const { getByTestId } = render(<List data-testid="test-id" isEnclosed />);
      expect(getByTestId("test-id")).toHaveClass("list");
      expect(getByTestId("test-id")).toHaveClass("list--enclosed");
    });
    it("has class list--small when size prop is set to small", () => {
      const { getByTestId } = render(
        <List data-testid="test-id" size="small" />,
      );
      expect(getByTestId("test-id")).toHaveClass("list");
      expect(getByTestId("test-id")).toHaveClass("list--small");
    });
    it("has class list--gray when color prop is set to gray", () => {
      const { getByTestId } = render(
        <List data-testid="test-id" color="gray" />,
      );
      expect(getByTestId("test-id")).toHaveClass("list");
      expect(getByTestId("test-id")).toHaveClass("list--gray");
    });
  });
});