tests: improve drag-and-drop coverage

lighthouse-viewer/test/drag-and-drop-test.js

@@ -7,8 +7,6 @@
 
 /* eslint-env jest */
 
-const assert = require('assert');
-
 const testHelpers = require('./test-helpers.js');
 
 // Called before other src import so code that relies on `document` and
@@ -17,10 +15,6 @@ testHelpers.setupJsDomGlobals();
 
 const DragAndDrop = require('../app/src/drag-and-drop.js');
 
-function assertUIReset() {
-  assert.ok(!document.querySelector('.drop_zone').classList.contains('dropping'));
-}
-
 describe('DragAndDrop', () => {
   beforeEach(function() {
     // Reconstruct page on every test so event listeners are clean.
@@ -29,31 +23,62 @@ describe('DragAndDrop', () => {
 
   afterEach(testHelpers.cleanupJsDomGlobals);
 
-  // TODO: test drop event on document. Callback is not getting called
-  // because jsdom doesn't support clipboard API: https://github.com/tmpvar/jsdom/issues/1568/.
-  it.skip('document responds to drag and drop events', done => {
-    const callback = _ => {
-      assert.ok(true, 'file change callback is called after drop event');
-      done();
+  it('document responds to drop event with file', () => {
+    const mockCallback = jest.fn();
+    new DragAndDrop(mockCallback);
+
+    // create custom drop event with mock files in dataTransfer
+    const event = new window.CustomEvent('drop');
+    event.dataTransfer = {
+      files: ['mock file'],
     };
+    document.dispatchEvent(event);
+    expect(mockCallback).toBeCalledWith('mock file');
+  });
 
-    new DragAndDrop(callback);
+  it('document ignores drop event without file', () => {
+    const mockCallback = jest.fn();
+    new DragAndDrop(mockCallback);
 
     document.dispatchEvent(new window.CustomEvent('drop'));
+    expect(mockCallback).not.toBeCalled();
+  });
+
+  it('document responds to dragover event with file', () => {
+    const mockCallback = jest.fn();
+    new DragAndDrop(mockCallback);
+
+    const event = new window.CustomEvent('dragover');
+    event.dataTransfer = {
+      files: ['mock file'],
+    };
+    document.dispatchEvent(event);
+    expect(event.dataTransfer.dropEffect).toEqual('copy');
+  });
+
+  it('document ignores dragover event without file', () => {
+    const mockCallback = jest.fn();
+    new DragAndDrop(mockCallback);
+
+    const event = new window.CustomEvent('dragover');
+    document.dispatchEvent(event);
+    expect(event.dataTransfer).toBeUndefined();
   });
 
-  it('document responds to drag and drop events', () => {
-    // eslint-disable-next-line no-unused-vars
-    const dragAndDrop = new DragAndDrop();
+  it('document responds to mouseleave event when not dragging', () => {
+    new DragAndDrop(jest.fn);
 
     document.dispatchEvent(new window.CustomEvent('mouseleave'));
-    assertUIReset();
+    expect(document.querySelector('.drop_zone').classList.contains('dropping')).toBeFalsy();
+  });
+
+  it('document responds to mouseleave and dragenter events', () => {
+    new DragAndDrop(jest.fn);
 
     document.dispatchEvent(new window.CustomEvent('dragenter'));
-    assert.ok(document.querySelector('.drop_zone').classList.contains('dropping'));
+    expect(document.querySelector('.drop_zone').classList.contains('dropping')).toBeTruthy();
 
-    // TODO: see note above about drop event testing.
-    // document.dispatchEvent(new window.CustomEvent('drop'));
-    // assertUIReset();
+    document.dispatchEvent(new window.CustomEvent('mouseleave'));
+    expect(document.querySelector('.drop_zone').classList.contains('dropping')).toBeFalsy();
   });
 });