From 0c16899ec7941904f3f2e6cbc53a1a197220089a Mon Sep 17 00:00:00 2001 From: GeneratorX16 Date: Tue, 11 Feb 2025 23:19:28 +0530 Subject: [PATCH] made changes according to review comments --- packages/web/src/components/treeView.css | 6 ++---- tests/playwright-test/ui-mode-test-watch.spec.ts | 16 +++++++++++----- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/web/src/components/treeView.css b/packages/web/src/components/treeView.css index b13c469441..26b27ceb9f 100644 --- a/packages/web/src/components/treeView.css +++ b/packages/web/src/components/treeView.css @@ -70,10 +70,8 @@ } .tree-view-content:focus .tree-view-entry.selected button.eye.toggled { - color: var(--vscode-button-secondaryForeground) !important; - border-radius: 5px; - margin: -1px; - border: 1px inset var(--vscode-button-foreground); + border-radius: 6px; + outline: 1px solid var(--vscode-button-foreground); } .tree-view-empty { diff --git a/tests/playwright-test/ui-mode-test-watch.spec.ts b/tests/playwright-test/ui-mode-test-watch.spec.ts index fa8516e0b5..867da5cbf5 100644 --- a/tests/playwright-test/ui-mode-test-watch.spec.ts +++ b/tests/playwright-test/ui-mode-test-watch.spec.ts @@ -330,16 +330,22 @@ test('should have watch icon highlighted when a test is focused and watch on the `, }); - await page.getByText('a.test.ts').click(); + 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('border', '1px inset rgb(255, 255, 255)'); + 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('border', '1px inset 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 👁 <= + ▼ ◯ a.test.ts <= + ◯ passes 👁 `); });