@truedat/auth 4.44.2 → 4.44.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.44.4] 2022-05-19
+
+### Changed
+
+- Use `lowerDeburrTrim` function from `@truedat/core`
+
 ## [4.43.3] 2022-05-04
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/auth",
-  "version": "4.44.2",
+  "version": "4.44.5",
   "description": "Truedat Web Auth",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -16,26 +16,26 @@
   "scripts": {
     "clean": "rimraf yarn-error.log",
     "debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
-    "test": "jest --coverage",
-    "test:watch": "jest --watch",
+    "test": "TZ=UTC jest --coverage",
+    "test:watch": "TZ=UTC jest --watch",
     "eslint": "eslint src/**",
     "eslint:fix": "eslint --fix src/**"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.8",
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.0",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.17.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.14.5",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.0",
+    "@babel/preset-env": "^7.18.0",
+    "@babel/preset-react": "^7.17.12",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.44.2",
-    "babel-jest": "^27.0.6",
+    "@truedat/test": "4.44.5",
+    "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-react-intl": "^5.1.18",
@@ -44,7 +44,8 @@
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.0.6",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "redux-saga-test-plan": "^4.0.4",
@@ -52,6 +53,8 @@
     "semantic-ui-react": "^2.0.3"
   },
   "jest": {
+    "maxWorkers": "50%",
+    "testTimeout": 10000,
     "moduleDirectories": [
       "<rootDir>/src",
       "../../node_modules"
@@ -84,13 +87,13 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.44.2",
+    "@truedat/core": "4.44.5",
     "auth0-js": "^9.12.2",
     "immutable": "^4.0.0-rc.12",
     "jwt-decode": "^2.2.0",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "query-string": "^6.11.0",
     "react-hook-form": "^7.30.0",
     "react-intl": "^5.20.10",
@@ -106,5 +109,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "ca0c5fffcba96736f7a2054f3c37789da8c30a9e"
+  "gitHead": "5a339468198c803592b285eddd0dd0c0b0eced93"
 }

package/src/groups/components/GroupsSearchLoader.js

@@ -1,21 +1,22 @@
-import _ from "lodash/fp";
-import React, { useEffect, useCallback } from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
-import { useSelector, useDispatch } from "react-redux";
+import { connect } from "react-redux";
 import { Dimmer, Loader } from "semantic-ui-react";
-
 import { searchGroups, clearGroupsSearch } from "../routines";
 
-export const GroupsSearchLoader = ({ query, hideLoading }) => {
-  const loading = useSelector(_.get("groupsSearchLoading"));
-  const dispatch = useDispatch();
-  const stableDispatch = useCallback(dispatch, []);
+export const GroupsSearchLoader = ({
+  query,
+  hideLoading,
+  searchGroups,
+  clearGroupsSearch,
+  loading,
+}) => {
   useEffect(() => {
-    stableDispatch(searchGroups({ query }));
+    searchGroups({ query });
     return () => {
-      stableDispatch(clearGroupsSearch());
+      clearGroupsSearch();
     };
-  }, [stableDispatch, query]);
+  }, [query, searchGroups, clearGroupsSearch]);
   return loading && !hideLoading ? (
     <Dimmer active inverted>
       <Loader size="massive" inverted />
@@ -25,7 +26,16 @@ export const GroupsSearchLoader = ({ query, hideLoading }) => {
 
 GroupsSearchLoader.propTypes = {
   query: PropTypes.string,
-  hideLoading: PropTypes.bool
+  hideLoading: PropTypes.bool,
+  loading: PropTypes.bool,
+  searchGroups: PropTypes.func,
+  clearGroupsSearch: PropTypes.func,
 };
 
-export default GroupsSearchLoader;
+export const mapStateToProps = ({ groupsSearchLoading }) => ({
+  loading: groupsSearchLoading,
+});
+
+export default connect(null, { searchGroups, clearGroupsSearch })(
+  GroupsSearchLoader
+);

package/src/groups/components/__tests__/GroupsSearchLoader.spec.js

@@ -1,16 +1,15 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import GroupsSearchLoader from "../GroupsSearchLoader";
 
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useDispatch: jest.fn(),
-  useSelector: jest.fn(selector => selector({ groupsSearchLoading: false }))
-}));
+const renderOpts = { state: { groupsSearchLoading: false } };
 
 describe("<GroupsSearchLoader />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<GroupsSearchLoader query="abc" />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(
+      <GroupsSearchLoader query="abc" />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
   });
 });

