@truedat/core 4.44.4 → 4.45.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.44.5] 2022-05-20
+
+### Changed
+
+- [TD-4230] `TemplateSelector` GraphQL fetchPolicy changed to
+  `cache-and-network` and changed hidden logic
+
 ## [4.44.4] 2022-05-19
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "4.44.4",
+  "version": "4.45.1",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -17,23 +17,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",
-    "@truedat/test": "4.44.4",
-    "babel-jest": "^27.0.6",
+    "@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.45.1",
+    "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",
@@ -41,7 +44,8 @@
     "enzyme": "^3.11.0",
     "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",
     "jest-localstorage-mock": "^2.4.14",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
@@ -50,6 +54,8 @@
     "semantic-ui-react": "^2.0.3"
   },
   "jest": {
+    "maxWorkers": "50%",
+    "testTimeout": 10000,
     "moduleDirectories": [
       "<rootDir>/src",
       "../../node_modules"
@@ -82,16 +88,16 @@
     }
   },
   "dependencies": {
-    "@apollo/client": "^3.4.10",
+    "@apollo/client": "^3.6.4",
     "axios": "^0.19.2",
     "immutable": "^4.0.0-rc.12",
     "is-hotkey": "^0.1.6",
     "is-url": "^1.2.4",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react-csv": "^2.2.2",
     "react-dropzone": "^4.2.13",
     "react-intl": "^5.20.10",
-    "react-moment": "^0.9.7",
+    "react-moment": "^1.1.2",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "redux": "^4.1.1",
@@ -106,5 +112,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "36fb183e1d22181e6a15b3bac2c01b39214eacdb"
+  "gitHead": "c13f37ee357bf4a5e8c8c99eb6bd0c798f468c49"
 }

package/src/api/queries.js

@@ -11,8 +11,8 @@ export const DOMAINS_QUERY = gql`
 `;
 
 export const TEMPLATES_QUERY = gql`
-  query Templates($scope: String!) {
-    templates(scope: $scope) {
+  query Templates($scope: String, $domainIds: [ID]) {
+    templates(scope: $scope, domainIds: $domainIds) {
       id
       name
       label

package/src/components/TemplateSelector.js

@@ -27,7 +27,7 @@ export const TemplateSelector = ({
 }) => {
   const { formatMessage } = useIntl();
   const options = makeOptions(templates);
-  const hidden = _.size(templates) <= 1;
+  const hidden = loading ? false : _.size(templates) <= 1;
 
   const handleChange = (e, { value, ...data }) => {
     const template = _.find({ id: value })(templates);
@@ -50,7 +50,9 @@ export const TemplateSelector = ({
         name={name}
         onChange={handleChange}
         options={options}
-        placeholder={formatMessage({ id: "template.selector.placeholder" })}
+        placeholder={formatMessage({
+          id: loading ? "loading" : "template.selector.placeholder",
+        })}
         search
         selection
         value={_.toString(selectedValue)}
@@ -69,19 +71,27 @@ TemplateSelector.propTypes = {
   templates: PropTypes.array,
 };
 
-export const TemplateSelectorLoader = ({ scope, onLoad, ...props }) => {
+const emptyTemplates = [];
+export const TemplateSelectorLoader = ({
+  scope,
+  onLoad,
+  domainIds,
+  ...props
+}) => {
   const { loading, error, data } = useQuery(TEMPLATES_QUERY, {
-    variables: { scope },
+    fetchPolicy: "cache-and-network",
+    variables: { scope, domainIds },
     onCompleted: onLoad,
   });
   if (error) return null;
-  const templates = data?.templates || [];
+  const templates = data?.templates || emptyTemplates;
   return (
     <TemplateSelector loading={loading} templates={templates} {...props} />
   );
 };
 
 TemplateSelectorLoader.propTypes = {
+  domainIds: PropTypes.array,
   scope: PropTypes.string.isRequired,
   onLoad: PropTypes.func,
 };

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

@@ -1,10 +1,12 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { DateTime } from "..";
 
 describe("<DateTime />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<DateTime value="2018-06-27T07:32:53.154377Z" />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(
+      <DateTime value="2018-06-27T07:32:53.154377Z" />
+    );
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,51 +1,80 @@
-import React, { Suspense } from "react";
-import { waitFor } from "@testing-library/react";
+import React from "react";
+import { waitForElementToBeRemoved } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
-import { TEMPLATES_QUERY } from "@truedat/core/api/queries";
+import {
+  errorTemplateMock,
+  multipleTemplatesMock,
+  singleTemplateMock,
+} from "@truedat/test/mocks";
 import TemplateSelector from "../TemplateSelector";
 
 const scope = "foo";
-const templates = [
-  {
-    id: "1",
-    name: "template1",
-    label: "template1",
-    content: [{ name: "g1", fields: [{ name: "field1", label: "field1" }] }],
-    scope,
-  },
-  {
-    id: "2",
-    name: "template2",
-    label: "template2",
-    content: {},
-    scope,
-  },
-];
-const templatesMock = {
-  request: { query: TEMPLATES_QUERY, variables: { scope } },
-  result: { data: { templates } },
-};
-
-const renderOpts = {
-  mocks: [templatesMock],
-};
+const domainIds = [1];
+const variables = { scope, domainIds };
 
 describe("<TemplateSelector />", () => {
   const onChange = jest.fn();
-  const onLoad = jest.fn();
-  const props = { onChange, onLoad, scope: "foo" };
+  const props = { onChange, domainIds, scope };
+
+  it("matches the latest snapshot (loading)", () => {
+    const renderOpts = { mocks: [multipleTemplatesMock(variables)] };
+    const { container, queryByText } = render(
+      <TemplateSelector {...props} />,
+      renderOpts
+    );
+    expect(queryByText(/loading/i)).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
 
   it("matches the latest snapshot", async () => {
+    const renderOpts = { mocks: [multipleTemplatesMock(variables)] };
+    const onLoad = jest.fn();
     const { container, queryByText } = render(
-      <Suspense fallback="loading...">
-        <TemplateSelector {...props} />
-      </Suspense>,
+      <TemplateSelector {...props} onLoad={onLoad} />,
       renderOpts
     );
-    await waitFor(() => {
-      expect(queryByText(/template1/i)).toBeInTheDocument();
-    });
+    await waitForElementToBeRemoved(() => queryByText(/loading/i));
+    expect(queryByText("template1")).toBeInTheDocument();
     expect(container).toMatchSnapshot();
     expect(onLoad.mock.calls.length).toBe(1);
   });
+
+  it("matches the latest snapshot when required", async () => {
+    const renderOpts = { mocks: [multipleTemplatesMock(variables)] };
+    const { container, queryByText } = render(
+      <TemplateSelector {...props} required />,
+      renderOpts
+    );
+    await waitForElementToBeRemoved(() => queryByText(/loading/i));
+    expect(queryByText("template1")).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
+
+  it("is empty if templates query returns an error", async () => {
+    const renderOpts = { mocks: [errorTemplateMock(variables)] };
+    const { queryByText } = render(
+      <TemplateSelector {...props} required />,
+      renderOpts
+    );
+    await waitForElementToBeRemoved(() => queryByText(/loading/i));
+    expect(queryByText("template1")).not.toBeInTheDocument();
+  });
+
+  it("calls onChange when template is selected", async () => {
+    const renderOpts = { mocks: [multipleTemplatesMock(variables)] };
+    const { findByRole } = render(<TemplateSelector {...props} />, renderOpts);
+
+    userEvent.click(await findByRole("option", { name: "template1" }));
+    expect(onChange.mock.calls[0][1]).toMatchObject({
+      template: { id: "1", label: "template1" },
+    });
+  });
+
+  it("is empty when query returns a single template", async () => {
+    const renderOpts = { mocks: [singleTemplateMock(variables)] };
+    const { queryByText } = render(<TemplateSelector {...props} />, renderOpts);
+    await waitForElementToBeRemoved(() => queryByText(/loading/i));
+    expect(queryByText("template1")).not.toBeInTheDocument();
+  });
 });

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

@@ -1,23 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<DateTime /> matches the latest snapshot 1`] = `
-<t
-  ago={false}
-  calendar={false}
-  date="2018-06-27T07:32:53.154377Z"
-  decimal={false}
-  element={null}
-  filter={[Function]}
-  format="YYYY-MM-DD HH:mm"
-  fromNow={false}
-  interval={60000}
-  local={false}
-  onChange={[Function]}
-  titleFormat=""
-  toNow={false}
-  unit={null}
-  unix={false}
-  utc={false}
-  withTitle={false}
-/>
+<div>
+  <time
+    datetime="1530084773154"
+  >
+    2018-06-27 07:32
+  </time>
+</div>
 `;

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

