@truedat/qx 7.0.8 → 7.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "7.0.8",
+  "version": "7.1.0",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "7.0.8",
+    "@truedat/test": "7.1.0",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -44,6 +44,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.0.0",
+    "jsdom": "^26.0.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "rimraf": "^3.0.2",
@@ -68,6 +69,11 @@
       "enzyme-to-json/serializer"
     ],
     "testEnvironment": "jsdom",
+    "testMatch": [
+      "**/__tests__/**/*.[jt]s?(x)",
+      "**/?(*.)+(spec|test).[jt]s?(x)",
+      "!**/__fixtures__/**"
+    ],
     "testPathIgnorePatterns": [
       "<rootDir>/node_modules/"
     ],
@@ -84,7 +90,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "7.0.8",
+    "@truedat/core": "7.1.0",
     "prop-types": "^15.8.1",
     "react-hook-form": "^7.45.4",
     "react-intl": "^5.20.10",
@@ -97,5 +103,8 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "ff536a41caac4df0cfa13df66dc2805b3bb7637a"
+  "overrides": {
+    "jsdom": "26.0.0"
+  },
+  "gitHead": "cb08380da04c7286e694540bc24d32f01a728dfc"
 }

package/src/api.js

@@ -1,37 +1,46 @@
-const API_DATA_VIEWS = "/api/data_views";
 const API_DATA_VIEW = "/api/data_views/:id";
-const API_FUNCTIONS = "/api/quality_functions";
+const API_DATA_VIEWS = "/api/data_views";
 const API_FUNCTION = "/api/quality_functions/:id";
-const API_QUALITY_CONTROLS = "/api/quality_controls";
+const API_FUNCTIONS = "/api/quality_functions";
 const API_QUALITY_CONTROL = "/api/quality_controls/:id";
-const API_QUALITY_CONTROL_VERSIONS = "/api/quality_controls/:id/versions";
-const API_QUALITY_CONTROL_PUBLISHED = "/api/quality_controls/:id/published";
 const API_QUALITY_CONTROL_DRAFT = "/api/quality_controls/:id/draft";
-const API_QUALITY_CONTROL_STATUS = "/api/quality_controls/:id/status";
-const API_QUALITY_CONTROL_DOMAINS = "/api/quality_controls/:id/domains";
+const API_QUALITY_CONTROL_FILTERS = "/api/quality_controls/filters";
+const API_QUALITY_CONTROL_MAIN = "/api/quality_controls/:id/main";
+const API_QUALITY_CONTROL_PUBLISHED = "/api/quality_controls/:id/published";
 const API_QUALITY_CONTROL_QUERIES = "/api/quality_controls/:id/queries";
 const API_QUALITY_CONTROL_SEARCH = "/api/quality_controls/search";
-const API_QUALITY_CONTROL_FILTERS = "/api/quality_controls/filters";
-const API_QUALITY_CONTROL_EXECUTION_GROUPS =
-  "/api/quality_controls/execution_groups";
+const API_QUALITY_CONTROL_STATUS = "/api/quality_controls/:id/status";
+const API_QUALITY_CONTROL_VERSIONS = "/api/quality_controls/:id/versions";
+const API_QUALITY_CONTROLS = "/api/quality_controls";
+const API_SCORE_GROUPS = "/api/score_groups";
+const API_SCORE_GROUP = "/api/score_groups/:id";
+const API_SCORE = "/api/scores/:id";
+
 const API_QUALITY_CONTROL_EXECUTION_GROUP =
   "/api/quality_controls/execution_groups/:id";
