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

import { Gauge } from "../";

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

    it("has dial element", () => {
      const { container } = render(<Gauge data-testid="test-id" />);
      expect(container.getElementsByClassName("gauge__dial").length).toBe(1);
    });

    it("has display element", () => {
      const { container } = render(<Gauge data-testid="test-id" />);
      expect(container.getElementsByClassName("gauge__display").length).toBe(1);
    });

    it("has indicator element", () => {
      const { container } = render(<Gauge data-testid="test-id" />);
      expect(container.getElementsByClassName("gauge__indicator").length).toBe(
        1,
      );
    });

    it("has text element", () => {
      const { container } = render(<Gauge data-testid="test-id" />);
      expect(container.getElementsByClassName("gauge__text").length).toBe(1);
    });
  });
});