@windstream/react-shared-components 0.2.55 → 0.2.56

package/src/contentful/blocks/dynamic-form/index.test.tsx

@@ -0,0 +1,355 @@
+import React from "react";
+import { DynamicForm } from "./index";
+import { DynamicFormItem } from "./types";
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+const fields: DynamicFormItem[] = [
+  {
+    itemType: "formField",
+    fieldId: "firstName",
+    fieldType: "Text",
+    displayName: "First Name",
+    requiredField: true,
+    errorMessage: "First name is required",
+  },
+  {
+    itemType: "formField",
+    fieldId: "consent",
+    fieldType: "Checkbox",
+    displayName: "I agree",
+    requiredField: true,
+  },
+];
+
+describe("DynamicForm", () => {
+  it("renders the title, fields and submit button", () => {
+    render(
+      <DynamicForm title="Contact us" fields={fields} submitLabel="Send" />
+    );
+    expect(screen.getByText("Contact us")).toBeInTheDocument();
+    expect(screen.getByText("First Name")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /submit form/i })
+    ).toBeInTheDocument();
+  });
+
+  it("shows a validation message and does not call handlers when required fields are empty", async () => {
+    const onEmailSubmit = jest.fn();
+    render(
+      <DynamicForm
+        fields={fields}
+        formSubmitOptions={["email"]}
+        emailTemplateName="welcome"
+        onEmailSubmit={onEmailSubmit}
+        validationErrorText="Please fill required fields"
+      />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /submit form/i }));
+
+    await waitFor(() =>
+      expect(
+        screen.getByText("Please fill required fields")
+      ).toBeInTheDocument()
+    );
+    expect(onEmailSubmit).not.toHaveBeenCalled();
+  });
+
+  it("invokes email, smtp and sms handlers and renders the success message", async () => {
+    const onEmailSubmit = jest.fn().mockResolvedValue(undefined);
+    const onSmtpSubmit = jest.fn().mockResolvedValue(undefined);
+    const onSmsSubmit = jest.fn().mockResolvedValue(undefined);
+    const onSubmitSuccess = jest.fn();
+
+    render(
+      <DynamicForm
+        fields={fields}
+        formSubmitOptions={["email", "sftp", "sms"]}
+        emailTemplateName="welcome"
+        onEmailSubmit={onEmailSubmit}
+        onSmtpSubmit={onSmtpSubmit}
+        onSmsSubmit={onSmsSubmit}
+        onSubmitSuccess={onSubmitSuccess}
+        successMessage={<div>Thanks for reaching out</div>}
+      />
+    );
+
+    fireEvent.change(screen.getByLabelText("First Name"), {
+      target: { value: "Jane", name: "firstName" },
+    });
+    fireEvent.click(screen.getByRole("checkbox"));
+
+    fireEvent.click(screen.getByRole("button", { name: /submit form/i }));
+
+    await waitFor(() =>
+      expect(screen.getByText("Thanks for reaching out")).toBeInTheDocument()
+    );
+
+    expect(onEmailSubmit).toHaveBeenCalledTimes(1);
+    expect(onSmtpSubmit).toHaveBeenCalledTimes(1);
+    expect(onSmsSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmitSuccess).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders the error node when every action fails", async () => {
+    const onEmailSubmit = jest.fn().mockRejectedValue(new Error("boom"));
+
+    render(
+      <DynamicForm
+        fields={fields}
+        formSubmitOptions={["email"]}
+        emailTemplateName="welcome"
+        onEmailSubmit={onEmailSubmit}
+        errorMessage={<div>Something went wrong</div>}
+      />
+    );
+
+    fireEvent.change(screen.getByLabelText("First Name"), {
+      target: { value: "Jane", name: "firstName" },
+    });
+    fireEvent.click(screen.getByRole("checkbox"));
+    fireEvent.click(screen.getByRole("button", { name: /submit form/i }));
+
+    await waitFor(() =>
+      expect(screen.getByText("Something went wrong")).toBeInTheDocument()
+    );
+  });
+
+  const submit = () =>
+    fireEvent.click(screen.getByRole("button", { name: /submit form/i }));
+
+  it("applies TN/IP preset validation before submitting", async () => {
+    const onEmailSubmit = jest.fn().mockResolvedValue(undefined);
+    const presetFields: DynamicFormItem[] = [
+      {
+        itemType: "formField",
+        fieldId: "contact",
+        fieldType: "Text",
+        displayName: "Contact",
+        applyPresetValidations: true,
+        selectPresetValidationsToApply: "TN-IP-Validation",
+      },
+    ];
+    render(
+      <DynamicForm
+        fields={presetFields}
+        formSubmitOptions={["email"]}
+        emailTemplateName="welcome"
+        onEmailSubmit={onEmailSubmit}
+        successMessage={<div>Done</div>}
+      />
+    );
+
+    fireEvent.change(screen.getByLabelText("Contact"), {
+      target: { value: "+1 555-123-4567", name: "contact" },
+    });
+    submit();
+
+    await waitFor(() => expect(onEmailSubmit).toHaveBeenCalledTimes(1));
+    const body = onEmailSubmit.mock.calls[0][0];
+    expect(JSON.parse(body.formData)).toMatchObject({
+      form1: { contact: "5551234567" },
+    });
+  });
+
+  it("shows a validation error when a required-one group is entirely empty", async () => {
+    const groupFields: DynamicFormItem[] = [
+      {
+        itemType: "formField",
+        fieldId: "opt1",
+        fieldType: "Text",
+        displayName: "Option 1",
+        validationGroupId: "grp",
+        validationType: "At least One Required",
+      },
+      {
+        itemType: "formField",
+        fieldId: "opt2",
+        fieldType: "Text",
+        displayName: "Option 2",
+        validationGroupId: "grp",
+        validationType: "At least One Required",
+      },
+    ];
+    render(
+      <DynamicForm
+        fields={groupFields}
+        formSubmitOptions={["email"]}
+        emailTemplateName="welcome"
+        onEmailSubmit={jest.fn()}
+        validationErrorText="Fill at least one"
+      />
+    );
+    submit();
+    await waitFor(() =>
+      expect(screen.getByText("Fill at least one")).toBeInTheDocument()
+    );
+  });
+
+  it("treats a partial action failure as a success", async () => {
+    const onEmailSubmit = jest.fn().mockResolvedValue(undefined);
+    const onSmsSubmit = jest.fn().mockRejectedValue(new Error("sms down"));
+    render(
+      <DynamicForm
+        fields={fields}
+        formSubmitOptions={["email", "sms"]}
+        emailTemplateName="welcome"
+        onEmailSubmit={onEmailSubmit}
+        onSmsSubmit={onSmsSubmit}
+        successMessage={<div>Partially sent</div>}
+      />
+    );
+    fireEvent.change(screen.getByLabelText("First Name"), {
+      target: { value: "Jane", name: "firstName" },
+    });
+    fireEvent.click(screen.getByRole("checkbox"));
+    submit();
+    await waitFor(() =>
+      expect(screen.getByText("Partially sent")).toBeInTheDocument()
+    );
+  });
+
+  it("runs the post handler, buildPayload and analytics tracking", async () => {
+    const postHandler = jest.fn().mockResolvedValue(undefined);
+    const buildPayload = jest.fn((base: any) => ({ ...base, custom: true }));
+    const onTrack = jest.fn();
+    render(
+      <DynamicForm
+        fields={[
+          {
+            itemType: "formField",
+            fieldId: "name",
+            fieldType: "Text",
+            displayName: "Name",
+          },
+        ]}
+        formSubmitOptions={["post"]}
+        actionHandlers={{ post: postHandler }}
+        buildPayload={buildPayload}
+        onTrack={onTrack}
+        segmentEventId="evt"
+        successMessage={<div>Posted</div>}
+      />
+    );
+    submit();
+    await waitFor(() => expect(postHandler).toHaveBeenCalledTimes(1));
+    expect(buildPayload).toHaveBeenCalled();
+    expect(onTrack).toHaveBeenCalledWith("evt", expect.any(Object));
+  });
+
+  it("reports an unsupported action and renders the error node", async () => {
+    const onError = jest.fn();
+    render(
+      <DynamicForm
+        fields={[
+          {
+            itemType: "formField",
+            fieldId: "name",
+            fieldType: "Text",
+            displayName: "Name",
+          },
+        ]}
+        formSubmitOptions={["voice"]}
+        onError={onError}
+        errorMessage={<div>Action unavailable</div>}
+      />
+    );
+    submit();
+    await waitFor(() =>
+      expect(screen.getByText("Action unavailable")).toBeInTheDocument()
+    );
+    expect(onError).toHaveBeenCalledWith(
+      expect.objectContaining({ type: "unsupported_action" })
+    );
+  });
+
+  it("passes shouldShowPopup=true when a popup option is selected", async () => {
+    const onEmailSubmit = jest.fn().mockResolvedValue(undefined);
+    const onSubmitSuccess = jest.fn();
+    render(
+      <DynamicForm
+        fields={[
+          {
+            itemType: "formField",
+            fieldId: "topic",
+            fieldType: "Radio",
+            displayName: "Topic",
+            dataSource: [{ label: "Escalate", value: "escalate", popup: true }],
+          },
+        ]}
+        formSubmitOptions={["email"]}
+        emailTemplateName="welcome"
+        onEmailSubmit={onEmailSubmit}
+        onSubmitSuccess={onSubmitSuccess}
+        successMessage={<div>Sent</div>}
+      />
+    );
+    fireEvent.click(screen.getByText("Escalate"));
+    submit();
+    await waitFor(() =>
+      expect(onSubmitSuccess).toHaveBeenCalledWith(
+        expect.objectContaining({ topic: "escalate" }),
+        { shouldShowPopup: true }
+      )
+    );
+  });
+
+  it("handles an unexpected error thrown while building the payload", async () => {
+    const buildPayload = jest.fn(() => {
+      throw new Error("boom");
+    });
+    render(
+      <DynamicForm
+        fields={[
+          {
+            itemType: "formField",
+            fieldId: "name",
+            fieldType: "Text",
+            displayName: "Name",
+          },
+        ]}
+        formSubmitOptions={["email"]}
+        emailTemplateName="welcome"
+        onEmailSubmit={jest.fn()}
+        buildPayload={buildPayload}
+        errorMessage={<div>Unexpected failure</div>}
+      />
+    );
+    submit();
+    await waitFor(() =>
+      expect(screen.getByText("Unexpected failure")).toBeInTheDocument()
+    );
+  });
+
+  it("sends a multipart payload when files are attached", async () => {
+    global.URL.createObjectURL = jest.fn(() => "blob:preview");
+    global.URL.revokeObjectURL = jest.fn();
+    const onEmailSubmit = jest.fn().mockResolvedValue(undefined);
+    const { container } = render(
+      <DynamicForm
+        fields={[
+          {
+            itemType: "formField",
+            fieldId: "attachment",
+            fieldType: "Imageupload",
+            displayName: "Attachment",
+          },
+        ]}
+        formSubmitOptions={["email"]}
+        emailTemplateName="welcome"
+        onEmailSubmit={onEmailSubmit}
+        successMessage={<div>Uploaded</div>}
+      />
+    );
+    const fileInput = container.querySelector(
+      'input[type="file"]'
+    ) as HTMLInputElement;
+    const file = new File(["x"], "pic.png", { type: "image/png" });
+    Object.defineProperty(file, "size", { value: 100 });
+    fireEvent.change(fileInput, { target: { files: [file] } });
+    submit();
+    await waitFor(() => expect(onEmailSubmit).toHaveBeenCalledTimes(1));
+    expect(onEmailSubmit.mock.calls[0][0]).toBeInstanceOf(FormData);
+  });
+});