Exploring the drag and drop functionality of an angular-Gridster application using Protractor with a test code.
I have some questions about the functions being used in the code snippet below. Can someone clarify the purpose of evaluate() - the API definition is confusing, and what does dragAndDrop() do? I couldn't find this function mentioned anywhere.
describe('DragAndDrop Test', function () {
require('jasmine-expect');
beforeAll(function () {
context = new Context();
context.get();
browser.waitForAngular();
browser.driver.manage().window().maximize();
});
it('should perform a drag and drop operation on a tile', function () {
//setting the target location for dragging the box
var target = { x: 400, y: 400 };
var box = element(by.css('.ng-scope.gridster-item'));
//fetching scope variables to determine box position
box.evaluate('standardItems').then(function (scope) {
//asserting that the box starts at column 0 and Row 0
expect(scope[0].col).toEqual(0);
expect(scope[0].row).toEqual(0);
});
//performing the drag and drop action on the box
browser.actions().dragAndDrop(box, target).perform();
browser.waitForAngular();
//fetching updated scope after the drag and drop
box.evaluate('standardItems').then(function (scope) {
//verifying if the box was moved to column and row 2 as intended
expect(scope[0].col).toEqual(2);
expect(scope[0].row).toEqual(2);
});
//checking the pixel location post drag and drop
box.getLocation().then(function (location) {
expect(location.x).toEqual(476);
});
});
});
var Context = function () {
//loading the website
this.get = function () {
browser.get('https://rawgit.com/ManifestWebDesign/angular-gridster/master/index.html#/main');
};
};