test: Add e2e for prerendering headless router with attribute routing (#22080)

* test: Add e2e for prerender

* wip

* fix tests

* conflict resolution

* Fix unit tests and e2e failure

* chore: Reorganize

Author: hariombalhara

apps/web/modules/bookings/views/bookings-single-view.tsx

@@ -621,7 +621,7 @@ export default function Success(props: PageProps) {
                                     <Badge variant="blue">{t("Host")}</Badge>
                                   </div>
                                   {!bookingInfo.eventType?.hideOrganizerEmail && (
-                                    <p className="text-default">
+                                    <p className="text-default" data-testid="booking-host-email">
                                       {bookingInfo?.userPrimaryEmail ?? bookingInfo.user.email}
                                     </p>
                                   )}

apps/web/playwright/fixtures/users.ts

@@ -17,6 +17,7 @@ import { MembershipRole, SchedulingType, TimeUnit, WorkflowTriggerEvents } from
 import { teamMetadataSchema } from "@calcom/prisma/zod-utils";
 import type { Schedule } from "@calcom/types/schedule";
 
+import { createRoutingForm } from "../lib/test-helpers/routingFormHelpers";
 import { selectFirstAvailableTimeSlotNextMonth, teamEventSlug, teamEventTitle } from "../lib/testUtils";
 import type { createEmailsFixture } from "./emails";
 import { TimeZoneEnum } from "./types";
@@ -274,6 +275,7 @@ export const createUsersFixture = (
         | null,
       scenario: {
         seedRoutingForms?: boolean;
+        seedRoutingFormWithAttributeRouting?: boolean;
         hasTeam?: true;
         numberOfTeams?: number;
         teamRole?: MembershipRole;
@@ -341,192 +343,6 @@ export const createUsersFixture = (
         });
       }
 
-      if (scenario.seedRoutingForms) {
-        const multiSelectOption2Uuid = "d1302635-9f12-17b1-9153-c3a854649182";
-        const multiSelectOption1Uuid = "d1292635-9f12-17b1-9153-c3a854649182";
-        const selectOption1Uuid = "d0292635-9f12-17b1-9153-c3a854649182";
-        const selectOption2Uuid = "d0302635-9f12-17b1-9153-c3a854649182";
-        const multiSelectLegacyFieldUuid = "d4292635-9f12-17b1-9153-c3a854649182";
-        const multiSelectFieldUuid = "d9892635-9f12-17b1-9153-c3a854649182";
-        const selectFieldUuid = "d1302635-9f12-17b1-9153-c3a854649182";
-        const legacySelectFieldUuid = "f0292635-9f12-17b1-9153-c3a854649182";
-        await prisma.app_RoutingForms_Form.create({
-          data: {
-            routes: [
-              {
-                id: "8a898988-89ab-4cde-b012-31823f708642",
-                action: { type: "eventTypeRedirectUrl", value: "pro/30min" },
-                queryValue: {
-                  id: "8a898988-89ab-4cde-b012-31823f708642",
-                  type: "group",
-                  children1: {
-                    "8988bbb8-0123-4456-b89a-b1823f70c5ff": {
-                      type: "rule",
-                      properties: {
-                        field: "c4296635-9f12-47b1-8153-c3a854649182",
-                        value: ["event-routing"],
-                        operator: "equal",
-                        valueSrc: ["value"],
-                        valueType: ["text"],
-                      },
-                    },
-                  },
-                },
-              },
-              {
-                id: "aa8aaba9-cdef-4012-b456-71823f70f7ef",
-                action: { type: "customPageMessage", value: "Custom Page Result" },
-                queryValue: {
-                  id: "aa8aaba9-cdef-4012-b456-71823f70f7ef",
-                  type: "group",
-                  children1: {
-                    "b99b8a89-89ab-4cde-b012-31823f718ff5": {
-                      type: "rule",
-                      properties: {
-                        field: "c4296635-9f12-47b1-8153-c3a854649182",
-                        value: ["custom-page"],
-                        operator: "equal",
-                        valueSrc: ["value"],
-                        valueType: ["text"],
-                      },
-                    },
-                  },
-                },
-              },
-              {
-                id: "a8ba9aab-4567-489a-bcde-f1823f71b4ad",
-                action: { type: "externalRedirectUrl", value: `${WEBAPP_URL}/pro` },
-                queryValue: {
-                  id: "a8ba9aab-4567-489a-bcde-f1823f71b4ad",
-                  type: "group",
-                  children1: {
-                    "998b9b9a-0123-4456-b89a-b1823f7232b9": {
-                      type: "rule",
-                      properties: {
-                        field: "c4296635-9f12-47b1-8153-c3a854649182",
-                        value: ["external-redirect"],
-                        operator: "equal",
-                        valueSrc: ["value"],
-                        valueType: ["text"],
-                      },
-                    },
-                  },
-                },
-              },
-              {
-                id: "aa8ba8b9-0123-4456-b89a-b182623406d8",
-                action: { type: "customPageMessage", value: "Multiselect(Legacy) chosen" },
-                queryValue: {
-                  id: "aa8ba8b9-0123-4456-b89a-b182623406d8",
-                  type: "group",
-                  children1: {
-                    "b98a8abb-cdef-4012-b456-718262343d27": {
-                      type: "rule",
-                      properties: {
-                        field: multiSelectLegacyFieldUuid,
-                        value: [["Option-2"]],
-                        operator: "multiselect_equals",
-                        valueSrc: ["value"],
-                        valueType: ["multiselect"],
-                      },
-                    },
-                  },
-                },
-              },
-              {
-                id: "bb9ea8b9-0123-4456-b89a-b182623406d8",
-                action: { type: "customPageMessage", value: "Multiselect chosen" },
-                queryValue: {
-                  id: "aa8ba8b9-0123-4456-b89a-b182623406d8",
-                  type: "group",
-                  children1: {
-                    "b98a8abb-cdef-4012-b456-718262343d27": {
-                      type: "rule",
-                      properties: {
-                        field: multiSelectFieldUuid,
-                        value: [[multiSelectOption2Uuid]],
-                        operator: "multiselect_equals",
-                        valueSrc: ["value"],
-                        valueType: ["multiselect"],
-                      },
-                    },
-                  },
-                },
-              },
-              {
-                id: "898899aa-4567-489a-bcde-f1823f708646",
-                action: { type: "customPageMessage", value: "Fallback Message" },
-                isFallback: true,
-                queryValue: { id: "898899aa-4567-489a-bcde-f1823f708646", type: "group" },
-              },
-            ],
-            fields: [
-              {
-                id: "c4296635-9f12-47b1-8153-c3a854649182",
-                type: "text",
-                label: "Test field",
-                required: true,
-              },
-              {
-                id: multiSelectLegacyFieldUuid,
-                type: "multiselect",
-                label: "Multi Select(with Legacy `selectText`)",
-                identifier: "multi",
-                selectText: "Option-1\nOption-2",
-                required: false,
-              },
-              {
-                id: multiSelectFieldUuid,
-                type: "multiselect",
-                label: "Multi Select",
-                identifier: "multi-new-format",
-                options: [
-                  {
-                    id: multiSelectOption1Uuid,
-                    label: "Option-1",
-                  },
-                  {
-                    id: multiSelectOption2Uuid,
-                    label: "Option-2",
-                  },
-                ],
-                required: false,
-              },
-              {
-                id: legacySelectFieldUuid,
-                type: "select",
-                label: "Legacy Select",
-                identifier: "test-select",
-                selectText: "Option-1\nOption-2",
-                required: false,
-              },
-              {
-                id: selectFieldUuid,
-                type: "select",
-                label: "Select",
-                identifier: "test-select-new-format",
-                options: [
-                  {
-                    id: selectOption1Uuid,
-                    label: "Option-1",
-                  },
-                  {
-                    id: selectOption2Uuid,
-                    label: "Option-2",
-                  },
-                ],
-                required: false,
-              },
-            ],
-            user: {
-              connect: {
-                id: _user.id,
-              },
-            },
-            name: seededForm.name,
-          },
-        });
-      }
       const user = await prisma.user.findUniqueOrThrow({
         where: { id: _user.id },
         include: userIncludes,
@@ -664,7 +480,94 @@ export const createUsersFixture = (
           }
         }
       }
-      const userFixture = createUserFixture(user, store.page);
+
+      if (scenario.seedRoutingForms) {
+        const firstTeamMembership = await prisma.membership.findFirstOrThrow({
+          where: {
+            userId: _user.id,
+            team: {
+              isOrganization: false,
+            },
+          },
+        });
+        if (!firstTeamMembership) {
+          throw new Error("No sub-team created");
+        }
+        await createRoutingForm({
+          userId: _user.id,
+          teamId: firstTeamMembership.teamId,
+          formType: scenario.seedRoutingFormWithAttributeRouting ? "attributeRouting" : "default",
+          ...(scenario.seedRoutingFormWithAttributeRouting && {
+            attributeRouting: {
+              attributes: [
+                {
+                  name: "Department",
+                  type: "SINGLE_SELECT" as const,
+                  options: ["Engineering", "Sales", "Marketing", "Product", "Design"],
+                },
+                {
+                  name: "Location",
+                  type: "SINGLE_SELECT" as const,
+                  options: ["New York", "London", "Tokyo", "Berlin", "Remote"],
+                },
+                {
+                  name: "Skills",
+                  type: "MULTI_SELECT" as const,
+                  options: ["JavaScript", "React", "Node.js", "Python", "Design", "Sales"],
+                },
+                {
+                  name: "Years of Experience",
+                  type: "NUMBER" as const,
+                },
+                {
+                  name: "Bio",
+                  type: "TEXT" as const,
+                },
+              ],
+              assignments: [
+                {
+                  memberIndex: 0,
+                  attributeValues: {
+                    Location: ["New York"],
+                    Skills: ["JavaScript"],
+                  },
+                },
+                {
+                  memberIndex: 1,
+                  attributeValues: {
+                    Location: ["London"],
+                    Skills: ["React", "JavaScript"],
+                  },
+                },
+              ],
+              teamEvents: [
+                {
+                  title: "Team Sales",
+                  slug: "team-sales",
+                  schedulingType: "ROUND_ROBIN",
+                  assignAllTeamMembers: true,
+                  length: 60,
+                  description: "Team Sales",
+                },
+                {
+                  title: "Team Javascript",
+                  slug: "team-javascript",
+                  schedulingType: "ROUND_ROBIN",
+                  assignAllTeamMembers: true,
+                  length: 60,
+                  description: "Team Javascript",
+                },
+              ],
+            },
+          }),
+        });
+      }
+
+      const finalUser = await prisma.user.findUniqueOrThrow({
+        where: { id: user.id },
+        include: userIncludes,
+      });
+      const userFixture = createUserFixture(finalUser, store.page);
       store.users.push(userFixture);
       return userFixture;
     },
@@ -781,7 +684,7 @@ const createUserFixture = (user: UserWithIncludes, page: Page) => {
     getFirstTeamMembership: async () => {
       const memberships = await prisma.membership.findMany({
         where: { userId: user.id },
-        include: { team: true },
+        include: { team: true, user: true },
       });
 
       const membership = memberships