Skip to content

Comments

fix: update e2e tests for event types#23322

Merged
Ryukemeister merged 12 commits intomainfrom
update-e2e-tests-for-event-types
Aug 26, 2025
Merged

fix: update e2e tests for event types#23322
Ryukemeister merged 12 commits intomainfrom
update-e2e-tests-for-event-types

Conversation

@Ryukemeister
Copy link
Contributor

What does this PR do?

  • This PR updates e2e test for create event type
  • It also adds test for creating team event type

Video Demo (if applicable):

Screen.Recording.2025-08-25.at.12.29.24.PM.mov

Mandatory Tasks (DO NOT REMOVE)

  • I have self-reviewed the code (A decent size PR without self-review might be rejected).
  • (N/A) I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
  • I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

This can be tested in the examples app

@Ryukemeister Ryukemeister requested a review from a team August 25, 2025 07:10
@Ryukemeister Ryukemeister requested a review from a team as a code owner August 25, 2025 07:10
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Aug 25, 2025

Walkthrough

This PR updates event-types UI to display event.title (replacing the previously shown formatEventSlug), adds data-testid attributes to event-type and team-event-type cards, the EventTypeSettings wrapper, and the two creation panels, and makes minor formatting edits. It adds two Playwright E2E tests covering create/edit/delete flows for individual and team event types (including navigation of vertical tabs and description updates) and introduces helper modules generateRandomText and words used by those tests.

Possibly related PRs

  • feat: atoms e2e tests #22926: Adds/modifies Playwright E2E tests and test helpers under packages/platform/examples/base (overlaps with the new/updated e2e tests and test utilities).

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.


📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between d170f4d and 7ec8085.

