ngOnDestroy 中的茉莉花 window.location.reload

Question

public ngOnDestroy(): void { window.location.reload(); }

如何对它进行单元测试？我找到的所有答案都不起作用，或者仅在测试是唯一执行的答案时才起作用。看起来 jasmine 本质上是在测试套件范围之外调用 ngOnDestroy() 。模拟 ngOnDestroy() 并将 console.log 写入真实的东西也总是会导致控制台输出。

规格：

业力茉莉花：4.0.2
茉莉核心：4.0.0
angular: 12

为了完成，我尝试了以下操作：

（还检查了 beforeAll()、afterEach() 和 afterAll() 中的所有可能性）

模拟 ngOnDestroy():

beforeEach(() => {
  fixture = TestBed.createComponent(Component);
  fixture.componentInstance.ngOnDestroy = () => null,
}

spyOn ngOnDestroy():

beforeEach(() => {
  fixture = TestBed.createComponent(Component);
  spyOn(fixture.componentInstance, 'ngOnDestroy').and.callFake(() => null);
}

spyOn fixture.destroy():

beforeEach(() => {
  fixture = TestBed.createComponent(Component);
  spyOn(fixture, 'destroy').and.callFake(() => null);

spyOn 组件函数：

// component:
   public ngOnDestroy(): void { this.reload(); }
   public reload(): void { window.location.reload; }

// test:
   beforeEach(() => {
     fixture = TestBed.createComponent(Component);
     spyOn(fixture.componentInstance, 'reload').and.callFake(() => null);

spyOn 重新加载：

 beforeEach(() => {
   fixture = TestBed.createComponent(Component);
   spyOn(window.location, 'reload').and.callFake(() => null);

模拟重新加载：

 beforeEach(() => {
   fixture = TestBed.createComponent(component);
   window.location.reload = () => null,

模拟位置（这个给出了疯狂的结果...）：

beforeEach(() => {
  fixture = TestBed.createComponent(Component);
  window.location = {reload: () => null};

Answer 1

window 是您的依赖项，因此，它应该像任何其他依赖项一样注入，例如，作为令牌：

export const WINDOW = new InjectionToken('WINDOW');

那么，在Component的模块中，需要提供：

@NgModule({
  // ...
  providers: [
    {
      provide: WINDOW,
      useValue: window,
    },
  ],
  // ...
})

然后，将它注入你的Component，你需要将它作为依赖注入：

export class Component {
  constructor(@Inject(WINDOW) private window: Window) {}

  public ngOnDestroy(): void {
    this.window.location.reload(); // add this.
  }
}

现在，您可以在测试中模拟它：

beforeEach(() => {
  return TestBed.configureTestingModule({
    declarations: [Component],
    providers: [
      {
        provide: WINDOW,
        useValue: {
          location: {
            reload: () => undefined, // or a spy
          },
        },
      },
    ],
  }).compileComponents();
});

盈利！

ngOnDestroy 中的茉莉花 window.location.reload

jasmine window.location.reload in ngOnDestroy

angular

unit-testing

jasmine