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

import Card from "../Card";
import { ChildComponent } from "../mock";

const heading = "heading";

afterEach(cleanup);

const component = props => <Card {...props}>{ChildComponent}</Card>;

test("Smoke", async () => {
  const { queryAllByTestId } = render(component({ heading }));
  expect(queryAllByTestId("card-container").length).toBe(1);
  expect(queryAllByTestId("card-inner-container").length).toBe(1);
});

test("Header", async () => {
  const { queryAllByTestId } = render(component({ heading }));
  expect(queryAllByTestId("card-heading")[0].textContent).toBe(heading);
  expect(queryAllByTestId("card-heading").length).toBe(1);
});

test("Empty Header", async () => {
  const { queryAllByTestId } = render(component());
  expect(queryAllByTestId("card-heading").length).toBe(0);
});
