From 6efb38343354d9db9edefeb83d93c32def3bc09b Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Fri, 17 Mar 2023 14:10:25 -0700
Subject: [PATCH] chore: fix and test ui mode stop (#21769)

---
 .../src/isomorphic/teleReceiver.ts            |  6 ++-
 packages/trace-viewer/src/ui/watchMode.tsx    | 10 ++++-
 .../playwright-test/ui-mode-test-run.spec.ts  | 38 +++++++++++++++++++
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/packages/playwright-test/src/isomorphic/teleReceiver.ts b/packages/playwright-test/src/isomorphic/teleReceiver.ts
index 48e9716818..ba3a92df30 100644
--- a/packages/playwright-test/src/isomorphic/teleReceiver.ts
+++ b/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,
diff --git a/packages/trace-viewer/src/ui/watchMode.tsx b/packages/trace-viewer/src/ui/watchMode.tsx
index 0c716c5ceb..77bed628c1 100644
--- a/packages/trace-viewer/src/ui/watchMode.tsx
+++ b/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')
diff --git a/tests/playwright-test/ui-mode-test-run.spec.ts b/tests/playwright-test/ui-mode-test-run.spec.ts
index 6e75ed37f3..a425fbf48c 100644
--- a/tests/playwright-test/ui-mode-test-run.spec.ts
+++ b/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
+  `);
+});