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

fix double state update by introducing completed flag to mark difference between "not yet started" and "completed"

Browse source
This commit is contained in:
Simon Knott 2024-08-08 17:08:57 +02:00
parent 3711474682
commit 785293fac8
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
2 changed files with 12 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/trace-viewer/src/ui/uiModeTestListView.tsx
View file

@ -40,7 +40,7 @@ export const TestListView: React.FC<{
testServerConnection: TestServerConnection | undefined, testServerConnection: TestServerConnection | undefined,
testModel?: TestModel, testModel?: TestModel,
runTests: (mode: 'bounce-if-busy' | 'queue-if-busy', testIds: Set<string>) => void, runTests: (mode: 'bounce-if-busy' | 'queue-if-busy', testIds: Set<string>) => void,
runningState?: { testIds: Set<string>, itemSelectedByUser?: boolean }, runningState?: { testIds: Set<string>, itemSelectedByUser?: boolean, completed?: boolean },
watchAll: boolean, watchAll: boolean,
watchedTreeIds: { value: Set<string> }, watchedTreeIds: { value: Set<string> },
setWatchedTreeIds: (ids: { value: Set<string> }) => void, setWatchedTreeIds: (ids: { value: Set<string> }) => void,
@ -154,7 +154,7 @@ export const TestListView: React.FC<{
</div> </div>
{!!treeItem.duration && treeItem.status !== 'skipped' && <div className='ui-mode-list-item-time'>{msToString(treeItem.duration)}</div>} {!!treeItem.duration && treeItem.status !== 'skipped' && <div className='ui-mode-list-item-time'>{msToString(treeItem.duration)}</div>}
<Toolbar noMinHeight={true} noShadow={true}> <Toolbar noMinHeight={true} noShadow={true}>
<ToolbarButton icon='play' title='Run' onClick={() => runTreeItem(treeItem)} disabled={!!runningState}></ToolbarButton> <ToolbarButton icon='play' title='Run' onClick={() => runTreeItem(treeItem)} disabled={!!runningState && !runningState.completed}></ToolbarButton>
<ToolbarButton icon='go-to-file' title='Show source' onClick={onRevealSource} style={(treeItem.kind === 'group' && treeItem.subKind === 'folder') ? { visibility: 'hidden' } : {}}></ToolbarButton> <ToolbarButton icon='go-to-file' title='Show source' onClick={onRevealSource} style={(treeItem.kind === 'group' && treeItem.subKind === 'folder') ? { visibility: 'hidden' } : {}}></ToolbarButton>
{!watchAll && <ToolbarButton icon='eye' title='Watch' onClick={() => { {!watchAll && <ToolbarButton icon='eye' title='Watch' onClick={() => {
if (watchedTreeIds.value.has(treeItem.id)) if (watchedTreeIds.value.has(treeItem.id))

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

@ -85,7 +85,9 @@ export const UIModeView: React.FC<{}> = ({
const [selectedItem, setSelectedItem] = React.useState<{ treeItem?: TreeItem, testFile?: SourceLocation, testCase?: reporterTypes.TestCase }>({}); const [selectedItem, setSelectedItem] = React.useState<{ treeItem?: TreeItem, testFile?: SourceLocation, testCase?: reporterTypes.TestCase }>({});
const [visibleTestIds, setVisibleTestIds] = React.useState<Set<string>>(new Set()); const [visibleTestIds, setVisibleTestIds] = React.useState<Set<string>>(new Set());
const [isLoading, setIsLoading] = React.useState<boolean>(false); const [isLoading, setIsLoading] = React.useState<boolean>(false);
const [runningState, setRunningState] = React.useState<{ testIds: Set<string>, itemSelectedByUser?: boolean } | undefined>(); const [runningState, setRunningState] = React.useState<{ testIds: Set<string>, itemSelectedByUser?: boolean, completed?: boolean } | undefined>();
const isRunningTest = runningState && !runningState.completed;
const [watchAll, setWatchAll] = useSetting<boolean>('watch-all', false); const [watchAll, setWatchAll] = useSetting<boolean>('watch-all', false);
const [watchedTreeIds, setWatchedTreeIds] = React.useState<{ value: Set<string> }>({ value: new Set() }); const [watchedTreeIds, setWatchedTreeIds] = React.useState<{ value: Set<string> }>({ value: new Set() });
const commandQueue = React.useRef(Promise.resolve()); const commandQueue = React.useRef(Promise.resolve());
@ -251,29 +253,29 @@ export const UIModeView: React.FC<{}> = ({
// Update progress. // Update progress.
React.useEffect(() => { React.useEffect(() => {
if (runningState && testModel?.progress) if (isRunningTest && testModel?.progress)
setProgress(testModel.progress); setProgress(testModel.progress);
else if (!testModel) else if (!testModel)
setProgress(undefined); setProgress(undefined);
}, [testModel, runningState]); }, [testModel, isRunningTest]);
// Test tree is built from the model and filters. // Test tree is built from the model and filters.
const { testTree } = React.useMemo(() => { const { testTree } = React.useMemo(() => {
if (!testModel) if (!testModel)
return { testTree: new TestTree('', new TeleSuite('', 'root'), [], projectFilters, pathSeparator) }; return { testTree: new TestTree('', new TeleSuite('', 'root'), [], projectFilters, pathSeparator) };
const testTree = new TestTree('', testModel.rootSuite, testModel.loadErrors, projectFilters, pathSeparator); const testTree = new TestTree('', testModel.rootSuite, testModel.loadErrors, projectFilters, pathSeparator);
testTree.filterTree(filterText, statusFilters, runningState?.testIds); testTree.filterTree(filterText, statusFilters, isRunningTest ? runningState?.testIds : undefined);
testTree.sortAndPropagateStatus(); testTree.sortAndPropagateStatus();
testTree.shortenRoot(); testTree.shortenRoot();
testTree.flattenForSingleProject(); testTree.flattenForSingleProject();
setVisibleTestIds(testTree.testIds()); setVisibleTestIds(testTree.testIds());
return { testTree }; return { testTree };
}, [filterText, testModel, statusFilters, projectFilters, setVisibleTestIds, runningState]); }, [filterText, testModel, statusFilters, projectFilters, setVisibleTestIds, runningState, isRunningTest]);
const runTests = React.useCallback((mode: 'queue-if-busy' | 'bounce-if-busy', testIds: Set<string>) => { const runTests = React.useCallback((mode: 'queue-if-busy' | 'bounce-if-busy', testIds: Set<string>) => {
if (!testServerConnection || !testModel) if (!testServerConnection || !testModel)
return; return;
if (mode === 'bounce-if-busy' && runningState) if (mode === 'bounce-if-busy' && isRunningTest)
return; return;
runTestBacklog.current = new Set([...runTestBacklog.current, ...testIds]); runTestBacklog.current = new Set([...runTestBacklog.current, ...testIds]);
@ -320,9 +322,9 @@ export const UIModeView: React.FC<{}> = ({
test.results = []; test.results = [];
} }
setTestModel({ ...testModel }); setTestModel({ ...testModel });
setRunningState(undefined); setRunningState(oldState => oldState ? ({ ...oldState, completed: true }) : undefined);
}); });
}, [projectFilters, runningState, testModel, testServerConnection, runWorkers, runHeaded, runUpdateSnapshots]); }, [projectFilters, isRunningTest, testModel, testServerConnection, runWorkers, runHeaded, runUpdateSnapshots]);
React.useEffect(() => { React.useEffect(() => {
if (!testServerConnection || !teleSuiteUpdater) if (!testServerConnection || !teleSuiteUpdater)
@ -396,7 +398,6 @@ export const UIModeView: React.FC<{}> = ({
}; };
}, [runTests, reloadTests, testServerConnection, visibleTestIds, isShowingOutput]); }, [runTests, reloadTests, testServerConnection, visibleTestIds, isShowingOutput]);
const isRunningTest = !!runningState;
const dialogRef = React.useRef<HTMLDialogElement>(null); const dialogRef = React.useRef<HTMLDialogElement>(null);
const openInstallDialog = React.useCallback((e: React.MouseEvent) => { const openInstallDialog = React.useCallback((e: React.MouseEvent) => {
e.preventDefault(); e.preventDefault();