Skip to content

Commit

Permalink
Improved test infrastructure with mock events and dataTransfer
Browse files Browse the repository at this point in the history
  • Loading branch information
@marceljuenemann
marceljuenemann committed Feb 21, 2016
1 parent 86d2bcd commit 99aedad
Show file tree
Hide file tree
Showing 5 changed files with 277 additions and 111 deletions.
45 changes: 18 additions & 27 deletions test/dndDraggableSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,36 +23,31 @@ describe('dndDraggable', function() {
});

describe('dragstart handler', function() {
var element, event;
var element;

beforeEach(function() {
element = compileAndLink(SIMPLE_HTML);
event = createEvent('dragstart');
});

it('calls setData with serialized data', function() {
event._triggerOn(element);
expect(event._data).toEqual({'Text': '{"hello":"world"}'});
expect(Dragstart.on(element).data).toEqual({'Text': '{"hello":"world"}'});
});

it('stops propagation', function() {
event._triggerOn(element);
expect(event._propagationStopped).toBe(true);
expect(Dragstart.on(element).propagationStopped).toBe(true);
});

it('sets effectAllowed to move by default', function() {
event._triggerOn(element);
expect(event._dt.effectAllowed).toBe('move');
expect(Dragstart.on(element).effectAllowed).toBe('move');
});

it('sets effectAllowed from dnd-effect-allowed', function() {
element = compileAndLink('<div dnd-draggable dnd-effect-allowed="copyMove"></div>');
event._triggerOn(element);
expect(event._dt.effectAllowed).toBe('copyMove');
expect(Dragstart.on(element).effectAllowed).toBe('copyMove');
});

it('adds CSS classes to element', inject(function($timeout) {
event._triggerOn(element);
Dragstart.on(element);
expect(element.hasClass('dndDragging')).toBe(true);
expect(element.hasClass('dndDraggingSource')).toBe(false);

Expand All @@ -62,23 +57,21 @@ describe('dndDraggable', function() {

it('invokes dnd-dragstart callback', function() {
element = compileAndLink('<div dnd-draggable dnd-dragstart="ev = event"></div>');
event._triggerOn(element);
expect(element.scope().ev).toBe(event.originalEvent);
Dragstart.on(element);
expect(element.scope().ev).toEqual(jasmine.any(DragEventMock));
});

it('does not start dragging if dnd-disable-if is true', function() {
element = compileAndLink('<div dnd-draggable dnd-disable-if="true"></div>');
expect(event._triggerOn(element)).toBe(true);
expect(event._defaultPrevented).toBe(false);
expect(event._propagationStopped).toBe(false);
var dragstart = Dragstart.on(element);
expect(dragstart.returnValue).toBe(true);
expect(dragstart.defaultPrevented).toBe(false);
expect(dragstart.propagationStopped).toBe(false);
});

it('sets the dragImage if event was triggered on a dnd-handle', function() {
var dragImage;
event._dt.setDragImage = function(img) { dragImage = img; };
event.originalEvent._dndHandle = true;
event._triggerOn(element);
expect(dragImage).toBe(element[0]);
var dragstart = Dragstart.on(element, {allowSetDragImage: true, dndHandle: true});
expect(dragstart.dragImage).toBe(element[0]);
});
});

Expand Down Expand Up @@ -133,16 +126,14 @@ describe('dndDraggable', function() {
describe('click handler', function() {
it('does nothing if dnd-selected is not set', function() {
var element = compileAndLink(SIMPLE_HTML);
var event = createEvent('click');
event._triggerOn(element);
expect(event._propagationStopped).toBe(false);
var click = new DragEventResult(element, 'click', new DataTransferMock(), {});
expect(click.propagationStopped).toBe(false);
});

it('invokes dnd-selected callback and stops propagation', function() {
var element = compileAndLink('<div dnd-draggable dnd-selected="selected = true"></div>');
var event = createEvent('click');
event._triggerOn(element);
expect(event._propagationStopped).toBe(true);
var click = new DragEventResult(element, 'click', new DataTransferMock(), {});
expect(click.propagationStopped).toBe(true);
expect(element.scope().selected).toBe(true);
});
});
Expand Down
187 changes: 103 additions & 84 deletions test/dndListSpec.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,79 @@
describe('dndList', function() {

describe('constructor', function() {
it('hides the placeholder element', function() {
var element = compileAndLink('<dnd-list><img class="dndPlaceholder"></dnd-list>');
expect(element.children().length).toBe(0);
});
it('hides the placeholder element', function() {
var element = compileAndLink('<dnd-list><img class="dndPlaceholder"></dnd-list>');
expect(element.children().length).toBe(0);
});

describe('dragenter handler', function() {
commonTests('dragenter');
it('disallows dropping from external sources', function() {
element = compileAndLink('<div dnd-list="[]"></div>');
var dragenter = Dragenter.validExternalOn(element);
forAllHandlers(dragenter, element, verifyDropCancelled);
});

describe('dragover handler', function() {
commonTests('dragover');
it('allows dropping from external sources if dnd-external-sources is set', function() {
element = compileAndLink('<div dnd-list="[]" dnd-external-sources="true"></div>');
var dragenter = Dragenter.validExternalOn(element);
forAllHandlers(dragenter, element, verifyDropAccepted);
});

it('disallows mimetypes other than text', function() {
element = compileAndLink('<div dnd-list="[]" dnd-external-sources="true"></div>');
var dragenter = Dragenter.externalOn(element, {'text/html': '{}'});
forAllHandlers(dragenter, element, verifyDropCancelled);
});

it('allows drop if dataTransfer.types contains "Text"', function() {
element = compileAndLink('<div dnd-list="[]" dnd-external-sources="true"></div>');
var dragenter = Dragenter.externalOn(element, {'image/jpeg': '[]', 'Text': '[]'});
forAllHandlers(dragenter, element, verifyDropAccepted);
});

// Old Internet Explorer versions don't have dataTransfer.types.
it('allows drop if dataTransfer.types is undefined', function() {
element = compileAndLink('<div dnd-list="[]" dnd-external-sources="true"></div>');
var dragenter = Dragenter.externalOn(element, {'Text': '[]'}, {undefinedTypes: true});
forAllHandlers(dragenter, element, verifyDropAccepted);
});

it('disallows dropping if dnd-disable-if is true', function() {
var source = compileAndLink('<div dnd-draggable="{}"></div>');
element = compileAndLink('<div dnd-list="[]" dnd-disable-if="disabled"></div>');
element.scope().disabled = true;
forAllHandlers(Dragstart.on(source).dragenter(element), element, verifyDropCancelled);
});

it('allows drop if dnd-disable-if is false', function() {
var source = compileAndLink('<div dnd-draggable="{}"></div>');
element = compileAndLink('<div dnd-list="[]" dnd-disable-if="disabled"></div>');
forAllHandlers(Dragstart.on(source).dragenter(element), element, verifyDropAccepted);
});

it('disallows dropping untyped elements if dnd-allowed-types is set', function() {
var source = compileAndLink('<div dnd-draggable="{}"></div>');
element = compileAndLink('<div dnd-list="[]" dnd-allowed-types="[\'mytype\']"></div>');
forAllHandlers(Dragstart.on(source).dragenter(element), element, verifyDropCancelled);
});

it('disallows dropping elements of the wrong type if dnd-allowed-types is set', function() {
var source = compileAndLink('<div dnd-draggable="{}" dnd-type="\'othertype\'"></div>');
element = compileAndLink('<div dnd-list="[]" dnd-allowed-types="[\'mytype\']"></div>');
forAllHandlers(Dragstart.on(source).dragenter(element), element, verifyDropCancelled);
});

it('allows dropping elements of the correct type if dnd-allowed-types is set', function() {
var source = compileAndLink('<div dnd-draggable="{}" dnd-type="\'mytype\'"></div>');
element = compileAndLink('<div dnd-list="[]" dnd-allowed-types="[\'mytype\']"></div>');
forAllHandlers(Dragstart.on(source).dragenter(element), element, verifyDropAccepted);
});

it('allows dropping external elements even if dnd-allowed-types is set', function() {
element = compileAndLink('<div dnd-list="[]" dnd-allowed-types="[\'mytype\']" ' +
'dnd-external-sources="true"></div>');
forAllHandlers(Dragenter.validExternalOn(element), element, verifyDropAccepted);
});

describe('dragover handler', function() {
var element, event;

beforeEach(function() {
Expand Down Expand Up @@ -136,8 +196,6 @@ describe('dndList', function() {
});

describe('drop handler', function() {
commonTests('drop');

var element, dragoverEvent, dropEvent;

beforeEach(function() {
Expand Down Expand Up @@ -294,81 +352,38 @@ describe('dndList', function() {
});
});

function commonTests(eventType) {
describe('(common tests)', function() {
var element, event;

beforeEach(function() {
triggerDragstart();
element = compileAndLink('<div dnd-list="[]"></div>');
event = createEvent(eventType);
event.originalEvent.target = element[0];
});

it('disallows dropping from external sources', function() {
triggerDragend();
verifyDropDisallowed(element, event);
});

it('allows dropping from external sources if dnd-external-sources is set', function() {
triggerDragend();
element = compileAndLink('<div dnd-list="[]" dnd-external-sources="true"></div>');
verifyDropAllowed(element, event);
});

it('disallows mimetypes other than text', function() {
event._dt.types = ['text/html'];
verifyDropDisallowed(element, event);
});

it('allows drop if dataTransfer.types contains "Text"', function() {
event._dt.types = ['image/jpeg', 'Text'];
verifyDropAllowed(element, event);
});

// Old Internet Explorer versions don't have dataTransfer.types.
it('allows drop if dataTransfer.types is undefined', function() {
event._dt.types = undefined;
verifyDropAllowed(element, event);
});

it('disallows dropping if dnd-disable-if is true', function() {
element = compileAndLink('<div dnd-list="[]" dnd-disable-if="disabled"></div>');
element.scope().disabled = true;
verifyDropDisallowed(element, event);
});

it('allows drop if dnd-disable-if is false', function() {
element = compileAndLink('<div dnd-list="[]" dnd-disable-if="disabled"></div>');
verifyDropAllowed(element, event);
});

it('disallows dropping untyped elements if dnd-allowed-types is set', function() {
element = compileAndLink('<div dnd-list="[]" dnd-allowed-types="[\'mytype\']"></div>');
verifyDropDisallowed(element, event);
});

it('disallows dropping elements of the wrong type if dnd-allowed-types is set', function() {
triggerDragstart('othertype');
element = compileAndLink('<div dnd-list="[]" dnd-allowed-types="[\'mytype\']"></div>');
verifyDropDisallowed(element, event);
});

it('allows dropping elements of the correct type if dnd-allowed-types is set', function() {
triggerDragstart('mytype');
element = compileAndLink('<div dnd-list="[]" dnd-allowed-types="[\'mytype\']"></div>');
verifyDropAllowed(element, event);
});

it('allows dropping external elements even if dnd-allowed-types is set', function() {
triggerDragend();
element = compileAndLink('<div dnd-list="[]" dnd-allowed-types="[\'mytype\']" ' +
'dnd-external-sources="true"></div>');
verifyDropAllowed(element, event);
});
});
function verifyDropAccepted(result) {
expect(result.defaultPrevented).toBe(true);
if (result.type == 'dragenter') {
expect(result.returnValue).toBeUndefined();
expect(result.propagationStopped).toBe(false);
} else {
expect(result.returnValue).toBe(false);
expect(result.propagationStopped).toBe(true);
}
}

function verifyDropCancelled(result, element, opt_defaultPrevented, opt_children) {
expect(result.returnValue).toBe(true);
expect(result.propagationStopped).toBe(false);
expect(result.defaultPrevented).toBe(opt_defaultPrevented || false);
expect(element.hasClass("dndDragover")).toBe(false);
expect(element.children().length).toBe(opt_children || 0);
}

function forAllHandlers(dragenter, element, verify) {
verify(dragenter, element);
var dragover = dragenter.dragover(element, {target: element[0]});
verify(dragover, element);
var dragover2 = dragover.dragover(element);
verify(dragover2, element);
var drop = dragover2.drop(element);
verify(drop, element);
}

/*
* ALL DEPRECATED
*/
function verifyDropAllowed(element, event) {
if (event.originalEvent.type == 'dragenter') {
expect(event._triggerOn(element)).toBeUndefined();
Expand Down Expand Up @@ -403,6 +418,10 @@ describe('dndList', function() {
return element.scope().result;
}

/*
* / ALL DEPRECATED
*/

function createListWithItemsAndCallbacks(horizontal) {
var params = '{event: event, index: index, item: item, external: external, type: type}';
var element = compileAndLink('<ul dnd-list="list" dnd-external-sources="true" ' +
Expand Down
1 change: 1 addition & 0 deletions test/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
<script src="../angular-drag-and-drop-lists.js"></script>

<!-- Spec files -->
<script src="mocks.js"></script>
<script src="init.js"></script>
<script src="dndDraggableSpec.js"></script>
<script src="dndListSpec.js"></script>
Expand Down
1 change: 1 addition & 0 deletions test/init.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ function compileAndLink(html) {
return element;
}

// TODO: deprecated
function createEvent(type, dataTransfer) {
var dataTransfer = dataTransfer || {};
var event = {
Expand Down
Loading

0 comments on commit 99aedad

Please sign in to comment.