Can someone explain what evaluate() and dragAndDrop() are calling in the following Angular Test Code?

Question

The following code is used to test the drag and drop orientation of an angular-Gridster application using Protractor.

I'm new to some of these function calls below, would someone be kind enough to explain the significance of evaluate() --the API definition is too confusing, and dragAndDrop()? -- can't find this function anywhere

describe('DragAndDrop Test', function () {

require('jasmine-expect');

beforeAll(function () {
    context = new Context();
    context.get();
    browser.waitForAngular();
    browser.driver.manage().window().maximize();

});

it('should drag and drop a tile', function () {

    //target is where we are dragging the box to.  Box is the Box
    var target = { x: 400, y: 400 };
    var box = element(by.css('.ng-scope.gridster-item'));

    //scope is going to hold the scope variables that tell us where the box is located
    //see the documentation for angular gridster on github for info on scope variable
    //get the standardItems Scope
    box.evaluate('standardItems').then(function (scope) {

        //make sure the box we are using is in column 0 and Row 0
        expect(scope[0].col).toEqual(0);
        expect(scope[0].row).toEqual(0);
    });

    //drag and drop the box somewhere else.
    browser.actions().dragAndDrop(box, target).perform();
    browser.waitForAngular();

    //get the updated scope
    box.evaluate('standardItems').then(function (scope) {

        //test to see that the box was actually moved to column and row 2, better test
        expect(scope[0].col).toEqual(2);
        expect(scope[0].row).toEqual(2);
    });
    //this is to test the pixel location which is not the best
    box.getLocation().then(function (location) {
        expect(location.x).toEqual(476);
    });
});
});

var Context = function () {

//load the website
this.get = function () {
    browser.get('https://rawgit.com/ManifestWebDesign/angular-gridster/master/index.html#/main');
};
};

score 2 · Accepted Answer · answered May 02 '16 at 00:50

2

evaluate() would evaluate expression in the scope of the element you call it on. Useful when you need to access a particular variable in the scope:

Evaluates the input as if it were on the scope of the current element.

dragAndDrop() is a "browser action" and is inherited from the WebDriverJS (remember, Protractor is built on top of WebDriverJS):

Convenience function for performing a "drag and drop" manuever. The target element may be moved to the location of another element, or by an offset (in pixels).

answered May 02 '16 at 00:50

alecxe

462,703
120
1,088
1,195

thank you, could you explain evaluate() a little bit simpler? – Kode_12 May 02 '16 at 04:30
@KunalOjha may I just refer you to the example usages and related threads - should clear things up: http://stackoverflow.com/a/20620056/771848, http://stackoverflow.com/a/27629579/771848, http://stackoverflow.com/a/36385225/771848, http://stackoverflow.com/a/35946919/771848... – alecxe May 02 '16 at 12:23

Can someone explain what evaluate() and dragAndDrop() are calling in the following Angular Test Code?

1 Answers1