FormBuilderField and BookingFields tests

calcom · Aug 10, 2024 · 7901b2e · 7901b2e
1 parent 455fdd2
commit 7901b2e
Show file tree

Hide file tree

Showing 12 changed files with 163 additions and 37 deletions.
diff --git a/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx b/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}

diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx
@@ -0,0 +1,58 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { render, screen } from "@testing-library/react";
+import * as React from "react";
+import { FormProvider, useForm } from "react-hook-form";
+
+import { getBookingFieldsWithSystemFields } from "../../../lib/getBookingFields";
+import { BookingFields } from "./BookingFields";
+
+const renderComponent = ({
+  props: props,
+  formDefaultValues,
+}: {
+  props: Parameters<typeof BookingFields>[0];
+  formDefaultValues?: any;
+}) => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) => {
+    const form = useForm({
+      defaultValues: formDefaultValues,
+    });
+    return (
+      <TooltipProvider>
+        <FormProvider {...form}>{children}</FormProvider>
+      </TooltipProvider>
+    );
+  };
+  return render(<BookingFields {...props} />, { wrapper: Wrapper });
+};
+
+describe("FormBuilderField", () => {
+  it("basic test", () => {
+    renderComponent({
+      props: {
+        fields: getBookingFieldsWithSystemFields({
+          disableGuests: false,
+          bookingFields: [],
+          metadata: null,
+          workflows: [],
+          customInputs: [],
+        }),
+        locations: [
+          {
+            type: "phone",
+          },
+          {
+            link: "https://google.com",
+            type: "link",
+            displayLocationPublicly: true,
+          },
+        ],
+        isDynamicGroupBooking: false,
+        bookingData: null,
+      },
+      formDefaultValues: {},
+    });
+    screen.getByText("email_address");
+    screen.logTestingPlaygroundURL();
+  });
+});
diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookingFields.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookingFields.tsx
@@ -99,6 +99,7 @@ export const BookingFields = ({
 
           // TODO: Instead of `getLocationOptionsForSelect` options should be retrieved from dataStore[field.getOptionsAt]. It would make it agnostic of the `name` of the field.
           const options = getLocationOptionsForSelect(locations, t);
+          console.log({ options });
           options.forEach((option) => {
             const optionInput = optionsInputs[option.value as keyof typeof optionsInputs];
             if (optionInput) {
@@ -132,6 +133,7 @@ export const BookingFields = ({
             };
           });
         }
+        console.log({ field });
 
         return (
           <FormBuilderField className="mb-4" field={{ ...field, hidden }} readOnly={readOnly} key={index} />

diff --git a/packages/features/bookings/lib/getBookingFields.ts b/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.");
 }

diff --git a/packages/features/bookings/lib/getLocationOptionsForSelect.ts b/packages/features/bookings/lib/getLocationOptionsForSelect.ts
@@ -9,6 +9,7 @@ export default function getLocationsOptionsForSelect(
   locations: LocationObject[],
   t: ReturnType<typeof useLocale>["t"]
 ) {
+  console.log({ locations: JSON.stringify(locations) });
   return locations
     .map((location) => {
       const eventLocation = getEventLocationType(location.type);

diff --git a/packages/features/form-builder/FormBuilder.test.tsx b/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,24 @@ 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();
 

diff --git a/packages/features/form-builder/FormBuilderField.test.tsx b/packages/features/form-builder/FormBuilderField.test.tsx
@@ -0,0 +1,40 @@
+import { render } from "@testing-library/react";
+import * as React from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { vi } from "vitest";
+
+import { FormBuilderField } from "./FormBuilderField";
+import { getLocationBookingField } from "./testUtils";
+
+vi.mock("@formkit/auto-animate/react", () => ({
+  useAutoAnimate: () => [null],
+}));
+
+const renderComponent = ({
+  props: props,
+  formDefaultValues,
+}: {
+  props: Parameters<typeof FormBuilderField>[0];
+  formDefaultValues?: any;
+}) => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) => {
+    const form = useForm({
+      defaultValues: formDefaultValues,
+    });
+    return <FormProvider {...form}>{children}</FormProvider>;
+  };
+  return render(<FormBuilderField {...props} />, { wrapper: Wrapper });
+};
+
+describe("FormBuilderField", () => {
+  it("basic test", () => {
+    renderComponent({
+      props: {
+        field: getLocationBookingField(),
+        readOnly: false,
+        className: "",
+      },
+      formDefaultValues: {},
+    });
+  });
+});
diff --git a/packages/features/form-builder/FormBuilderField.tsx b/packages/features/form-builder/FormBuilderField.tsx
@@ -58,6 +58,7 @@ export const FormBuilderField = ({
     field,
     t
   );
+  console.log({ hidden, placeholder, label, noLabel, translatedDefaultLabel });
 
   return (
     <div data-fob-field-name={field.name} className={classNames(className, hidden ? "hidden" : "")}>

diff --git a/packages/features/form-builder/testUtils.ts b/packages/features/form-builder/testUtils.ts
@@ -1,6 +1,8 @@
 import { fireEvent, waitFor, screen, within } from "@testing-library/react";
 import { vi } from "vitest";
 
+import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
+
 import type { FormBuilder } from "./FormBuilder";
 
 export interface FieldProps {
@@ -20,6 +22,22 @@ export const mockProps: FormBuilderProps = {
   LockedIcon: false,
   dataStore: { options: {} },
 };
+export const getLocationBookingField = () => {
+  const bookingFields = getBookingFieldsWithSystemFields({
+    bookingFields: [],
+    disableGuests: false,
+    disableBookingTitle: false,
+    customInputs: [],
+    metadata: {},
+    workflows: [],
+  });
+
+  const locationBookingField = bookingFields.find((field) => field.name === "location");
+  if (!locationBookingField) {
+    throw new Error("location booking field not found");
+  }
+  return locationBookingField;
+};
 
 export const setMockMatchMedia = () => {
   Object.defineProperty(window, "matchMedia", {
@@ -197,8 +215,7 @@ export const verifier = {
     });
   },
   verifyThatFieldCanBeMarkedOptional: async ({ identifier }: { identifier: string }) => {
-    const field = getFieldInTheList({ identifier });
-    expect(field.getByTestId("required")).toBeInTheDocument();
+    expectScenario.toHaveRequiredBadge({ identifier });
     const editDialogForm = pageObject.openEditFieldDialog({ identifier });
     pageObject.dialog.makeFieldOptional({ dialog: editDialogForm });
     pageObject.dialog.saveField({ dialog: editDialogForm });
@@ -222,13 +239,27 @@ export const expectScenario = {
     expect(identifierInput.disabled).toBe(true);
   },
   toHaveRequirablityToggleDisabled: ({ dialog }: { dialog: TestingLibraryElement }) => {
-    const no = within(dialog.getByTestId("field-required")).getByText("No");
-    const yes = within(dialog.getByTestId("field-required")).getByText("Yes");
+    const no = within(dialog.getByTestId("field-required")).getByText("No") as HTMLButtonElement;
+    const yes = within(dialog.getByTestId("field-required")).getByText("Yes") as HTMLButtonElement;
     expect(no.disabled).toBe(true);
     expect(yes.disabled).toBe(true);
   },
   toHaveLabelChangeAllowed: ({ dialog }: { dialog: TestingLibraryElement }) => {
     const labelInput = dialog.getByLabelText("label");
     expect(labelInput.disabled).toBe(false);
   },
+  toNotHaveDeleteButton: ({ identifier }: { identifier: string }) => {
+    expect(pageObject.queryDeleteButton({ identifier })).toBeNull();
+  },
+  toNotHaveToggleButton: ({ identifier }: { identifier: string }) => {
+    expect(pageObject.queryToggleButton({ identifier })).toBeNull();
+  },
+  toHaveSourceBadge: ({ identifier, sourceLabel }: { identifier: string; sourceLabel: string }) => {
+    const field = getFieldInTheList({ identifier });
+    expect(field.getByText(sourceLabel)).not.toBeNull();
+  },
+  toHaveRequiredBadge: ({ identifier }: { identifier: string }) => {
+    const field = getFieldInTheList({ identifier });
+    expect(field.getByText("required")).not.toBeNull();
+  },
 };
diff --git a/packages/ui/components/form/inputs/TextField.tsx b/packages/ui/components/form/inputs/TextField.tsx
@@ -83,6 +83,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
     type,
     hintErrors,
     labelSrOnly,
+    noLabel,
     containerClassName,
     readOnly,
     showAsteriskIndicator,
@@ -97,7 +98,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
 
   return (
     <div className={classNames(containerClassName)}>
-      {!!name && (
+      {!!name && !noLabel && (
         <Skeleton
           as={Label}
           htmlFor={id}

diff --git a/packages/ui/components/form/inputs/types.d.ts b/packages/ui/components/form/inputs/types.d.ts
@@ -18,6 +18,7 @@ export type InputFieldProps = {
   showAsteriskIndicator?: boolean;
   t?: (key: string) => string;
   dataTestid?: string;
+  noLabel?: boolean;
   onClickAddon?: () => void;
 } & React.ComponentProps<typeof Input> & {
     labelProps?: React.ComponentProps<typeof Label>;

diff --git a/vitest.workspace.ts b/vitest.workspace.ts
@@ -107,7 +107,7 @@ const workspaces = packagedEmbedTestsOnly
           globals: true,
           name: "@calcom/features",
           include: ["packages/features/**/*.{test,spec}.tsx"],
-          exclude: ["packages/features/form-builder/**/*"],
+          exclude: ["packages/features/form-builder/**/*", "packages/features/bookings/**/*"],
           environment: "jsdom",
           setupFiles: ["setupVitest.ts"],
         },
@@ -148,6 +148,15 @@ const workspaces = packagedEmbedTestsOnly
           setupFiles: ["packages/ui/components/test-setup.ts"],
         },
       },
+      {
+        test: {
+          globals: true,
+          name: "@calcom/features/bookings",
+          include: ["packages/features/bookings/**/*.{test,spec}.[jt]s?(x)"],
+          environment: "jsdom",
+          setupFiles: ["packages/ui/components/test-setup.ts"],
+        },
+      },
       {
         test: {
           globals: true,