Angular2 测试 : change the injected value of a service

标签 angular angular2-testing

我正在测试一个简单的服务。该服务使用来自另一个服务的 2 个值。

基本上,我想测试这 2 个值:isLogged = falseisLogged = true

是否可以只更改注入(inject)服务的值,还是我需要做其他事情? (我不知道,所以如果你能带我走,我会很感激)。

这是我的测试代码:

编辑 我找到了解决问题的办法。您需要将提供者注入(inject)到 inject 参数中,之后您可以根据需要更改其属性。

  import { TestBed, async, inject } from '@angular/core/testing';
  import { AuthGuardService } from './authguard.service';
  import { Router } from '@angular/router';

  import { AuthService } from './auth.service';

  describe('AuthguardService', () => {

    let calledUrl = '/logged/main/last';

    let authServiceStub = {
      isLogged: false,
      redirectUrl: calledUrl
    };

    class RouterStub {
      navigate(url: string) { return url; }
    };

    beforeEach(() => {
      TestBed.configureTestingModule({
        providers: [
          AuthGuardService,
          { provide: AuthService, useValue: authServiceStub },
          { provide: Router, useClass: RouterStub },
        ]
      });
    });

    it('should ...', inject([AuthGuardService, Router], (service: AuthGuardService, router: Router) => {
      let spy = spyOn(router, 'navigate');

      service.checkLoginState(calledUrl);
      expect(spy).toHaveBeenCalledWith(['/login']);
    }));
  });

最佳答案

您陈述的解决方案是一种方法。如果您想要完成的只是更改测试中的值,更简洁的方法是直接更改 authServiceStub 中的值:

// inside tests:
authServiceStub.isLogged = false;
...
authServiceStub.isLogged = true;

^ 简单但不是很封装。

或者参数化它:

let isLogged: false;
let authServiceStub = {
      isLogged: isLogged,
      redirectUrl: calledUrl
    };
...
// inside tests:
isLogged = false;
...
isLogged = true;

^ 简洁但仍未封装。

或者添加一个setter:

let authServiceStub = {
      isLogged: false,
      setLogged: function(logged) { this.isLogged = logged; },
      redirectUrl: calledUrl
    };
...
// inside tests:
setLogged(false);
...
setLogged(true);

^ 更加封装。可以与您的注入(inject)方法相结合。

或者如果 isLogged 被重新实现为一个函数,您可以使用 spyOn:

// inside tests:
spyOn(authServiceStub, "isLogged").and.returnValue(false);
...
spyOn(authServiceStub, "isLogged").and.returnValue(true);

^ 更多的黑盒和可能更灵活/面向 future ,特别是如果与您的注入(inject)解决方案结合使用(因为您可以彻底更改 stub 或模拟并仍然获得您想要的行为)。这是更多的前期工作,所以可能不值得。但是以这种黑盒方式思考 AuthService 可能会让您有理由将 isLogged 重构为一个函数(或不重构)。

关于Angular2 测试 : change the injected value of a service,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43046063/

相关文章:

angular - 测试依赖于服务的管道

javascript - 使用 ES5 进行 Angular 2 rc.1 测试

javascript - 如何在 Angular 中包含 JavaScript 脚本文件并从该脚本调用函数?

javascript - AngularFire 不会触发更改检测

angular - 使用导入模块对 angular2 组件进行单元测试

unit-testing - 如何在测试中模拟 NavParams?

Angular 测试示例组件无法在 karma 中加载模板

Angular 4 Reactive Form - 显示值

javascript - 如何使用 watch 依次运行多个 NPM 脚本

typescript - Angular 2 + Typescript 编译器复制 html 和 css 文件