fix: remove TeamsCTA from teams loading skeleton (#28323)

* fix: resolve duplicate new-team-btn selector in teams E2E test

Remove TeamsCTA from the loading skeleton to prevent duplicate
data-testid='new-team-btn' elements in the DOM during Next.js
streaming SSR. The skeleton's Suspense fallback and the resolved
page content can briefly coexist, causing Playwright's strict
mode to fail when both contain the same test ID.

Also use .first() in the E2E test as a defensive measure.

Co-Authored-By: romitgabani1 <romitgabani1.work@gmail.com>

* fix: assert single new-team-btn element instead of using .first()

Address Cubic AI review feedback: use toHaveCount(1) assertion
to ensure exactly one new-team-btn exists, rather than .first()
which could mask duplicate-element regressions.

Co-Authored-By: romitgabani1 <romitgabani1.work@gmail.com>

* fix: revert test changes, only remove CTA from skeleton

Per user feedback: only change needed is removing TeamsCTA from
the loading skeleton to prevent users without a team plan from
bypassing the upgrade banner via the skeleton CTA.

Co-Authored-By: romitgabani1 <romitgabani1.work@gmail.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Romit
2026-03-08 13:14:30 +05:30
committed by GitHub
co-authored by romitgabani1 Devin AI
parent cfb1489e01
commit 7801266dbe
2 changed files with 3 additions and 12 deletions
@@ -1,19 +1,13 @@
"use client";
import { ShellMainAppDir } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDir";
import { TeamsCTA } from "app/(use-page-wrapper)/(main-nav)/teams/CTA";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { ShellMainAppDir } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDir";
import SkeletonLoaderTeamList from "~/ee/teams/components/SkeletonloaderTeamList";
export const TeamsListSkeleton = () => {
const { t } = useLocale();
return (
<ShellMainAppDir
heading={t("teams")}
subtitle={t("create_manage_teams_collaborative")}
CTA={<TeamsCTA />}>
<ShellMainAppDir heading={t("teams")} subtitle={t("create_manage_teams_collaborative")}>
<SkeletonLoaderTeamList />
</ShellMainAppDir>
);
+1 -4
View File
@@ -1,9 +1,7 @@
import { expect } from "@playwright/test";
import { IS_TEAM_BILLING_ENABLED } from "@calcom/lib/constants";
import { prisma } from "@calcom/prisma";
import { SchedulingType } from "@calcom/prisma/enums";
import { expect } from "@playwright/test";
import { test, todo } from "./lib/fixtures";
import {
bookTimeSlot,
@@ -175,7 +173,6 @@ test.describe("Teams - NonOrg", () => {
await page.goto("/teams");
await test.step("Can create team with same name", async () => {
// Click the new team button
await page.locator("[data-testid=new-team-btn]").click();
await page.waitForLoadState("networkidle");
// Fill team name input (new onboarding-v3 style flow)