Skip to content

E2E/Playwright: Clickable link in plugin tooltip#36070

Open
saturninoabril wants to merge 1 commit intomasterfrom
add-e2e-to-pluginlinktooltip
Open

E2E/Playwright: Clickable link in plugin tooltip#36070
saturninoabril wants to merge 1 commit intomasterfrom
add-e2e-to-pluginlinktooltip

Conversation

@saturninoabril
Copy link
Copy Markdown
Contributor

@saturninoabril saturninoabril commented Apr 14, 2026

Summary

  • Added regression tests for the plugin link tooltip (PluginLinkTooltip) to ensure tooltip interactivity and localization work correctly.
  • Bumped demo plugin references from v0.11.0 to v0.11.1 which includes clickable elements in its LinkTooltip component.

Note: Requires demo plugin: mattermost/mattermost-plugin-demo#209

  • Add three new Playwright tests:
    • Tooltip appears on link hover without blocking page interaction (pointer-events pattern)
    • Clickable links inside the tooltip respond to clicks (title, shared-via, description links)
    • Tooltip renders text in the user's configured locale (Spanish)
  • And unit test to enhance existing test to verify tooltip content remains interactive and links inside it are clickable

Ticket Link

None, ref: #36056 (comment)

Release Note

NONE

Change Impact: 🟢 Low

Regression Risk: Changes are entirely confined to E2E test infrastructure and test files with no modifications to production code. Demo plugin version updates only affect test artifact dependencies, and new test assertions verify existing functionality without changing production behavior.

QA Recommendation: Manual QA is not required. Changes are test-focused with full automated coverage. Standard E2E test execution will validate the new test cases and version updates.

@mm-cloud-bot mm-cloud-bot added the release-note-none Denotes a PR that doesn't merit a release note. label Apr 14, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Apr 14, 2026

📝 Walkthrough

Walkthrough

The PR updates the demo plugin artifact version from 0.11.0 to 0.11.1 across multiple e2e test files and adds new Playwright end-to-end tests for plugin link tooltip functionality, including interaction behavior and localization verification.

Changes

Cohort / File(s) Summary
Demo Plugin Artifact Version Updates
e2e-tests/cypress/tests/utils/plugins.js, e2e-tests/playwright/specs/functional/plugins/demo_plugin/helpers.ts, e2e-tests/playwright/specs/functional/plugins/demo_plugin_installation.spec.ts
Updated demo plugin version from 0.11.0 to 0.11.1, including corresponding artifact URLs and filenames across test files and helpers.
Plugin Link Tooltip Test Spec
e2e-tests/playwright/specs/functional/plugins/demo_plugin/webapp/plugin_link_tooltip.spec.ts
Added new Playwright spec file with three test cases: tooltip display without page interaction blockage, clickable links inside tooltip with popup interaction, and localized tooltip content in Spanish locale.
Component Test Assertions
webapp/channels/src/components/plugin_link_tooltip/index.test.tsx
Enhanced TestLinkTooltip component to render additional interactive content when URL contains 'tooltip' and added assertions verifying tooltip overlay interactivity and clickable link behavior.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested labels

Changelog/Not Needed

Suggested reviewers

  • lieut-data
🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ 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%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title 'E2E/Playwright: Clickable link in plugin tooltip' clearly and specifically describes the main change—adding end-to-end tests for a clickable link feature within the plugin tooltip. It maps directly to the significant addition of new Playwright test specs.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch add-e2e-to-pluginlinktooltip

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

