test(drag): test for dropEffect (#5559)

test/page-drag.spec.ts

@@ -145,6 +145,60 @@ describe('Drag and drop', test => {
     ]);
   });
 
+  it('should respect the drop effect', (test, {browserName}) => {
+    test.fixme(browserName === 'chromium', 'Chromium doesn\'t let users set dropEffect on our fake data transfer');
+    test.fixme(browserName === 'firefox');
+  }, async ({context}) => {
+    const page = await context.newPage();
+    expect(await testIfDropped('copy', 'copy')).toBe(true);
+    expect(await testIfDropped('copy', 'move')).toBe(false);
+    expect(await testIfDropped('all', 'link')).toBe(true);
+    expect(await testIfDropped('all', 'none')).toBe(false);
+
+    expect(await testIfDropped('copyMove', 'copy')).toBe(true);
+    expect(await testIfDropped('copyLink', 'copy')).toBe(true);
+    expect(await testIfDropped('linkMove', 'copy')).toBe(false);
+
+    expect(await testIfDropped('copyMove', 'link')).toBe(false);
+    expect(await testIfDropped('copyLink', 'link')).toBe(true);
+    expect(await testIfDropped('linkMove', 'link')).toBe(true);
+
+    expect(await testIfDropped('copyMove', 'move')).toBe(true);
+    expect(await testIfDropped('copyLink', 'move')).toBe(false);
+    expect(await testIfDropped('linkMove', 'move')).toBe(true);
+
+    expect(await testIfDropped('uninitialized', 'copy')).toBe(true);
+
+    async function testIfDropped(effectAllowed: string, dropEffect: string) {
+      await page.setContent(`
+        <div draggable="true">drag target</div>
+        <drop-target>this is the drop target</drop-target>
+      `);
+      await page.evaluate(({effectAllowed, dropEffect}) => {
+        window['dropped'] = false;
+
+        document.querySelector('div').addEventListener('dragstart', event => {
+          event.dataTransfer.effectAllowed = effectAllowed;
+          event.dataTransfer.setData('text/plain', 'drag data');
+        });
+
+        const dropTarget: HTMLElement = document.querySelector('drop-target');
+        dropTarget.addEventListener('dragover', event => {
+          event.dataTransfer.dropEffect = dropEffect;
+          event.preventDefault();
+        });
+        dropTarget.addEventListener('drop', event => {
+          window['dropped'] = true;
+        });
+      }, {effectAllowed, dropEffect});
+      await page.hover('div');
+      await page.mouse.down();
+      await page.hover('drop-target');
+      await page.mouse.up();
+      return await page.evaluate('dropped');
+    }
+  });
+
   async function trackEvents(target: ElementHandle) {
     const eventsHandle = await target.evaluateHandle(target => {
       const events: string[] = [];