CEC-3119 Magna access (#235)

* CEC-3119 Magna access

* Clean up

* Update test provider

src/components/Controls/RoleWrap/__snapshots__/index.test.js.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RoleWrap RoleWrap with access, child renders 1`] = `
+<div>
+  <div
+    data-testid="test-role-wrap-child"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`RoleWrap RoleWrap without access, child does not render 1`] = `<div />`;
+
+exports[`RoleWrap RoleWrap without access, eitherComponent renders 1`] = `
+<div>
+  <div
+    data-testid="test-role-wrap-child"
+  >
+    Either
+  </div>
+</div>
+`;

src/components/Controls/RoleWrap/index.js

@@ -0,0 +1,19 @@
+import {hasRole} from "../../../utils/roles";
+import React from "react";
+
+export const RoleWrap = (props) => {
+  const {groups, rolesPerProvider, providers} = props;
+
+  const eitherComponent =  props["eitherComponent"] || null;
+
+  if (!hasRole(groups, rolesPerProvider, providers)) {
+    return eitherComponent != null ? eitherComponent : <></>;
+  }
+
+  return (
+    <React.Fragment>
+      {props.children}
+    </React.Fragment>
+  )
+}
+

src/components/Controls/RoleWrap/index.test.js

@@ -0,0 +1,70 @@
+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();
+  });
+});