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

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

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

    it("has default tag div", () => {
      const { container } = render(<BarBreak />);
      expect(container.querySelector("div")).toBeTruthy();
    });
  });

  describe("passed props", () => {
    it("has tag span when tag is set to span", () => {
      const { container } = render(<BarBreak tag="span" />);
      expect(container.querySelector("span")).toBeTruthy();
    });

    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <BarBreak data-testid="test-id" className="test-class" />,
      );
      expect(getByTestId("test-id")).toHaveClass("bar__break");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
  });
});