+const API_QUALITY_CONTROL_EXECUTION_GROUPS =
+  "/api/quality_controls/execution_groups";
+const API_QUALITY_CONTROL_SCORES = "/api/quality_controls/:id/scores";
 
 export {
-  API_DATA_VIEWS,
   API_DATA_VIEW,
-  API_FUNCTIONS,
+  API_DATA_VIEWS,
   API_FUNCTION,
-  API_QUALITY_CONTROLS,
-  API_QUALITY_CONTROL,
-  API_QUALITY_CONTROL_VERSIONS,
-  API_QUALITY_CONTROL_PUBLISHED,
+  API_FUNCTIONS,
   API_QUALITY_CONTROL_DRAFT,
-  API_QUALITY_CONTROL_STATUS,
-  API_QUALITY_CONTROL_DOMAINS,
+  API_QUALITY_CONTROL_FILTERS,
+  API_QUALITY_CONTROL_MAIN,
+  API_QUALITY_CONTROL_PUBLISHED,
   API_QUALITY_CONTROL_QUERIES,
   API_QUALITY_CONTROL_SEARCH,
-  API_QUALITY_CONTROL_FILTERS,
-  API_QUALITY_CONTROL_EXECUTION_GROUPS,
+  API_QUALITY_CONTROL_STATUS,
+  API_QUALITY_CONTROL_VERSIONS,
+  API_QUALITY_CONTROL,
+  API_QUALITY_CONTROLS,
+  API_SCORE_GROUPS,
+  API_SCORE_GROUP,
+  API_SCORE,
   API_QUALITY_CONTROL_EXECUTION_GROUP,
+  API_QUALITY_CONTROL_EXECUTION_GROUPS,
+  API_QUALITY_CONTROL_SCORES,
 };

package/src/components/QxRoutes.js

@@ -2,30 +2,32 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import { Unauthorized } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";
-import { DATA_VIEWS, FUNCTIONS, QUALITY_CONTROLS } from "@truedat/core/routes";
+import {
+  DATA_VIEWS,
+  FUNCTIONS,
+  QUALITY_CONTROLS,
+  MY_SCORE_GROUPS,
+  SCORE_GROUPS,
+  SCORES,
+} from "@truedat/core/routes";
 import DataViews from "./dataViews/DataViews";
 import Functions from "./functions/Functions";
 import QualityControlRoutes from "./qualityControls/QualityControlRoutes";
