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

chore: address UI Mode keyboard shortcut feedback

Browse source
This commit is contained in:
Max Schmitt 2024-03-25 11:13:25 +01:00
parent 1539cde034
commit cd00520138
2 changed files with 39 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/trace-viewer/src/ui/uiModeView.tsx
View file

@ -319,19 +319,22 @@ export const UIModeView: React.FC<{}> = ({
if (!testServerConnection) if (!testServerConnection)
return; return;
const onShortcutEvent = (e: KeyboardEvent) => { const onShortcutEvent = (e: KeyboardEvent) => {
if (e.code === 'F6') { if (e.code === 'Backquote' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
setIsShowingOutput(!isShowingOutput);
} else if ((e.shiftKey || e.metaKey) && e.code === 'F5') {
e.preventDefault(); e.preventDefault();
testServerConnection?.stopTestsNoReply({}); testServerConnection?.stopTestsNoReply({});
} else if (e.code === 'F5') { } else if (e.code === 'F5') {
e.preventDefault(); e.preventDefault();
reloadTests(); runTests('bounce-if-busy', visibleTestIds);
} }
}; };
addEventListener('keydown', onShortcutEvent); addEventListener('keydown', onShortcutEvent);
return () => { return () => {
removeEventListener('keydown', onShortcutEvent); removeEventListener('keydown', onShortcutEvent);
}; };
}, [runTests, reloadTests, testServerConnection]); }, [runTests, reloadTests, testServerConnection, visibleTestIds, isShowingOutput]);
const isRunningTest = !!runningState; const isRunningTest = !!runningState;
const dialogRef = React.useRef<HTMLDialogElement>(null); const dialogRef = React.useRef<HTMLDialogElement>(null);

39
tests/playwright-test/ui-mode-test-shortcut.spec.ts
View file

@ -28,7 +28,29 @@ const basicTestTree = {
` `
}; };
test('should stop on F6', async ({ runUITest }) => { test('should run tests', async ({ runUITest }) => {
const { page } = await runUITest(basicTestTree);
await expect(page.getByTitle('Run all')).toBeEnabled();
await expect(page.getByTitle('Stop')).toBeDisabled();
await page.getByPlaceholder('Filter (e.g. text, @tag)').fill('test 3');
await page.keyboard.press('F5');
await expect(page.getByTestId('status-line')).toHaveText('1/1 passed (100%)');
await page.getByPlaceholder('Filter (e.g. text, @tag)').fill('');
// Only the filtered test was run.
await expect.poll(dumpTestTree(page)).toBe(`
▼ ◯ a.test.ts
◯ test 0
◯ test 1
◯ test 2
✅ test 3
`);
});
test('should stop tests', async ({ runUITest }) => {
const { page } = await runUITest(basicTestTree); const { page } = await runUITest(basicTestTree);
await expect(page.getByTitle('Run all')).toBeEnabled(); await expect(page.getByTitle('Run all')).toBeEnabled();
@ -47,7 +69,7 @@ test('should stop on F6', async ({ runUITest }) => {
await expect(page.getByTitle('Run all')).toBeDisabled(); await expect(page.getByTitle('Run all')).toBeDisabled();
await expect(page.getByTitle('Stop')).toBeEnabled(); await expect(page.getByTitle('Stop')).toBeEnabled();
await page.keyboard.press('F6'); await page.keyboard.press('Shift+F5');
await expect.poll(dumpTestTree(page)).toBe(` await expect.poll(dumpTestTree(page)).toBe(`
▼ ◯ a.test.ts ▼ ◯ a.test.ts
@ -58,12 +80,15 @@ test('should stop on F6', async ({ runUITest }) => {
`); `);
}); });
test('should reload on F5', async ({ runUITest }) => { test('should toggle Terminal', async ({ runUITest }) => {
const { page } = await runUITest(basicTestTree); const { page } = await runUITest(basicTestTree);
await page.getByTitle('Run all').click(); await expect(page.getByTitle('Run all')).toBeEnabled();
await expect(page.getByTestId('status-line')).toHaveText('Running 1/4 passed (25%)'); await expect(page.getByTitle('Stop')).toBeDisabled();
await page.keyboard.press('F5'); await expect(page.getByTestId('output')).toBeHidden();
await expect(page.getByTestId('status-line')).toBeHidden();
await page.keyboard.press(process.platform === 'darwin' ? 'Control+Backquote' : 'Control+Shift+Backquote');
await expect(page.getByTestId('output')).toBeVisible();
}); });