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,8 +15,12 @@ testHelpers.setupJsDomGlobals();
 
 const DragAndDrop = require('../app/src/drag-and-drop.js');
 
-function assertUIReset() {
-  assert.ok(!document.querySelector('.drop_zone').classList.contains('dropping'));
+function createCustomEvent(type, key, value) {
+  const customDropEvent = new window.CustomEvent(type);
+  if (key && value) {
+    customDropEvent[key] = value;
+  }
+  return customDropEvent;
 }
 
 describe('DragAndDrop', () => {
@@ -29,31 +31,59 @@ 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
+    document.dispatchEvent(createCustomEvent('drop', 'dataTransfer', {
+      files: ['mock file'],
+    }));
+    expect(mockCallback).toBeCalledWith('mock file');
+  });
+
+  it('document responds to drop event without file', () => {
+    const mockCallback = jest.fn();
+    new DragAndDrop(mockCallback);
+
+    document.dispatchEvent(createCustomEvent('drop', 'dataTransfer', null));
+    expect(mockCallback).not.toBeCalled();
+  });
+
+  it('document responds to dragover event with file', () => {
+    const mockCallback = jest.fn();
+    new DragAndDrop(mockCallback);
+
+    const dragoverEvent = createCustomEvent('dragover', 'dataTransfer', {
+      files: ['mock file'],
+    });
+    document.dispatchEvent(dragoverEvent);
+    expect(dragoverEvent.dataTransfer.dropEffect).toEqual('copy');
+  });
 
-    new DragAndDrop(callback);
+  it('document responds to dragover event without file', () => {
+    const mockCallback = jest.fn();
+    new DragAndDrop(mockCallback);
 
-    document.dispatchEvent(new window.CustomEvent('drop'));
+    const dragoverEvent = createCustomEvent('dragover', 'dataTransfer', null);
+    document.dispatchEvent(dragoverEvent);
+    expect(dragoverEvent.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();
   });
 });