angularjs - 使用模拟测试 AngularJS 服务的初始化

标签 angularjs unit-testing jasmine angular-mock

我正在尝试测试 angular.service 在初始化时响应从另一个服务获取的值的方式,并且我很难找到一种不笨拙的方法......更不用说有效的方法了.

我尝试测试的服务看起来有点像这样:

angular.module('myApp')
  .service('myService', function (Auth, DataGrabber) {
    var self = this;

    this.initialize = function () {
       this.user = Auth.getUser();

       if (!this.user.name) {
         DataGrabber.grabName();
       }

       if (!this.user.birthday) {
         DataGrabber.grabBirthday();
       }
    }

    this.initialize();
  })

这是我尝试测试它的不太顺利的方法:

describe('myService', function () {
   var myService;
   var dataGrabberMock;
   var authMock;
   var grabbedName;
   var grabbedBirthday;


   beforeEach(function () {
     module('myApp')
   })

   beforeEach(function() {
     grabbedName = false;
     grabbedBirthday = false;

     authMock = {
       getUser: function () {
         return { 
                  name: 'Bob',
                  birthday: 'Feb 22'
                }
       }
     }

     dataGrabberMock = {
       grabName: function () {
          grabbedName = true;
       },
       grabBirthday: function () {
          grabbedBirthday = true;
       }
     }

     module(function ($provide) {
       $provide.value('Auth', authMock);
       $provide.value('DataGrabber', dataGrabberMock);
     })
   })

   it ('just gets info if all data is present', function () {
     inject(function($injector) {
       myService = $injector.get('myService');
       expect(myService.user.name).toBe('Bob');
       expect(myService.user.birthday).toBe('Feb 22');
     });
   });

   it ('gets info if name is missing', function () {
     // how do I stub the new user response here? 
   })

   it ('calls birthdayGetter if birthday is missing', function () {
     // here too?
   })
})

更改 authMock 为每个测试提供的值的最简洁方法是什么?

我尝试了无数种不同的inject()、$injector、$provide 和spyOn() 组合。我最终通过设置 stub 和 spy 并在测试中显式调用 myService.initialize() 使其工作,但随后初始化代码为每个测试运行两次,感觉不对。

我是 Angular 测试的新手,所以很可能有一种更好的方法被我作为新手忽略了。

谢谢!

最佳答案

dataGrabberMock 的赋值有拼写错误

要更改 authMock 的值,您可以创建一个单独的方法来设置模拟,以及一个用于注入(inject)服务的方法并在测试中调用这两个方法。

beforeEach(function () {
  grabbedName = false;
  grabbedBirthday = false;

  dataGrabberMock = {
    grabName: function () {
      grabbedName = true;
    },
    grabBirthday: function () {
      grabbedBirthday = true;
    }
  };

  spyOn(dataGrabberMock, 'grabName');
  spyOn(dataGrabberMock, 'grabBirthday');

  module(function ($provide) {
    $provide.value('Auth', authMock);
    $provide.value('DataGrabber', dataGrabberMock);
  });
});

var authMock;

function setupAuthMock(name, birthday){
  authMock = {
    getUser: function () {
      return {
        name: name,
        birthday: birthday
      };
    }
  };
}

function setupAuthMockWithoutName(birthday){
  authMock = {
    getUser: function () {
      return {
        birthday: birthday
      };
    }
  };
}

function setupAuthMockWithoutBirthday(name){
  authMock = {
    getUser: function () {
      return {
        name: name
      };
    }
  };
}

function setupService() {
  inject(function ($injector) {
    myService = $injector.get('myService');
  });
}

it('just gets info if all data is present', function () {
  setupAuthMock('Bob', 'Feb 22');
  setupService();
  expect(myService.user.name).toBe('Bob');
  expect(myService.user.birthday).toBe('Feb 22');
});

it('gets info if name is missing', function () {    
  setupAuthMockWithoutName('Feb 30');
  setupService();
  expect(dataGrabberMock.grabName).toHaveBeenCalled();
});

it('calls birthdayGetter if birthday is missing', function () {
  setupAuthMockWithoutBirthday('Bob');
  setupService();
  expect(dataGrabberMock.grabBirthday).toHaveBeenCalled();
});

关于angularjs - 使用模拟测试 AngularJS 服务的初始化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32461061/

相关文章:

javascript - Jasmine 和 node.js

unit-testing - Angular 2 和 Jasmine : "Uncaught Error at injectionError"

javascript - 工厂和 Controller 依赖错误

javascript - Angular 中的幻灯片放映 css 过渡

c# - 断言包含匿名类型的 JsonResult

python - 生菜、 Django 的背景

java - 部分模拟子类的方法使其绕过父类(super class)构造函数

javascript - 使用 $routeParams 资源对 AngularJS Controller 进行单元测试

javascript - ui-select 将数组元素显示为下拉列表中的选项

javascript - 从 javascript 代码触发 ngFx 动画