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

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

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

  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(<Buttons>test</Buttons>);
      expect(getByText("test")).toBeInTheDocument();
    });
    it("has class buttons--stack-on-xs when isStackedOnXs is passed", () => {
      const { getByTestId } = render(
        <Buttons data-testid="test-id" isStackedOnXs />,
      );
      expect(getByTestId("test-id")).toHaveClass("buttons");
      expect(getByTestId("test-id")).toHaveClass("buttons--stack-on-xs");
    });
  });
});