@truedat/dq 8.11.4 → 8.11.6

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

@@ -0,0 +1,168 @@
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
+import { multipleTemplatesMock } from "@truedat/test/mocks";
+import { ExecutionTemplateSelector } from "../ExecutionTemplateSelector";
+
+const variables = { scope: "qe" };
+const optionalTemplate = {
+  __typename: "Template",
+  id: "optional",
+  name: "optional",
+  scope: "qe",
+  label: "Optional template",
+  content: [
+    {
+      name: "additional_information",
+      fields: [{ name: "notes", label: "Notes" }],
+    },
+  ],
+};
+const requiredTemplate = {
+  ...optionalTemplate,
+  id: "required",
+  label: "Required template",
+  content: [
+    {
+      name: "additional_information",
+      fields: [
+        { name: "notes", label: "Notes", type: "string", cardinality: "1" },
+      ],
+    },
+  ],
+};
+
+const defaultProps = {
+  templates: [],
+  template: null,
+  content: {},
+  onTemplateSelected: jest.fn(),
+  onTemplatesLoaded: jest.fn(),
+  onContentChange: jest.fn(),
+};
+
+const renderSelector = (
+  props = {},
+  mocks = [multipleTemplatesMock(variables)],
+) =>
+  render(<ExecutionTemplateSelector {...defaultProps} {...props} />, { mocks });
+
+describe("<ExecutionTemplateSelector />", () => {
+  describe("with multiple templates", () => {
+    it("shows the template selector label and combobox", async () => {
+      const rendered = renderSelector({
+        templates: [optionalTemplate, requiredTemplate],
+      });
+      await waitForLoad(rendered);
+
+      expect(rendered.getByText("Select template")).toBeInTheDocument();
+      expect(rendered.getByRole("combobox")).toBeInTheDocument();
+    });
+
+    it("shows optional badge when selected template has no mandatory fields", async () => {
+      const rendered = renderSelector({
+        templates: [optionalTemplate, requiredTemplate],
+        template: optionalTemplate,
+      });
+      await waitForLoad(rendered);
+
+      expect(rendered.getByText("optional")).toHaveClass("optional-badge");
+    });
+
+    it("shows mandatory badge with pending state when required fields are not filled", async () => {
+      const rendered = renderSelector({
+        templates: [optionalTemplate, requiredTemplate],
+        template: requiredTemplate,
+        content: {},
+      });
+      await waitForLoad(rendered);
+
+      expect(rendered.getByText("Mandatory fields")).toHaveClass(
+        "mandatory-badge",
+        "pending",
+      );
+    });
+  });
+
+  describe("with single template", () => {
+    it("hides the selector label", async () => {
+      const rendered = renderSelector({
+        templates: [optionalTemplate],
+        template: optionalTemplate,
+      });
+      await waitForLoad(rendered);
+
+      expect(rendered.queryByText("Select template")).not.toBeInTheDocument();
+    });
+
+    it("shows single template label", async () => {
+      const rendered = renderSelector({
+        templates: [optionalTemplate],
+        template: optionalTemplate,
+      });
+      await waitForLoad(rendered);
+
+      expect(
+        rendered.getByText(
+          "Complete the template for additional information (optional)",
+        ),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("dynamic form", () => {
+    it("shows the dynamic form when a template is selected", async () => {
+      const rendered = renderSelector({
+        templates: [optionalTemplate],
+        template: optionalTemplate,
+      });
+      await waitForLoad(rendered);
+
+      expect(rendered.getByText("Template fields")).toBeInTheDocument();
+    });
+
+    it("hides the dynamic form when no template is selected", async () => {
+      const rendered = renderSelector({
+        templates: [optionalTemplate],
+        template: null,
+      });
+      await waitForLoad(rendered);
+
+      expect(rendered.queryByText("Template fields")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("callbacks", () => {
+    it("calls onTemplateSelected when a template is selected", async () => {
+      const onTemplateSelected = jest.fn();
+      const rendered = renderSelector({
+        templates: [optionalTemplate, requiredTemplate],
+        onTemplateSelected,
+      });
+      await waitForLoad(rendered);
+      const user = userEvent.setup({ delay: null });
+
+      await user.click(rendered.getByRole("combobox"));
+      const options = rendered.getAllByRole("option");
+      await user.click(options[0]);
+
+      expect(onTemplateSelected).toHaveBeenCalled();
+    });
+
+    it("calls onContentChange when form content changes", async () => {
+      const onContentChange = jest.fn();
+      const rendered = renderSelector({
+        templates: [optionalTemplate],
+        template: optionalTemplate,
+        onContentChange,
+      });
+      await waitForLoad(rendered);
+      const user = userEvent.setup({ delay: null });
+
+      const input = rendered.container.querySelector('input[name="notes"]');
+      if (input) {
+        await user.type(input, "Test content");
+        expect(onContentChange).toHaveBeenCalled();
+      }
+    });
+  });
+});

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

@@ -0,0 +1,40 @@
+import { render } from "@truedat/test/render";
+import { ExecutionWarning } from "../ExecutionWarning";
+
+describe("<ExecutionWarning />", () => {
+  it("renders the warning message with the count", () => {
+    const rendered = render(<ExecutionWarning count={5} />);
+
+    expect(
+      rendered.getByText(/implementations will be executed/i),
+    ).toBeInTheDocument();
+    expect(rendered.getByText("5")).toHaveClass("count");
+  });
+
+  it("renders the warning icon", () => {
+    const rendered = render(<ExecutionWarning count={3} />);
+
+    expect(rendered.container.querySelector(".warning")).toBeInTheDocument();
+  });
+
+  it("renders the correct CSS class", () => {
+    const rendered = render(<ExecutionWarning count={2} />);
+
+    expect(rendered.container.firstChild).toHaveClass(
+      "execution-popup-warning",
+    );
+  });
+
+  it("formats the count with bold styling", () => {
+    const rendered = render(<ExecutionWarning count={10} />);
+
+    const countElement = rendered.getByText("10");
+    expect(countElement.tagName).toBe("STRONG");
+    expect(countElement).toHaveClass("count");
+  });
+
+  it("matches snapshot", () => {
+    const rendered = render(<ExecutionWarning count={2} />);
+    expect(rendered.container).toMatchSnapshot();
+  });
+});

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

@@ -51,7 +51,7 @@ describe("<RuleImplementation />", () => {
     });
     await waitForLoad(rendered);
     expect(
-      rendered.getByText(/implementations.actions.do_execution/i),
+      rendered.getByText(/implementation.actions.do_execution/i),
     ).toBeInTheDocument();
   });
 
@@ -61,7 +61,7 @@ describe("<RuleImplementation />", () => {
     });
     await waitForLoad(rendered);
     expect(
-      rendered.queryByText(/implementations.actions.do_execution/i),
+      rendered.queryByText(/implementation.actions.do_execution/i),
     ).not.toBeInTheDocument();
   });
 });

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

@@ -1,102 +1,146 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ExecutionForm /> matches the latest snapshot 1`] = `
+exports[`<ExecutionForm /> shows the template selector and the bulk execution warning 1`] = `
 <div>
-  <h2
-    class="ui header"
+  <div
+    class="header"
   >
-    implementations.actions.execution.confirmation.header
-  </h2>
-  <form
-    class="ui form"
+    <div
+      class="execution-popup-header"
+    >
+      <div>
+        Implementations execution
+        <p
+          class="subtitle"
+        >
+          Select template for additional information
+        </p>
+      </div>
+      <button
+        aria-label="Close"
+        class="close-button"
+        type="button"
+      >
+        ×
+      </button>
+    </div>
+  </div>
+  <div
+    class="content"
   >
     <div
-      class="field"
+      class="execution-popup-template-area"
     >
-      <label>
-        template.selector.label
-      </label>
+      <div
+        class="execution-popup-selector-label"
+      >
+        <span>
+          Select template
+        </span>
+        <span
+          class="optional-badge"
+        >
+          optional
+        </span>
+      </div>
       <div
         class="field"
       >
         <div
-          aria-busy="false"
-          aria-expanded="false"
-          class="ui search selection dropdown"
-          name="template"
-          role="combobox"
+          class="field"
         >
-          <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"
-          >
-            template.selector.placeholder
-          </div>
-          <i
-            aria-hidden="true"
-            class="dropdown icon"
-          />
-          <div
-            class="menu transition"
-            role="listbox"
+            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-checked="false"
-              aria-selected="true"
-              class="selected item"
-              role="option"
-              style="pointer-events: all;"
+              aria-atomic="true"
+              aria-live="polite"
+              class="divider default text"
+              role="alert"
             >
-              <span
-                class="text"
-              >
-                template1
-              </span>
+              template.selector.placeholder
             </div>
+            <i
+              aria-hidden="true"
+              class="dropdown icon"
+            />
             <div
-              aria-checked="false"
-              aria-selected="false"
-              class="item"
-              role="option"
-              style="pointer-events: all;"
+              class="menu transition"
+              role="listbox"
             >
-              <span
-                class="text"
+              <div
+                aria-checked="false"
+                aria-selected="true"
+                class="selected item"
+                role="option"
+                style="pointer-events: all;"
               >
-                template2
-              </span>
+                <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>
-    <p>
-      implementation.actions.execution.confirmation.content
-    </p>
     <div
-      class="actions"
+      class="execution-popup-warning"
     >
-      <button
-        class="ui secondary button"
-      >
-        actions.cancel
-      </button>
-      <button
-        class="ui primary button"
-      >
-        actions.create
-      </button>
+      <i
+        aria-hidden="true"
+        class="yellow warning sign large icon"
+      />
+      <p>
+        <strong
+          class="count"
+        >
+          2
+        </strong>
+         implementations will be executed. Is this correct?
+      </p>
     </div>
-  </form>
+  </div>
+  <div
+    class="actions"
+  >
+    <button
+      class="ui secondary button"
+    >
+      Cancel
+    </button>
+    <button
+      class="ui primary button"
+    >
+      Execute
+    </button>
+  </div>
 </div>
 `;

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

@@ -2,10 +2,14 @@
 
 exports[`<ExecutionPopup /> matches the latest snapshot 1`] = `
 <div>
-  <button
-    class="ui secondary button"
+  <div
+    class="execution-popup-wrapper"
   >
-    do_execution
-  </button>
+    <button
+      class="ui primary button"
+    >
+      do_execution
+    </button>
+  </div>
 </div>
 `;

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

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ExecutionWarning /> matches snapshot 1`] = `
+<div>
+  <div
+    class="execution-popup-warning"
+  >
+    <i
+      aria-hidden="true"
+      class="yellow warning sign large icon"
+    />
+    <p>
+      <strong
+        class="count"
+      >
+        2
+      </strong>
+       implementations will be executed. Is this correct?
+    </p>
+  </div>
+</div>
+`;

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

@@ -2,11 +2,15 @@
 
 exports[`<ImplementationActions /> matches the snapshot 1`] = `
 <div>
-  <button
-    class="ui secondary button"
+  <div
+    class="execution-popup-wrapper"
   >
-    implementations.actions.do_execution
-  </button>
+    <button
+      class="ui primary button"
+    >
+      implementation.actions.do_execution
+    </button>
+  </div>
   <div
     aria-expanded="false"
     class="ui floating dropdown button icon group-actions"

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

@@ -24,13 +24,17 @@ exports[`<ImplementationSearchResults /> matches the latest snapshot 1`] = `
           for="execute_checkbox"
         />
       </div>
-      <button
-        class="ui secondary disabled button"
-        disabled=""
-        tabindex="-1"
+      <div
+        class="execution-popup-wrapper"
       >
-        implementation.actions.do_execution
-      </button>
+        <button
+          class="ui primary disabled button"
+          disabled=""
+          tabindex="-1"
+        >
+          implementation.actions.do_execution
+        </button>
+      </div>
       <div
         aria-disabled="false"
         aria-expanded="false"
@@ -179,11 +183,15 @@ exports[`<ImplementationSearchResults /> renders executions on when executionEna
           for="execute_checkbox"
         />
       </div>
-      <button
-        class="ui secondary button"
+      <div
+        class="execution-popup-wrapper"
       >
-        implementation.actions.do_execution
-      </button>
+        <button
+          class="ui primary button"
+        >
+          implementation.actions.do_execution
+        </button>
+      </div>
       <div
         aria-disabled="false"
         aria-expanded="false"