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

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

const image = "/test-image.jpg";
const picture = {
  default: "/test-picture.jpg",
  md: "/test-picture-md.jpg",
  xl: "/test-picture-xl.jpg",
};

// bgSrc prop is required
describe("rendering Cover", () => {
  describe("initial state", () => {
    it("has default class cover", () => {
      const { container } = render(<Cover bgSrc={image} />);
      expect(container.getElementsByClassName("cover").length).toBe(1);
    });
    it("has default class cover__image", () => {
      const { container } = render(<Cover bgSrc={image} />);
      expect(container.getElementsByClassName("cover__image").length).toBe(1);
    });
  });
  describe("passed props", () => {
    it("passes other props", () => {
      const { getByTestId } = render(
        <Cover data-testid="test" bgSrc={image} />,
      );
      expect(getByTestId("test")).toBeInTheDocument();
    });
    it("renders children", () => {
      const { getByText } = render(<Cover bgSrc={image}>test-text</Cover>);
      expect(getByText("test-text")).toBeInTheDocument();
    });
    it("has additional class when className is set", () => {
      const { container } = render(
        <Cover bgSrc={image} className="test-class" />,
      );
      expect(container.getElementsByClassName("cover").length).toBe(1);
      expect(container.getElementsByClassName("test-class").length).toBe(1);
    });
    it("has class cover__content when children are set", () => {
      const { container } = render(<Cover bgSrc={image}>test</Cover>);
      expect(container.getElementsByClassName("cover__content").length).toBe(1);
    });
    it("has additional class when contentClass and children are set", () => {
      const { container } = render(
        <Cover bgSrc={image} contentClass="test-content-class">
          test
        </Cover>,
      );
      expect(
        container.getElementsByClassName("test-content-class").length,
      ).toBe(1);
    });
    ["small", "medium", "large", "xlarge"].map((size) => {
      it(`has cover--${size} class when size is set to ${size}`, () => {
        const { container } = render(<Cover bgSrc={image} size={size} />);
        expect(container.getElementsByClassName(`cover--${size}`).length).toBe(
          1,
        );
      });
    });
    ["top", "bottom"].map((position) => {
      it(`has cover__image--${position} class when bgPosition is set to ${position}`, () => {
        const { container } = render(
          <Cover bgSrc={image} bgPosition={position} />,
        );
        expect(
          container.getElementsByClassName(`cover__image--${position}`).length,
        ).toBe(1);
      });
    });
    it("doesnt have cover__image--center class when bgPosition is set to center", () => {
      const { container } = render(<Cover bgSrc={image} bgPosition="center" />);
      expect(
        container.getElementsByClassName("cover__image--center").length,
      ).toBe(0);
    });
    it("renders img element, not picture, when bgSrc is set to string", () => {
      const { container } = render(<Cover bgSrc={image} />);
      expect(container.querySelectorAll("img").length).toBe(1);
      expect(container.querySelectorAll("picture").length).toBe(0);
    });
    it("img element has src set to bgSrc when bgSrc is string", () => {
      const { container } = render(<Cover bgSrc={image} />);
      expect(container.querySelector("img").getAttribute("src")).toBe(
        "/test-image.jpg",
      );
    });
    it("renders picture element with source and img elements when bgSrc is set to object with multiple properties", () => {
      const { container } = render(<Cover bgSrc={picture} />);
      expect(container.querySelectorAll("picture").length).toBe(1);
      expect(container.querySelectorAll("img").length).toBe(1);
      expect(container.querySelectorAll("source").length > 0).toBeTruthy();
    });
    it("img element has src set to bgSrc.default when bgSrc is object", () => {
      const { container } = render(<Cover bgSrc={picture} />);
      expect(container.querySelector("img").getAttribute("src")).toBe(
        picture.default,
      );
    });
    Object.keys(picture)
      .filter((el) => el !== "default")
      .map((key) => {
        it("srcSet of source element has correct value from bgSrc object", () => {
          const { container } = render(<Cover bgSrc={picture} />);
          const correctSource = container.querySelector(
            `source[srcset="${picture[key]}"]`,
          );
          expect(correctSource).toBeInTheDocument();
        });
      });
  });
});