Angular 带有另一个参数的 SpyOn 服务

Question

如何使用另一个服务参数监视和模拟服务？例如，我的新 Authservice 有这个参数，

export class AuthService{
    constructor(public serviceAbcd: ServiceAbcd) {}

这是一个示例资源，在 AuthService 上没有构造函数参数。

https://codecraft.tv/courses/angular/unit-testing/mocks-and-spies/

describe('Component: Login', () => {

  let component: LoginComponent;
  let service: AuthService;
  let spy: any;

  beforeEach(() => {
    service = new AuthService();
    component = new LoginComponent(service);
  });
    
  it('needsLogin returns true when the user has not been authenticated', () => {
    spy = spyOn(service, 'isAuthenticated').and.returnValue(false);
    expect(component.needsLogin()).toBeTruthy();
    expect(service.isAuthenticated).toHaveBeenCalled(); 
  });

  afterEach(() => { 
    service = null;
    component = null;
  });

});

我们正在尝试在没有 Testbed 的情况下进行测试 https://dev.to/angular/unit-testing-in-angular-to-testbed-or-not-to-testbed-3g3b

Answer 1

你能做到吗service = new AuthService()？它不抱怨它需要一个参数？

尝试做：

service = new AuthService({/* mock ServiceAbcd here */});

Answer 2

您可以使用 angular 的 Testbed 并注入服务

import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

describe('Component: Login', () => {
  let service: AuthService;
  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      imports: [
      ],
      declarations: [LoginComponent]
    })
      .compileComponents();
    service = Testbed.inject(AuthService);
  }));
  it('needsLogin returns true when the user has not been authenticated', () => {
    spy = spyOn(service, 'isAuthenticated').and.returnValue(false);
    expect(component.needsLogin()).toBeTruthy();
    expect(service.isAuthenticated).toHaveBeenCalled(); 
  });

  afterEach(() => { 
    service = null;
    component = null;
  });
}

Angular 带有另一个参数的 SpyOn 服务

Angular SpyOn Service with Another Parameter

angular

typescript

karma-jasmine

angular11