@@ -1,5 +1,59 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<TemplateSelector /> matches the latest snapshot (loading) 1`] = `
+<div>
+  <div
+    class="field"
+  >
+    <label>
+      Template
+    </label>
+    <div
+      class="field"
+    >
+      <div
+        aria-busy="true"
+        aria-expanded="false"
+        class="ui loading search selection dropdown"
+        name="template"
+        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"
+        >
+          loading...
+        </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>
+</div>
+`;
+
 exports[`<TemplateSelector /> matches the latest snapshot 1`] = `
 <div>
   <div
@@ -74,3 +128,83 @@ exports[`<TemplateSelector /> matches the latest snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`<TemplateSelector /> matches the latest snapshot when required 1`] = `
+<div>
+  <div
+    class="required field"
+  >
+    <label>
+      Template
+      <div
+        class="ui left pointing label"
+      >
+        Empty required field
+      </div>
+    </label>
+    <div
+      class="field"
+    >
+      <div
+        aria-busy="false"
+        aria-expanded="false"
+        class="ui search selection dropdown"
+        name="template"
+        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"
+        >
+          Select a template...
+        </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"
+            >
+              template1
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              template2
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/messages/en.js

@@ -45,6 +45,7 @@ export default {
   filters: "Filters",
   "filters.class.raw.field": "Field",
   "filters.reset": "(reset all filters)",
+  loading: "loading...",
   "form.validation.required": "{prop} is required",
   "form.validation.minLength": "{prop} must have at least {value} characters",
   "form.validation.email.invalid": "Invalid email address",

package/src/messages/es.js

@@ -49,6 +49,7 @@ export default {
   "form.validation.required": "{prop} es un campo requerido",
   "form.validation.minLength": "{prop} debe tener al menos {value} elementos",
   "form.validation.email.invalid": "Dirección de email inválida",
+  loading: "cargando...",
   "navigation.dashboard": "Dashboard",
   "navigation.menu": "Menú",
   "search.applied_filters": "Filtros aplicados:",