test: Unit Tests for FormBuilderField and BookingFields components

packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx

@@ -118,7 +118,7 @@ const TextWidget = (props: TextLikeComponentPropsRAQB) => {
       containerClassName="w-full"
       type={type}
       value={textValue}
-      labelSrOnly={noLabel}
+      noLabel={noLabel}
       placeholder={placeholder}
       disabled={readOnly}
       onChange={onChange}

packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx

@@ -0,0 +1,181 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { render, fireEvent, screen } from "@testing-library/react";
+import * as React from "react";
+import type { UseFormReturn } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
+import { expect } from "vitest";
+
+import { getBookingFieldsWithSystemFields } from "../../../lib/getBookingFields";
+import { BookingFields } from "./BookingFields";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type FormMethods = UseFormReturn<any>;
+
+const renderComponent = ({
+  props: props,
+  formDefaultValues,
+}: {
+  props: Parameters<typeof BookingFields>[0];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  formDefaultValues?: any;
+}) => {
+  let formMethods: UseFormReturn | undefined;
+  const Wrapper = ({ children }: { children: React.ReactNode }) => {
+    const form = useForm({
+      defaultValues: formDefaultValues,
+    });
+    formMethods = form;
+    return (
+      <TooltipProvider>
+        <FormProvider {...form}>{children}</FormProvider>
+      </TooltipProvider>
+    );
+  };
+  const result = render(<BookingFields {...props} />, { wrapper: Wrapper });
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return { result, formMethods: formMethods! };
+};
+
+describe("BookingFields", () => {
+  it("should correctly render with location fields", () => {
+    const AttendeePhoneNumberOption = {
+      label: "attendee_phone_number",
+      value: "phone",
+    };
+
+    const OrganizerLinkOption = {
+      label: "https://google.com",
+      value: "link",
+    };
+
+    const locations = [
+      {
+        type: AttendeePhoneNumberOption.value,
+      },
+      {
+        link: "https://google.com",
+        type: OrganizerLinkOption.value,
+        displayLocationPublicly: true,
+      },
+    ];
+    const { formMethods } = renderComponent({
+      props: {
+        fields: getBookingFieldsWithSystemFields({
+          disableGuests: false,
+          bookingFields: [],
+          metadata: null,
+          workflows: [],
+          customInputs: [],
+        }),
+        locations,
+        isDynamicGroupBooking: false,
+        bookingData: null,
+      },
+      formDefaultValues: {},
+    });
+
+    component.fillName({ value: "John Doe" });
+    component.fillEmail({ value: "john.doe@example.com" });
+    component.fillNotes({ value: "This is a note" });
+    expectScenarios.expectNameToBe({ value: "John Doe", formMethods });
+    expectScenarios.expectEmailToBe({ value: "john.doe@example.com", formMethods });
+    expectScenarios.expectNotesToBe({ value: "This is a note", formMethods });
+
+    component.fillRadioInputLocation({ label: AttendeePhoneNumberOption.label, inputValue: "+1234567890" });
+    expectScenarios.expectLocationToBe({
+      formMethods,
+      label: AttendeePhoneNumberOption.label,
+      toMatch: {
+        formattedValue: "+1 (234) 567-890",
+        value: { optionValue: "+1234567890", value: AttendeePhoneNumberOption.value },
+      },
+    });
+
+    component.fillRadioInputLocation({ label: OrganizerLinkOption.label });
+    expectScenarios.expectLocationToBe({
+      formMethods,
+      label: OrganizerLinkOption.label,
+      toMatch: {
+        formattedValue: "+1 (234) 567-890",
+        value: { optionValue: "", value: OrganizerLinkOption.value },
+      },
+    });
+  });
+});
+
+const component = {
+  getName: ({ label = "your_name" }: { label?: string } = {}) =>
+    screen.getByRole("textbox", {
+      name: new RegExp(label),
+    }) as HTMLInputElement,
+  getEmail: () => screen.getByRole("textbox", { name: /email/i }) as HTMLInputElement,
+  getLocationRadioOption: ({ label }: { label: string }) =>
+    screen.getByRole("radio", { name: new RegExp(label) }) as HTMLInputElement,
+  getLocationRadioInput: ({ placeholder }: { placeholder: string }) =>
+    screen.getByPlaceholderText(placeholder) as HTMLInputElement,
+  getNotes: () => screen.getByRole("textbox", { name: /additional_notes/i }) as HTMLInputElement,
+  getGuests: () => screen.getByLabelText("guests"),
+  fillName: ({ value }: { value: string }) => {
+    fireEvent.change(component.getName(), { target: { value } });
+  },
+  fillEmail: ({ value }: { value: string }) => {
+    fireEvent.change(component.getEmail(), { target: { value } });
+  },
+  fillRadioInputLocation: ({ label, inputValue }: { label: string; inputValue?: string }) => {
+    fireEvent.click(component.getLocationRadioOption({ label }));
+
+    if (inputValue) {
+      let placeholder = label;
+      if (label === "attendee_phone_number") {
+        placeholder = "enter_phone_number";
+      } else {
+        // radioInput doesn't have a label, so we need to identify by placeholder
+        throw new Error("Tell me how to identify the placeholder for this location input");
+      }
+      fireEvent.change(component.getLocationRadioInput({ placeholder }), {
+        target: { value: inputValue },
+      });
+    }
+  },
+  fillNotes: ({ value }: { value: string }) => {
+    fireEvent.change(component.getNotes(), { target: { value } });
+  },
+};
+
+const expectScenarios = {
+  expectNameToBe: ({ value, formMethods }: { value: string; formMethods: FormMethods }) => {
+    expect(component.getName().value).toEqual(value);
+    expect(formMethods.getValues("responses.name")).toEqual(value);
+  },
+  expectEmailToBe: ({ value, formMethods }: { value: string; formMethods: FormMethods }) => {
+    expect(component.getEmail().value).toEqual(value);
+    expect(formMethods.getValues("responses.email")).toEqual(value);
+  },
+  expectLocationToBe: ({
+    formMethods,
+    label,
+    toMatch: { formattedValue, value },
+  }: {
+    label: string;
+    toMatch: {
+      formattedValue?: string;
+      value: {
+        optionValue: string;
+        value: string;
+      };
+    };
+    formMethods: FormMethods;
+  }) => {
+    expect(component.getLocationRadioOption({ label }).checked).toBe(true);
+    if (value.optionValue) {
+      expect(component.getLocationRadioInput({ placeholder: "enter_phone_number" }).value).toEqual(
+        formattedValue
+      );
+    }
+    expect(formMethods.getValues("responses.location")).toEqual(value);
+  },
+  expectNotesToBe: ({ value, formMethods }: { value: string; formMethods: FormMethods }) => {
+    expect(component.getNotes().value).toEqual(value);
+    expect(formMethods.getValues("responses.notes")).toEqual(value);
+  },
+};

packages/features/bookings/Booker/components/BookEventForm/BookingFields.tsx

@@ -83,11 +83,8 @@ export const BookingFields = ({
           return null;
         }
 
-        // Attendee location field can be edited during reschedule
         if (field.name === SystemField.Enum.location) {
-          if (locationResponse?.value === "attendeeInPerson" || "phone") {
-            readOnly = false;
-          }
+          readOnly = false;
         }
 
         // Dynamically populate location field options

packages/features/bookings/lib/getBookingFields.ts

@@ -17,7 +17,7 @@ import {
 
 type Fields = z.infer<typeof eventTypeBookingFields>;
 
-if (typeof window !== "undefined") {
+if (typeof window !== "undefined" && !process.env.INTEGRATION_TEST_MODE) {
   // This file imports some costly dependencies, so we want to make sure it's not imported on the client side.
   throw new Error("`getBookingFields` must not be imported on the client side.");
 }

packages/features/form-builder/Components.tsx

@@ -97,16 +97,16 @@ type Component =
 export const Components: Record<FieldType, Component> = {
   text: {
     propsType: propsTypes.text,
-    factory: (props) => <Widgets.TextWidget noLabel={true} {...props} />,
+    factory: (props) => <Widgets.TextWidget id={props.name} noLabel={true} {...props} />,
   },
   textarea: {
     propsType: propsTypes.textarea,
     // TODO: Make rows configurable in the form builder
-    factory: (props) => <Widgets.TextAreaWidget rows={3} {...props} />,
+    factory: (props) => <Widgets.TextAreaWidget id={props.name} rows={3} {...props} />,
   },
   number: {
     propsType: propsTypes.number,
-    factory: (props) => <Widgets.NumberWidget noLabel={true} {...props} />,
+    factory: (props) => <Widgets.NumberWidget id={props.name} noLabel={true} {...props} />,
   },
   name: {
     propsType: propsTypes.name,
@@ -211,14 +211,15 @@ export const Components: Record<FieldType, Component> = {
       if (!props) {
         return <div />;
       }
-      return <Widgets.TextWidget type="email" noLabel={true} {...props} />;
+      return <Widgets.TextWidget type="email" id={props.name} noLabel={true} {...props} />;
     },
   },
   address: {
     propsType: propsTypes.address,
     factory: (props) => {
       return (
         <AddressInput
+          id={props.name}
           onChange={(val) => {
             props.setValue(val);
           }}
@@ -248,6 +249,7 @@ export const Components: Record<FieldType, Component> = {
                 {value.map((field, index) => (
                   <li key={index}>
                     <EmailField
+                      id={`${props.name}.${index}`}
                       disabled={readOnly}
                       value={value[index]}
                       className={inputClassName}
@@ -319,7 +321,7 @@ export const Components: Record<FieldType, Component> = {
         ...props,
         listValues: props.options.map((o) => ({ title: o.label, value: o.value })),
       };
-      return <Widgets.MultiSelectWidget {...newProps} />;
+      return <Widgets.MultiSelectWidget id={props.name} {...newProps} />;
     },
   },
   select: {
@@ -329,7 +331,7 @@ export const Components: Record<FieldType, Component> = {
         ...props,
         listValues: props.options.map((o) => ({ title: o.label, value: o.value })),
       };
-      return <Widgets.SelectWidget {...newProps} />;
+      return <Widgets.SelectWidget id={props.name} {...newProps} />;
     },
   },
   checkbox: {

packages/features/form-builder/FormBuilder.test.tsx

@@ -1,7 +1,7 @@
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { render } from "@testing-library/react";
 import type { ReactNode } from "react";
-import { React } from "react";
+import * as React from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { vi } from "vitest";
 
@@ -13,6 +13,7 @@ import {
   setMockMatchMedia,
   pageObject,
   expectScenario,
+  getLocationBookingField,
 } from "./testUtils";
 
 vi.mock("@formkit/auto-animate/react", () => ({
@@ -115,43 +116,23 @@ describe("FormBuilder", () => {
               },
             },
           },
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          shouldConsiderRequired: ({ field: any }) => {
-            field.name === "location" ? true : false;
+          // @typescript-eslint/no-explicit-any
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          shouldConsiderRequired: (field: any) => {
+            return field.name === "location" ? true : false;
           },
         },
-        // TODO: May be we should get this from getBookingFields directly which tests more practical cases
         formDefaultValues: {
-          fields: [
-            {
-              defaultLabel: "location",
-              type: field.type,
-              name: field.identifier,
-              editable: "system",
-              hideWhenJustOneOption: true,
-              required: false,
-              getOptionsAt: "locations",
-              optionsInputs: {
-                attendeeInPerson: {
-                  type: "address",
-                  required: true,
-                  placeholder: "",
-                },
-                phone: {
-                  type: "phone",
-                  required: true,
-                  placeholder: "",
-                },
-              },
-            },
-          ],
+          fields: [getLocationBookingField()],
         },
       });
 
       // editable:'system' field can't be deleted
-      expect(pageObject.queryDeleteButton({ identifier: field.identifier })).toBeNull();
+      expectScenario.toNotHaveDeleteButton({ identifier: field.identifier });
       // editable:'system' field can't be toggled
-      expect(pageObject.queryToggleButton({ identifier: field.identifier })).toBeNull();
+      expectScenario.toNotHaveToggleButton({ identifier: field.identifier });
+      expectScenario.toHaveSourceBadge({ identifier: field.identifier, sourceLabel: "1 Location" });
+      expectScenario.toHaveRequiredBadge({ identifier: field.identifier });
 
       const newFieldDialog = pageObject.openAddFieldDialog();