From d2e7e8acdb66d23dcd6f91b22a0f98cf485317c8 Mon Sep 17 00:00:00 2001
From: Udaiveer Pradhan <91516067+GeneratorX16@users.noreply.github.com>
Date: Wed, 12 Feb 2025 00:02:39 +0530
Subject: [PATCH] fix(ui-mode): Watch mode button doesn't show active when test
 selected (#34581)

---
 packages/web/src/components/treeView.css      |  5 ++++
 .../ui-mode-test-watch.spec.ts                | 29 +++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/packages/web/src/components/treeView.css b/packages/web/src/components/treeView.css
index 860d560fc9..26b27ceb9f 100644
--- a/packages/web/src/components/treeView.css
+++ b/packages/web/src/components/treeView.css
@@ -69,6 +69,11 @@
   color: var(--vscode-list-activeSelectionForeground) !important;
 }
 
+.tree-view-content:focus .tree-view-entry.selected button.eye.toggled {
+  border-radius: 6px;
+  outline: 1px solid var(--vscode-button-foreground);
+}
+
 .tree-view-empty {
   flex: auto;
   display: flex;
diff --git a/tests/playwright-test/ui-mode-test-watch.spec.ts b/tests/playwright-test/ui-mode-test-watch.spec.ts
index 9bbbdc0ec0..867da5cbf5 100644
--- a/tests/playwright-test/ui-mode-test-watch.spec.ts
+++ b/tests/playwright-test/ui-mode-test-watch.spec.ts
@@ -320,3 +320,32 @@ test('should not watch output', async ({ runUITest }) => {
   expect(commands).toContain('runTests');
   expect(commands).not.toContain('listTests');
 });
+
+
+test('should have watch icon highlighted when a test is focused and watch on the test is enabled', async ({ runUITest }) => {
+  const { page } = await runUITest({
+    'a.test.ts': `
+      import { test, expect } from '@playwright/test';
+      test('passes', () => {});
+    `,
+  });
+
+  await page.getByTestId('test-tree').getByText('a.test.ts').click();
+  // watch icon should not be highlight till the watch icon is clicked
+  await page.getByRole('treeitem', { name: 'passes' }).hover();
+  await expect(page.getByRole('treeitem', { name: 'passes' }).getByRole('button', { name: 'Watch' })).not.toHaveCSS('outline', 'rgb(255, 255, 255) solid 1px');
+
+  await page.getByRole('treeitem', { name: 'passes' }).getByRole('button', { name: 'Watch' }).click();
+  await expect(page.getByRole('treeitem', { name: 'passes' }).getByRole('button', { name: 'Watch' }).locator('.codicon-eye')).toHaveCSS('color', 'rgb(255, 255, 255)');
+  await expect(page.getByRole('treeitem', { name: 'passes' }).getByRole('button', { name: 'Watch' })).toHaveCSS('outline', 'rgb(255, 255, 255) solid 1px');
+
+  // deselection of the tree-row should still show the watch icon when watch on tree row is active
+  await page.getByTestId('test-tree').getByText('a.test.ts').click();
+  await expect(page.getByRole('treeitem', { name: 'passes' }).getByRole('button', { name: 'Watch' })).toBeVisible();
+  await expect(page.getByRole('treeitem', { name: 'passes' }).getByRole('button', { name: 'Watch' })).not.toHaveCSS('outline', 'rgb(255, 255, 255) solid 1px');
+
+  await expect.poll(dumpTestTree(page)).toBe(`
+    ▼ ◯ a.test.ts <=
+        ◯ passes 👁
+  `);
+});