+import ScoreRoutes from "./scores/ScoreRoutes";
 
 export default function QxRoutes() {
   const authorized = useAuthorized("quality_control");
 
-  return (
+  return authorized ? (
     <Switch>
-      <Route
-        path={DATA_VIEWS}
-        render={() => (authorized ? <DataViews /> : <Unauthorized />)}
-      />
-      <Route
-        path={FUNCTIONS}
-        render={() => (authorized ? <Functions /> : <Unauthorized />)}
-      />
-      <Route
-        path={QUALITY_CONTROLS}
-        render={() =>
-          authorized ? <QualityControlRoutes /> : <Unauthorized />
-        }
-      />
+      <Route path={DATA_VIEWS} render={() => <DataViews />} />
+      <Route path={FUNCTIONS} render={() => <Functions />} />
+      <Route path={QUALITY_CONTROLS} render={() => <QualityControlRoutes />} />
+      <Route path={SCORES} render={() => <ScoreRoutes />} />
+      <Route path={SCORE_GROUPS} render={() => <ScoreRoutes />} />
+      <Route path={MY_SCORE_GROUPS} render={() => <ScoreRoutes />} />
     </Switch>
+  ) : (
+    <Unauthorized />
   );
 }

package/src/components/__tests__/__fixtures__/helper.js

@@ -0,0 +1,187 @@
+export const messages = {
+  en: {
+    "actions.cancel": "Cancel",
+    "actions.create": "Create",
+    "actions.delete": "Delete",
+    "actions.discard.confirmation.content": "confirmation_content",
+    "actions.discard.confirmation.header": "confirmation_header",
+    "actions.publish": "Publish",
+    "actions.save": "Save",
+    "confirmation.no": "confirm_no",
+    "confirmation.yes": "confirm_yes",
+    "dataViews.form.name": "Name",
+    "dataViews.form.source": "Source",
+    "domain.multiple.placeholder": "Select domains",
+    "domain.selector.placeholder": "Select a domain...",
+    "expression.clause.action.addExpression": "Add expression",
+    "expression.clause.action.addGroup": "Add group",
+    "expression.condition.customExpression": "Custom expression",
+    "expression.condition.selectFunction": "Select function",
+    "expressions.data_type.any": "any",
+    "expressions.data_type.boolean": "boolean",
+    "expressions.data_type.date": "date",
+    "expressions.data_type.number": "number",
+    "expressions.data_type.string": "string",
+    "expressions.data_type.timestamp": "timestamp",
+    "form.validation.empty_required": "Required field is empty",
+    "form.validation.must_be_a_number": "Must be a number",
+    "form.validation.must_be_greater_than_or_equal":
+      "Must be greater than {value}",
+    "form.validation.must_be_less_than_or_equal": "Must be less than {value}",
+    "form.validation.required": "required",
+    "functions.action.delete.content": "delete_content",
+    "functions.action.delete.header": "delete_header",
+    "functions.action.new": "New function",
+    "functions.empty_list": "No functions found",
+    "functions.expression.constant.false": "False",
+    "functions.expression.constant.true": "True",
+    "functions.expression.shape.constant": "Constant",
+    "functions.expression.shape.function": "Function",
+    "functions.expression.shape.field": "Field",
+    "expression.condition.selectFunction": "Select function",
+    "functions.expression.shape.param": "Parameter",
+    "functions.form.add_description": "Add description",
+    "functions.form.add_param": "Add parameter",
+    "functions.form.description": "Description",
+    "functions.form.expression.function.placeholder":
+      "Select a function of type {type}",
+    "functions.form.name": "Name",
+    "functions.form.output": "Expression",
+    "functions.form.params": "Parameters",
+    "functions.form.required": "Required field",
+    "functions.header": "Quality Functions",
+    "functions.no_selection": "No function selected",
+    "functions.subheader": "List and edit quality functions",
+    "group.props.name": "Name",
+    "quality_control.actions.do_execution": "Execute quality control",
+    "quality_control.actions.execution.confirmation.content":
+      "This quality control will be executed. Are you sure?",
+      "quality_control.control_properties.empty": "Empty control properties",
+      "quality_control.error_count.errors_resource.empty": "Empty Dataset", 
+    "quality_control.control_mode.deviation": "Deviation",
+    "quality_control.control_mode.error_count": "Error count",
+    "quality_control.control_mode.percentage": "Percentage",
+    "quality_control.control_mode": "Control mode",
+    "quality_control.error_count.errors_resource": "Dataset",
+    "quality_control.form.active": "Enable",
+    "quality_control.form.control_properties.ratio.resource": "Dataset",
+    "quality_control.form.control_properties.ratio.validation": "Validation",
+    "quality_control.form.control_properties.error_count.errors_resource":
+      "Dataset",
+    "quality_control.form.control_properties": "Implementation",
+    "quality_control.form.domain_ids": "Domains",
+    "quality_control.form.information": "Information",
+    "quality_control.form.name": "Name",
+    "quality_control.props.active.false": "Disabled",
+    "quality_control.props.active.true": "Enabled",
+    "quality_control.props.version": "Version",
+    "quality_control.queries.loading": "Loading queries",
+    "quality_control.ratio.resource": "Dataset",
+    "quality_control.ratio.validation": "Validation",
+    "quality_control.score_criteria.deviation.goal": "Goal",
+    "quality_control.score_criteria.deviation.maximum": "Threshold",
+    "quality_control.score_criteria.empty": "No result criteria defined",
+    "quality_control.score_criteria.error_count.goal": "Goal",
+    "quality_control.score_criteria.error_count.maximum": "Threshold",
+    "quality_control.score_criteria.percentage.goal": "Goal",
+    "quality_control.score_criteria.percentage.minimum": "Threshold",
+    "quality_control.score_criteria": "Result criteria",
+    "quality_control.status.draft": "Draft",
+    "quality_control.status.published": "Published",
+    "quality_control.status.versioned": "Versioned",
+    "quality_control.tabs.history": "History",
+    "quality_control.tabs.quality_control": "Detail",
+    "quality_control.tabs.scores": "Scores",
+    "quality_controls.actions.create_draft": "Create Draft",
+    "quality_controls.actions.deprecate": "Deprecate",
+    "quality_controls.actions.disable.confirmation.content":
+      "Quality control {name} will be disabled. Are you sure?",
+    "quality_controls.actions.disable.confirmation.header":
+      "Disable quality control",
+    "quality_controls.actions.disable": "Disable",
+    "quality_controls.actions.do_execution": "Execute quality controls",
+    "quality_controls.actions.edit": "Edit",
+    "quality_controls.actions.enable.confirmation.content":
+      "Quality control {name} will be enabled. Are you sure?",
+    "quality_controls.actions.enable.confirmation.header":
+      "Enable quality control",
+    "quality_controls.actions.enable": "Enable",
+    "quality_controls.actions.execution.confirmation.header":
+      "Quality controls execution",
+    "quality_controls.actions.execution.confirmation.legend": "Template fields",
+    "quality_controls.actions.create": "Create control",
+    "quality_controls.actions.publish": "Publish",
+    "quality_controls.actions.reject": "Reject",
+    "quality_controls.actions.restore": "Restore",
+    "quality_controls.actions.send_to_approval": "Send to approval",
+    "quality_controls.actions.send_to_draft": "Send to draft",
+    "quality_controls.actions.execution.confirmation.content": "{count} quality controls will be executed. Are you sure?",
+    "quality_controls.edit.subheader": "Edit quality control",
+    "quality_controls.execute.filtered": "{count} quality controls to execute",
+    "quality_controls.subheader": "List and edit quality controls",
+    "quality_controls.header": "Quality Controls",
+    "quality_controls.new.header": "Quality control",
+    "quality_controls.new.subheader": "Create new quality control",
+    "quality_controls.retrieved.results": "{count} quality controls found",
+    "quality_controls.search.results.empty": "No quality controls found",
+    "quality_controls.searching": "Searching",
+    "quality_control.props.name": "Name",
+    "quality_control.ratio.validation.empty": "Empty validation",
+    "quality_control.ratio.resource.empty": "Empty resource",
+
+    "quality.goal": "Goal",
+    "quality.threshold": "Threshold",
+    "queryables.resource.selector.data_structure": "Data Structure",
+    "queryables.resource.type.data_structure": "Data structures",
+    "queryables.resource.type.reference_dataset": "Reference datasets",
+    "queryables.resource.type": "Resource type",
+    "queryables.resource.selector.reference_dataset": "Reference dataset",
+    "search.placeholder": "Search...",
+    "score.actions.delete.confirmation.header": "Delete result",
+    "score.actions.delete.confirmation.content":
+      "This result will be deleted. Are you sure?",
+    "score.details": "Details",
+    "score.event.type.FAILED": "Failed",
+    "score.event.type.INFO": "Info",
+    "score.event.type.PENDING": "Pending",
+    "score.event.type.QUEUED": "Queued",
+    "score.event.type.STARTED": "Started",
+    "score.event.type.SUCCEEDED": "Succeeded",
+    "score.event.type.WARNING": "Warning",
+    "score.information": "Information",
+    "score.no_results": "No results",
+    "score.not_executed": "Not executed",
+    "score.props.status": "Status",
+    "score.status.failed": "Failed",
+    "score.status.FAILED": "Failed",
+    "score.status.PENDING": "Pending",
+    "score.status.QUEUED": "Queued",
+    "score.status.SUCCEEDED": "Succeeded",
+    "score.status.STARTED": "Started",
+    "sidemenu.executions": "My Executions",
+    "score_groups.header": "My score Groups",
+    "score_groups.table.header.created": "Created",
+    "score_groups.search.results.empty": "No execution groups found",
+    "scores.completed.header": "Scores completed",
+    "scores.completed.content": "{count} scores completed",
+    "scores.pending.header": "Scores scheduled",
+    "scores.pending.content": "There are {pending} scores pending, please check again later",
+    "scores.detail.header": "Score view",
+    "scores.empty": "No scores found",
+    "scores.event.props.inserted_at": "Date",
+    "scores.event.props.message": "Message",
+    "scores.event.props.type": "Type",
+    "scores.props.control_mode": "Control Mode",
+    "scores.props.execution_timestamp": "Date",
+    "scores.props.quality_control_status": "Control status",
+    "scores.props.quality": "Quality",
+    "scores.props.status": "Status",
+    "source.search.placeholder": "Select source",
+    "tabs.qx.score.details": "Details",
+    "tabs.qx.score.score_events": "Events",
+    "template.form.validation.empty_required": "Empty required field",
+    "template.selector.label": "Template",
+    "template.selector.placeholder": "Select a template...",
+    loading: "loading...",
+  },
+};

package/src/components/common/TestFormWrapper.js

@@ -2,6 +2,37 @@ import React from "react";
 import PropTypes from "prop-types";
 import { FormProvider, useForm } from "react-hook-form";
 import QxContext from "@truedat/qx/components/QxContext";
+import { useFunctions } from "@truedat/qx/hooks/useFunctions";
+
+jest.mock("@truedat/core/hooks/useUserFilters", () => {
+  const originalModule = jest.requireActual(
+    "@truedat/core/hooks/useUserFilters"
+  );
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useUserFilters: jest.fn(() => ({})),
+  };
+});
+jest.mock("@truedat/qx/hooks/useFunctions", () => {
+  const originalModule = jest.requireActual("@truedat/qx/hooks/useFunctions");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useFunctions: jest.fn(() => ({})),
+  };
+});
+jest.mock("@truedat/qx/hooks/useDataViews", () => {
+  const originalModule = jest.requireActual("@truedat/qx/hooks/useDataViews");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useDataViews: jest.fn(() => ({})),
+  };
+});
 
 export default function TestFormWrapper({
   context,
@@ -19,6 +50,13 @@ export default function TestFormWrapper({
     ...context,
   };
 
+  useFunctions.mockImplementationOnce(() => ({
+    data: {
+      data: qxContext.functions,
+    },
+    loading: false,
+  }));
+
   return (
     <FormProvider {...form}>
       <QxContext.Provider value={qxContext}>{children}</QxContext.Provider>

package/src/components/common/__tests__/ResourceSelector.spec.js

@@ -50,6 +50,7 @@ const renderOpts = {
       "structures.loading.header": "loading",
     },
   },
+  fallback: "loading",
 };
 
 const searchProps = {
@@ -61,7 +62,7 @@ const searchProps = {
 };
 
 describe("<ResourceSelector />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const { container } = render(
       <TestFormWrapper>
         <SearchContext.Provider value={searchProps}>
@@ -70,6 +71,9 @@ describe("<ResourceSelector />", () => {
       </TestFormWrapper>,
       renderOpts
     );
+    await waitFor(() =>
+      expect(container.querySelector(".loader")).not.toBeInTheDocument()
+    );
     expect(container).toMatchSnapshot();
   });
 
@@ -90,7 +94,8 @@ describe("<ResourceSelector />", () => {
       </TestFormWrapper>,
       renderOpts
     );
-
+    const loader = container.querySelector(".loader");
+    await waitFor(() => expect(loader).not.toBeInTheDocument());
     await act(async () => {
       userEvent.click(getByRole("option", { name: /data_view/i }));
     });
@@ -125,14 +130,18 @@ describe("<ResourceSelector />", () => {
       </TestFormWrapper>,
       renderOpts
     );
-
+    await waitFor(() =>
+      expect(container.querySelector(".loader")).not.toBeInTheDocument()
+    );
     await act(async () => {
       userEvent.click(await getByRole("option", { name: /data_structure/i }));
     });
-
-    await waitFor(() => {
-      expect(container.querySelector(".loading")).toBeNull();
-    });
+    await waitFor(() =>
+      expect(container.querySelector(".loader")).not.toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(container.querySelector(".loading")).not.toBeInTheDocument()
+    );
     await findByText(/header/);
     expect(container).toMatchSnapshot();
   });
@@ -152,6 +161,8 @@ describe("<ResourceSelector />", () => {
       </TestFormWrapper>,
       renderOpts
     );
+    const loader = container.querySelector(".loader");
+    await waitFor(() => expect(loader).not.toBeInTheDocument());
 
     await act(async () => {
       userEvent.click(

package/src/components/common/__tests__/__snapshots__/ResourceSelector.spec.js.snap

@@ -163,18 +163,6 @@ exports[`<ResourceSelector /> select data_structure 1`] = `
     <div
       class="dimmable structure-table-overflow"
     >
-      <div
-        class="ui inverted dimmer"
-        style=""
-      >
-        <div
-          class="content"
-        >
-          <div
-            class="ui large loader"
-          />
-        </div>
-      </div>
       <div
         class="ui icon info message"
       >

package/src/components/common/expressions/__tests__/Condition.spec.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { act } from "react-dom/test-utils";
 import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import Condition from "../Condition";
 
@@ -25,7 +26,9 @@ describe("<Condition />", () => {
       </TestFormWrapper>,
       renderOpts
     );
-
+    await waitFor(() =>
+      expect(container.querySelector(".loader")).not.toBeInTheDocument()
+    );
     await act(async () => {
       expect(container).toMatchSnapshot();
     });

package/src/components/common/expressions/__tests__/FunctionArgs.spec.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { waitFor } from "@testing-library/react";
+import { act } from "react-dom/test-utils";
 import { render } from "@truedat/test/render";
 import userEvent from "@testing-library/user-event";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
@@ -86,7 +87,7 @@ describe("<FunctionArgs />", () => {
       },
     };
 
-    const { container, getAllByRole, queryByText } = render(
+    const { container, getAllByRole, queryByText, getByRole } = render(
       <TestFormWrapper
         watcher={watcher}
         context={{ type: "boolean", functions }}
@@ -96,10 +97,22 @@ describe("<FunctionArgs />", () => {
       </TestFormWrapper>,
       renderOpts
     );
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() => {
+      expect(queryByText(/lazy/i)).not.toBeInTheDocument();
+      expect(container.querySelector(".loader")).not.toBeInTheDocument();
+    });
+
+    userEvent.click(getAllByRole("listbox")[0]);
+
+    act(() =>
+      userEvent.click(getAllByRole("option", { name: /constant/i })[0])
+    );
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /true/i })).toBeInTheDocument();
+    });
 
-    userEvent.click(await getAllByRole("listbox")[0]);
-    userEvent.click(await getAllByRole("option", { name: /constant/i })[0]);
+    userEvent.click(getByRole("option", { name: /true/i }));
 
     expect(watcher).toHaveBeenLastCalledWith({
       test: {
@@ -108,7 +121,7 @@ describe("<FunctionArgs />", () => {
           args: {
             arg1: {
               shape: "constant",
-              value: { type: "boolean", value: undefined },
+              value: { type: "boolean", value: "true" },
             },
             arg2: {
               shape: "function",

package/src/components/common/expressions/__tests__/ShapeSelector.spec.js

@@ -13,7 +13,7 @@ const renderOpts = {
       "functions.expression.shape.param": "param",
     },
   },
-  fallback: "lazy",
+  fallback: "loading",
 };
 
 describe("<ShapeSelector />", () => {
@@ -47,7 +47,7 @@ describe("<ShapeSelector />", () => {
       </TestFormWrapper>,
       renderOpts
     );
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() => expect(queryByText(/loading/i)).not.toBeInTheDocument());
 
     userEvent.click(await getByRole("option", { name: /param/i }));
 
@@ -74,7 +74,7 @@ describe("<ShapeSelector />", () => {
       </TestFormWrapper>,
       renderOpts
     );
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() => expect(queryByText(/loading/i)).not.toBeInTheDocument());
 
     userEvent.click(await getByRole("option", { name: /constant/i }));
 
@@ -94,7 +94,7 @@ describe("<ShapeSelector />", () => {
       </TestFormWrapper>,
       renderOpts
     );
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() => expect(queryByText(/loading/i)).not.toBeInTheDocument());
 
     userEvent.click(await getByRole("option", { name: /function/i }));
 

package/src/components/common/expressions/__tests__/__snapshots__/FunctionArgs.spec.js.snap

@@ -107,6 +107,14 @@ exports[`<FunctionArgs /> user interaction 1`] = `
                 role="listbox"
                 tabindex="0"
               >
+                <div
+                  aria-atomic="true"
+                  aria-live="polite"
+                  class="divider text"
+                  role="alert"
+                >
+                  true
+                </div>
                 <i
                   aria-hidden="true"
                   class="dropdown icon"
@@ -115,9 +123,9 @@ exports[`<FunctionArgs /> user interaction 1`] = `
                   class="menu transition"
                 >
                   <div
-                    aria-checked="false"
+                    aria-checked="true"
                     aria-selected="true"
-                    class="selected item"
+                    class="active selected item"
                     role="option"
                     style="pointer-events: all;"
                   >

package/src/components/common/resourceSelectors/__tests__/DataStructureSelector.spec.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { waitFor } from "@testing-library/react";
 import { act } from "react-dom/test-utils";
 import { render } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
@@ -42,18 +43,20 @@ const renderOpts = {
       "structures.loading.header": "loading",
     },
   },
-  fallback: "lazy",
+  fallback: "loading",
 };
 
 describe("<DataStructureSelector />", () => {
   it("matches the latest snapshot", async () => {
-    const { container, findByText } = render(
+    const { container } = render(
       <TestFormWrapper>
         <DataStructureSelector />
       </TestFormWrapper>,
       renderOpts
     );
-    await findByText(/header/);
+    await waitFor(() =>
+      expect(container.querySelector(".loader")).not.toBeInTheDocument()
+    );
 
     await act(async () => {
       expect(container).toMatchSnapshot();