单元测试确认弹出窗口 Ionic Framework Karma

Question

我应该如何使用 karma 和 jasmine 来测试确认框的两个结果？我有一些基本测试运行，感谢这里的一位乐于助人的人，但我很难模拟 ionicPopup。

如果我能从调用框的 ng-click 一直测试到所有可能的结果，那将是理想的。

查看：

<button ng-click="openPopup()">Open Popup</button>

控制器：

angular.module('starter.thisController', [])

.controller('ThisCtrl', function($scope, $state, $timeout, $ionicPopup) {
    $scope.openPopup = function() {
        var openPopup = $ionicPopup.confirm({
          title: 'Confirm',
          template: 'Are you sure?'
        });

        openPopup.then(function(res) {
          if(res) {
            $scope.confirmClicked();
          }
        });

        $timeout(function() {
          openPopup.close();
          }, 5000);
    };

    $scope.confirmClicked = function() {
      alert("User Clicked Confirm!!!");
    };
});

当前测试：

describe('This Controller', function() {
    var scope, state, timeout, ionicPopup;
    ionicPopup = jasmine.createSpyObj('$ionicPopup spy', ['confirm']);

    beforeEach(module('starter.thisController'));

    beforeEach(inject(function($rootScope, $controller) {
        scope = $rootScope.$new();
        $controller('ThisCtrl', {
            '$scope': scope, 
            '$state': state,
            '$timeout': timeout,
            '$ionicPopup': ionicPopup 
       });
    }));

    describe('Popup', function() { 
        it('should be defined', function() {
            expect(ionicPopup).toBeDefined();
        });
    });
});

感谢您提供的任何帮助:D。

Answer 1

我遇到了同样的问题，我使用 spyOn 解决了它。我会尽量迎合你的例子。

describe('This Controller', function() {
    var scope, state, timeout, $ionicPopup, $q

    beforeEach(module('starter.thisController'));

    beforeEach(inject(function($rootScope, $controller, _$ionicPopup_, _$q_) {
        scope = $rootScope.$new();
        $ionicPopup = _$ionicPopup_;
        $q = _$q_;
        $controller('ThisCtrl', {
            '$scope': scope, 
            '$state': state,
            '$timeout': timeout,
            '$ionicPopup': $ionicPopup 
        });
    }));

    describe('$scope.openPopup', function() {

        it('should call confirmClicked function if ok is clicked in the confirm popup', function() {
            var deferred = $q.defer();
            deferred.resolve(true); //ok is clicked
            spyOn($ionicPopup, 'confirm').and.callFake(function(){return deferred.promise});
            scope.openPopup();
            scope.$digest();
            expect(scope.confirmClicked).toHaveBeenCalled();
        });

        it('should not call confirmClicked if cancel is clicked in the confirm popup', function() {
            var deferred = $q.defer();
            deferred.resolve(false); //cancel is clicked
            spyOn($ionicPopup, 'confirm').and.callFake(function(){return deferred.promise});
            scope.openPopup();
            scope.$digest();
            expect(scope.confirmClicked).not.toHaveBeenCalled();
        });
    });
});

这里的主要区别是我们注入了真正的 $ionicPopup，然后用 spyOn 覆盖它的行为。

单元测试确认弹出窗口 Ionic Framework Karma

Unit Testing a Confirmation Popup Ionic Framework Karma

unit-testing

jasmine

angularjs

karma-runner

ionic-framework