chore: fix and test ui mode stop (#21769)

packages/playwright-test/src/isomorphic/teleReceiver.ts

@@ -396,9 +396,13 @@ export class TeleTestCase implements reporterTypes.TestCase {
     return status === 'expected' || status === 'flaky' || status === 'skipped';
   }
 
-  _createTestResult(id: string): reporterTypes.TestResult {
+  _clearResults() {
     this.results = [];
     this.resultsMap.clear();
+  }
+
+  _createTestResult(id: string): reporterTypes.TestResult {
+    this._clearResults();
     const result: TeleTestResult = {
       retry: this.results.length,
       parallelIndex: -1,

packages/trace-viewer/src/ui/watchMode.tsx

@@ -122,6 +122,12 @@ export const WatchModeView: React.FC<{}> = ({
     setProgress({ total: testIds.length, passed: 0, failed: 0, skipped: 0 });
     setRunningState({ testIds: new Set(testIds) });
     sendMessage('run', { testIds }).then(() => {
+      // Clear pending tests in case of interrupt.
+      for (const test of testModel.rootSuite?.allTests() || []) {
+        if (test.results[0]?.duration === -1)
+          (test as TeleTestCase)._clearResults();
+      }
+      setTestModel({ ...testModel });
       setRunningState(undefined);
     });
   };
@@ -667,8 +673,10 @@ function createTree(rootSuite: Suite | undefined, projectFilters: Map<string, bo
       let status: 'none' | 'running' | 'passed' | 'failed' | 'skipped' = 'none';
       if (test.results.some(r => r.duration === -1))
         status = 'running';
-      else if (test.results.length && test.outcome() === 'skipped')
+      else if (test.results.length && test.results[0].status === 'skipped')
         status = 'skipped';
+      else if (test.results.length && test.results[0].status === 'interrupted')
+        status = 'none';
       else if (test.results.length && test.outcome() !== 'expected')
         status = 'failed';
       else if (test.results.length && test.outcome() === 'expected')

tests/playwright-test/ui-mode-test-run.spec.ts

@@ -195,3 +195,41 @@ test('should run by project', async ({ runUITest }) => {
       ► ⊘ skipped
   `);
 });
+
+test('should stop', async ({ runUITest }) => {
+  const page = await runUITest({
+    'a.test.ts': `
+      import { test, expect } from '@playwright/test';
+      test('test 0', () => { test.skip(); });
+      test('test 1', () => {});
+      test('test 2', async () => { await new Promise(() => {}); });
+      test('test 3', () => {});
+    `,
+  });
+
+  await expect(page.getByTitle('Run all')).toBeEnabled();
+  await expect(page.getByTitle('Stop')).toBeDisabled();
+
+  await page.getByTitle('Run all').click();
+
+  await expect.poll(dumpTestTree(page), { timeout: 15000 }).toBe(`
+    ▼ ↻ a.test.ts
+        ⊘ test 0
+        ✅ test 1
+        ↻ test 2
+        ↻ test 3
+  `);
+
+  await expect(page.getByTitle('Run all')).toBeDisabled();
+  await expect(page.getByTitle('Stop')).toBeEnabled();
+
+  await page.getByTitle('Stop').click();
+
+  await expect.poll(dumpTestTree(page), { timeout: 15000 }).toBe(`
+    ▼ ◯ a.test.ts
+        ⊘ test 0
+        ✅ test 1
+        ◯ test 2
+        ◯ test 3
+  `);
+});