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

import { BlockActionIndicator } from "../BlockActionIndicator";
import { Context } from "../Context";

describe("rendering BlockActionIndicator", () => {
  describe("passed props", () => {
    it("renders children", () => {
      const { container } = render(
        <BlockActionIndicator>
          <p>test</p>
        </BlockActionIndicator>,
      );
      expect(container.querySelector("p")).toBeInTheDocument();
    });
    it("BlockActionIndicator passes props to child", () => {
      const { getByTestId } = render(
        <BlockActionIndicator data-testid="test-id">
          <p>test</p>
        </BlockActionIndicator>,
      );
      expect(getByTestId("test-id").tagName).toBe("P");
    });
    it("BlockActionIndicator passes class block-action__indicator", () => {
      const { container } = render(
        <BlockActionIndicator>
          <p>test</p>
        </BlockActionIndicator>,
      );
      expect(container.querySelector("p")).toBeInTheDocument();
      expect(container.querySelector("p")).toHaveClass(
        "block-action__indicator",
      );
    });
    it("BlockActionIndicator passes class is-indicating when isIndicating in provider is true", () => {
      const { container } = render(
        <Context.Provider
          value={{
            isIndicating: true,
            isActive: false,
          }}
        >
          <BlockActionIndicator>
            <p>test</p>
          </BlockActionIndicator>
        </Context.Provider>,
      );
      expect(container.querySelector("p")).toBeInTheDocument();
      expect(container.querySelector("p")).toHaveClass("is-indicating");
    });
    it("BlockActionIndicator passes class is-active when isActive in provider is true", () => {
      const { container } = render(
        <Context.Provider
          value={{
            isActive: true,
            isIndicating: false,
          }}
        >
          <BlockActionIndicator>
            <p>test</p>
          </BlockActionIndicator>
        </Context.Provider>,
      );
      expect(container.querySelector("p")).toBeInTheDocument();
      expect(container.querySelector("p")).toHaveClass("is-active");
    });
  });
});