@truedat/ai 6.0.1

package/src/components/prompts/__tests__/Prompt.spec.js

@@ -0,0 +1,77 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import Prompts from "../Prompts";
+
+jest.mock("@truedat/ai/hooks/usePrompts", () => {
+  const originalModule = jest.requireActual("@truedat/ai/hooks/usePrompts");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    usePrompts: jest.fn(() => ({
+      data: {
+        data: [
+          {
+            name: "rm1",
+            resource_type: "boolean",
+            fields: [{ source: "s1", target: "t1" }],
+            selector: { system_external_id: 1 },
+          },
+        ],
+      },
+      loading: false,
+    })),
+    usePromptCreate: jest.fn(() => ({
+      trigger: jest.fn(() => new Promise(() => {})),
+      isMutating: false,
+    })),
+    usePromptDelete: jest.fn(() => ({
+      trigger: jest.fn(() => new Promise(() => {})),
+      isMutating: false,
+    })),
+    usePromptUpdate: jest.fn(() => ({
+      trigger: jest.fn(() => new Promise(() => {})),
+      isMutating: false,
+    })),
+  };
+});
+
+describe("<Prompts />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "prompts.header": "prompts.header",
+        "prompts.subheader": "prompts.subheader",
+        "prompts.no_selection": "prompts.no_selection",
+        "prompts.empty_list": "prompts.empty_list",
+        "prompts.action.new": "prompts.action.new",
+        "group.props.name": "name",
+        "prompts.form.name": "name",
+        "prompts.form.add_description": "add_description",
+        "prompts.form.name": "name",
+        "prompts.form.add_param": "add_param",
+        "actions.save": "save",
+        "actions.cancel": "cancel",
+        "actions.delete": "delete",
+        "prompts.action.delete.header": "delete_header",
+        "prompts.action.delete.content": "delete_content",
+        "prompts.form.output": "output",
+        "prompts.form.params": "params",
+        "form.validation.required": "required",
+        "confirmation.yes": "confirm_yes",
+        "confirmation.no": "confirm_no",
+        "actions.discard.confirmation.header": "confirmation_header",
+        "actions.discard.confirmation.content": "confirmation_content",
+        "prompts.action.new": "prompts.action.new",
+      },
+    },
+    fallback: "lazy",
+  };
+
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(<Prompts />, renderOpts);
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/prompts/__tests__/PromptEditor.spec.js

