Angular Window.Location.Href 的单元测试覆盖率

Question

我正在使用 Angular 7 并尝试编写一些单元测试来覆盖这个简单的组件。

export class DialogComponent implements OnInit {
 
  appError: any;
  httpErrorResponse: HttpErrorResponse;
 
  constructor(
    public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {
    Eif (data && typeof AppError) {
      this.appError = data;
    } else {
      throw new Error('unknown error type');
    }
  }
 
  ngOnInit() {
  }
 
  navigate(url: string): void {
    if (!url) {
      throw new Error('url is undefined');
    }
    window.location.href = url;
  }
 
}

不幸的是，我无法让我的测试用例检查 throw new Error('unknown error type'); 和整个 navigate 函数。

这是我尝试过的一个例子：这是成功的，但是封面仍然没有清理干净，这意味着我没有成功。

it('should run #navigate()', async () => {
    const dialog = spyOn(component, 'navigate');
    component.navigate('http://dummy.com');
    expect(dialog).toHaveBeenCalledWith('http://dummy.com');

});

任何指导将不胜感激

编辑：AppError

export class AppError {
    title?: string;
    customMessage?: string;
    message?: string;
    popUpCloseable: boolean;
    navigation?: string;
    details?: string;
    status?: any;
    code?: any;
    name?: any;
    url?: string;
    statusText?: string;
    customTextButton?: string;
}

Answer 1

在 Angular 组件中使用 window 时，通常的做法是将其作为 WindowRef 服务注入。这使您的应用程序更符合依赖注入的原则，并简化您的测试。

您可以简单地创建以下包装器服务：

import { Injectable } from '@angular/core';

function getWindow (): any {
    return window;
}

@Injectable()
export class WindowRefService {
  get nativeWindow (): any {
    return getWindow();
  } 
}

就您的测试而言，您可以通过

注入它

beforeEach(() => {

  mockWindowRefService = { nativeWindow: {}};

  TestBed.configureTestingModule({
    providers: [
      { provide: WindowRefService, useValue: mockWindowRefService }
   ]  
 });
});

Angular Window.Location.Href 的单元测试覆盖率

Angular unit test coverage for Window.Location.Href

unit-testing

jasmine

typescript

karma-jasmine

angular