📒 Files selected for processing (2)
  • packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts (2 hunks)
  • packages/platform/examples/base/tests/create-team-event-type-atom/create-team-event-type.e2e.ts (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/platform/examples/base/tests/create-team-event-type-atom/create-team-event-type.e2e.ts
  • packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
  • GitHub Check: Production builds / Build Docs
  • GitHub Check: Production builds / Build Web App
  • GitHub Check: Production builds / Build API v2
  • GitHub Check: Production builds / Build Atoms
  • GitHub Check: Production builds / Build API v1
  • GitHub Check: Tests / Unit
  • GitHub Check: Type check / check-types
  • GitHub Check: Linters / lint
✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch update-e2e-tests-for-event-types

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@keithwillcode keithwillcode added core area: core, team members only platform Anything related to our platform plan labels Aug 25, 2025
@vercel
Copy link

vercel bot commented Aug 25, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments
Project Deployment Preview Comments Updated (UTC)
cal Ignored Ignored Aug 26, 2025 2:56pm
cal-eu Ignored Ignored Aug 26, 2025 2:56pm

@dosubot dosubot bot added automated-tests area: unit tests, e2e tests, playwright consumer labels Aug 25, 2025
@graphite-app graphite-app bot requested a review from a team August 25, 2025 07:11
@graphite-app
Copy link

graphite-app bot commented Aug 25, 2025

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (08/25/25)

1 reviewer was added to this PR based on Keith Williams's automation.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/platform/examples/base/src/pages/event-types.tsx (1)

47-52: Prevent Unintended Queries When teamId Is Falsy

The hook useTeamEventTypes(teamId: number) is always issuing a request—even when passed 0, which happens before teams has loaded—and will hit
/organizations/{org}/teams/0/event-types, resulting in 404s or unnecessary network noise.

To address this, we need to:

• Update the hook signature to accept React Query options and default enabled to Boolean(teamId).
packages/platform/atoms/hooks/event-types/public/useTeamEventTypes.ts

import { useQuery, UseQueryOptions } from "react-query";
import { useAtomsContext } from "../../useAtomsContext";

export const QUERY_KEY = "use-team-event-types";
- export const useTeamEventTypes = (teamId: number) => {
+ export const useTeamEventTypes = (
+   teamId: number,
+   options?: UseQueryOptions<any, Error>
+ ) => {
  const { organizationId } = useAtomsContext();
  const pathname = `/organizations/${organizationId}/teams/${teamId}/event-types`;
+
+  return useQuery(
+    [QUERY_KEY, organizationId, teamId],
+    () => fetch(pathname).then(res => res.json()),
+    { enabled: Boolean(teamId), ...options }
+  );
};

• Change both example pages to pass the enabled flag instead of defaulting to 0:
packages/platform/examples/base/src/pages/booking.tsx (line 19) &
packages/platform/examples/base/src/pages/event-types.tsx (line 51)

- const {
-   isLoading: isLoadingTeamEvents,
-   data: teamEventTypes,
-   refetch: refetchTeamEvents,
- } = useTeamEventTypes(teams?.[0]?.id || 0);
+ const teamId = teams?.[0]?.id ?? 0;
+ const {
+   isLoading: isLoadingTeamEvents,
+   data: teamEventTypes,
+   refetch: refetchTeamEvents,
+ } = useTeamEventTypes(teamId, { enabled: Boolean(teamId) });

This ensures no network request is made until a valid teamId is available.

🧹 Nitpick comments (10)
packages/platform/examples/base/src/pages/event-types.tsx (5)

69-84: Remove unused slug formatter and add a stable selector for cards

  • formatEventSlug is computed but never used. Drop it to reduce noise.
  • While the new data-testid="event-type-card" is helpful, tests currently rely on text matching. Add a stable attribute keyed by slug so tests can target the exact card without depending on title case.

Apply:

-                const formatEventSlug = event.slug
-                  .split("-")
-                  .map((item) => `${item[0].toLocaleUpperCase()}${item.slice(1)}`)
-                  .join(" ");
-
                 return (
                   <div
                     data-testid="event-type-card"
+                    data-event-slug={event.slug}
                     onClick={() => {
                       setEventTypeId(event.id);
                       setIsTeamEvent(false);
                     }}
                     className="mx-10 w-[80vw] cursor-pointer rounded-md border-[0.8px] border-black px-10 py-4"
                     key={event.id}>
                     <h1 className="text-lg font-semibold">{event.title}</h1>
                     <p>{`/${event.slug}`}</p>
                     <span className="border-none bg-gray-800 px-2 text-white">{event?.lengthInMinutes}</span>
                   </div>
                 );

98-115: Mirror the cleanup and selector improvement for team event type cards

Same as above: remove the unused formatEventSlug and expose a stable slug-based attribute for tests.

-                const formatEventSlug = event.slug
-                  .split("-")
-                  .map((item) => `${item[0].toLocaleUpperCase()}${item.slice(1)}`)
-                  .join(" ");
-
                 return (
                   <div
                     data-testid="team-event-type-card"
+                    data-event-slug={event.slug}
                     onClick={() => {
                       setEventTypeId(event.id);
                       setIsTeamEvent(true);
                     }}
                     className="mx-10 w-[80vw] cursor-pointer rounded-md border-[0.8px] border-black px-10 py-4"
                     key={event.id}>
                     <h1 className="text-lg font-semibold">{event.title}</h1>
                     <p>{`/${event.slug}`}</p>
                     <span className="border-none bg-gray-800 px-2 text-white">{event?.lengthInMinutes}</span>
                   </div>
                 );

33-44: Console messages OK; consider aligning success/error hooks with a user-visible assertion

The updated console messages are fine. For E2E robustness, consider exposing a toast/snackbar (or a data-testid flag) upon success/error so tests can await a deterministic UI signal instead of relying on timing.


790-797: Good: test ids for creation panels; localize headings

The new data-testid="create-event-type-atom" and data-testid="create-team-event-type-atom" are helpful. However, static headings (“Create Event Type”, “Create Team Event Type”) should use t() per guidelines.

Example:

-  <h1 className="font-semibold">Create Event Type</h1>
+  <h1 className="font-semibold">{t("create_event_type")}</h1>

-  <h1 className="font-semibold">Create Team Event Type</h1>
+  <h1 className="font-semibold">{t("create_team_event_type")}</h1>

Also applies to: 803-824


59-61: Front-end strings should use t()

Directly embedded strings violate the localization guideline for TSX files. Please wrap these with t():

  • Title “EventTypes…”
  • “Loading…”
  • “Team event types”
  • “Validate Form”, “Submit Form”

I can sweep this file and raise a follow-up PR wiring t() and adding missing keys.

Also applies to: 63-63, 95-95, 777-778, 781-783

packages/platform/examples/base/tests/create-team-event-type-atom/create-team-event-type.e2e.ts (2)

21-22: Prefer role-based or explicit test id selectors over .check() on a button

.check() is intended for inputs or elements with role=radio/checkbox. If the UI uses a button to mimic a radio, .check() may be brittle.

Options:

  • If accessible role is present:
-  await page.locator('[data-testid="create-team-event-type-atom"] button[value="COLLECTIVE"]').check();
+  await page.getByRole("radio", { name: /collective/i }).check();
  • Otherwise, just click:
-  await page.locator('[data-testid="create-team-event-type-atom"] button[value="COLLECTIVE"]').check();
+  await page.locator('[data-testid="create-team-event-type-atom"] button[value="COLLECTIVE"]').click();

66-71: Use accessible name for the Delete action

Targeting a tooltip attribute is fragile. Prefer the accessible role/name or a test id.

-  await page.locator('button[type="button"][tooltip="Delete"]').waitFor({ state: "visible" });
-  await page.locator('button[type="button"][tooltip="Delete"]').click();
+  const deleteBtn = page.getByRole("button", { name: /^delete$/i });
+  await deleteBtn.waitFor({ state: "visible" });
+  await deleteBtn.click();
packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts (3)

12-18: Scope selectors to the creation panel to avoid accidental matches and i18n brittleness

  • Scope inputs and buttons within the creation atom.
  • Avoid relying on placeholder/default text that may change with localization.
-  await page.fill('[data-testid="event-type-quick-chat"]', "e2e event");
+  await page.fill('[data-testid="create-event-type-atom"] [data-testid="event-type-quick-chat"]', "e2e event");

-  await page.fill('textarea[placeholder="A quick video meeting."]', "This is an e2e test event description");
+  // Prefer a data-testid on the description input; if unavailable, keep this as a fallback but scope it:
+  await page.fill('[data-testid="create-event-type-atom"] textarea[placeholder="A quick video meeting."]', "This is an e2e test event description");

-  await page.waitForSelector('button[type="submit"]:has-text("Continue")', { state: "visible" });
-  await page.click('button[type="submit"]:has-text("Continue")');
+  await page.waitForSelector(
+    '[data-testid="create-event-type-atom"] button[type="submit"]:has-text("Continue")',
+    { state: "visible" }
+  );
+  await page.click('[data-testid="create-event-type-atom"] button[type="submit"]:has-text("Continue")');

22-25: Avoid title-dependent card selection; use slug or a stable attribute

Matching by “E2e Event” ties the test to title-casing. Prefer slug-based targeting.

-  await page.locator('[data-testid="event-type-card"] h1:has-text("E2e Event")').click();
+  await page
+    .getByTestId("event-type-card")
+    .filter({ has: page.locator('p:has-text("/e2e-event")') })
+    .click();

If you add data-event-slug on the page:

+  await page.locator('[data-testid="event-type-card"][data-event-slug="e2e-event"]').click();

55-60: Prefer accessible role/name or test id for destructive actions

The tooltip attribute is a fragile selector.

-  await page.locator('button[type="button"][tooltip="Delete"]').waitFor({ state: "visible" });
-  await page.locator('button[type="button"][tooltip="Delete"]').click();
+  const deleteBtn = page.getByRole("button", { name: /^delete$/i });
+  await deleteBtn.waitFor({ state: "visible" });
+  await deleteBtn.click();
📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 58930c4 and d7fc073.

📒 Files selected for processing (3)
  • packages/platform/examples/base/src/pages/event-types.tsx (6 hunks)
  • packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts (1 hunks)
  • packages/platform/examples/base/tests/create-team-event-type-atom/create-team-event-type.e2e.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.ts

📄 CodeRabbit inference engine (.cursor/rules/review.mdc)

**/*.ts: For Prisma queries, only select data you need; never use include, always use select
Ensure the credential.key field is never returned from tRPC endpoints or APIs

Files:

  • packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts
  • packages/platform/examples/base/tests/create-team-event-type-atom/create-team-event-type.e2e.ts
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/review.mdc)

Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js .utc() in hot paths like loops

Files:

  • packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts
  • packages/platform/examples/base/tests/create-team-event-type-atom/create-team-event-type.e2e.ts
  • packages/platform/examples/base/src/pages/event-types.tsx
**/*.{ts,tsx,js,jsx}

⚙️ CodeRabbit configuration file

Flag default exports and encourage named exports. Named exports provide better tree-shaking, easier refactoring, and clearer imports. Exempt main components like pages, layouts, and components that serve as the primary export of a module.

Files:

  • packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts
  • packages/platform/examples/base/tests/create-team-event-type-atom/create-team-event-type.e2e.ts
  • packages/platform/examples/base/src/pages/event-types.tsx
**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/review.mdc)

Always use t() for text localization in frontend code; direct text embedding should trigger a warning

Files:

  • packages/platform/examples/base/src/pages/event-types.tsx
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: Type check / check-types
  • GitHub Check: Tests / Unit
🔇 Additional comments (1)
packages/platform/examples/base/src/pages/event-types.tsx (1)

121-123: Nice: dedicated wrapper test id for settings

data-testid="event-type-settings-atom" makes the settings pane reliably targetable in E2E. LGTM.

await page.locator('[data-testid="dialog-creation"]').waitFor({ state: "visible" });
await page.locator('[data-testid="dialog-confirmation"]').click();

await expect(page.locator("body")).toBeVisible();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Verify the event is actually deleted

Replace the generic body visibility assertion with a check that the specific card for /e2e-event is gone.

-  await expect(page.locator("body")).toBeVisible();
+  await expect(
+    page.getByTestId("event-type-card").filter({ has: page.locator('p:has-text("/e2e-event")') })
+  ).toHaveCount(0);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
await expect(page.locator("body")).toBeVisible();
await expect(
page.getByTestId("event-type-card").filter({ has: page.locator('p:has-text("/e2e-event")') })
).toHaveCount(0);
🤖 Prompt for AI Agents
In
packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts
around line 61, replace the generic await
expect(page.locator("body")).toBeVisible(); with a targeted assertion that the
specific event card for "/e2e-event" no longer exists; locate the card (by its
text, data-testid, or unique selector that contains "/e2e-event") and assert it
is absent (e.g., not visible or has count 0) so the test verifies the event was
actually deleted.

Comment on lines 27 to 31
await expect(page.locator('h1:has-text("Platform Team E2e Event")')).toBeVisible();
await expect(page.locator('p:has-text("/platform-team-e2e-event")')).toBeVisible();

await page.locator('[data-testid="team-event-type-card"] h1:has-text("Platform team e2e event")').click();

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Title-case mismatch makes the test flaky; target by slug instead

You assert the title in Title Case but click a card matching the lowercased input. This can fail depending on how event.title is normalized. Use the slug as a stable selector.

Apply:

-  await expect(page.locator('h1:has-text("Platform Team E2e Event")')).toBeVisible();
-  await expect(page.locator('p:has-text("/platform-team-e2e-event")')).toBeVisible();
-
-  await page.locator('[data-testid="team-event-type-card"] h1:has-text("Platform team e2e event")').click();
+  await expect(page.locator('p:has-text("/platform-team-e2e-event")')).toBeVisible();
+  await page
+    .getByTestId("team-event-type-card")
+    .filter({ has: page.locator('p:has-text("/platform-team-e2e-event")') })
+    .click();

If you accept the page changes suggested to expose data-event-slug, this becomes even cleaner:

+  await page.locator('[data-testid="team-event-type-card"][data-event-slug="platform-team-e2e-event"]').click();

Also applies to: 30-31

🤖 Prompt for AI Agents
In
packages/platform/examples/base/tests/create-team-event-type-atom/create-team-event-type.e2e.ts
around lines 27 to 31, the test targets the card by a title-case h1 which can be
flaky due to normalization; change the selector to target a stable slug
attribute instead (e.g., use data-event-slug or data-testid including the slug)
so the click and assertions use the event slug selector; update both occurrences
on lines 30-31 to click and assert via the slug-based data attribute (add the
attribute to the page/component if not present).

await page.locator('[data-testid="dialog-creation"]').waitFor({ state: "visible" });
await page.locator('[data-testid="dialog-confirmation"]').click();

await expect(page.locator("body")).toBeVisible();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Assert actual deletion instead of generic “body visible”

Confirm the specific card is gone to make the test meaningful and resilient.

-  await expect(page.locator("body")).toBeVisible();
+  await expect(
+    page.getByTestId("team-event-type-card").filter({ has: page.locator('p:has-text("/platform-team-e2e-event")') })
+  ).toHaveCount(0);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
await expect(page.locator("body")).toBeVisible();
// …
// instead of a generic “body visible” check:
await expect(
page.getByTestId("team-event-type-card")
.filter({ has: page.locator('p:has-text("/platform-team-e2e-event")') })
).toHaveCount(0);
// …

hbjORbj
hbjORbj previously approved these changes Aug 25, 2025
Copy link
Contributor

@hbjORbj hbjORbj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love it

@hbjORbj hbjORbj enabled auto-merge (squash) August 25, 2025 07:47
@github-actions
Copy link
Contributor

github-actions bot commented Aug 25, 2025

E2E results are ready!

Copy link
Contributor

@anikdhabal anikdhabal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Test is failing

@github-actions github-actions bot marked this pull request as draft August 25, 2025 10:51
auto-merge was automatically disabled August 25, 2025 10:51

Pull request was converted to draft

@Ryukemeister Ryukemeister marked this pull request as ready for review August 26, 2025 08:05
@dosubot dosubot bot added the event-types area: event types, event-types label Aug 26, 2025
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

♻️ Duplicate comments (1)
packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts (1)

63-63: Verify the event is actually deleted (assert card absence)

Replace the generic body visibility check with a targeted assertion that the specific event card (by slug) is gone.

-  await expect(page.locator("body")).toBeVisible();
+  await expect(
+    page.getByTestId("event-type-card").filter({ has: page.locator('p:has-text("/individual-e2e-event")') })
+  ).toHaveCount(0);
🧹 Nitpick comments (9)
packages/platform/examples/base/src/lib/generateRandomText.ts (3)

1-4: Remove redundant aliasing of words import

No need to alias and then reassign. Import words directly and drop the extra local assignment.

-import { words as randomWords } from "./words";
+import { words } from "./words";
 
 export function generateRandomText(): string {
-  const words = randomWords;

7-21: Avoid repeated string concatenation; build tokens and join

For small strings this is fine, but constructing an array of tokens and joining improves clarity and avoids quadratic concatenation costs.

-  let result = "";
-
-  for (let i = 0; i < randomLength; i++) {
-    const randomWord = words[Math.floor(Math.random() * words.length)];
-    if (i === 0) {
-      result += randomWord.charAt(0).toUpperCase() + randomWord.slice(1);
-    } else {
-      result += ` ${randomWord}`;
-    }
-  }
-
-  result += ".";
-
-  return result;
+  const tokens: string[] = Array.from({ length: randomLength }, () => {
+    return words[Math.floor(Math.random() * words.length)];
+  });
+  if (tokens.length > 0) {
+    tokens[0] = tokens[0].charAt(0).toUpperCase() + tokens[0].slice(1);
+  }
+  return `${tokens.join(" ")}.`;

6-6: Optionally allow deterministic output for test reproducibility

If you ever need to assert on the generated description, consider a variant that accepts { min = 5, max = 24, rng = Math.random } so tests can inject a seeded RNG. No action needed now; just a consideration if future tests depend on the text itself.

packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts (6)

16-16: Prefer stable selectors over placeholder text

Placeholders can change (copy tweaks, i18n). Use the name attribute you already rely on later.

-  await page.fill('textarea[placeholder="A quick video meeting."]', "This is an e2e test event description");
+  await page.fill('textarea[name="description"]', "This is an e2e test event description");

18-21: Wait for network to settle after submitting the creation form

A brief network idle wait reduces flakiness before asserting on the new page content.

   await page.waitForSelector('button[type="submit"]:has-text("Continue")', { state: "visible" });
   await page.click('button[type="submit"]:has-text("Continue")');
+  await page.waitForLoadState("networkidle");
 
   await expect(page.locator('h1:has-text("Individual e2e event")')).toBeVisible();

24-27: Target the card by its slug to avoid text/casing brittleness

Card titles can change or differ in casing. Anchoring the click via the slug on the same card is more robust.

-  await page.locator('[data-testid="event-type-card"] h1:has-text("Individual e2e event")').click();
+  await page
+    .getByTestId("event-type-card")
+    .filter({ has: page.locator('p:has-text("/individual-e2e-event")') })
+    .click();

28-45: Make tab navigation assertions more stateful

You assert visibility then click each tab, which is fine. For stronger coverage and less flake, also assert the tab became active (e.g., aria-selected="true") or that an expected panel region became visible for each tab.

If helpful, I can propose exact getByRole('tab', { name: '...' }) + toHaveAttribute('aria-selected','true') assertions for each tab.


46-49: Store the generated text; wait for save to settle

Saving the generated text in a variable helps with potential follow-up asserts/debugging. Also add a brief settle wait after clicking Update.

-  await page.fill('textarea[name="description"]', generateRandomText());
-
-  await page.locator('[data-testid="update-eventtype"]').click();
+  const updatedDescription = generateRandomText();
+  await page.fill('textarea[name="description"]', updatedDescription);
+  await page.getByTestId("update-eventtype").click();
+  await page.waitForLoadState("networkidle");

57-61: Scope the Delete action to the settings pane and wait for dialog close

Scoping avoids accidental clicks if multiple Delete buttons exist. Also wait for the dialog to detach after confirming.

-  await page.locator('button[type="button"][tooltip="Delete"]').waitFor({ state: "visible" });
-  await page.locator('button[type="button"][tooltip="Delete"]').click();
+  const settingsPane = page.getByTestId("event-type-settings-atom");
+  await expect(settingsPane).toBeVisible();
+  await settingsPane.getByRole("button", { name: "Delete" }).click();
 
-  await page.locator('[data-testid="dialog-creation"]').waitFor({ state: "visible" });
-  await page.locator('[data-testid="dialog-confirmation"]').click();
+  await page.getByTestId("dialog-creation").waitFor({ state: "visible" });
+  await page.getByTestId("dialog-confirmation").click();
+  await page.getByTestId("dialog-creation").waitFor({ state: "detached" });
📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between d7fc073 and af22728.

📒 Files selected for processing (4)
  • packages/platform/examples/base/src/lib/generateRandomText.ts (1 hunks)
  • packages/platform/examples/base/src/lib/words.ts (1 hunks)
  • packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts (2 hunks)
  • packages/platform/examples/base/tests/create-team-event-type-atom/create-team-event-type.e2e.ts (1 hunks)
✅ Files skipped from review due to trivial changes (1)
  • packages/platform/examples/base/src/lib/words.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/platform/examples/base/tests/create-team-event-type-atom/create-team-event-type.e2e.ts
🧰 Additional context used
📓 Path-based instructions (3)
**/*.ts

📄 CodeRabbit inference engine (.cursor/rules/review.mdc)

**/*.ts: For Prisma queries, only select data you need; never use include, always use select
Ensure the credential.key field is never returned from tRPC endpoints or APIs

Files:

  • packages/platform/examples/base/src/lib/generateRandomText.ts
  • packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/review.mdc)

Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js .utc() in hot paths like loops

Files:

  • packages/platform/examples/base/src/lib/generateRandomText.ts
  • packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts
**/*.{ts,tsx,js,jsx}

⚙️ CodeRabbit configuration file

Flag default exports and encourage named exports. Named exports provide better tree-shaking, easier refactoring, and clearer imports. Exempt main components like pages, layouts, and components that serve as the primary export of a module.

Files:

  • packages/platform/examples/base/src/lib/generateRandomText.ts
  • packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts
🧬 Code graph analysis (2)
packages/platform/examples/base/src/lib/generateRandomText.ts (1)
packages/platform/examples/base/src/lib/words.ts (1)
  • words (1-68)
packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts (1)
packages/platform/examples/base/src/lib/generateRandomText.ts (1)
  • generateRandomText (3-21)
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: Install dependencies / Yarn install & cache
🔇 Additional comments (1)
packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts (1)

3-3: Good: shared helper import (named export) improves reuse

Importing generateRandomText from src/lib keeps tests DRY and aligns with our “named exports” guideline.

Comment on lines +53 to +55
await page.locator('[data-testid="event-type-card"] h1:has-text("E2e Event")').click();

await expect(page.locator('[data-testid="event-type-settings-atom"]')).toBeVisible();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Bug: Clicking non-existent/mismatched title ("E2e Event")

You created “Individual e2e event” but later click a card with title “E2e Event”. This is likely to fail or match the wrong element. Click the card scoped by its slug instead (same approach as earlier).

-  await page.locator('[data-testid="event-type-card"] h1:has-text("E2e Event")').click();
+  await page
+    .getByTestId("event-type-card")
+    .filter({ has: page.locator('p:has-text("/individual-e2e-event")') })
+    .click();

Run this to ensure no other tests rely on the “E2e Event” text:


🏁 Script executed:

#!/bin/bash
# Search for case-sensitive uses of "E2e Event" across the repo with context
rg -n -S -C2 '\bE2e Event\b'

Length of output: 738


Fix click selector to use slug instead of incorrect title

The test sets up an event type with slug /individual-e2e-event but then clicks a card titled “E2e Event”, which doesn’t match and will lead to flaky or failing tests. No other occurrences of “E2e Event” were found in the repo, so it’s safe to replace this locator.

• File needing update:

  • packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts, line 53

Proposed change:

-  await page.locator('[data-testid="event-type-card"] h1:has-text("E2e Event")').click();
+  await page
+    .getByTestId("event-type-card")
+    .filter({ has: page.locator('p:has-text("/individual-e2e-event")') })
+    .click();
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
await page.locator('[data-testid="event-type-card"] h1:has-text("E2e Event")').click();
await expect(page.locator('[data-testid="event-type-settings-atom"]')).toBeVisible();
await page
.getByTestId("event-type-card")
.filter({ has: page.locator('p:has-text("/individual-e2e-event")') })
.click();
await expect(page.locator('[data-testid="event-type-settings-atom"]')).toBeVisible();
🤖 Prompt for AI Agents
In
packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts
around lines 53 to 55, the test clicks a card by title "E2e Event" but the
created event uses slug "/individual-e2e-event", causing a mismatch; update the
locator to target the card using the slug (e.g. selector that matches
data-testid or attribute containing "individual-e2e-event") so the test reliably
clicks the correct event-type card and then assert the settings atom is visible.

@Ryukemeister Ryukemeister merged commit d49843d into main Aug 26, 2025
63 of 65 checks passed
@Ryukemeister Ryukemeister deleted the update-e2e-tests-for-event-types branch August 26, 2025 16:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

automated-tests area: unit tests, e2e tests, playwright consumer core area: core, team members only event-types area: event types, event-types platform Anything related to our platform plan ready-for-e2e

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants