feat(api): make page.isDragInterceptionEnabled a method (#7419)

Having it be a getter is surprising and inconsistent, since the other `page.is*` APIs are just methods.

Issue: #7150

docs/api.md

@@ -157,7 +157,7 @@
   * [page.goto(url[, options])](#pagegotourl-options)
   * [page.hover(selector)](#pagehoverselector)
   * [page.isClosed()](#pageisclosed)
-  * [page.isDragInterceptionEnabled](#pageisdraginterceptionenabled)
+  * [page.isDragInterceptionEnabled()](#pageisdraginterceptionenabled)
   * [page.isJavaScriptEnabled()](#pageisjavascriptenabled)
   * [page.keyboard](#pagekeyboard)
   * [page.mainFrame()](#pagemainframe)
@@ -2008,7 +2008,7 @@ Shortcut for [page.mainFrame().hover(selector)](#framehoverselector).
 
 Indicates that the page has been closed.
 
-#### page.isDragInterceptionEnabled
+#### page.isDragInterceptionEnabled()
 
 - returns: <[boolean]>
 

src/common/JSHandle.ts

@@ -504,7 +504,7 @@ export class ElementHandle<
    */
   async drag(target: Point): Promise<Protocol.Input.DragData> {
     assert(
-      this._page.isDragInterceptionEnabled,
+      this._page.isDragInterceptionEnabled(),
       'Drag Interception is not enabled!'
     );
     await this._scrollIntoViewIfNeeded();

src/common/Page.ts

@@ -600,6 +600,13 @@ export class Page extends EventEmitter {
     for (const interceptor of interceptors) interceptor.call(null, fileChooser);
   }
 
+  /**
+   * @returns `true` if drag events are being intercepted, `false` otherwise.
+   */
+  isDragInterceptionEnabled(): boolean {
+    return this._userDragInterceptionEnabled;
+  }
+
   /**
    * @returns `true` if the page has JavaScript enabled, `false` otherwise.
    */
@@ -777,10 +784,6 @@ export class Page extends EventEmitter {
     return this._accessibility;
   }
 
-  get isDragInterceptionEnabled(): boolean {
-    return this._userDragInterceptionEnabled;
-  }
-
   /**
    * @returns An array of all frames attached to the page.
    */

test/assets/input/drag-and-drop.html

@@ -18,26 +18,26 @@
       window.didDragEnter = false;
       window.didDragOver = false;
       window.didDrop = false;
-      var drag = document.getElementById('drag');
+      const drag = document.getElementById('drag');
-      var drop = document.getElementById('drop');
+      const drop = document.getElementById('drop');
-      drag.addEventListener('dragstart', function(e) {
+      drag.addEventListener('dragstart', function(event) {
-        e.dataTransfer.setData('id', e.target.id);
+        event.dataTransfer.setData('id', event.target.id);
         window.didDragStart = true;
       });
-      drop.addEventListener('dragenter', function(e) {
+      drop.addEventListener('dragenter', function(event) {
-        e.preventDefault();
+        event.preventDefault();
         window.didDragEnter = true;
       });
-      drop.addEventListener('dragover', function(e) {
+      drop.addEventListener('dragover', function(event) {
-        e.preventDefault();
+        event.preventDefault();
         window.didDragOver = true;
       });
-      drop.addEventListener('drop', function(e) {
+      drop.addEventListener('drop', function(event) {
-        e.preventDefault();
+        event.preventDefault();
-        var id = e.dataTransfer.getData('id');
+        const id = event.dataTransfer.getData('id');
-        var el = document.getElementById(id);
+        const el = document.getElementById(id);
         if (el) {
-          e.target.appendChild(el);
+          event.target.appendChild(el);
           window.didDrop = true;
         }
       });

test/drag-and-drop.spec.ts

@@ -41,7 +41,9 @@ describeChromeOnly('Input.drag', function () {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
+    expect(page.isDragInterceptionEnabled()).toBe(false);
     await page.setDragInterception(true);
+    expect(page.isDragInterceptionEnabled()).toBe(true);
     const draggable = await page.$('#drag');
     const data = await draggable.drag({ x: 1, y: 1 });
 
@@ -52,7 +54,9 @@ describeChromeOnly('Input.drag', function () {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
+    expect(page.isDragInterceptionEnabled()).toBe(false);
     await page.setDragInterception(true);
+    expect(page.isDragInterceptionEnabled()).toBe(true);
     const draggable = await page.$('#drag');
     const data = await draggable.drag({ x: 1, y: 1 });
     const dropzone = await page.$('#drop');
@@ -65,7 +69,9 @@ describeChromeOnly('Input.drag', function () {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
+    expect(page.isDragInterceptionEnabled()).toBe(false);
     await page.setDragInterception(true);
+    expect(page.isDragInterceptionEnabled()).toBe(true);
     const draggable = await page.$('#drag');
     const data = await draggable.drag({ x: 1, y: 1 });
     const dropzone = await page.$('#drop');
@@ -80,7 +86,9 @@ describeChromeOnly('Input.drag', function () {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
+    expect(page.isDragInterceptionEnabled()).toBe(false);
     await page.setDragInterception(true);
+    expect(page.isDragInterceptionEnabled()).toBe(true);
     const draggable = await page.$('#drag');
     const dropzone = await page.$('#drop');
     const data = await draggable.drag({ x: 1, y: 1 });
@@ -97,7 +105,9 @@ describeChromeOnly('Input.drag', function () {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
+    expect(page.isDragInterceptionEnabled()).toBe(false);
     await page.setDragInterception(true);
+    expect(page.isDragInterceptionEnabled()).toBe(true);
     const draggable = await page.$('#drag');
     const dropzone = await page.$('#drop');
     await draggable.dragAndDrop(dropzone);
@@ -111,7 +121,9 @@ describeChromeOnly('Input.drag', function () {
     const { page, server } = getTestState();
 
     await page.goto(server.PREFIX + '/input/drag-and-drop.html');
+    expect(page.isDragInterceptionEnabled()).toBe(false);
     await page.setDragInterception(true);
+    expect(page.isDragInterceptionEnabled()).toBe(true);
     const draggable = await page.$('#drag');
     await draggable.drag({ x: 1, y: 1 });
     await page.setDragInterception(false);