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

import { Testimonial } from "../";

describe("rendering Testimonial", () => {
  describe("initial state", () => {
    it("has default class testimonial", () => {
      const { getByTestId } = render(<Testimonial data-testid="test-id" />);
      expect(getByTestId("test-id")).toHaveClass("testimonial");
    });
    it("its rendered as paragraph", () => {
      const { getByTestId } = render(<Testimonial data-testid="test-id" />);
      expect(getByTestId("test-id").tagName).toBe("P");
    });
  });

  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(<Testimonial>test</Testimonial>);
      expect(getByText("test")).toBeInTheDocument();
    });
    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <Testimonial className="test" data-testid="test-id" />,
      );
      expect(getByTestId("test-id")).toHaveClass("testimonial");
      expect(getByTestId("test-id")).toHaveClass("test");
    });
    it("has additional className testimonial--orange prop color with value orange is passed", () => {
      const { getByTestId } = render(
        <Testimonial className="test" data-testid="test-id" color="orange" />,
      );
      expect(getByTestId("test-id")).toHaveClass("testimonial");
      expect(getByTestId("test-id")).toHaveClass("testimonial--orange");
    });
    it("its rendered as div when isDiv prop is passed", () => {
      const { getByTestId } = render(
        <Testimonial data-testid="test-id" isDiv />,
      );
      expect(getByTestId("test-id").tagName).toBe("DIV");
    });
  });
});