package/src/groups/components/__tests__/__snapshots__/GroupsSearchLoader.spec.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<GroupsSearchLoader /> matches the latest snapshot 1`] = `""`;
+exports[`<GroupsSearchLoader /> matches the latest snapshot 1`] = `<div />`;

package/src/roles/components/Roles.js

@@ -32,7 +32,7 @@ export const Roles = ({ roles, rolesLoading }) => (
 
 Roles.propTypes = {
   roles: PropTypes.array,
-  rolesLoading: PropTypes.bool
+  rolesLoading: PropTypes.bool,
 };
 
 const mapStateToProps = ({ roles, rolesLoading }) => ({ roles, rolesLoading });

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

@@ -1,29 +1,13 @@
 import React from "react";
-import { intl } from "@truedat/test/intl-stub";
-import { shallow } from "enzyme";
-import { createStore } from "redux";
-import { Provider } from "react-redux";
+import { render } from "@truedat/test/render";
 import RoleSelector from "../RoleSelector";
 
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useSelector: jest.fn(selector =>
-    selector({ roles: [{ name: "test1", id: 1 }] })
-  )
-}));
-
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
+const renderOpts = { state: { roles: [{ name: "test1", id: 1 }] } };
 
 describe("<RoleSelector />", () => {
   it("matches the latest snapshot", () => {
-    const store = createStore(() => ({}));
-    const wrapper = shallow(
-      <Provider store={store}>
-        <RoleSelector />
-      </Provider>
-    );
-    expect(wrapper).toMatchSnapshot();
+    const props = { onChange: jest.fn() };
+    const { container } = render(<RoleSelector {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,16 +1,16 @@
 import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
-import { Roles } from "../Roles";
+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: 2, is_default: false, name: "Data Q" },
   ];
-  const props = { roles };
+  const state = { roles };
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallowWithIntl(<Roles {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<Roles />, { state });
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,35 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<RoleSelector /> matches the latest snapshot 1`] = `
-<ContextProvider
-  value={
-    Object {
-      "store": Object {
-        "@@observable": [Function],
-        "dispatch": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-      },
-      "subscription": Subscription {
-        "handleChangeWrapper": [Function],
-        "listeners": Object {
-          "notify": [Function],
-        },
-        "onStateChange": [Function],
-        "parentSub": undefined,
-        "store": Object {
-          "@@observable": [Function],
-          "dispatch": [Function],
-          "getState": [Function],
-          "replaceReducer": [Function],
-          "subscribe": [Function],
-        },
-        "unsubscribe": null,
-      },
-    }
-  }
->
-  <Connect(RoleSelector) />
-</ContextProvider>
+<div>
+  <div
+    class="field"
+  >
+    <div
+      aria-expanded="false"
+      class="ui search selection dropdown"
+      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"
+      >
+        Search Roles…
+      </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"
+          >
+            test1
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;

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

@@ -1,65 +1,99 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Roles /> matches the latest snapshot 1`] = `
-<Segment>
-  <Header
-    as="h2"
+<div>
+  <div
+    class="ui segment"
   >
-    <Button
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "displayName": "Link",
-          "propTypes": Object {
-            "innerRef": [Function],
-            "onClick": [Function],
-            "replace": [Function],
-            "target": [Function],
-            "to": [Function],
-          },
-          "render": [Function],
-        }
-      }
-      content={
-        <Memo(MemoizedFormattedMessage)
-          id="roles.create"
-        />
-      }
-      floated="right"
-      primary={true}
-      to="/roles/new"
-    />
-    <Icon
-      as="i"
-      circular={true}
-      name="student"
-    />
-    <HeaderContent>
-      <MemoizedFormattedMessage
-        id="roles.header"
+    <h2
+      class="ui header"
+    >
+      <a
+        class="ui primary right floated button"
+        href="/roles/new"
+        role="button"
+      >
+        Create new role
+      </a>
+      <i
+        aria-hidden="true"
+        class="student circular icon"
       />
-      <HeaderSubheader>
-        <MemoizedFormattedMessage
-          id="roles.subheader"
-        />
-      </HeaderSubheader>
-    </HeaderContent>
-  </Header>
-  <Connect(RoleCards)
-    roles={
-      Array [
-        Object {
-          "id": 3,
-          "is_default": false,
-          "name": "Data Owner",
-        },
-        Object {
-          "id": 2,
-          "is_default": false,
-          "name": "Data Q",
-        },
-      ]
-    }
-  />
-</Segment>
+      <div
+        class="content"
+      >
+        Roles
+        <div
+          class="sub header"
+        >
+          Manage roles
+        </div>
+      </div>
+    </h2>
+    <div
+      class="ui cards"
+    >
+      <div
+        class="ui card"
+      >
+        <div
+          class="content"
+        >
+          <a
+            class="header"
+            href="/roles/3"
+          >
+            Data Owner
+          </a>
+        </div>
+        <div
+          class="extra content"
+        >
+          <div
+            class="ui actions"
+          >
+            <button
+              class="ui red basic icon button"
+            >
+              <i
+                aria-hidden="true"
+                class="trash icon"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="ui card"
+      >
+        <div
+          class="content"
+        >
+          <a
+            class="header"
+            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="trash icon"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;

package/src/users/components/UsersSearchLoader.js

@@ -1,21 +1,22 @@
-import _ from "lodash/fp";
-import React, { useEffect, useCallback } from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
-import { useSelector, useDispatch } from "react-redux";
+import { connect } from "react-redux";
 import { Dimmer, Loader } from "semantic-ui-react";
-
 import { searchUsers, clearUsersSearch } from "../routines";
 
-export const UsersSearchLoader = ({ query, hideLoading }) => {
-  const loading = useSelector(_.get("usersSearchLoading"));
-  const dispatch = useDispatch();
-  const stableDispatch = useCallback(dispatch, []);
+export const UsersSearchLoader = ({
+  query,
+  hideLoading,
+  searchUsers,
+  clearUsersSearch,
+  loading,
+}) => {
   useEffect(() => {
-    stableDispatch(searchUsers({ query }));
+    searchUsers({ query });
     return () => {
-      stableDispatch(clearUsersSearch());
+      clearUsersSearch();
     };
-  }, [stableDispatch, query]);
+  }, [searchUsers, clearUsersSearch, query]);
   return loading && !hideLoading ? (
     <Dimmer active inverted>
       <Loader size="massive" inverted />
@@ -25,7 +26,16 @@ export const UsersSearchLoader = ({ query, hideLoading }) => {
 
 UsersSearchLoader.propTypes = {
   query: PropTypes.string,
-  hideLoading: PropTypes.bool
+  hideLoading: PropTypes.bool,
+  searchUsers: PropTypes.func,
+  clearUsersSearch: PropTypes.func,
+  loading: PropTypes.bool,
 };
 
-export default UsersSearchLoader;
+export const mapStateToProps = ({ usersSearchLoading: loading }) => ({
+  loading,
+});
+
+export default connect(mapStateToProps, { searchUsers, clearUsersSearch })(
+  UsersSearchLoader
+);

package/src/users/components/__tests__/UserSelector.spec.js

@@ -1,31 +1,13 @@
 import React from "react";
-import { intl } from "@truedat/test/intl-stub";
-import { shallow } from "enzyme";
-
-import { createStore } from "redux";
-import { Provider } from "react-redux";
-
+import { render } from "@truedat/test/render";
 import UserSelector from "../UserSelector";
 
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useSelector: jest.fn(selector =>
-    selector({ users: [{ full_name: "test1", id: 1 }] })
-  )
-}));
-
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
+const renderOpts = { users: [{ full_name: "test1", id: 1 }] };
 
 describe("<UserSelector />", () => {
   it("matches the latest snapshot", () => {
-    const store = createStore(() => ({}));
-    const wrapper = shallow(
-      <Provider store={store}>
-        <UserSelector />
-      </Provider>
-    );
-    expect(wrapper).toMatchSnapshot();
+    const props = { onChange: jest.fn() };
+    const { container } = render(<UserSelector {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/users/components/__tests__/UsersSearchLoader.spec.js

@@ -1,16 +1,12 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import UsersSearchLoader from "../UsersSearchLoader";
 
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useDispatch: jest.fn(),
-  useSelector: jest.fn(selector => selector({ usersSearchLoading: false }))
-}));
+const renderOpts = { state: { usersSearchLoading: false } };
 
 describe("<UsersSearchLoader />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<UsersSearchLoader query="abc" />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<UsersSearchLoader query="abc" />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/users/components/__tests__/__snapshots__/UserSelector.spec.js.snap

@@ -1,35 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<UserSelector /> matches the latest snapshot 1`] = `
-<ContextProvider
-  value={
-    Object {
-      "store": Object {
-        "@@observable": [Function],
-        "dispatch": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-      },
-      "subscription": Subscription {
-        "handleChangeWrapper": [Function],
-        "listeners": Object {
-          "notify": [Function],
-        },
-        "onStateChange": [Function],
-        "parentSub": undefined,
-        "store": Object {
-          "@@observable": [Function],
-          "dispatch": [Function],
-          "getState": [Function],
-          "replaceReducer": [Function],
-          "subscribe": [Function],
-        },
-        "unsubscribe": null,
-      },
-    }
-  }
->
-  <Connect(UserSelector) />
-</ContextProvider>
+<div>
+  <div
+    class="field"
+  >
+    <div
+      aria-expanded="false"
+      class="ui search selection dropdown"
+      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"
+      >
+        Search users…
+      </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>
 `;

package/src/users/components/__tests__/__snapshots__/UsersSearchLoader.spec.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<UsersSearchLoader /> matches the latest snapshot 1`] = `""`;
+exports[`<UsersSearchLoader /> matches the latest snapshot 1`] = `<div />`;

package/src/users/selectors/filterUsers.js

@@ -1,9 +1,7 @@
 import _ from "lodash/fp";
-import { lowerDeburr } from "@truedat/core/services/sort";
+import { lowerDeburrTrim } from "@truedat/core/services/sort";
 
-const lowerDeburrTrim = _.flow(_.trim, lowerDeburr);
-
-export const filterUsers = usersFilter =>
+export const filterUsers = (usersFilter) =>
   lowerDeburrTrim(usersFilter)
     ? _.filter(
         _.flow(