Richard Hsu Richard Hsu - 1 month ago 38
AngularJS Question

Karma/jasmine Angular directive submit click unit test failed while running in bunch, but not alone

I have a angular directive that has a

<form>
which has ng-submit bind to a function in directive controller. Standing up the code and running the unit test alone would work.

The problem is when running all of the unit tests, we would see behavior like

PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
Some of your tests did a full page reload!
allMessages PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
Some of your tests did a full page reload!
PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
Some of your tests did a full page reload!


Here is the unit test:

it('Verify submit button is clicked', function () {
var btnSubmit = form.querySelector('#submit');
btnSubmit.click();

timeout.flush();
expect(scope.blah).to.equal(blah);}


when i comment out btnSubmit.click() everything would work.

Here is the html:

<paper-dialog modal class="pa-paper-dialog" id="blah" role="alertdialog">
<paper-button
dialog-dismiss
class="close-button"
ng-click="resetPA(event)">

</paper-button>
<form class="blah" is="iron-form" ng-submit="submitFunction(blah)" method="get" action="/" id="form">
<div class="pa-header">text</div>
<div class="input-fields-panel"></div>
<div class="buttons-panel">
<button type="submit" class="blah" id="submit">Admit</button>
<paper-button noink dialog-dismiss class="blah" ng-click="resetPA(event)">Cancel</paper-button>
</div>
</form>
</paper-dialog>


Any idea why?

thanks!

Answer

We end up taking another route to deal with this...

Instead of doing button click() for form submission, we try to access isolateScope and call the submit function directly in test.

var elem = $compile('<my-directive></my-directive>')(scope);
scope.$digest();
isolateScope = angular.element(elem).isolateScope() || angular.element(elem).scope();

scope.mySubmitfunction(blah blah);

In this way, we would not see any problem from unit test and all will pass.