import { render, screen } from "@testing-library/react";
import { Permissions, Providers, Roles } from "../../../utils/roles";
import addSnapshotSerializer from "../../../utils/snapshot";
import { RoleWrap } from "./index";

const selector = "test-role-wrap-child";

const renderRoleWrap = async (
  groups,
  providers,
  rolesPerProvider,
  eitherComponent
) => {
  const { container } = render(
    <RoleWrap
      groups={groups}
      providers={providers}
      rolesPerProvider={rolesPerProvider}
      eitherComponent={eitherComponent}
    >
      <div data-testid={selector}>Test</div>
    </RoleWrap>
  );
  return container;
};

describe("RoleWrap", () => {
  beforeAll(() => {
    addSnapshotSerializer(expect);
  });

  it("RoleWrap with access, child renders", async () => {
    const view = await renderRoleWrap(
      [Roles.READ],
      [Providers.FISKER],
      Permissions.FiskerRead,
      null
    );
    const childComponent = screen.getByTestId(selector);
    expect(childComponent).toHaveTextContent("Test");

    expect(view).toMatchSnapshot();
  });

  it("RoleWrap without access, child does not render", async () => {
    const view = await renderRoleWrap(
      [Roles.READ],
      [Providers.FISKER],
      Permissions.FiskerCreate,
      null
    );
    const childComponent = screen.queryByTestId(selector);
    expect(childComponent).toBeNull();

    expect(view).toMatchSnapshot();
  });

  it("RoleWrap without access, eitherComponent renders", async () => {
    const view = await renderRoleWrap(
      [Roles.READ],
      [Providers.FISKER],
      Permissions.FiskerCreate,
      <div data-testid={selector}>Either</div>
    );
    const childComponent = screen.getByTestId(selector);
    expect(childComponent).toHaveTextContent("Either");

    expect(view).toMatchSnapshot();
  });
});
