fix(e2e): intercept API request to fix race condition in loading message test

[Copilot]

Description

Intercept the /wp-parsely/v2/stats/posts API route in the related-posts-panel-filters E2E spec and introduce a short 2-second delay before letting the request continue. This keeps the .related-posts-loading-message element visible long enough for Playwright to assert on it.

await admin.page.route( /\/wp-parsely\/v2\/stats\/posts/, async ( route ) => {
    await new Promise( ( resolve ) => setTimeout( resolve, 2000 ) );
    await route.continue();
} );

Motivation and context

The related-posts-panel-filters E2E test was flaking (and consistently failing in CI) because the API response arrived before Playwright could observe the transient loading state. The test waited for .related-posts-loading-message to be visible, but the fetch had already completed and the element was gone, causing a TimeoutError on all 3 retries.

Cross-referencing CI failure logs across all open PRs revealed 10 out of 16 failing E2E runs shared this exact error — always the same test, same selector, all retries exhausted. The route intercept is the standard Playwright approach for testing transient loading states without weakening assertions.

How has this been tested?

• Root-cause identified by correlating CI failure logs from 10 independent PR runs, all showing identical TimeoutError waiting for .related-posts-loading-message to be visible.
• The route-intercept pattern is a well-established Playwright technique for stabilising assertions on transient UI states.

Screenshots (if appropriate)

N/A

Summary by CodeRabbit

• Tests
  • Improved test reliability for the Related Posts panel by enhancing timing of API request verification.

[acicovic]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR introduces a test timing fix by intercepting the Related Posts API request and artificially delaying its completion. This keeps the loading UI visible long enough for the test assertion to verify the Loading… message state.

Changes

Related Posts Loading State Test Timing

Layer / File(s)	Summary
Related Posts loading state API delay tests/e2e/specs/content-helper/related-posts-panel-filters.spec.ts	Adds a Playwright page.route interceptor that delays the Related Posts stats endpoint by 2 seconds before continuing the request, ensuring the Loading… message assertion captures the transient UI state.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

Suggested reviewers

• acicovic

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: fixing a race condition in an E2E test by intercepting an API request.
Description check	✅ Passed	The description includes all required sections with detailed information: description of changes, motivation/context with evidence of the problem, and testing approach.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ 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 copilot/fix-e2e-timeout-errors

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (1)

tests/e2e/specs/content-helper/related-posts-panel-filters.spec.ts (1)

45-48: ⚡ Quick win

Convert multi-line comment to block comment style.

Multi-line comments should use block comment syntax (/* */ or /** */) instead of multiple single-line comments, per WordPress JavaScript coding standards.

📝 Proposed fix to use block comment style

-		// Intercept the Related Posts API request to ensure the loading message
-		// stays visible long enough for the assertion. Without this, the fetch
-		// may complete before the check runs, causing a timeout on the transient
-		// loading state.
+		/*
+		 * Intercept the Related Posts API request to ensure the loading message
+		 * stays visible long enough for the assertion. Without this, the fetch
+		 * may complete before the check runs, causing a timeout on the transient
+		 * loading state.
+		 */

As per coding guidelines, WordPress coding standards require block comment style for multi-line comments.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@tests/e2e/specs/content-helper/related-posts-panel-filters.spec.ts` around
lines 45 - 48, Replace the consecutive single-line comments describing the
Related Posts API interception with a single block comment (/* ... */) so the
multi-line explanation uses block comment style per WP JS coding standards;
locate the comment that begins "Intercept the Related Posts API request to
ensure the loading message" (above the interception/assertion in
related-posts-panel-filters.spec.ts) and wrap the full multi-line text inside a
single /* ... */ block.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@tests/e2e/specs/content-helper/related-posts-panel-filters.spec.ts`:
- Around line 45-48: Replace the consecutive single-line comments describing the
Related Posts API interception with a single block comment (/* ... */) so the
multi-line explanation uses block comment style per WP JS coding standards;
locate the comment that begins "Intercept the Related Posts API request to
ensure the loading message" (above the interception/assertion in
related-posts-panel-filters.spec.ts) and wrap the full multi-line text inside a
single /* ... */ block.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e4f82da6-34a7-4c68-bb3c-3cdd2df94148

📥 Commits

Reviewing files that changed from the base of the PR and between d6620e3 and 32de2b5.

📒 Files selected for processing (1)

• tests/e2e/specs/content-helper/related-posts-panel-filters.spec.ts