Testing drag-and-drop - Ember NYC 2016-04-28

card.js

import Ember from 'ember';
export default Ember.Component.extend({
  draggable: true,
  attributeBindings: [ 'draggable' ],
  dragStart(event) {
    event.dataTransfer.setData('text/data', this.get('id'));
  }
});

target.js

import Ember from 'ember';
export default Ember.Component.extend({
  dragOver(event) {
    // We need to preventDefault() to be able to receive a drop event.
    // See https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets
    event.preventDefault();
  },

  drop(event) {
    let droppedId = event.dataTransfer.getData('text/data');
    if (this.get('acceptId') === droppedId) {
      // matched
    } else {
      // didn't match
    }
  }
});

test-helper.js

import Ember from 'ember';

export class DataTransferMock {
  constructor() {
    this.savedData = { };
  }

  setData(format, data) {
    this.savedData[ format ] = data;
  }

  getData(format) {
    return this.savedData[ format ];
  }
}

export default Ember.Test.registerAsyncHelper('dragAndDrop',
  function(app, draggedElementSelector, targetElementSelector) {
    let draggedElement = find(draggedElementSelector);
    let dropTargetElement = find(targetElementSelector);
    Ember.run(function() {
      let dragStartEvent = Ember.$.Event('dragstart');
      dragStartEvent.dataTransfer = new DataTransferMock();
      draggedElement.trigger(dragStartEvent);

      let dropEvent = Ember.$.Event('drop');
      dropEvent.dataTransfer = dragStartEvent.dataTransfer;
      dropTargetElement.trigger(dropEvent);

      draggedElement.trigger('dragend');
    });
});

test.js

test('the score updates when dragging/dropping cards', function(assert) {
  startGame();

  dragAndDrop('.card:eq(0)', '.valid-target');
  andThen(() => {
    assert.containsExactly('.points', '10', 'score should be 10 points after a successful match');
  });

  dragAndDrop('.card:eq(0)', '.invalid-target');
  andThen(() => {
    assert.containsExactly('.points', '5', 'score should be decreased to 5 after a miss');
  });
});

Testing drag-and-drop - Ember NYC 2016-04-28

Testing drag-and-drop

Phil Gengler
@pgengler
Ember NYC
April 28, 2016