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

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

describe("rendering CarouselItem", () => {
  describe("initial state", () => {
    it("has default class carousel__slide", () => {
      const { getByTestId } = render(<CarouselItem data-testid="test-id" />);
      expect(getByTestId("test-id")).toHaveClass("carousel__slide");
    });
    it("has carousel__slide class", () => {
      const { getByTestId } = render(<CarouselItem data-testid="test-id" />);
      expect(getByTestId("test-id")).toHaveClass("carousel__slide");
    });
  });
  describe("passed props", () => {
    it("renders children", () => {
      const { getByTestId } = render(
        <CarouselItem data-testid="test-id">test</CarouselItem>,
      );
      expect(getByTestId("test-id").textContent).toBe("test");
    });
    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <CarouselItem data-testid="test-id" className="test-class" />,
      );
      expect(getByTestId("test-id")).toHaveClass("carousel__slide");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
  });
});