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

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

describe("rendering Sticker", () => {
  describe("initial state", () => {
    it("has default class sticker", () => {
      const { getByTestId } = render(<Sticker data-testid="test-id" />);
      expect(getByTestId("test-id")).toHaveClass("sticker");
    });
  });

  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(<Sticker>test</Sticker>);
      expect(getByText("test")).toBeInTheDocument();
    });

    it("has class test-class when className is set to test-class", () => {
      const { getByTestId } = render(
        <Sticker data-testid="test-id" className="test-class" />,
      );
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    ["black", "orange"].map((color) => {
      it(`has sticker--${color} class when color is ${color}`, () => {
        const { container } = render(<Sticker color={color} />);
        expect(
          container.getElementsByClassName(`sticker--${color}`).length,
        ).toBe(1);
      });
    });

    it("has sticker--small class when size is small", () => {
      const { container } = render(<Sticker size="small" />);
      expect(container.getElementsByClassName("sticker--small").length).toBe(1);
    });
  });
});