Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(ui-mode): Watch mode button doesn't show active when test selected

Browse source 
description: The watch mode button was not showing as highlighted when a test in the tree view was focused and the watch icon was being clicked. Handled this issue for both, light moide and dark mode visibility
This commit is contained in:
GeneratorX16 2025-02-01 12:51:22 +05:30
parent 88c01434c6
commit 4971b3e1ba
2 changed files with 26 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/web/src/components/treeView.css
View file

@ -69,6 +69,10 @@
color: var(--vscode-list-activeSelectionForeground) !important;
}
.tree-view-content:focus .tree-view-entry.selected button.eye.toggled .codicon {
color: var(--vscode-editorInfo-foreground) !important;
}
.tree-view-empty {
flex: auto;
display: flex;

22
tests/playwright-test/ui-mode-test-watch.spec.ts
View file

@ -320,3 +320,25 @@ 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, writeFiles }) => {
const { page } = await runUITest({
'a.test.ts': `
import { test, expect } from '@playwright/test';
test('passes', () => {});
`,
});
await page.getByText('a.test.ts').click();
// watch icon should not be highlight till the watch icon is clicked
await expect(page.getByRole('treeitem', { name: 'a.test.ts' }).getByRole('button', { name: 'Watch' })).toHaveCSS('color', 'rgb(255, 255, 255)');
await page.getByRole('treeitem', { name: 'passes' }).hover();
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(26, 133, 255)');
await expect.poll(dumpTestTree(page)).toBe(`
▼ ◯ a.test.ts
◯ passes 👁 <=
`);
});