@truedat/auth 7.5.9 → 7.5.11

package/src/roles/components/RoleSelector.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";

package/src/roles/components/Roles.js

@@ -1,9 +1,8 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Button, Header, Segment, Icon } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { linkTo } from "@truedat/core/routes";
 import RoleCards from "./RoleCards";
 
@@ -33,7 +32,6 @@ export const Roles = ({ roles, rolesLoading }) => {
           </Header.Subheader>
         </Header.Content>
       </Header>
-
       <RoleCards roles={roles} />
     </Segment>
   );

package/src/roles/components/RolesLoader.js

@@ -1,10 +1,10 @@
-import React from "react";
+import { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Loading } from "@truedat/core/components";
 import { fetchRoles, clearRoles } from "../routines";
 
-class RolesLoader extends React.Component {
+class RolesLoader extends Component {
   static propTypes = {
     fetchRoles: PropTypes.func,
     clearRoles: PropTypes.func,

package/src/roles/components/__tests__/PermissionGroup.spec.js

@@ -1,32 +1,22 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import { PermissionGroup } from "../PermissionGroup";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "permission.group.Taxonomy": "Taxonomy",
-      "permission.perm1": "Perm1",
-      "permission.perm4": "Perm4"
-    }
-  }
-};
-
 describe("<PermissionGroup />", () => {
   const id = 1;
   const name = "Taxonomy";
   const permissions = [
     { id: 1, name: "perm1" },
-    { id: 4, name: "perm4" }
+    { id: 4, name: "perm4" },
   ];
   const rolePermissions = [
     { id: 1, name: "perm1" },
-    { id: 3, name: "perm3" }
+    { id: 3, name: "perm3" },
   ];
   const props = { id, name, rolePermissions, permissions };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(<PermissionGroup {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<PermissionGroup {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/roles/components/__tests__/Role.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import Role from "../Role";
 

package/src/roles/components/__tests__/RoleCards.spec.js

@@ -1,23 +1,24 @@
-import React from "react";
-import { Card } from "semantic-ui-react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
+import en from "messages/en";
 import { RoleCards } from "../RoleCards";
 
+const renderOpts = { messages: { en } };
+
 describe("<RoleCards />", () => {
   const roles = [
-    { id: 3, is_default: false, name: "Data Owner" },
-    { id: 2, is_default: false, name: "Data Q" }
+    { id: "3", is_default: false, name: "Data Owner" },
+    { id: "2", is_default: false, name: "Data Q" },
   ];
   const props = { roles };
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallowWithIntl(<RoleCards {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<RoleCards {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 
   it("contains a card for each source", () => {
-    const props = { roles };
-    const wrapper = shallowWithIntl(<RoleCards {...props} />);
-    expect(wrapper.find(Card)).toHaveLength(2);
+    const { container } = render(<RoleCards {...props} />, renderOpts);
+
+    expect(container.querySelectorAll("div.ui.card")).toHaveLength(2);
   });
 });

package/src/roles/components/__tests__/RoleRoutes.spec.js

@@ -1,14 +1,60 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { RoleRoutes } from "../RoleRoutes";
+import { render, waitForLoad } from "@truedat/test/render";
+import RoleRoutes from "../RoleRoutes";
+import { useAuthorized } from "@truedat/core/hooks/useAuthorized";
+import { absolutePath } from "@truedat/core/routesTree";
 
-jest.mock("@truedat/core/hooks", () => ({
-  useAuthorized: jest.fn(() => true)
+jest.mock("@truedat/core/hooks/useAuthorized", () => ({
+  useAuthorized: jest.fn(() => true),
 }));
 
+// Mock all components used in RoleRoutes
+jest.mock("../Roles", () => () => <div>Roles</div>);
+jest.mock("../Role", () => () => <div>Role</div>);
+jest.mock("../NewRole", () => () => <div>NewRole</div>);
+jest.mock("../RolesLoader", () => () => <div>RolesLoader</div>);
+jest.mock("../RoleLoader", () => () => <div>RoleLoader</div>);
+jest.mock("@truedat/core/router/Unauthorized", () => () => (
+  <div>Unauthorized</div>
+));
+
 describe("<RoleRoutes />", () => {
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<RoleRoutes />);
-    expect(wrapper).toMatchSnapshot();
+  it("renders correctly with default route", async () => {
+    const rendered = render(<RoleRoutes />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with ROLES route", async () => {
+    const rendered = render(<RoleRoutes />, {
+      routes: [absolutePath("roles")],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with ROLES_NEW route", async () => {
+    const rendered = render(<RoleRoutes />, {
+      routes: [absolutePath("roles/new")],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with ROLE route", async () => {
+    const rendered = render(<RoleRoutes />, {
+      routes: ["/roles/123"],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders unauthorized component when not authorized", async () => {
+    useAuthorized.mockReturnValueOnce(false);
+    const rendered = render(<RoleRoutes />, {
+      routes: [absolutePath("roles")],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/roles/components/__tests__/RoleSelector.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import RoleSelector from "../RoleSelector";
 

package/src/roles/components/__tests__/Roles.spec.js

@@ -1,11 +1,10 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import Roles from "../Roles";
 
 describe("<Roles />", () => {
   const roles = [
-    { id: 3, is_default: false, name: "Data Owner" },
-    { id: 2, is_default: false, name: "Data Q" },
+    { id: "3", is_default: false, name: "Data Owner" },
+    { id: "2", is_default: false, name: "Data Q" },
   ];
   const state = { roles };
 

package/src/roles/components/__tests__/__snapshots__/PermissionGroup.spec.js.snap

@@ -8,7 +8,7 @@ exports[`<PermissionGroup /> matches the latest snapshot 1`] = `
     <h4
       class="ui header"
     >
-      Taxonomy
+      permission.group.Taxonomy
     </h4>
     <div
       class="ui small list"
@@ -27,10 +27,9 @@ exports[`<PermissionGroup /> matches the latest snapshot 1`] = `
             readonly=""
             tabindex="0"
             type="checkbox"
-            value=""
           />
           <label>
-            Perm1
+            perm1
           </label>
         </div>
       </div>
@@ -46,10 +45,9 @@ exports[`<PermissionGroup /> matches the latest snapshot 1`] = `
             readonly=""
             tabindex="0"
             type="checkbox"
-            value=""
           />
           <label>
-            Perm4
+            perm4
           </label>
         </div>
       </div>

package/src/roles/components/__tests__/__snapshots__/Role.spec.js.snap

@@ -7,9 +7,10 @@ exports[`<Role /> matches the latest snapshot 1`] = `
   >
     <a
       class="section"
+      data-discover="true"
       href="/roles"
     >
-      Roles
+      navigation.members.roles
     </a>
     <i
       aria-hidden="true"
@@ -40,7 +41,7 @@ exports[`<Role /> matches the latest snapshot 1`] = `
         <div
           class="sub header"
         >
-          Role
+          role.subheader
         </div>
       </div>
     </h2>
@@ -52,10 +53,9 @@ exports[`<Role /> matches the latest snapshot 1`] = `
         readonly=""
         tabindex="0"
         type="checkbox"
-        value=""
       />
       <label>
-        Default
+        roles.default
       </label>
     </div>
   </div>

package/src/roles/components/__tests__/__snapshots__/RoleCards.spec.js.snap

@@ -1,142 +1,72 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<RoleCards /> matches the latest snapshot 1`] = `
-<CardGroup>
-  <Card
-    key="0"
+<div>
+  <div
+    class="ui cards"
   >
-    <CardContent>
-      <CardHeader
-        as={
-          {
-            "$$typeof": Symbol(react.forward_ref),
-            "displayName": "Link",
-            "propTypes": {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          }
-        }
-        to="/roles/3"
-      >
-        Data Owner
-      </CardHeader>
-    </CardContent>
-    <CardContent
-      extra={true}
+    <div
+      class="ui card"
     >
       <div
-        className="ui actions"
+        class="content"
       >
-        <ConfirmModal
-          content={
-            <Memo(MemoizedFormattedMessage)
-              id="roles.actions.delete.confirmation.content"
-              values={
-                {
-                  "name": <b>
-                    Data Owner
-                  </b>,
-                }
-              }
-            />
-          }
-          header={
-            <Memo(MemoizedFormattedMessage)
-              id="roles.actions.delete.confirmation.header"
-            />
-          }
-          icon="trash"
-          onConfirm={[Function]}
-          trigger={
-            <Button
-              as="button"
-              basic={true}
-              color="red"
-              icon={
-                <Icon
-                  as="i"
-                  color="red"
-                  name="trash alternate outline"
-                />
-              }
-            />
-          }
-        />
+        <a
+          class="header"
+          data-discover="true"
+          href="/roles/3"
+        >
+          Data Owner
+        </a>
       </div>
-    </CardContent>
-  </Card>
-  <Card
-    key="1"
-  >
-    <CardContent>
-      <CardHeader
-        as={
-          {
-            "$$typeof": Symbol(react.forward_ref),
-            "displayName": "Link",
-            "propTypes": {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          }
-        }
-        to="/roles/2"
+      <div
+        class="extra content"
       >
-        Data Q
-      </CardHeader>
-    </CardContent>
-    <CardContent
-      extra={true}
+        <div
+          class="ui actions"
+        >
+          <button
+            class="ui red basic icon button"
+          >
+            <i
+              aria-hidden="true"
+              class="red trash alternate outline icon"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ui card"
     >
       <div
-        className="ui actions"
+        class="content"
       >
-        <ConfirmModal
-          content={
-            <Memo(MemoizedFormattedMessage)
-              id="roles.actions.delete.confirmation.content"
-              values={
-                {
-                  "name": <b>
-                    Data Q
-                  </b>,
-                }
-              }
-            />
-          }
-          header={
-            <Memo(MemoizedFormattedMessage)
-              id="roles.actions.delete.confirmation.header"
-            />
-          }
-          icon="trash"
-          onConfirm={[Function]}
-          trigger={
-            <Button
-              as="button"
-              basic={true}
-              color="red"
-              icon={
-                <Icon
-                  as="i"
-                  color="red"
-                  name="trash alternate outline"
-                />
-              }
+        <a
+          class="header"
+          data-discover="true"
+          href="/roles/2"
+        >
+          Data Q
+        </a>
+      </div>
+      <div
+        class="extra content"
+      >
+        <div
+          class="ui actions"
+        >
+          <button
+            class="ui red basic icon button"
+          >
+            <i
+              aria-hidden="true"
+              class="red trash alternate outline icon"
             />
-          }
-        />
+          </button>
+        </div>
       </div>
-    </CardContent>
-  </Card>
-</CardGroup>
+    </div>
+  </div>
+</div>
 `;

package/src/roles/components/__tests__/__snapshots__/RoleRoutes.spec.js.snap

@@ -1,8 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<RoleRoutes /> matches the latest snapshot 1`] = `
-<Route
-  path="/roles"
-  render={[Function]}
-/>
+exports[`<RoleRoutes /> renders correctly with ROLE route 1`] = `
+<div>
+  <div>
+    RoleLoader
+  </div>
+  <div>
+    Role
+  </div>
+</div>
+`;
+
+exports[`<RoleRoutes /> renders correctly with ROLES route 1`] = `
+<div>
+  <div>
+    RolesLoader
+  </div>
+  <div>
+    Roles
+  </div>
+</div>
+`;
+
+exports[`<RoleRoutes /> renders correctly with ROLES_NEW route 1`] = `
+<div>
+  <div>
+    NewRole
+  </div>
+</div>
+`;
+
+exports[`<RoleRoutes /> renders correctly with default route 1`] = `<div />`;
+
+exports[`<RoleRoutes /> renders unauthorized component when not authorized 1`] = `
+<div>
+  <div>
+    Unauthorized
+  </div>
+</div>
 `;

package/src/roles/components/__tests__/__snapshots__/RoleSelector.spec.js.snap

@@ -21,7 +21,7 @@ exports[`<RoleSelector /> matches the latest snapshot 1`] = `
       class="divider default text"
       role="alert"
     >
-      Search Roles…
+      role.search.placeholder
     </div>
     <i
       aria-hidden="true"

package/src/roles/components/__tests__/__snapshots__/Roles.spec.js.snap

@@ -10,10 +10,11 @@ exports[`<Roles /> matches the latest snapshot 1`] = `
     >
       <a
         class="ui primary right floated button"
+        data-discover="true"
         href="/roles/new"
         role="button"
       >
-        Create new role
+        roles.create
       </a>
       <i
         aria-hidden="true"
@@ -22,11 +23,11 @@ exports[`<Roles /> matches the latest snapshot 1`] = `
       <div
         class="content"
       >
-        Roles
+        roles.header
         <div
           class="sub header"
         >
-          Manage roles
+          roles.subheader
         </div>
       </div>
     </h2>
@@ -41,6 +42,7 @@ exports[`<Roles /> matches the latest snapshot 1`] = `
         >
           <a
             class="header"
+            data-discover="true"
             href="/roles/3"
           >
             Data Owner
@@ -71,6 +73,7 @@ exports[`<Roles /> matches the latest snapshot 1`] = `
         >
           <a
             class="header"
+            data-discover="true"
             href="/roles/2"
           >
             Data Q

package/src/roles/components/index.js

@@ -19,5 +19,5 @@ export {
   RoleCards,
   Roles,
   RolesLoader,
-  RoleSelector
+  RoleSelector,
 };

package/src/roles/reducers/rolePermissions.js

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import {
   fetchRole,
   fetchRolePermissions,
-  updateRolePermissions
+  updateRolePermissions,
 } from "../routines";
 
 const initialState = [];

package/src/roles/reducers/roleRedirect.js

@@ -10,7 +10,7 @@ export const roleRedirect = (state = initialState, { type, payload }) => {
       return initialState;
     case createRole.SUCCESS:
       const {
-        data: { id }
+        data: { id },
       } = payload;
       return linkTo.ROLE({ id: id.toString() });
     case deleteRole.SUCCESS:

package/src/roles/sagas/deleteRole.js

@@ -7,7 +7,7 @@ import { API_ROLE } from "../api";
 export function* deleteRoleSaga({ payload }) {
   try {
     const { id } = payload;
-    const url = compile(API_ROLE)({ id });
+    const url = compile(API_ROLE)({ id: `${id}` });
     yield put(deleteRole.request());
     const { data } = yield call(apiJsonDelete, url, JSON_OPTS);
     yield put(deleteRole.success(data));

package/src/roles/sagas/fetchRole.js

@@ -7,7 +7,7 @@ import { API_ROLE } from "../api";
 export function* fetchRoleSaga({ payload }) {
   try {
     const { id } = payload;
-    const url = compile(API_ROLE)({ id });
+    const url = compile(API_ROLE)({ id: `${id}` });
     yield put(fetchRole.request());
     const { data } = yield call(apiJson, url, JSON_OPTS);
     yield put(fetchRole.success(data));

package/src/roles/sagas/fetchRolePermissions.js

@@ -7,7 +7,7 @@ import { API_ROLE_PERMISSIONS } from "../api";
 export function* fetchRolePermissionsSaga({ payload }) {
   try {
     const { id } = payload;
-    const url = compile(API_ROLE_PERMISSIONS)({ id });
+    const url = compile(API_ROLE_PERMISSIONS)({ id: `${id}` });
     yield put(fetchRolePermissions.request());
     const { data } = yield call(apiJson, url, JSON_OPTS);
     yield put(fetchRolePermissions.success(data));

package/src/roles/sagas/updateRole.js

@@ -7,7 +7,7 @@ import { API_ROLE } from "../api";
 export function* updateRoleSaga({ payload }) {
   try {
     const { id, role } = payload;
-    const url = compile(API_ROLE)({ id });
+    const url = compile(API_ROLE)({ id: `${id}` });
     const { data } = yield call(apiJsonPatch, url, { role }, JSON_OPTS);
     yield put(updateRole.success(data));
   } catch (error) {

package/src/roles/sagas/updateRolePermissions.js

@@ -7,7 +7,7 @@ import { API_ROLE_PERMISSIONS } from "../api";
 export function* updateRolePermissionsSaga({ payload }) {
   try {
     const { id, permissions } = payload;
-    const url = compile(API_ROLE_PERMISSIONS)({ id });
+    const url = compile(API_ROLE_PERMISSIONS)({ id: `${id}` });
     const body = { permissions };
     yield put(updateRolePermissions.request());
     const { data } = yield call(apiJsonPut, url, body, JSON_OPTS);