From 3a5bf1cc1d5906dcd62c5a503004407357de7ed9 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Wed, 2 Oct 2024 13:30:44 +0200
Subject: [PATCH] fix(trace viewer): reveal stack for highlighted action
 (#32919)

Closes https://github.com/microsoft/playwright/issues/32915.

In the `Call` and `Logs` tabs, we update the contents based on the
hovered action. We document that this is also the case for the `Source`
tab:


https://github.com/meeroslaph/playwright/blob/78054a7652377a316669e21163ede3d8dbc0d99c/docs/src/test-ui-mode-js.md?plain=1#L61-L65

But it isn't. Not sure if it's a regression or not, but this PR fixes
it.
---
 packages/trace-viewer/src/ui/workbench.tsx | 12 ++++++------
 tests/config/traceViewerFixtures.ts        |  5 +++++
 tests/library/trace-viewer.spec.ts         |  3 +++
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/trace-viewer/src/ui/workbench.tsx b/packages/trace-viewer/src/ui/workbench.tsx
index 8f8206170a..f5471ca81c 100644
--- a/packages/trace-viewer/src/ui/workbench.tsx
+++ b/packages/trace-viewer/src/ui/workbench.tsx
@@ -114,16 +114,16 @@ export const Workbench: React.FunctionComponent<{
     }
   }, [model, selectedCallId]);
 
-  const revealedStack = React.useMemo(() => {
-    if (revealedError)
-      return revealedError.stack;
-    return selectedAction?.stack;
-  }, [selectedAction, revealedError]);
-
   const activeAction = React.useMemo(() => {
     return highlightedAction || selectedAction;
   }, [selectedAction, highlightedAction]);
 
+  const revealedStack = React.useMemo(() => {
+    if (revealedError)
+      return revealedError.stack;
+    return activeAction?.stack;
+  }, [activeAction, revealedError]);
+
   const onActionSelected = React.useCallback((action: modelUtil.ActionTraceEventInContext) => {
     setSelectedAction(action);
     setHighlightedAction(undefined);
diff --git a/tests/config/traceViewerFixtures.ts b/tests/config/traceViewerFixtures.ts
index 2abc6c9ee9..0fe4a9a5c9 100644
--- a/tests/config/traceViewerFixtures.ts
+++ b/tests/config/traceViewerFixtures.ts
@@ -76,6 +76,11 @@ class TraceViewerPage {
     await this.page.locator(`.action-title:has-text("${title}")`).nth(ordinal).click();
   }
 
+  @step
+  async hoverAction(title: string, ordinal: number = 0) {
+    await this.page.locator(`.action-title:has-text("${title}")`).nth(ordinal).hover();
+  }
+
   @step
   async selectSnapshot(name: string) {
     await this.page.click(`.snapshot-tab .tabbed-pane-tab-label:has-text("${name}")`);
diff --git a/tests/library/trace-viewer.spec.ts b/tests/library/trace-viewer.spec.ts
index e8863b0e1e..ff9add5da9 100644
--- a/tests/library/trace-viewer.spec.ts
+++ b/tests/library/trace-viewer.spec.ts
@@ -864,6 +864,9 @@ test('should show action source', async ({ showTraceViewer }) => {
   await page.click('text=Source');
   await expect(page.locator('.source-line-running')).toContainText('await page.getByText(\'Click\').click()');
   await expect(page.getByTestId('stack-trace-list').locator('.list-view-entry.selected')).toHaveText(/doClick.*trace-viewer\.spec\.ts:[\d]+/);
+
+  await traceViewer.hoverAction('page.waitForNavigation');
+  await expect(page.locator('.source-line-running')).toContainText('page.waitForNavigation()');
 });
 
 test('should follow redirects', async ({ page, runAndTrace, server, asset }) => {