@truedat/core 6.3.1 → 6.3.2

package/src/components/__tests__/ResourceMembers.spec.js

@@ -0,0 +1,117 @@
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { intl } from "@truedat/test/intl-stub";
+import { useAclEntries } from "@truedat/core/hooks/useAclEntries";
+import { ResourceMembers } from "../ResourceMembers";
+
+// workaround for enzyme issue with React.useContext
+// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
+jest.spyOn(React, "useContext").mockImplementation(() => intl);
+jest.mock("@truedat/core/hooks/useAclEntries");
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ id: 1 }),
+}));
+
+jest.mock("@truedat/core/hooks/useAclEntries", () => ({
+  ...jest.requireActual("@truedat/core/hooks/useAclEntries"),
+  useAclEntries: jest.fn(),
+  useAclEntryUpdate: jest.fn().mockReturnValue({
+    trigger: jest.fn(),
+  }),
+  useAclEntryDelete: jest.fn().mockReturnValue({
+    trigger: jest.fn(),
+  }),
+}));
+
+describe("<ResourceMembers />", () => {
+  const aclEntries = {
+    aclEntries: [
+      {
+        principal_type: "group",
+        role_id: 2,
+        role_name: "data_owner",
+        principal: { description: "aaa bbb cc d", id: 2, name: "grupo1 " },
+        acl_entry_id: 1,
+      },
+      {
+        principal: {
+          email: "test@test.com",
+          full_name: "Data Owner 2",
+          id: 14,
+          user_name: "data_owner2",
+        },
+        principal_type: "user",
+        role_id: 2,
+        role_name: "data_owner",
+        acl_entry_id: 2,
+      },
+      {
+        principal: {
+          email: "test@test.com",
+          full_name: "Datos A",
+          id: 1,
+          user_name: "datos_a",
+        },
+        principal_type: "user",
+        role_id: 3,
+        role_name: "Datos A",
+        acl_entry_id: 3,
+      },
+      {
+        principal: {
+          email: "test@test.com",
+          full_name: "Last U",
+          id: 1,
+          user_name: "last_u",
+        },
+        principal_type: "user",
+        role_id: 6,
+        role_name: "Last R",
+        acl_entry_id: 4,
+      },
+    ],
+  };
+
+  const props = { type: "domain" };
+
+  useAclEntries.mockReturnValue({
+    data: { ...aclEntries, actions: { canCreate: true } },
+    loading: false,
+    mutate: jest.fn(),
+  });
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<ResourceMembers {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("filters users and groups according to search filter", () => {
+    const { getByRole } = render(<ResourceMembers {...props} />);
+
+    const input = getByRole("textbox");
+
+    userEvent.type(input, "data");
+    expect(document.getElementsByClassName("card").length).toBe(2);
+
+    userEvent.type(input, " owner");
+    expect(document.getElementsByClassName("card").length).toBe(1);
+  });
+
+  it("renders users and groups grouped by role name", () => {
+    const { getByRole, queryByRole } = render(<ResourceMembers {...props} />);
+
+    expect(getByRole("heading", { name: /data_owner/i })).toBeInTheDocument();
+    expect(getByRole("heading", { name: /datos a/i })).toBeInTheDocument();
+    expect(getByRole("heading", { name: /last r/i })).toBeInTheDocument();
+
+    const input = getByRole("textbox");
+
+    userEvent.type(input, "data");
+
+    expect(getByRole("heading", { name: /data_owner/i })).toBeInTheDocument();
+    expect(queryByRole("heading", { name: /datos a/i })).toBeNull();
+    expect(queryByRole("heading", { name: /last r/i })).toBeNull();
+  });
+});

package/src/components/__tests__/ResourceMembersAction.spec.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { ResourceMembersActions } from "../ResourceMembersActions";
+
+const props = {
+  resource: {
+    type: "domain",
+    id: 1,
+  },
+  actions: {
+    canCreate: true,
+  },
+};
+
+describe("<ResourceMembersActions />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<ResourceMembersActions {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("render actions button if canCreate is true", () => {
+    const { getByRole } = render(<ResourceMembersActions {...props} />);
+    expect(getByRole("button", { name: /add/i })).toBeInTheDocument();
+  });
+
+  it("no render actions button if canCreate is false", () => {
+    const customProps = {
+      ...props,
+      actions: {
+        canCreate: false,
+      },
+    };
+
+    const { queryByRole } = render(<ResourceMembersActions {...customProps} />);
+    expect(queryByRole("button", { name: /add/i })).toBeNull();
+  });
+});

package/src/components/__tests__/__snapshots__/AddMemberForm.spec.js.snap

@@ -0,0 +1,187 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AddMemberForm /> matches the latest snapshot 1`] = `
+<div>
+  <form
+    class="ui form"
+  >
+    <div
+      class="required field"
+    >
+      <label
+        for="principal"
+      >
+        domain.member
+      </label>
+      <div
+        aria-expanded="false"
+        class="ui search selection dropdown"
+        required=""
+        role="combobox"
+      >
+        <input
+          aria-autocomplete="list"
+          autocomplete="off"
+          class="search"
+          tabindex="0"
+          type="text"
+          value=""
+        />
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider default text"
+          role="alert"
+        >
+          domain.member
+        </div>
+        <i
+          aria-hidden="true"
+          class="dropdown icon"
+        />
+        <div
+          class="menu transition"
+          role="listbox"
+        >
+          <div
+            aria-checked="false"
+            aria-selected="true"
+            class="selected item"
+            id="1"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              john
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            id="2"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              mambo
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="required field"
+    >
+      <label
+        for="role"
+      >
+        domain.role
+      </label>
+      <div
+        aria-expanded="false"
+        class="ui basic search selection dropdown"
+        required=""
+        role="combobox"
+      >
+        <input
+          aria-autocomplete="list"
+          autocomplete="off"
+          class="search"
+          id="role"
+          tabindex="0"
+          type="text"
+          value=""
+        />
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider default text"
+          role="alert"
+        >
+          domain.role
+        </div>
+        <i
+          aria-hidden="true"
+          class="dropdown icon"
+        />
+        <div
+          class="menu transition"
+          role="listbox"
+        >
+          <div
+            aria-checked="false"
+            aria-selected="true"
+            class="selected item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              role1
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              role2
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label
+        for="description"
+      >
+        domain.role.member.description
+      </label>
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          id="description"
+          maxlength="120"
+          placeholder="domain.role.member.description"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+    <div
+      class="actions"
+    >
+      <button
+        class="ui primary disabled right floated button"
+        disabled=""
+        tabindex="-1"
+        type="submit"
+      >
+        domain.actions.add_member
+      </button>
+      <a
+        class="ui secondary button"
+        href="/"
+        role="button"
+      >
+        actions.cancel
+      </a>
+    </div>
+  </form>
+</div>
+`;

package/src/components/__tests__/__snapshots__/AddResourceMember.spec.js.snap

@@ -0,0 +1,160 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AddResourceMember /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui segment ui text container"
+  >
+    <h2
+      class="ui header"
+    >
+      <i
+        aria-hidden="true"
+        class="id card outline icon"
+      />
+      <div
+        class="content"
+      >
+        Add
+      </div>
+    </h2>
+    <form
+      class="ui form"
+    >
+      <div
+        class="required field"
+      >
+        <label
+          for="principal"
+        >
+          Member
+        </label>
+        <div
+          aria-expanded="false"
+          class="ui search selection dropdown"
+          required=""
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider default text"
+            role="alert"
+          >
+            Member
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              class="message"
+            >
+              No results found.
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="required field"
+      >
+        <label
+          for="role"
+        >
+          Role
+        </label>
+        <div
+          aria-expanded="false"
+          class="ui basic search selection dropdown"
+          required=""
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            id="role"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider default text"
+            role="alert"
+          >
+            Role
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              class="message"
+            >
+              No results found.
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="field"
+      >
+        <label
+          for="description"
+        >
+          Description
+        </label>
+        <div
+          class="ui input"
+        >
+          <input
+            autocomplete="off"
+            id="description"
+            maxlength="120"
+            placeholder="Description"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="actions"
+      >
+        <button
+          class="ui primary disabled right floated button"
+          disabled=""
+          tabindex="-1"
+          type="submit"
+        >
+          Add
+        </button>
+        <a
+          class="ui secondary button"
+          href="/"
+          role="button"
+        >
+          Cancel
+        </a>
+      </div>
+    </form>
+  </div>
+</div>
+`;

package/src/components/__tests__/__snapshots__/ResourceMembers.spec.js.snap

@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ResourceMembers /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui centered one column grid"
+  >
+    <div
+      class="column"
+    >
+      <div
+        class="ui icon input"
+      >
+        <input
+          placeholder="user.search.placeholder"
+          type="text"
+          value=""
+        />
+        <i
+          aria-hidden="true"
+          class="search link icon"
+        />
+      </div>
+      <a
+        class="ui primary right floated button"
+        href="/domains/1/members/new"
+        role="button"
+      >
+        <i
+          aria-hidden="true"
+          class="add user icon"
+        />
+        domain.actions.add_member
+      </a>
+    </div>
+  </div>
+  <h3
+    class="ui dividing header"
+  >
+    data_owner
+  </h3>
+  <div
+    class="ui cards"
+  >
+    <div
+      class="ui card domain-member"
+    >
+      <div
+        class="content domain-member__content"
+      >
+        <div
+          class="header"
+        >
+          <i
+            aria-hidden="true"
+            class="users icon"
+          />
+          grupo1 
+        </div>
+        <div
+          class="description"
+        />
+      </div>
+    </div>
+    <div
+      class="ui card domain-member"
+    >
+      <div
+        class="content domain-member__content"
+      >
+        <div
+          class="header"
+        >
+          <i
+            aria-hidden="true"
+            class="user icon"
+          />
+          Data Owner 2
+        </div>
+        <div
+          class="description"
+        >
+          data_owner2
+        </div>
+      </div>
+    </div>
+  </div>
+  <h3
+    class="ui dividing header"
+  >
+    Datos A
+  </h3>
+  <div
+    class="ui cards"
+  >
+    <div
+      class="ui card domain-member"
+    >
+      <div
+        class="content domain-member__content"
+      >
+        <div
+          class="header"
+        >
+          <i
+            aria-hidden="true"
+            class="user icon"
+          />
+          Datos A
+        </div>
+        <div
+          class="description"
+        >
+          datos_a
+        </div>
+      </div>
+    </div>
+  </div>
+  <h3
+    class="ui dividing header"
+  >
+    Last R
+  </h3>
+  <div
+    class="ui cards"
+  >
+    <div
+      class="ui card domain-member"
+    >
+      <div
+        class="content domain-member__content"
+      >
+        <div
+          class="header"
+        >
+          <i
+            aria-hidden="true"
+            class="user icon"
+          />
+          Last U
+        </div>
+        <div
+          class="description"
+        >
+          last_u
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/__tests__/__snapshots__/ResourceMembersAction.spec.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ResourceMembersActions /> matches the latest snapshot 1`] = `
+<div>
+  <a
+    class="ui primary right floated button"
+    href="/domains/1/members/new"
+    role="button"
+  >
+    <i
+      aria-hidden="true"
+      class="add user icon"
+    />
+    Add
+  </a>
+</div>
+`;