diff --git a/lighthouse-viewer/test/drag-and-drop-test.js b/lighthouse-viewer/test/drag-and-drop-test.js index 641c14633af1..7b1d67c78110 100644 --- a/lighthouse-viewer/test/drag-and-drop-test.js +++ b/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(); }); });