Repository: microsoft/playwright
File: packages/trace-viewer/src/ui/uiModeView.tsx (TypeScript)

Code before:
      xtermDataSource.write('\x1B[2m—'.repeat(Math.max(0, xtermSize.cols - time.length)) + time + '\x1B[22m');
      setProgress({ total: 0, passed: 0, failed: 0, skipped: 0 });
      setRunningState({ testIds });

      await testServerConnection.runTests({
        locations: [...locations].map(escapeRegex),
        grep: queryParams.grep,
        grepInvert: queryParams.grepInvert,
        testIds: [...testIds],
        projects: [...projectFilters].filter(([_, v]) => v).map(([p]) => p),
        updateSnapshots,
        reporters: queryParams.reporters,
        workers: singleWorker ? 1 : undefined,
        trace: 'on',
      });
      // Clear pending tests in case of interrupt.
      for (const test of testModel.rootSuite?.allTests() || []) {
        if (test.results[0]?.duration === -1)
          test.results = [];
      }
      setTestModel({ ...testModel });
      setRunningState(oldState => oldState ? ({ ...oldState, completed: true }) : undefined);
    });
  }, [projectFilters, isRunningTest, testModel, testServerConnection, updateSnapshots, singleWorker]);

  const runVisibleTests = React.useCallback(() => runTests('bounce-if-busy', visibleTestIds, new Set(queryParams.args)), [runTests, visibleTestIds]);

  React.useEffect(() => {
    if (!testServerConnection || !teleSuiteUpdater)
      return;
    const disposable = testServerConnection.onTestFilesChanged(async params => {
      // fetch the new list of tests
      commandQueue.current = commandQueue.current.then(async () => {
        setIsLoading(true);
        try {
          const result = await testServerConnection.listTests({ projects: queryParams.projects, locations: queryParams.args, grep: queryParams.grep, grepInvert: queryParams.grepInvert });
          teleSuiteUpdater.processListReport(result.report);
        } catch (e) {
          // eslint-disable-next-line no-console
          console.log(e);
        } finally {
          setIsLoading(false);
        }
      });
      await commandQueue.current;

      if (params.testFiles.length === 0)
        return;

      // run affected watched tests
      const testModel = teleSuiteUpdater.asModel();

Review comment (suggestion):
I am not sure how `queryParams.args` integrates here. Could you please explain? I'd assume we always use `collectTestIds()` when running tests, and use `queryParams.args` when listing to filter things, but I'm not exactly sure.

Code after:
      setRunningState({ testIds });

      await testServerConnection.runTests({
        locations: [...locations].map(escapeRegex),
        grep: queryParams.grep,
        grepInvert: queryParams.grepInvert,
        testIds: [...testIds],
        projects: [...projectFilters].filter(([_, v]) => v).map(([p]) => p),
        updateSnapshots,
        reporters: queryParams.reporters,
        workers: singleWorker ? 1 : undefined,
        trace: 'on',
      });
      // Clear pending tests in case of interrupt.
      for (const test of testModel.rootSuite?.allTests() || []) {
        if (test.results[0]?.duration === -1)
          test.results = [];
      }
      setTestModel({ ...testModel });
      setRunningState(oldState => oldState ? ({ ...oldState, completed: true }) : undefined);
    });
  }, [projectFilters, isRunningTest, testModel, testServerConnection, updateSnapshots, singleWorker]);

  const runVisibleTests = React.useCallback(() => runTests('bounce-if-busy', testTree.collectTestIds(testTree.rootItem)), [runTests, testTree]);

  React.useEffect(() => {
    if (!testServerConnection || !teleSuiteUpdater)
      return;
    const disposable = testServerConnection.onTestFilesChanged(async params => {
      // fetch the new list of tests
      commandQueue.current = commandQueue.current.then(async () => {
        setIsLoading(true);
        try {
          const result = await testServerConnection.listTests({ projects: queryParams.projects, locations: queryParams.args, grep: queryParams.grep, grepInvert: queryParams.grepInvert });
          teleSuiteUpdater.processListReport(result.report);
        } catch (e) {
          // eslint-disable-next-line no-console
          console.log(e);
        } finally {
          setIsLoading(false);
        }
      });
      await commandQueue.current;

      if (params.testFiles.length === 0)
        return;

      // run affected watched tests
      const testModel = teleSuiteUpdater.asModel();
      const testTree = new TestTree('', testModel.rootSuite, testModel.loadErrors, projectFilters, queryParams.pathSeparator, mergeFiles);