使用 TestBed 为具有依赖关系的 Angular 服务创建测试用例

Question

再会。

目前正在角度框架中运行一个项目。我正在尝试为具有依赖项的服务编写一个测试用例，但显然不了解如何构建它。下面是有问题的两个类。

这是登录服务

@Injectable({
  providedIn: 'root'
})
export class LoginService implements CanActivate, OnInit {

  constructor(private router: Router,
              private httpClient: HttpClient,
              private cookieService: CookieService) { }

这是 LoginService 的测试类：

import {Router} from '@angular/router';
import {CookieService} from 'angular2-cookie/core';
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {LoginService} from './login.service';
import {HttpClient} from '@angular/common/http';

describe('Service: LoginService', () => {

  let router: Router;
  let httpClient: HttpClient;
  let cookieService: CookieService;
  let service: LoginService;
  let fixture: ComponentFixture<LoginService>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [LoginService],
      providers: [Router, HttpClient, CookieService]
    });

    fixture = TestBed.createComponent(LoginService);
    service = fixture.componentInstance;
    router = TestBed.get(Router);
    httpClient = TestBed.get(HttpClient);
    cookieService = TestBed.get(CookieService);
  });

  it('should return true from isLoggedIn when token is set', function () {
    spyOn(cookieService, 'get').and.returnValue('true');
    expect(service.isLoggedIn()).toBeTruthy();
  });
});

很简单，因为我正在尝试。我收到的错误是：

Error: Unexpected value 'LoginService' declared by the module 'DynamicTestModule'. Please add a @Pipe/@Directive/@Component annotation.
    at syntaxError (http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:2547:1)

基本上我的目的是注入 LoginService 的依赖项，然后在各个测试中使用间谍方法来破坏我认为合适的流程。

如果能朝正确的方向推动，我们将不胜感激。如果解决方案已记录，请链接。

使用 TestBed 时，与组件相比，服务的处理方式是否不同？老实说，我不确定如何解释该错误，为什么服务会有这些注释？

阅读@Dream88后编辑

我的问题的解决方案：

import {Router} from '@angular/router';
import {CookieService} from 'angular2-cookie/core';
import {LoginService} from './login.service';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {AppRoutingModule} from '../../app-routing.module';
import {TestBed} from '@angular/core/testing';
import {AppModule} from '../../app.module';

describe('Service: LoginService', () => {

  let router: Router;
  let httpClient: HttpClient;
  let cookieService: jasmine.SpyObj<CookieService>;
  let service: LoginService;

  beforeEach(() => {
    const cookieServiceSpy = jasmine.createSpyObj('CookieService', ['get']);
    TestBed.configureTestingModule({
      imports: [
        AppModule,
        AppRoutingModule,
        HttpClientModule
      ],
      providers: [LoginService, {
        provide: CookieService, useValue: cookieServiceSpy
      }]
    });

    router = TestBed.get(Router);
    httpClient = TestBed.get(HttpClient);
    cookieService = TestBed.get(CookieService);
    service = new LoginService(router, httpClient, cookieService);
  });

  it('should return true from isLoggedIn when token is set', function () {
    cookieService.get.and.returnValue('true');
    expect(service.isLoggedIn()).toBeTruthy();
  });
});

长话短说——我不知道我在输入什么。了解了底层的实现之后就很简单了。谢谢你的鼓励。将 Dream88 标记为正确。

我问自己产品代码是如何工作的。H服务如何注入。服务的界限是什么（@Injectable）。这暗示了导入和提供者中应该包含什么。

问候。

Answer 1

这不会起作用，因为：fixture = TestBed.createComponent(LoginService);应该创建一个component带有注释的 ie 东西@component。使用@service它并不意味着渲染 UI。因此，出现错误。

测试服务应该是简单的测试功能，不需要TestBed. 仅当您想要测试使用所述服务的组件时才需要执行此操作，在这种情况下，您需要将其添加到提供程序列表中。

如果只是测试服务，请查看Angular Doc。