test: private team test (#11523)

apps/web/components/team/screens/Team.tsx

@@ -49,7 +49,9 @@ const Members = ({ members, teamName }: { members: MemberType[]; teamName: strin
   }
 
   return (
-    <section className="lg:min-w-lg mx-auto flex min-w-full max-w-5xl flex-wrap justify-center gap-x-6 gap-y-6">
+    <section
+      data-testid="team-members-container"
+      className="lg:min-w-lg mx-auto flex min-w-full max-w-5xl flex-wrap justify-center gap-x-6 gap-y-6">
       {members.map((member) => {
         return member.username !== null && <Member key={member.id} member={member} teamName={teamName} />;
       })}

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

@@ -210,7 +210,9 @@ function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }
             {(showMembers.isOn || !team.eventTypes?.length) &&
               (team.isPrivate ? (
                 <div className="w-full text-center">
-                  <h2 className="text-emphasis font-semibold">{t("you_cannot_see_team_members")}</h2>
+                  <h2 data-testid="you-cannot-see-team-members" className="text-emphasis font-semibold">
+                    {t("you_cannot_see_team_members")}
+                  </h2>
                 </div>
               ) : (
                 <Team members={team.members} teamName={team.name} />
@@ -237,6 +239,7 @@ function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }
                       <Button
                         color="minimal"
                         EndIcon={ArrowRight}
+                        data-testid="book-a-team-member-btn"
                         className="dark:hover:bg-darkgray-200"
                         href={{
                           pathname: `${isValidOrgDomain ? "" : "/team"}/${team.slug}`,
@@ -327,17 +330,19 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 
   const safeBio = markdownToSafeHTML(team.bio) || "";
 
-  const members = team.members.map((member) => {
-    return {
-      name: member.name,
-      id: member.id,
-      bio: member.bio,
-      subteams: member.subteams,
-      username: member.username,
-      accepted: member.accepted,
-      safeBio: markdownToSafeHTML(member.bio || ""),
-    };
-  });
+  const members = !team.isPrivate
+    ? team.members.map((member) => {
+        return {
+          name: member.name,
+          id: member.id,
+          bio: member.bio,
+          subteams: member.subteams,
+          username: member.username,
+          accepted: member.accepted,
+          safeBio: markdownToSafeHTML(member.bio || ""),
+        };
+      })
+    : [];
 
   const markdownStrippedBio = stripMarkdown(team?.bio || "");
 

apps/web/playwright/teams.e2e.ts

@@ -176,6 +176,38 @@ test.describe("Teams", () => {
       await prisma.team.delete({ where: { id: team?.id } });
     });
   });
+  test("Can create a private team", async ({ page, users }) => {
+    const ownerObj = { username: "pro-user", name: "pro-user" };
+    const teamMatesObj = [
+      { name: "teammate-1" },
+      { name: "teammate-2" },
+      { name: "teammate-3" },
+      { name: "teammate-4" },
+    ];
+
+    const owner = await users.create(ownerObj, {
+      hasTeam: true,
+      teammates: teamMatesObj,
+      schedulingType: SchedulingType.COLLECTIVE,
+    });
+
+    await owner.apiLogin();
+    const { team } = await owner.getTeam();
+
+    // Mark team as private
+    await page.goto(`/settings/teams/${team.id}/members`);
+    await page.click("[data-testid=make-team-private-check]");
+    await expect(page.locator(`[data-testid=make-team-private-check][data-state="checked"]`)).toBeVisible();
+
+    // Go to Team's page
+    await page.goto(`/team/${team.slug}`);
+    await expect(page.locator('[data-testid="book-a-team-member-btn"]')).toBeHidden();
+
+    // Go to members page
+    await page.goto(`/team/${team.slug}?members=1`);
+    await expect(page.locator('[data-testid="you-cannot-see-team-members"]')).toBeVisible();
+    await expect(page.locator('[data-testid="team-members-container"]')).toBeHidden();
+  });
 
   todo("Create a Round Robin with different leastRecentlyBooked hosts");
   todo("Reschedule a Collective EventType booking");

packages/features/ee/teams/components/MakeTeamPrivateSwitch.tsx

@@ -46,6 +46,7 @@ const MakeTeamPrivateSwitch = ({
         <div className="mt-5 sm:mt-0 sm:self-center">
           <Switch
             disabled={disabled}
+            data-testid="make-team-private-check"
             defaultChecked={isPrivate}
             onCheckedChange={(isChecked) => {
               mutation.mutate({ id: teamId, isPrivate: isChecked });