test: add failing drag and drop test (#1095)

The test file comes from mdn: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData References #1094
microsoft · Feb 25, 2020 · a6c3735 · a6c3735
1 parent b50e8b3
commit a6c3735
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 0 deletions.
diff --git a/test/assets/drag-n-drop.html b/test/assets/drag-n-drop.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang=en>
+<title>Examples of DataTransfer's setData(), getData() and clearData()</title>
+<meta content="width=device-width">
+<style>
+  div:not(.mouse-helper) {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+<script>
+function dragstart_handler(ev) {
+ console.log("dragStart");
+ // Change the source element's background color to signify drag has started
+ ev.currentTarget.style.border = "dashed";
+ // Set the drag's format and data. Use the event target's id for the data 
+ ev.dataTransfer.setData("text/plain", ev.target.id);
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ ev.preventDefault();
+}
+
+function drop_handler(ev) {
+ console.log("Drop");
+ ev.preventDefault();
+ // Get the data, which is the id of the drop target
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+ // Clear the drag data cache (for all formats/types)
+ ev.dataTransfer.clearData();
+}
+</script>
+<body>
+    <script src="input/mouse-helper.js"></script>
+    <h1>Examples of <code>DataTransfer</code>: <code>setData()</code>, <code>getData()</code>, <code>clearData()</code></h1>
+ <div>
+   <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
+     Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
+ </div>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
+</body>
+</html>
diff --git a/test/mouse.spec.js b/test/mouse.spec.js
@@ -149,5 +149,15 @@ module.exports.describe = function({testRunner, expect, FFOX, CHROMIUM, WEBKIT,
       expect(await page.evaluate('result')).toEqual({x: 30, y: 40});
       await context.close();
     });
+    describe('Drag and Drop', function() {
+      xit('should work', async({server, page}) => {
+        await page.goto(server.PREFIX + '/drag-n-drop.html');
+        await page.hover('#source');
+        await page.mouse.down();
+        await page.hover('#target');
+        await page.mouse.up();
+        expect(await page.$eval('#target', target => target.contains(document.querySelector('#source')))).toBe(true, 'could not find source in target');
+      })
+    });
   });
 };