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

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

describe("rendering Item", () => {
  describe("initial state", () => {
    it("has default class control-group__item", () => {
      const { getByTestId } = render(<Item data-testid="test-id" />);
      expect(getByTestId("test-id")).toHaveClass("control-group__item");
    });
  });
  describe("passed props", () => {
    it("has additional class when className is set ", () => {
      const { getByTestId } = render(
        <Item data-testid="test-id" className="test-class" />,
      );
      expect(getByTestId("test-id")).toHaveClass("control-group__item");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("has control-group__item--large class when size is set to large", () => {
      const { getByTestId } = render(
        <Item data-testid="test-id" size="large" />,
      );
      expect(getByTestId("test-id")).toHaveClass("control-group__item--large");
    });
    it("renders children", () => {
      const { getByText } = render(<Item data-testid="test-id">test</Item>);
      expect(getByText("test")).toBeInTheDocument();
    });
  });
});