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

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

// table, tbody and tr to prevent warning
describe("rendering Cell", () => {
  describe("initial state", () => {
    it("has default tag td", () => {
      const { getByTestId } = render(
        <table>
          <tbody>
            <tr>
              <Cell data-testid="test-id" />
            </tr>
          </tbody>
        </table>,
      );
      expect(getByTestId("test-id").tagName).toBe("TD");
    });
  });
  describe("initial state", () => {
    it("has tag th when tag prop is set to th", () => {
      const { getByTestId } = render(
        <table>
          <tbody>
            <tr>
              <Cell data-testid="test-id" tag="th" />
            </tr>
          </tbody>
        </table>,
      );
      expect(getByTestId("test-id").tagName).toBe("TH");
    });
    it("has class when className is set", () => {
      const { getByTestId } = render(
        <table>
          <tbody>
            <tr>
              <Cell data-testid="test-id" className="test-class" />
            </tr>
          </tbody>
        </table>,
      );
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("renders children", () => {
      const { getByText } = render(
        <table>
          <tbody>
            <tr>
              <Cell data-testid="test-id">test</Cell>
            </tr>
          </tbody>
        </table>,
      );
      expect(getByText("test")).toBeInTheDocument();
    });
  });
});