@truedat/qx 7.5.9 → 7.5.11

package/src/components/scores/ScoreGroupsTable.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Table, Header, Icon, Label } from "semantic-ui-react";
@@ -11,13 +10,9 @@ import Pagination from "@truedat/core/search/Pagination";
 import ScoreGroupLink from "./ScoreGroupLink";
 
 export const HeaderRow = ({ columns }) => (
-  <Table.Row>
-    {columns.map(({ name: id, textAlign }, i) => (
-      <Table.HeaderCell key={i} textAlign={textAlign}>
-        <FormattedMessage id={id} defaultMessage={id} />
-      </Table.HeaderCell>
-    ))}
-  </Table.Row>
+  <Table.Row>{columns.map(({ name: id, textAlign }, i) => (
+      <Table.HeaderCell key={i} textAlign={textAlign}><FormattedMessage id={id} defaultMessage={id} /></Table.HeaderCell>
+    ))}</Table.Row>
 );
 
 HeaderRow.propTypes = {
@@ -25,15 +20,13 @@ HeaderRow.propTypes = {
 };
 
 export const ScoreGroupRow = ({ columns, ...props }) => (
-  <Table.Row>
-    {columns.map((col, i) => (
+  <Table.Row>{columns.map((col, i) => (
       <Table.Cell
         key={i}
         textAlign={col.textAlign}
         content={columnDecorator(col)(props)}
       />
-    ))}
-  </Table.Row>
+    ))}</Table.Row>
 );
 
 ScoreGroupRow.propTypes = {
@@ -58,9 +51,7 @@ export default function ScoreGroupsTable() {
             TIMEOUT: "red",
           }[color]
         }
-      >
-        {field}
-      </Label>
+      >{field}</Label>
     ) : null;
   };
 
@@ -82,37 +73,13 @@ export default function ScoreGroupsTable() {
     ...statusColumns,
   ];
 
-  return (
-    <>
-      {loading ? <Loading /> : null}
-
-      <>
-        {!_.isEmpty(scoreGroups) ? (
-          <>
-            <Table collapsing striped celled>
-              <Table.Header>
-                <HeaderRow columns={columns} />
-              </Table.Header>
-              <Table.Body>
-                {scoreGroups
-                  ? scoreGroups.map((props, key) => (
-                      <ScoreGroupRow key={key} columns={columns} {...props} />
-                    ))
-                  : null}
-              </Table.Body>
-            </Table>
-            <Pagination />
-          </>
-        ) : null}
-        {_.isEmpty(scoreGroups) ? (
-          <Header as="h4">
-            <Icon name="search" />
-            <Header.Content>
-              <FormattedMessage id="score_groups.search.results.empty" />
-            </Header.Content>
-          </Header>
-        ) : null}
-      </>
-    </>
-  );
+  return (<>{loading ? <Loading /> : null}<>{!_.isEmpty(scoreGroups) ? (
+        <><Table collapsing striped celled><Table.Header><HeaderRow columns={columns} /></Table.Header><Table.Body>{scoreGroups
+                ? scoreGroups.map((props, key) => (
+                    <ScoreGroupRow key={key} columns={columns} {...props} />
+                  ))
+                : null}</Table.Body></Table><Pagination /></>
+      ) : null}{_.isEmpty(scoreGroups) ? (
+        <Header as="h4"><Icon name="search" /><Header.Content><FormattedMessage id="score_groups.search.results.empty" /></Header.Content></Header>
+      ) : null}</></>);
 }

package/src/components/scores/ScoreRoutes.js

@@ -1,31 +1,16 @@
-import React from "react";
-import { Route, Switch } from "react-router-dom";
-import {
-  MY_SCORE_GROUPS,
-  SCORE_GROUP,
-  SCORE,
-  SCORE_EVENTS,
-} from "@truedat/core/routes";
+import { Route, Routes } from "react-router";
+import { SCORE, SCORE_EVENTS } from "@truedat/core/routes";
 
-import { MyScoreGroups, ScoreGroup, Score, ScoreDetails, ScoreEvents } from ".";
+import { Score, ScoreDetails, ScoreEvents } from ".";
 import "../../styles/scores.less";
 
 export default function ScoreRoutes() {
   return (
-    <Switch>
-      <Route exact path={MY_SCORE_GROUPS} render={() => <MyScoreGroups />} />
-      <Route exact path={SCORE_GROUP} render={() => <ScoreGroup />} />
-      <Route
-        path={SCORE}
-        render={() => (
-          <Score>
-            <Switch>
-              <Route exact path={SCORE} render={() => <ScoreDetails />} />
-              <Route exact path={SCORE_EVENTS} render={() => <ScoreEvents />} />
-            </Switch>
-          </Score>
-        )}
-      />
-    </Switch>
+    <Routes>
+      <Route path=":id" element={<Score />}>
+        <Route index element={<ScoreDetails />} />
+        <Route path="events" element={<ScoreEvents />} />
+      </Route>
+    </Routes>
   );
 }

