如何在Angular中对void函数进行单元测试？

Question

我是angular的新手，正在测试我的登录组件，大致如下。它有一个名为handleLogin()的void函数，它会重定向到另一个函数，如下所示。

我该如何测试这个函数？它会重定向到其他一些函数，这些函数也会重定向到其他地方。如何测试这样一个复杂的函数。

- Rajat Singh

---

嘲笑它然后... :) - Jai

Answer 1

it('should not be called redirect after login function', () => {
  const loginService = TestBed.inject(LoginService);
  const authService = TestBed.inject(AuthenticationService);
  spyOn(authService, 'isLoggedIn').and.returnValue(false);  // FALSE
  component.ngOnInit();
  expect(loginSerive.redirectAfterLogin).not.toHaveBeenCalled();
}

it('should be called redirect after login function', () => {
  const loginService = TestBed.inject(LoginService);
  const authService = TestBed.inject(AuthenticationService);
  spyOn(authService, 'isLoggedIn').and.returnValue(true); 
  component.ngOnInit();
  expect(loginSerive.redirectAfterLogin).toHaveBeenCalled();
}

it('should be called redirectToAuth function', () => {
  const loginService = TestBed.inject(LoginService);
  spyOn(loginService, 'redirectToAuth').and.callFake; 
  component. handleLogin();
  expect(loginSerive.redirectToAuth).toHaveBeenCalled();
}

- Ali Adravi

---

谢谢，伙计！我喜欢开发人员仍在解决这个问题！我已经加入了另一个团队，不再与UI团队合作，但还是感谢你的回答！ - Rajat Singh

Answer 2

由于涉及到服务且您需要对组件进行"单元"测试，所以您需要模拟服务并期望在调用组件的handleLogin方法时调用其方法。

可以像这样：

import { LoginComponent } from './login.component';
import { LoginService } from '../../services/login.service';
import { AuthenticationService } from './auth.service';

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

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

  beforeEach(() => {
    service = new LoginService();
    component = new LoginComponent(service);
  });

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

  describe('Method: handleLogin', () => {

    it('should call the `redirectToAuth` method on the `LoginService`', () => {
      spy = spyOn(service, 'redirectToAuth');
      component.handleLogin();
      expect(spy).toHaveBeenCalled();
    });

  });

});

- SiddAjmera