test: added team & user having same name test (#10868)

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

apps/web/pages/[user].tsx

@@ -98,7 +98,7 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
           )}>
           <div className="mb-8 text-center">
             <Avatar imageSrc={profile.image} size="xl" alt={profile.name} />
-            <h1 className="font-cal text-emphasis mb-1 text-3xl">
+            <h1 className="font-cal text-emphasis mb-1 text-3xl" data-testid="name-title">
               {profile.name}
               {user.verified && (
                 <Verified className=" mx-1 -mt-1 inline h-6 w-6 fill-blue-500 text-white dark:text-black" />

apps/web/pages/team/[slug].tsx

@@ -182,7 +182,7 @@ function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }
               size="lg"
             />
           </div>
-          <p className="font-cal  text-emphasis mb-2 text-2xl tracking-wider">
+          <p className="font-cal  text-emphasis mb-2 text-2xl tracking-wider" data-testid="team-name">
             {team.parent && `${team.parent.name} `}
             {teamName}
           </p>

apps/web/playwright/fixtures/users.ts

@@ -439,12 +439,18 @@ type CustomUserOptsKeys = "username" | "password" | "completedOnboarding" | "loc
 type CustomUserOpts = Partial<Pick<Prisma.User, CustomUserOptsKeys>> & {
   timeZone?: TimeZoneEnum;
   eventTypes?: SupportedTestEventTypes[];
+  // ignores adding the worker-index after username
+  useExactUsername?: boolean;
 };
 
 // creates the actual user in the db.
 const createUser = (workerInfo: WorkerInfo, opts?: CustomUserOpts | null): PrismaType.UserCreateInput => {
   // build a unique name for our user
-  const uname = `${opts?.username || "user"}-${workerInfo.workerIndex}-${Date.now()}`;
+  const uname =
+    opts?.useExactUsername && opts?.username
+      ? opts.username
+      : `${opts?.username || "user"}-${workerInfo.workerIndex}-${Date.now()}`;
+
   return {
     username: uname,
     name: opts?.name,

apps/web/playwright/teams.e2e.ts

@@ -135,6 +135,48 @@ test.describe("Teams", () => {
     expect(teamMatesObj.some(({ name }) => name === chosenUser)).toBe(true);
     // TODO: Assert whether the user received an email
   });
+  test("Can create team with same name as user", async ({ page, users }) => {
+    // Name to be used for both user and team
+    const uniqueName = "test-unique-name";
+    const ownerObj = { username: uniqueName, name: uniqueName, useExactUsername: true };
+
+    const user = await users.create(ownerObj);
+    await user.apiLogin();
+    await page.goto("/teams");
+
+    await test.step("Can create team with same name", async () => {
+      // Click text=Create Team
+      await page.locator("text=Create Team").click();
+      await page.waitForURL("/settings/teams/new");
+      // Fill input[name="name"]
+      await page.locator('input[name="name"]').fill(uniqueName);
+      // Click text=Continue
+      await page.locator("text=Continue").click();
+      await page.waitForURL(/\/settings\/teams\/(\d+)\/onboard-members$/i);
+      // Click text=Continue
+      await page.locator("text=Publish team").click();
+      await page.waitForURL(/\/settings\/teams\/(\d+)\/profile$/i);
+    });
+
+    await test.step("Can access user and team with same slug", async () => {
+      // Go to team page and confirm name
+      const teamUrl = `/team/${uniqueName}`;
+      await page.goto(teamUrl);
+      await page.waitForURL(teamUrl);
+      await expect(page.locator("[data-testid=team-name]")).toHaveText(uniqueName);
+
+      // Go to user page and confirm name
+      const userUrl = `/${uniqueName}`;
+      await page.goto(userUrl);
+      await page.waitForURL(userUrl);
+      await expect(page.locator("[data-testid=name-title]")).toHaveText(uniqueName);
+
+      // cleanup team
+      const team = await prisma.team.findFirst({ where: { slug: uniqueName } });
+      await prisma.team.delete({ where: { id: team?.id } });
+    });
+  });
+
   todo("Create a Round Robin with different leastRecentlyBooked hosts");
   todo("Reschedule a Collective EventType booking");
   todo("Reschedule a Round Robin EventType booking");