package/src/components/scores/ScoreStatusDecorator.js

@@ -1,8 +1,7 @@
 import _ from "lodash/fp";
 import { FormattedMessage } from "react-intl";
-import React from "react";
 import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Icon } from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";
 

package/src/components/scores/ScoreTabs.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
-import React from "react";
 import { Menu } from "semantic-ui-react";
-import { Link, useLocation, useParams } from "react-router-dom";
+import { Link, useLocation } from "react-router";
+import { useParams } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
 

package/src/components/scores/__tests__/MyScoreGroups.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { waitFor } from "@testing-library/react";
 import { useAuthorized } from "@truedat/core/hooks";

package/src/components/scores/__tests__/QualityBar.spec.js

@@ -1,55 +1,48 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import { render, waitForLoad } from "@truedat/test/render";
 import { scoreData } from "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper";
 import ScoreContext from "../ScoreContext";
 import QualityBar from "../QualityBar";
 
-const renderOpts = { messages };
-
 describe("<QualityBar />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const context = {
       score: scoreData(),
     };
 
-    const { container } = render(
-      <ScoreContext.Provider value={context}>
+    const rendered = render(
+      <ScoreContext value={context}>
         <QualityBar />
-      </ScoreContext.Provider>,
-      renderOpts
+      </ScoreContext>
     );
-
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("when score is failed", () => {
+  it("when score is failed", async () => {
     const context = {
       score: scoreData({ status: "FAILED" }),
     };
 
-    const { queryByText } = render(
-      <ScoreContext.Provider value={context}>
+    const rendered = render(
+      <ScoreContext value={context}>
         <QualityBar />
-      </ScoreContext.Provider>,
-      renderOpts
+      </ScoreContext>
     );
-
-    expect(queryByText(/Failed/i)).toBeInTheDocument();
+    await waitForLoad(rendered);
+    expect(rendered.queryByText(/failed/i)).toBeInTheDocument();
   });
 
-  it("when score is empty", () => {
+  it("when score is empty", async () => {
     const context = {
       score: scoreData({ score_content: undefined }),
     };
 
-    const { queryByText } = render(
-      <ScoreContext.Provider value={context}>
+    const rendered = render(
+      <ScoreContext value={context}>
         <QualityBar />
-      </ScoreContext.Provider>,
-      renderOpts
+      </ScoreContext>
     );
-
-    expect(queryByText(/quality.result.no.data/i)).toBeInTheDocument();
+    await waitForLoad(rendered);
+    expect(rendered.queryByText(/quality.result.no.data/i)).toBeInTheDocument();
   });
 });

package/src/components/scores/__tests__/Score.spec.js

@@ -1,12 +1,11 @@
 import _ from "lodash/fp";
-import React, { version } from "react";
 import { render } from "@truedat/test/render";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import { useScoreShow } from "@truedat/qx/hooks/useScores";
 import Score from "../Score";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useParams: () => ({ id: "8", version: "1" }),
 }));
 

package/src/components/scores/__tests__/ScoreCrumbs.spec.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import { render } from "@truedat/test/render";
 import { scoreData } from "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
@@ -14,9 +13,9 @@ describe("<ScoreCrumbs />", () => {
       score: scoreData(),
     };
     const { container } = render(
-      <ScoreContext.Provider value={context}>
+      <ScoreContext value={context}>
         <ScoreCrumbs />
-      </ScoreContext.Provider>,
+      </ScoreContext>,
       renderOpts
     );
 
@@ -28,9 +27,9 @@ describe("<ScoreCrumbs />", () => {
       score: scoreData({ execution_timestamp: undefined }),
     };
     const { queryByText } = render(
-      <ScoreContext.Provider value={context}>
+      <ScoreContext value={context}>
         <ScoreCrumbs />
-      </ScoreContext.Provider>,
+      </ScoreContext>,
       renderOpts
     );
 

package/src/components/scores/__tests__/ScoreDetails.spec.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import { render } from "@truedat/test/render";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import ScoreContext from "../ScoreContext";
@@ -14,9 +13,9 @@ describe("<ScoreDetails />", () => {
       score: scoreData(),
     };
     const { container } = render(
-      <ScoreContext.Provider value={context}>
+      <ScoreContext value={context}>
         <ScoreDetails />
-      </ScoreContext.Provider>,
+      </ScoreContext>,
       renderOpts
     );
 
@@ -28,9 +27,9 @@ describe("<ScoreDetails />", () => {
       score: scoreData({ details: undefined }),
     };
     const { queryByText } = render(
-      <ScoreContext.Provider value={context}>
+      <ScoreContext value={context}>
         <ScoreDetails />
-      </ScoreContext.Provider>,
+      </ScoreContext>,
       renderOpts
     );
     expect(queryByText(/Details/i)).not.toBeInTheDocument();

package/src/components/scores/__tests__/ScoreEvents.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { scoreData } from "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
@@ -13,9 +12,9 @@ describe("<ScoreEvents />", () => {
       score: scoreData(),
     };
     const { container } = render(
-      <ScoreContext.Provider value={context}>
+      <ScoreContext value={context}>
         <ScoreEvents />
-      </ScoreContext.Provider>,
+      </ScoreContext>,
       renderOpts
     );
 

package/src/components/scores/__tests__/ScoreGroup.spec.js

@@ -1,11 +1,10 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import { render, waitForLoad } from "@truedat/test/render";
+import { templateByNameMock } from "@truedat/test/mocks";
 import { useScoreGroupShow } from "@truedat/qx/hooks/useScoreGroups";
 import ScoreGroup from "../ScoreGroup";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useParams: () => ({ id: "8", version: "1" }),
 }));
 
@@ -22,22 +21,24 @@ jest.mock("@truedat/qx/hooks/useScoreGroups", () => {
   };
 });
 
-const renderOpts = { messages, fallback: "lazy" };
+const renderOpts = {
+  mocks: [templateByNameMock({ name: "Quality Execution" })],
+};
 
 describe("<ScoreGroup />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(<ScoreGroup />, renderOpts);
-
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<ScoreGroup />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot when scoreGroup is empty", () => {
+  it("matches the latest snapshot when scoreGroup is empty", async () => {
     useScoreGroupShow.mockImplementation(() => ({
       data: { data: [] },
       loading: false,
     }));
-    const { container } = render(<ScoreGroup />, renderOpts);
-
-    expect(container).toMatchSnapshot();
+    const rendered = render(<ScoreGroup />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/scores/__tests__/ScoreGroupBreadcrumbs.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import ScoreGroupBreadcrumbs from "../ScoreGroupBreadcrumbs";

package/src/components/scores/__tests__/ScoreGroupForm.spec.js

@@ -1,9 +1,7 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import { singleTemplateMock } from "@truedat/test/mocks";
-import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import ScoreGroupForm from "../ScoreGroupForm";
 
 const renderOpts = {
@@ -13,8 +11,6 @@ const renderOpts = {
       domainIds: undefined,
     }),
   ],
-  messages,
-  fallback: "lazy",
 };
 
 const props = {
@@ -22,46 +18,34 @@ const props = {
   onSubmit: jest.fn(),
   onCancel: jest.fn(),
 };
+
 describe("<ScoreGroupForm />", () => {
   it("matches the latest snapshot", async () => {
-    const { container, queryByText } = render(
-      <ScoreGroupForm {...props} />,
-      renderOpts
-    );
-
-    await waitFor(() => {
-      expect(queryByText(/lazy/i)).not.toBeInTheDocument();
-      expect(container.querySelector(".loading")).not.toBeInTheDocument();
-    });
-
-    expect(container).toMatchSnapshot();
+    const rendered = render(<ScoreGroupForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
+
   it("matches the latest snapshot for count 1", async () => {
-    const { container, queryByText } = render(
+    const rendered = render(
       <ScoreGroupForm {...props} count={1} />,
       renderOpts
     );
-
-    await waitFor(() => {
-      expect(queryByText(/lazy/i)).not.toBeInTheDocument();
-      expect(container.querySelector(".loading")).not.toBeInTheDocument();
-    });
-
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("writes to form, submit and confirm", async () => {
+    const user = userEvent.setup({ delay: null });
     const onSubmit = jest.fn();
-    const { container, queryByText, findByText, findByPlaceholderText } =
-      render(<ScoreGroupForm {...props} onSubmit={onSubmit} />, renderOpts);
-
-    await waitFor(() => {
-      expect(queryByText(/lazy/i)).not.toBeInTheDocument();
-      expect(container.querySelector(".loading")).not.toBeInTheDocument();
-    });
+    const rendered = render(
+      <ScoreGroupForm {...props} onSubmit={onSubmit} />,
+      renderOpts
+    );
+    await waitForLoad(rendered);
 
-    userEvent.type(await findByPlaceholderText("field1"), "foo");
-    userEvent.click(await findByText(/Create/i));
+    await user.type(await rendered.findByPlaceholderText(/field1/i), "foo");
+    await user.click(await rendered.findByText(/create/i));
 
     await waitFor(() =>
       expect(onSubmit).toHaveBeenCalledWith({

package/src/components/scores/__tests__/ScoreGroupLink.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import ScoreGroupLink from "../ScoreGroupLink";

package/src/components/scores/__tests__/ScoreGroupMessage.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import ScoreGroupMessage from "../ScoreGroupMessage";

package/src/components/scores/__tests__/ScoreGroupPopup.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -9,7 +8,6 @@ import ScoreGroupPopup from "../ScoreGroupPopup";
 const renderOpts = {
   mocks: [singleTemplateMock({ scope: "qxe" })],
   messages,
-  fallback: "lazy",
 };
 
 describe("<ScoreGroupPopup />", () => {

package/src/components/scores/__tests__/ScoreGroupsRoutes.spec.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { render, waitForLoad } from "@truedat/test/render";
+import ScoreGroupsRoutes from "../ScoreGroupsRoutes";
+import { MY_SCORE_GROUPS, SCORE_GROUP } from "@truedat/core/routes";
+
+// Mock child components
+jest.mock("../MyScoreGroups", () => () => <div>MyScoreGroups</div>);
+jest.mock("../ScoreGroup", () => () => <div>ScoreGroup</div>);
+
+describe("<ScoreGroupsRoutes />", () => {
+  it("renders correctly with default route", async () => {
+    const rendered = render(<ScoreGroupsRoutes />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with my score groups route", async () => {
+    const rendered = render(<ScoreGroupsRoutes />, {
+      routes: [MY_SCORE_GROUPS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with score group detail route", async () => {
+    const rendered = render(<ScoreGroupsRoutes />, {
+      routes: [SCORE_GROUP.replace(":id", "123")],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+});

package/src/components/scores/__tests__/ScoreGroupsTable.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import SearchContextWrapper from "@truedat/core/components/common/SearchContextWrapper";

package/src/components/scores/__tests__/ScoreStatusDecorator.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 

package/src/components/scores/__tests__/ScoreTabs.spec.js

@@ -1,10 +1,9 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import ScoreTabs from "../ScoreTabs";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useParams: () => ({ id: "15" }),
   useLocation: () => ({ pathname: "/scores/15" }),
 }));
@@ -18,7 +17,7 @@ describe("<ScoreTabs />", () => {
   });
 
   it("matches the latest snapshot for events", () => {
-    jest.spyOn(require("react-router-dom"), "useLocation").mockReturnValue({
+    jest.spyOn(require("react-router"), "useLocation").mockReturnValue({
       pathname: "/scores/15/events",
     });
     const { container } = render(<ScoreTabs />, renderOpts);

package/src/components/scores/__tests__/__snapshots__/MyScoreGroups.spec.js.snap

@@ -134,6 +134,7 @@ exports[`<MyScoreGroups /> matches the latest snapshot 1`] = `
             class=""
           >
             <a
+              data-discover="true"
               href="/scoreGroups/36"
             >
               <time
@@ -181,6 +182,7 @@ exports[`<MyScoreGroups /> matches the latest snapshot 1`] = `
             class=""
           >
             <a
+              data-discover="true"
               href="/scoreGroups/36"
             >
               <time

package/src/components/scores/__tests__/__snapshots__/Score.spec.js.snap

@@ -7,6 +7,7 @@ exports[`<Score /> matches the latest snapshot 1`] = `
   >
     <a
       class="section"
+      data-discover="true"
       href="/qualityControls"
     >
       Quality Controls
@@ -17,6 +18,7 @@ exports[`<Score /> matches the latest snapshot 1`] = `
     />
     <a
       class="section"
+      data-discover="true"
       href="/qualityControls/8/version/1/scores"
     >
       test
@@ -74,12 +76,14 @@ exports[`<Score /> matches the latest snapshot 1`] = `
     >
       <a
         class="item"
+        data-discover="true"
         href="/scores/8"
       >
         Details
       </a>
       <a
         class="item"
+        data-discover="true"
         href="/scores/8/events"
       >
         Events

package/src/components/scores/__tests__/__snapshots__/ScoreCrumbs.spec.js.snap

@@ -7,6 +7,7 @@ exports[`<ScoreCrumbs /> matches the latest snapshot 1`] = `
   >
     <a
       class="section"
+      data-discover="true"
       href="/qualityControls"
     >
       Quality Controls
@@ -17,6 +18,7 @@ exports[`<ScoreCrumbs /> matches the latest snapshot 1`] = `
     />
     <a
       class="section"
+      data-discover="true"
       href="/qualityControls/8/version/1/scores"
     >
       test

package/src/components/scores/__tests__/__snapshots__/ScoreDetails.spec.js.snap

@@ -35,6 +35,7 @@ exports[`<ScoreDetails /> matches the latest snapshot 1`] = `
           class="description"
         >
           <a
+            data-discover="true"
             href="/scores/15"
           >
             <time