Copy link
Copy Markdown
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

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@e2e-tests/playwright/specs/functional/plugins/demo_plugin/webapp/plugin_link_tooltip.spec.ts`:
- Around line 106-112: The test currently asserts popup.url() immediately after
capturing the popup (popupPromise) which can be "about:blank" and flaky; after
awaiting the popup (variable popup) from channelsPage.page.waitForEvent('popup')
you should wait for navigation completion by calling await popup.waitForURL()
(or use await expect(popup).toHaveURL(...)) before asserting the destination URL
(the titleLink click remains the trigger). Update the code around popupPromise,
titleLink.click(), and the popup assertion to first await popup.waitForURL() and
then assert the URL contains 'example.com'.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: b4a1b6e3-3641-4cb5-884b-173fec1fd16d

📥 Commits

Reviewing files that changed from the base of the PR and between e7b60bb and 4410871.

📒 Files selected for processing (5)
  • e2e-tests/cypress/tests/utils/plugins.js
  • e2e-tests/playwright/specs/functional/plugins/demo_plugin/helpers.ts
  • e2e-tests/playwright/specs/functional/plugins/demo_plugin/webapp/plugin_link_tooltip.spec.ts
  • e2e-tests/playwright/specs/functional/plugins/demo_plugin_installation.spec.ts
  • webapp/channels/src/components/plugin_link_tooltip/index.test.tsx

Comment on lines +106 to +112
const popupPromise = channelsPage.page.waitForEvent('popup');
await titleLink.click();
const popup = await popupPromise;

// * Verify a new tab opens with the expected URL
expect(popup.url()).toContain('example.com');
await popup.close();
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🌐 Web query:

In Playwright, can popup.url() still be "about:blank" immediately after page.waitForEvent('popup')? What is the recommended way to assert popup destination URL reliably?

💡 Result:

Yes, popup.url can be "about:blank" immediately after page.waitForEvent('popup'), because the popup event fires as soon as the new page is created (often starting at about:blank), before any navigation to the destination URL completes. This is commonly seen with window.open or target="_blank" links that navigate after opening, and is reported across browsers, especially in headless mode for certain cases like PDFs. The recommended way to reliably assert the popup destination URL is: 1. Await the popup promise from page.waitForEvent('popup'). 2. Call await popup.waitForLoadState('domcontentloaded') or await popup.waitForURL(expectedUrl) on the popup page to wait for navigation and loading to complete. 3. Then assert with expect(popup).toHaveURL(expectedUrl). Official Playwright documentation explicitly shows this pattern: const popupPromise = page.waitForEvent('popup'); await page.getByRole('button').click; // triggers popup const popup = await popupPromise; await popup.waitForLoadState('domcontentloaded'); // Wait until ready expect(popup).toHaveURL('/login'); // or whatever expected Alternative: Use popup.waitForURL directly after getting the popup, or Promise.all([page.waitForEvent('popup'), page.click(selector)]) for coordination. Avoid asserting URL immediately after waitForEvent('popup') without waiting for load/navigation, as it will often be "about:blank" and cause flaky tests.

Citations:


Wait for popup navigation before asserting destination URL.

popup.url() can return "about:blank" immediately after waitForEvent('popup'), causing flaky tests. Use await popup.waitForURL() to wait for navigation completion, then assert with expect(popup).toHaveURL().

Proposed reliability fix
     const popupPromise = channelsPage.page.waitForEvent('popup');
     await titleLink.click();
     const popup = await popupPromise;

-    // * Verify a new tab opens with the expected URL
-    expect(popup.url()).toContain('example.com');
+    // * Verify a new tab opens with the expected URL
+    await popup.waitForURL(/example\.com/);
+    await expect(popup).toHaveURL(/example\.com/);
     await popup.close();
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@e2e-tests/playwright/specs/functional/plugins/demo_plugin/webapp/plugin_link_tooltip.spec.ts`
around lines 106 - 112, The test currently asserts popup.url() immediately after
capturing the popup (popupPromise) which can be "about:blank" and flaky; after
awaiting the popup (variable popup) from channelsPage.page.waitForEvent('popup')
you should wait for navigation completion by calling await popup.waitForURL()
(or use await expect(popup).toHaveURL(...)) before asserting the destination URL
(the titleLink click remains the trigger). Update the code around popupPromise,
titleLink.click(), and the popup assertion to first await popup.waitForURL() and
then assert the URL contains 'example.com'.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

release-note-none Denotes a PR that doesn't merit a release note.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants