feat: add e2e tests for insights charts by eunjae-lee · Pull Request #23777 · calcom/cal.com

eunjae-lee · 2025-09-11T17:32:59Z

What does this PR do?

Adds comprehensive e2e tests for ChartCard components on the insights page to verify that charts render correctly with their expected titles. This is a bare minimum test to see if tRPC calls for the charts fail or not.

Requested by: @eunjae-lee
Link to Devin run: https://app.devin.ai/sessions/88f67fafda5344e19b0ae5b4053bc593

Test Coverage

This PR adds three test scenarios:

Full chart rendering test - Verifies all 16 ChartCard components render with correct titles

How should this be tested?

Testing steps:

Run the new tests: PLAYWRIGHT_HEADLESS=1 yarn e2e insights-chartcard.e2e.ts
Verify all tests pass consistently across multiple runs
Manually check that the chart titles in the test match actual rendered text on /insights
Verify h2.text-emphasis selectors work correctly in the browser

Expected behavior:

All ChartCard components should be visible with correct titles

Mandatory Tasks

I have self-reviewed the code
N/A - No documentation changes required
I confirm automated tests are in place that prove my fix is effective or that my feature works ⚠️ Tests need verification due to local environment issues

- Test that all ChartCard components render with expected titles - Test graceful handling of TRPC call failures - Test ChartCard rendering for organization users - Wait for page load and TRPC calls before checking chart presence - Use text-based selectors to find ChartCard titles in h2 elements - Remove page.waitForTimeout() calls to comply with ESLint rules Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

devin-ai-integration · 2025-09-11T17:33:02Z

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

Address comments on this PR that start with 'DevinAI'.
Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

Disable automatic comment and CI monitoring

coderabbitai · 2025-09-11T17:33:06Z

Walkthrough

Adds a Playwright E2E test verifying the /insights page renders 16 ChartCard panels by asserting expected h2 titles within panel-card elements.
Updates PanelCard to include data-testid="panel-card" on its root div.
Modifies HighestRatedMembersTable and LowestRatedMembersTable to always render ChartCard when isSuccess and data are present, removing the data.length > 0 guard (zero-length arrays now render an empty table within the card).
No changes to exported/public APIs.

Possibly related PRs

refactor: extract PanelCard from ChartCard for reusability #23360: Refactors ChartCard/PanelCard relationship by extracting and exporting PanelCard; directly related to PanelCard changes and ChartCard-using components.
feat: add collapsible support to PanelCard component #23366: Introduces collapsible props/behavior to PanelCard; overlaps with this PR’s modification to PanelCard.
fix: update styles of charts on /insights #22557: Changes within insights components (HighestRatedMembersTable and LowestRatedMembersTable); overlaps with the same files updated here.

Pre-merge checks (2 passed, 1 warning)

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The PR title "feat: add e2e tests for insights charts" is concise and directly summarizes the primary change—adding end-to-end tests for the insights ChartCard components—so it communicates the main intent clearly to reviewers.
Description Check	✅ Passed	The PR description is directly related to the changeset and documents the purpose, test scenarios, how to run the tests, a Devin run link, and the note that tests need verification, so it meets the lenient requirement for this check.

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

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 94a5008 and fb270b7.

📒 Files selected for processing (4)

apps/web/playwright/insights.e2e.ts (1 hunks)
packages/features/insights/components/booking/HighestRatedMembersTable.tsx (1 hunks)
packages/features/insights/components/booking/LowestRatedMembersTable.tsx (1 hunks)
packages/ui/components/card/PanelCard.tsx (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:

apps/web/playwright/insights.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:

apps/web/playwright/insights.e2e.ts
packages/ui/components/card/PanelCard.tsx
packages/features/insights/components/booking/HighestRatedMembersTable.tsx
packages/features/insights/components/booking/LowestRatedMembersTable.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:

apps/web/playwright/insights.e2e.ts
packages/ui/components/card/PanelCard.tsx
packages/features/insights/components/booking/HighestRatedMembersTable.tsx
packages/features/insights/components/booking/LowestRatedMembersTable.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/ui/components/card/PanelCard.tsx
packages/features/insights/components/booking/HighestRatedMembersTable.tsx
packages/features/insights/components/booking/LowestRatedMembersTable.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). (17)

GitHub Check: Detect changes
GitHub Check: Codacy Static Code Analysis
GitHub Check: Detect changes
GitHub Check: Codacy Static Code Analysis
GitHub Check: Detect changes
GitHub Check: Codacy Static Code Analysis
GitHub Check: Codacy Static Code Analysis
GitHub Check: Check for E2E label
GitHub Check: Codacy Static Code Analysis
GitHub Check: Check for E2E label
GitHub Check: Codacy Static Code Analysis
GitHub Check: Check for E2E label
GitHub Check: Codacy Static Code Analysis
GitHub Check: Check for E2E label
GitHub Check: Codacy Static Code Analysis
GitHub Check: Codacy Static Code Analysis
GitHub Check: Codacy Static Code Analysis

🔇 Additional comments (4)

packages/ui/components/card/PanelCard.tsx (1)

48-48: LGTM! Good addition for test support.

The data-testid="panel-card" attribute enables proper E2E testing of panel cards without affecting the component's functionality or visual appearance.

apps/web/playwright/insights.e2e.ts (1)

241-274: LGTM! Comprehensive E2E test for ChartCard rendering.

The test properly sets up the required data (users, teams, memberships) and verifies all 16 expected ChartCard components are rendered with their correct titles. The test leverages the new data-testid="panel-card" attribute and h2 selectors to accurately locate and validate each chart component.

packages/features/insights/components/booking/LowestRatedMembersTable.tsx (1)

30-34: LGTM! Consistent rendering behavior for empty data.

Removing the data.length > 0 check ensures the ChartCard always renders when data is available, providing a consistent UI even with empty results. This aligns with the E2E test expectation of always having 16 ChartCard components visible.

packages/features/insights/components/booking/HighestRatedMembersTable.tsx (1)

30-34: LGTM! Consistent rendering behavior for empty data.

Similar to LowestRatedMembersTable, this change ensures the ChartCard renders unconditionally when data exists, maintaining consistent UI behavior and supporting the E2E test requirements.

✨ Finishing touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch devin/1757611521-insights-chartcard-e2e-tests

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

vercel · 2025-09-11T17:41:08Z

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

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
cal	Ignored			Sep 15, 2025 7:59am
cal-eu	Ignored			Sep 15, 2025 7:59am

github-actions · 2025-09-12T08:47:01Z

E2E results are ready!

Workflow #78085.1 latest results

pull-request-size bot added the size/L label Sep 11, 2025

keithwillcode added consumer core area: core, team members only labels Sep 11, 2025

clean up e2e tests

22dc81a

pull-request-size bot removed the size/L label Sep 11, 2025

pull-request-size bot added the size/M label Sep 11, 2025

vercel bot deployed to Preview – dev September 11, 2025 18:09 View deployment

eunjae-lee added 2 commits September 12, 2025 09:52

Merge branch 'main' into devin/1757611521-insights-chartcard-e2e-tests

7a24018

fix titles

e43f563

vercel bot deployed to Preview – dev September 12, 2025 08:08 View deployment

still render charts if no data

fb270b7

eunjae-lee added the ready-for-e2e label Sep 12, 2025

eunjae-lee changed the title ~~feat: add e2e tests for insights ChartCard components~~ feat: add e2e tests for insights charts Sep 12, 2025

vercel bot deployed to Preview – dev September 12, 2025 08:26 View deployment

eunjae-lee marked this pull request as ready for review September 12, 2025 13:16

eunjae-lee requested review from a team as code owners September 12, 2025 13:16

dosubot bot added automated-tests area: unit tests, e2e tests, playwright insights area: insights, analytics labels Sep 12, 2025

Merge branch 'main' into devin/1757611521-insights-chartcard-e2e-tests

9ea9148

sean-brydon approved these changes Sep 15, 2025

View reviewed changes

vercel bot deployed to Preview – dev September 15, 2025 08:15 View deployment

eunjae-lee merged commit 0332118 into main Sep 15, 2025
41 checks passed

eunjae-lee deleted the devin/1757611521-insights-chartcard-e2e-tests branch September 15, 2025 09:00

coderabbitai bot mentioned this pull request Sep 20, 2025

fix: few more e2e flakes #23966

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

feat: add e2e tests for insights charts#23777

feat: add e2e tests for insights charts#23777
eunjae-lee merged 6 commits intomainfrom
devin/1757611521-insights-chartcard-e2e-tests

eunjae-lee commented Sep 11, 2025 •

edited

Loading

Uh oh!

devin-ai-integration bot commented Sep 11, 2025

Uh oh!

coderabbitai bot commented Sep 11, 2025 •

edited

Loading

Uh oh!

vercel bot commented Sep 11, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 12, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

Conversation

eunjae-lee commented Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Test Coverage

How should this be tested?

Mandatory Tasks

Uh oh!

devin-ai-integration bot commented Sep 11, 2025

🤖 Devin AI Engineer

Uh oh!

coderabbitai bot commented Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Possibly related PRs

Pre-merge checks (2 passed, 1 warning)

Uh oh!

vercel bot commented Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

E2E results are ready!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

eunjae-lee commented Sep 11, 2025 •

edited

Loading

coderabbitai bot commented Sep 11, 2025 •

edited

Loading

vercel bot commented Sep 11, 2025 •

edited

Loading

github-actions bot commented Sep 12, 2025 •

edited

Loading