Javascript.confirm () and Angularjs Karma e2e test

Question

I have an Angularjs application that uses simple javascript validation before doing some things.

Controller:

function TokenController($scope) { $scope.token = 'sampleToken'; $scope.newToken = function() { if (confirm("Are you sure you want to change the token?") == true) { $scope.token = 'modifiedToken'; } }; } 

View:

 <div id="tokenDiv"> Token:{{token}} <button ng-click="newToken()">New Token</button> </div> 

Now I want to pass the end test to verify that the token is correctly replaced in the view. How to intercept the javascript.confirm() call so that it does not stop the test execution?

Test:

 it('should be able to generate new token', function () { var oldValues = element('#tokenDiv').text(); element('button[ng-click="newToken()"]').click(); // Here the javascript confirm box pops up. expect(element('#tokenDiv').text()).not.toBe(oldValues); }); 

So far I have been trying to override the window.confirm function, but then the actual call complains that it is undefined.

I also wanted to configure the Jasmine spy on window.confirm , but in the following syntax spyOn(window, 'confirm'); he gives me a message stating that you cannot keep track of null .

How can I do such a trial?

Answer 1

E2E Testing

Consult this project: https://github.com/katranci/Angular-E2E-Window-Dialog-Commands

Device testing

If you are creating a service for dialog boxes, you can make fun of this service in your unit test to make your code testable:

controller

 function TokenController($scope, modalDialog) { $scope.token = 'sampleToken'; $scope.newToken = function() { if (modalDialog.confirm("Are you sure you want to change the token?") == true) { $scope.token = 'modifiedToken'; } }; } 

modalDialog service

 yourApp.factory('modalDialog', ['$window', function($window) { return { confirm: function(message) { return $window.confirm(message); } } }]); 

modalDialogMock

 function modalDialogMock() { this.confirmResult; this.confirm = function() { return this.confirmResult; } this.confirmTrue = function() { this.confirmResult = true; } this.confirmFalse = function() { this.confirmResult = false; } } 

Test

 var scope; var modalDialog; beforeEach(module('yourApp')); beforeEach(inject(function($rootScope, $controller) { scope = $rootScope.$new(); modalDialog = new modalDialogMock(); var ctrl = $controller('TokenController', {$scope: scope, modalDialog: modalDialog}); })); it('should be able to generate new token', function () { modalDialog.confirmTrue(); scope.newToken(); expect(scope.token).toBe('modifiedToken'); }); 

Answer 2

Another option would be to directly create a spy and automatically return true :

 //Jasmine 2.0 spyOn(window, 'confirm').and.callFake(function () { return true; }); //Jasmine 1.3 spyOn(window, 'confirm').andCallFake(function () { return true; }); 

Answer 3

In unit tests, you can make fun of the $ window object as follows:

Your test:

 beforeEach(function() { module('myAppName'); inject(function($rootScope, $injector) { $controller = $injector.get('$controller'); $scope = $rootScope.$new(); var windowMock = { confirm: function(msg) { return true } } $controller('UsersCtrl', { $scope: $scope, $window: windowMock }); }); }); 

Your controller:

 myAppName.controller('UsersCtrl', function($scope, $window) { $scope.delete = function() { var answer = $window.confirm('Delete?'); if (answer) { // doing something } } });