mirror of
https://github.com/microsoft/playwright.git
synced 2024-10-27 13:50:25 +03:00
chore(ui): show test source before running (#21776)
This commit is contained in:
parent
22e11a12ab
commit
0728d0f7fb
@ -23,12 +23,14 @@ import { StackTraceView } from './stackTrace';
|
||||
import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
|
||||
import type { SourceHighlight } from '@web/components/codeMirrorWrapper';
|
||||
import type { SourceModel } from './modelUtil';
|
||||
import type { StackFrame } from '@protocol/channels';
|
||||
|
||||
export const SourceTab: React.FunctionComponent<{
|
||||
action: ActionTraceEvent | undefined,
|
||||
sources: Map<string, SourceModel>,
|
||||
hideStackFrames?: boolean,
|
||||
}> = ({ action, sources, hideStackFrames }) => {
|
||||
fallbackLocation?: StackFrame,
|
||||
}> = ({ action, sources, hideStackFrames, fallbackLocation }) => {
|
||||
const [lastAction, setLastAction] = React.useState<ActionTraceEvent | undefined>();
|
||||
const [selectedFrame, setSelectedFrame] = React.useState<number>(0);
|
||||
|
||||
@ -39,28 +41,35 @@ export const SourceTab: React.FunctionComponent<{
|
||||
}
|
||||
}, [action, lastAction, setLastAction, setSelectedFrame]);
|
||||
|
||||
const source = useAsyncMemo<SourceModel>(async () => {
|
||||
const file = action?.stack?.[selectedFrame].file;
|
||||
if (!file)
|
||||
return { errors: [], content: undefined };
|
||||
const source = sources.get(file)!;
|
||||
const { source, targetLine, highlight } = useAsyncMemo<{ source: SourceModel, targetLine: number, highlight: SourceHighlight[] }>(async () => {
|
||||
const location = action?.stack?.[selectedFrame] || fallbackLocation;
|
||||
if (!location?.file)
|
||||
return { source: { errors: [], content: undefined }, targetLine: 0, highlight: [] };
|
||||
|
||||
let source = sources.get(location.file);
|
||||
// Fallback location can fall outside the sources model.
|
||||
if (!source) {
|
||||
source = { errors: [], content: undefined };
|
||||
sources.set(location.file, source);
|
||||
}
|
||||
|
||||
const targetLine = location.line || 0;
|
||||
const highlight: SourceHighlight[] = source.errors.map(e => ({ type: 'error', line: e.location.line, message: e.error!.message }));
|
||||
highlight.push({ line: targetLine, type: 'running' });
|
||||
|
||||
if (source.content === undefined) {
|
||||
const sha1 = await calculateSha1(file);
|
||||
const sha1 = await calculateSha1(location.file);
|
||||
try {
|
||||
let response = await fetch(`sha1/src@${sha1}.txt`);
|
||||
if (response.status === 404)
|
||||
response = await fetch(`file?path=${file}`);
|
||||
response = await fetch(`file?path=${location.file}`);
|
||||
source.content = await response.text();
|
||||
} catch {
|
||||
source.content = `<Unable to read "${file}">`;
|
||||
source.content = `<Unable to read "${location.file}">`;
|
||||
}
|
||||
}
|
||||
return source;
|
||||
}, [action, selectedFrame], { errors: [], content: 'Loading\u2026' });
|
||||
|
||||
const targetLine = action?.stack?.[selectedFrame]?.line || 0;
|
||||
const highlight: SourceHighlight[] = source.errors.map(e => ({ type: 'error', line: e.location.line, message: e.error!.message }));
|
||||
highlight.push({ line: targetLine, type: 'running' });
|
||||
return { source, targetLine, highlight };
|
||||
}, [action, selectedFrame, fallbackLocation], { source: { errors: [], content: 'Loading\u2026' }, targetLine: 0, highlight: [] });
|
||||
|
||||
return <SplitView sidebarSize={200} orientation='horizontal' sidebarHidden={hideStackFrames}>
|
||||
<CodeMirrorWrapper text={source.content || ''} language='javascript' highlight={highlight} revealLine={targetLine} readOnly={true} lineNumbers={true} />
|
||||
|
@ -445,7 +445,7 @@ const TraceView: React.FC<{
|
||||
};
|
||||
}, [result, outputDir, testCase, setModel, counter, setCounter]);
|
||||
|
||||
return <Workbench key='workbench' model={model} hideTimelineBars={true} hideStackFrames={true} showSourcesFirst={true} />;
|
||||
return <Workbench key='workbench' model={model} hideTimelineBars={true} hideStackFrames={true} showSourcesFirst={true} defaultSourceLocation={testCase?.location} />;
|
||||
};
|
||||
|
||||
declare global {
|
||||
|
@ -30,13 +30,15 @@ import type { TabbedPaneTabModel } from '@web/components/tabbedPane';
|
||||
import { Timeline } from './timeline';
|
||||
import './workbench.css';
|
||||
import { MetadataView } from './metadataView';
|
||||
import type { Location } from '../../../playwright-test/types/testReporter';
|
||||
|
||||
export const Workbench: React.FunctionComponent<{
|
||||
model?: MultiTraceModel,
|
||||
hideTimelineBars?: boolean,
|
||||
hideStackFrames?: boolean,
|
||||
showSourcesFirst?: boolean,
|
||||
}> = ({ model, hideTimelineBars, hideStackFrames, showSourcesFirst }) => {
|
||||
defaultSourceLocation?: Location,
|
||||
}> = ({ model, hideTimelineBars, hideStackFrames, showSourcesFirst, defaultSourceLocation }) => {
|
||||
const [selectedAction, setSelectedAction] = React.useState<ActionTraceEvent | undefined>(undefined);
|
||||
const [highlightedAction, setHighlightedAction] = React.useState<ActionTraceEvent | undefined>();
|
||||
const [selectedNavigatorTab, setSelectedNavigatorTab] = React.useState<string>('actions');
|
||||
@ -66,7 +68,7 @@ export const Workbench: React.FunctionComponent<{
|
||||
const sourceTab: TabbedPaneTabModel = {
|
||||
id: 'source',
|
||||
title: 'Source',
|
||||
render: () => <SourceTab action={activeAction} sources={model?.sources || new Map()} hideStackFrames={hideStackFrames}/>
|
||||
render: () => <SourceTab action={activeAction} sources={model?.sources || new Map()} hideStackFrames={hideStackFrames} fallbackLocation={defaultSourceLocation}/>
|
||||
};
|
||||
const consoleTab: TabbedPaneTabModel = {
|
||||
id: 'console',
|
||||
|
57
tests/playwright-test/ui-mode-test-source.spec.ts
Normal file
57
tests/playwright-test/ui-mode-test-source.spec.ts
Normal file
@ -0,0 +1,57 @@
|
||||
/**
|
||||
* Copyright (c) Microsoft Corporation.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { test, expect, dumpTestTree } from './ui-mode-fixtures';
|
||||
|
||||
test.describe.configure({ mode: 'parallel' });
|
||||
|
||||
const basicTestTree = {
|
||||
'a.test.ts': `
|
||||
import { test } from '@playwright/test';
|
||||
test('first', () => {});
|
||||
test('second', () => {});
|
||||
`,
|
||||
'b.test.ts': `
|
||||
import { test } from '@playwright/test';
|
||||
test('third', () => {});
|
||||
`,
|
||||
};
|
||||
|
||||
test('should show selected test in sources', async ({ runUITest }) => {
|
||||
const page = await runUITest(basicTestTree);
|
||||
await expect.poll(dumpTestTree(page), { timeout: 15000 }).toBe(`
|
||||
▼ ◯ a.test.ts
|
||||
◯ first
|
||||
◯ second
|
||||
▼ ◯ b.test.ts
|
||||
◯ third
|
||||
`);
|
||||
|
||||
await page.getByTestId('test-tree').getByText('first').click();
|
||||
await expect(
|
||||
page.locator('.CodeMirror .source-line-running'),
|
||||
).toHaveText(`3 test('first', () => {});`);
|
||||
|
||||
await page.getByTestId('test-tree').getByText('second').click();
|
||||
await expect(
|
||||
page.locator('.CodeMirror .source-line-running'),
|
||||
).toHaveText(`4 test('second', () => {});`);
|
||||
|
||||
await page.getByTestId('test-tree').getByText('third').click();
|
||||
await expect(
|
||||
page.locator('.CodeMirror .source-line-running'),
|
||||
).toHaveText(`3 test('third', () => {});`);
|
||||
});
|
Loading…
Reference in New Issue
Block a user