From 690ac9c6a17897ee03b2adab52512f0368a550e1 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Fri, 3 Jan 2025 10:08:31 -0800
Subject: [PATCH] move test into its own file

---
 .../locator-dispatchevent-touch.spec.ts       | 59 +++++++++++++++++++
 tests/page/page-dispatchevent.spec.ts         | 39 ------------
 2 files changed, 59 insertions(+), 39 deletions(-)
 create mode 100644 tests/library/locator-dispatchevent-touch.spec.ts

diff --git a/tests/library/locator-dispatchevent-touch.spec.ts b/tests/library/locator-dispatchevent-touch.spec.ts
new file mode 100644
index 0000000000..bae89fa2ac
--- /dev/null
+++ b/tests/library/locator-dispatchevent-touch.spec.ts
@@ -0,0 +1,59 @@
+/**
+ * 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 { contextTest as it, expect } from '../config/browserTest';
+
+it.use({ hasTouch: true });
+
+it('should support touch points in touch event arguments', async ({ page, server, browserName }) => {
+  // it.fixme(browserName === 'webkit', 'WebKit does not have Touch constructor');
+  await page.goto(server.EMPTY_PAGE);
+  await page.setContent(`
+      <div data-testid='outer' style="position: absolute; width: 120px; height: 120px; background-color: red;">
+        <div data-testid='inner' style="position: absolute; width: 100px; height: 100px; top: 10px; left: 10px; background-color: green; z-index: 3;">inner</div>
+      </div>`);
+  const outer = page.getByTestId('outer');
+  await outer.evaluate(el => {
+    const events = [];
+    (window as any).events = events;
+    el.addEventListener('touchstart', (e: TouchEvent) => events.push('touchstart: ' + [...e.touches].map(t => `${t.constructor.name}(id: ${t.identifier}, clientX: ${t.clientX}, clientY: ${t.clientY})`)));
+    el.addEventListener('touchmove', (e: TouchEvent) => events.push('touchmove: ' + [...e.touches].map(t => `${t.constructor.name}(id: ${t.identifier}, clientX: ${t.clientX}, clientY: ${t.clientY})`)));
+    el.addEventListener('touchend', (e: TouchEvent) => events.push('touchend: ' + [...e.touches].map(t => `${t.constructor.name}(id: ${t.identifier}, clientX: ${t.clientX}, clientY: ${t.clientY})`)));
+  });
+
+  const touches = [{ identifier: 0, clientX: 61, clientY: 60 }, { identifier: 1, clientX: 59, clientY: 60 }];
+  const inner = page.getByTestId('inner');
+  await inner.dispatchEvent('touchstart', {
+    touches,
+    changedTouches: touches,
+    targetTouches: touches,
+  });
+  await inner.dispatchEvent('touchmove', {
+    touches,
+    changedTouches: touches,
+    targetTouches: touches,
+  });
+  await inner.dispatchEvent('touchend', {
+    touches: [],
+    changedTouches: touches,
+    targetTouches: [],
+  });
+  expect(await page.evaluate(() => (window as any).events)).toEqual([
+    'touchstart: Touch(id: 0, clientX: 61, clientY: 60),Touch(id: 1, clientX: 59, clientY: 60)',
+    'touchmove: Touch(id: 0, clientX: 61, clientY: 60),Touch(id: 1, clientX: 59, clientY: 60)',
+    'touchend: ',
+  ]);
+});
diff --git a/tests/page/page-dispatchevent.spec.ts b/tests/page/page-dispatchevent.spec.ts
index ee5ee0c09a..d4d780c190 100644
--- a/tests/page/page-dispatchevent.spec.ts
+++ b/tests/page/page-dispatchevent.spec.ts
@@ -229,42 +229,3 @@ it('should throw if argument is from different frame', async ({ page, server })
         .rejects.toThrow('JSHandles can be evaluated only in the context they were created!');
   }
 });
-
-it('should support touch points in touch event arguments', async ({ page, server }) => {
-  await page.goto(server.EMPTY_PAGE);
-  await page.setContent(`
-      <div data-testid='outer' style="position: absolute; width: 120px; height: 120px; background-color: red;">
-        <div data-testid='inner' style="position: absolute; width: 100px; height: 100px; top: 10px; left: 10px; background-color: green; z-index: 3;">inner</div>
-      </div>`);
-  const outer = page.getByTestId('outer');
-  await outer.evaluate(el => {
-    const events = [];
-    (window as any).events = events;
-    el.addEventListener('touchstart', (e: TouchEvent) => events.push('touchstart: ' + [...e.touches].map(t => `${t.constructor.name}(id: ${t.identifier}, clientX: ${t.clientX}, clientY: ${t.clientY})`)));
-    el.addEventListener('touchmove', (e: TouchEvent) => events.push('touchmove: ' + [...e.touches].map(t => `${t.constructor.name}(id: ${t.identifier}, clientX: ${t.clientX}, clientY: ${t.clientY})`)));
-    el.addEventListener('touchend', (e: TouchEvent) => events.push('touchend: ' + [...e.touches].map(t => `${t.constructor.name}(id: ${t.identifier}, clientX: ${t.clientX}, clientY: ${t.clientY})`)));
-  });
-
-  const touches = [{ identifier: 0, clientX: 61, clientY: 60 }, { identifier: 1, clientX: 59, clientY: 60 }];
-  const inner = page.getByTestId('inner');
-  await inner.dispatchEvent('touchstart', {
-    touches,
-    changedTouches: touches,
-    targeTouches: touches,
-  });
-  await inner.dispatchEvent('touchmove', {
-    touches,
-    changedTouches: touches,
-    targeTouches: touches,
-  });
-  await inner.dispatchEvent('touchend', {
-    touches: [],
-    changedTouches: touches,
-    targeTouches: [],
-  });
-  expect(await page.evaluate(() => (window as any).events)).toEqual([
-    'touchstart: Touch(id: 0, clientX: 61, clientY: 60),Touch(id: 1, clientX: 59, clientY: 60)',
-    'touchmove: Touch(id: 0, clientX: 61, clientY: 60),Touch(id: 1, clientX: 59, clientY: 60)',
-    'touchend: ',
-  ]);
-});