@@ -0,0 +1,208 @@
+import React from "react";
+import { act } from "react-dom/test-utils";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import PromptEditor from "../PromptEditor";
+
+jest.mock("@truedat/core/hooks", () => ({
+  useLocales: jest.fn(() => ({
+    loading: false,
+    locales: [{ lang: "es", id: 1 }],
+  })),
+}));
+
+const renderOpts = {
+  messages: {
+    en: {
+      "prompts.resourceType.data_structure":
+        "prompts.resourceType.data_structure",
+      "form.validation.required": "form.validation.required",
+      "prompts.form.selector": "prompts.form.selector",
+      "prompts.form.fields": "prompts.form.fields",
+      "actions.save": "actions.save",
+      "actions.cancel": "actions.cancel",
+      "actions.delete": "actions.delete",
+      "functions.action.delete.header": "functions.action.delete.header",
+      "functions.action.delete.content": "functions.action.delete.content",
+      "prompts.form.name": "prompts.form.name",
+      "prompts.form.name": "prompts.form.name",
+      "prompts.form.resource_type": "prompts.form.resource_type",
+      "prompts.form.fields.add": "prompts.form.fields.add",
+      "prompts.form.fields.source": "prompts.form.fields.source",
+      "form.validation.required": "form.validation.required",
+      "prompts.form.fields.source": "prompts.form.fields.source",
+      "prompts.form.fields.target": "prompts.form.fields.target",
+      "actions.discard.confirmation.content":
+        "actions.discard.confirmation.content",
+      "actions.discard.confirmation.header":
+        "actions.discard.confirmation.header",
+      "confirmation.yes": "confirmation.yes",
+      "confirmation.no": "confirmation.no",
+      "prompts.form.model": "prompts.form.model",
+      "prompts.form.provider": "prompts.form.provider",
+      "prompts.form.user_prompt_template": "prompts.form.user_prompt_template",
+      "prompts.form.system_prompt": "prompts.form.system_prompt",
+      "prompts.form.language": "prompts.form.language",
+      "prompts.provider.openai": "prompts.provider.openai",
+      "resourceMappings.resourceType.data_structure":
+        "resourceMappings.resourceType.data_structure",
+    },
+  },
+  fallback: "lazy",
+};
+
+const props = {
+  selectedPrompt: {
+    id: 1,
+    name: "prompt1",
+    resource_type: "data_structure",
+    language: "en",
+    system_prompt: "system_prompt",
+    user_prompt_template: "user_prompt",
+    provider: "openai",
+    model: "model1",
+  },
+  prompts: [
+    {
+      id: 1,
+      name: "prompt1",
+      resource_type: "data_structure",
+      language: "en",
+      system_prompt: "system_prompt",
+      user_prompt_template: "user_prompt",
+      provider: "openai",
+      model: "model1",
+    },
+  ],
+  onSubmit: jest.fn(),
+  onCancel: jest.fn(),
+  onDelete: jest.fn(),
+  isSubmitting: false,
+  setDirty: jest.fn(),
+};
+
+describe("<PromptEditor />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container } = render(<PromptEditor {...props} />, renderOpts);
+    await act(async () => {
+      expect(container).toMatchSnapshot();
+    });
+  });
+
+  it("matches snapshot without selected resource mapping", async () => {
+    const props = { setDirty: jest.fn() };
+    const { container, queryByText } = render(
+      <PromptEditor {...props} />,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches snapshot without onDelete", async () => {
+    const thisProps = {
+      ...props,
+      onDelete: null,
+    };
+    const { container } = render(<PromptEditor {...thisProps} />, renderOpts);
+
+    await waitFor(() => expect(container).toMatchSnapshot());
+  });
+
+  it("test cancel button", async () => {
+    const onCancel = jest.fn();
+    const thisProps = { ...props, onCancel };
+    const { getByRole } = render(<PromptEditor {...thisProps} />, renderOpts);
+
+    userEvent.click(getByRole("button", { name: /cancel/i }));
+
+    await waitFor(() => expect(onCancel).toHaveBeenCalled());
+  });
+
+  it("test cancel button with confirm", async () => {
+    const onCancel = jest.fn();
+    const thisProps = { ...props, onCancel };
+    const { container, getByRole, getAllByRole } = render(
+      <PromptEditor {...thisProps} />,
+      renderOpts
+    );
+
+    userEvent.type(getAllByRole("textbox")[0], "name");
+
+    await waitFor(() =>
+      expect(getByRole("button", { name: /save/i })).toBeEnabled()
+    );
+
+    userEvent.click(getByRole("button", { name: /cancel/i }));
+    expect(onCancel).toHaveBeenCalledTimes(0);
+
+    userEvent.click(getByRole("button", { name: /modal-negative-action/i }));
+    expect(onCancel).toHaveBeenCalledTimes(0);
+
+    userEvent.click(getByRole("button", { name: /cancel/i }));
+    expect(onCancel).toHaveBeenCalledTimes(0);
+
+    expect(container).toMatchSnapshot();
+
+    userEvent.click(getByRole("button", { name: /modal-affirmative-action/i }));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it("test delete button", async () => {
+    const onDelete = jest.fn();
+    const thisProps = { ...props, onDelete };
+    const { container, getByRole } = render(
+      <PromptEditor {...thisProps} />,
+      renderOpts
+    );
+
+    userEvent.click(getByRole("button", { name: /delete/i }));
+    expect(onDelete).toHaveBeenCalledTimes(0);
+
+    userEvent.click(getByRole("button", { name: /modal-negative-action/i }));
+    expect(onDelete).toHaveBeenCalledTimes(0);
+
+    userEvent.click(getByRole("button", { name: /delete/i }));
+    expect(onDelete).toHaveBeenCalledTimes(0);
+
+    await waitFor(() => expect(container).toMatchSnapshot());
+
+    userEvent.click(getByRole("button", { name: /modal-affirmative-action/i }));
+    expect(onDelete).toHaveBeenCalledTimes(1);
+  });
+
+  it("test submit", async () => {
+    const onSubmit = jest.fn();
+    const thisProps = { ...props, onSubmit };
+    const { getByRole, getAllByRole } = render(
+      <PromptEditor {...thisProps} />,
+      renderOpts
+    );
+
+    expect(getByRole("button", { name: /save/i })).toBeDisabled();
+
+    userEvent.type(getAllByRole("textbox")[0], "name");
+
+    await waitFor(() =>
+      expect(getByRole("button", { name: /save/i })).toBeEnabled()
+    );
+
+    userEvent.click(getByRole("button", { name: /save/i }));
+
+    await waitFor(() =>
+      expect(getByRole("button", { name: /save/i })).toBeEnabled()
+    );
+
+    expect(onSubmit.mock.calls[0][0]).toEqual({
+      id: 1,
+      language: "en",
+      model: "model1",
+      name: "prompt1name",
+      provider: "openai",
+      resource_type: "data_structure",
+      system_prompt: "system_prompt",
+      user_prompt_template: "user_prompt",
+    });
+  });
+});

package/src/components/prompts/__tests__/__snapshots__/Prompt.spec.js.snap

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Prompts /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <h2
+      class="ui header"
+    >
+      <i
+        aria-hidden="true"
+        class="map signs circular icon"
+      />
+      <div
+        class="content"
+      >
+        prompts.header
+        <div
+          class="sub header"
+        >
+          prompts.subheader
+        </div>
+      </div>
+    </h2>
+    <div
+      class="ui grid"
+    >
+      <div
+        class="four wide column"
+      >
+        <button
+          class="ui fluid button"
+        >
+          prompts.action.new
+        </button>
+        <div
+          class="ui divided selection list"
+          role="list"
+        >
+          <div
+            class="item"
+            role="listitem"
+          >
+            <div
+              class="content"
+            >
+              <div
+                class="header"
+              >
+                rm1
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="eleven wide column"
+      >
+        <h2
+          class="ui icon center aligned header"
+        >
+          <i
+            aria-hidden="true"
+            class="hand pointer outline icon"
+          />
+          <div
+            class="sub header"
+          >
+            prompts.no_selection
+          </div>
+        </h2>
+      </div>
+    </div>
+  </div>
+</div>
+`;