Call AngularJS Function from CasperJS

Question

I have a directive that is inside a controller. I am trying to write unit tests to test what happens when this code is executed. The code is called not from a click event or anything but from a socket.io emit. Rather than trying to mock socket.io I'm trying to call the function directly from casper.js not phantom.js

here is the directive

// exposed to UI with a poniter
scope.testingText = testingText;

function testingText(int, string) {
    return int + string;
}

The function I have in the casper suite is:

function callDirectiveJavascript() {
    casper.evaluate(function () {            
        var test = scope.testingText(100, 'string');
        console.log('test:' + test);
    });
}

The console.log statement is never evaluated. When I run

casper.on( 'page.error', function (msg, trace) {
    this.echo( 'Error: ' + msg, 'ERROR' );
});

scope is not defined. Trying to figure out how to get access to the scope of my directive.

Any ideas? Beyond just the console.log, I've seen people calling js through casper with this implementation, but haven't seen it specific to angularjs

not a duplicate, the console.log is not within the function I'm calling — Jon Harding, Aug 04 '15 at 19:23
@PankajParkar Please don't use you hammer when you are not sure and don't reopen immediately just because the OP doesn't immediately see the connection. — Artjom B., Aug 04 '15 at 21:06
Duplicate: [Using angularJS function in phantomJS](http://stackoverflow.com/questions/30502454/using-angularjs-function-in-phantomjs), because `casper.evaluate()` is the exact same function as `page.evaluate()`. — Artjom B., Aug 04 '15 at 21:52
Not a duplicate as it mentions accessing items from the directive, see answer — Jon Harding, Aug 04 '15 at 22:09

score 0 · Accepted Answer · answered Aug 04 '15 at 22:09

The comment that marks this as a duplicate was helpful in solving the issue, but I don't feel is an exact duplicate. It does not address accessing functions on the directive.

If in your directive scope declaration you are passing items into the directive

part of directive declaration

var directive = {
    restrict: 'A',
    replace: true,
    scope: {
        denominations: '='
    },
    templateUrl: '/app/myPath.html',
    link: link
};

HTML of controller that has directive embeded

<div id="denominations" cr-denominations denominations="vm.denominations"></div>

syntax to access directive scope is as follows

angular.element(document.getElementById('elementId')).children().scope().theFunctionINeeded(dataObject);

If you aren't passing items into the directive. I believe you can use:

scope: true

in the directive declaration and you won't need to use the .children() notation.

Call AngularJS Function from CasperJS

1 Answers1