我正在测试一个订阅路由参数的组件.每次考试都通过,一切正常.但如果我查看控制台,我可以看到一个错误:

清理组件ApplicationView组成部分时出错

你知道为什么会这样吗?

I tried removing the 100 from 101 method and the error disappears.

Is karma/jasmine supporting 100 automatically?

下面是组件和测试

组成部分

import { 组成部分, OnInit } from '@angular/core';   
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Rx'

import { AppService } from 'app.service';

@组成部分({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class App组成部分 implements OnInit {
  private routeSubscription: Subscription;

  // Main ID
  public applicationId: string;


  constructor(
    private route: ActivatedRoute,
    private _service: AppService
  ) { }

  ngOnInit() {
    this.routeSubscription = this.route.params.subscribe(params => {
      this.applicationId = params['id'];

      this.getDetails();
      this.getList();
    });
  }

  getDetails() {
    this._service.getDetails(this.applicationId).subscribe(
      result => {     
        console.log(result);
      },
      error => {  
        console.error(error);        
      },
      () => {
        console.info('complete');
      }
    );
  }

  getList(notifyWhenComplete = false) {
    this._service.getList(this.applicationId).subscribe(
      result => {     
        console.log(result);
      },
      error => {  
        console.error(error);        
      },
      () => {
        console.info('complete');
      }
    );
  }

  ngOnDestroy() {
    this.routeSubscription.unsubscribe();
  }

}

组成部分 spec file

import { NO_ERRORS_SCHEMA } from '@angular/core';
import {
  async,
  fakeAsync,
  组成部分Fixture,
  TestBed,
  tick,
  inject
} from '@angular/core/testing';
import {
  RouterTestingModule
} from '@angular/router/testing';
import {
  HttpModule
} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Router, ActivatedRoute } from '@angular/router';

// 组成部分s
import { App组成部分 } from './app.component';

// Service
import { AppService } from 'app.service';
import { AppServiceStub } from './app.服务树桩';

let comp:    App组成部分;
let fixture: 组成部分Fixture<App组成部分>;
let service: AppService;

let expectedApplicationId = 'abc123';

describe('App组成部分', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [App组成部分],
      imports: [RouterTestingModule, HttpModule],
      providers: [
        FormBuilder,
        {
          provide: ActivatedRoute,
          useValue: {
            params:  Observable.of({id: expectedApplicationId})
          }
        },
        {
          provide: AppService,
          useClass: AppServiceStub
        }    
      ],
      schemas: [ NO_ERRORS_SCHEMA ]
    })
    .compile组成部分s();
  }));

  tests();
});

function tests() {
  beforeEach(() => {
    fixture = TestBed.create组成部分(App组成部分);
    comp = fixture.componentInstance;

    service = TestBed.get(AppService);
  });


  /*
  *   COMPONENT BEFORE INIT
  */
  it(`should be initialized`, () => {
    expect(fixture).toBeDefined();
    expect(comp).toBeDefined();
  });


  /*
  *   COMPONENT INIT
  */

  it(`should retrieve param id from ActivatedRoute`, async(() => {
    fixture.detectChanges();

    expect(comp.applicationId).toEqual(expectedApplicationId);
  }));

  it(`should get the details after ngOnInit`, async(() => {
    spyOn(comp, 'getDetails');
    fixture.detectChanges();

    expect(comp.getDetails).toHaveBeenCalled();
  }));

  it(`should get the list after ngOnInit`, async(() => {
    spyOn(comp, 'getList');
    fixture.detectChanges();

    expect(comp.getList).toHaveBeenCalled();
  }));
}

服务树桩

import { Observable } from 'rxjs/Observable';

export class AppServiceStub {
  getList(id: string) {
    return Observable.from([              
      {
        id: "7a0c6610-f59b-4cd7-b649-1ea3cf72347f",
        name: "item 1"
      },
      {
        id: "f0354c29-810e-43d8-8083-0712d1c412a3",
        name: "item 2"
      },
      {
        id: "2494f506-009a-4af8-8ca5-f6e6ba1824cb",
        name: "item 3"      
      }
    ]);
  }
  getDetails(id: string) {
    return Observable.from([      
      {        
        id: id,
        name: "detailed item 1"         
      }
    ]);
  }
}

推荐答案

出现"组件清理期间出错"错误消息是因为调用ngOnDestroy()时,this.routeSubscription未定义.这是因为ngOnInit()从未被调用,这意味着您从未订阅过该路由.如Angular testing tutorial中所述,直到您第一次调用fixture.detectChanges(),组件才完全初始化.

因此,正确的解决方案是在调用createComponent之后立即向beforeEach()块添加fixture.detectChanges().可以在创建设备后的任何时间添加它.这样做将确保组件完全初始化,这样组件清理也将按预期进行.

Typescript相关问答推荐

"@ clerker/nextjs/server没有名为clerkMiddleware的导入成员'

Typescript自定义键映射

调用另一个函数的函数的Typescript类型,参数相同

类型是工作.但它失go 了正确变体的亮点..为什么?或者如何增强?

从接口创建类型安全的嵌套 struct

如何根据特定操作隐藏按钮

编剧错误:正在等待Expect(Locator).toBeVisible()

我可以为情态车使用棱角形的路由守卫吗?

为什么在这个例子中,我把缺少的属性添加到对象中时,TypeScrip没有拾取,如何修复?

使用条件类型的类型保护

如何创建由空格连接的多个字符串的类型

如何为特定参数定义子路由?

如何在打字角react 式中补齐表格组

有没有更干净的方法来更新**key of T**的值?

是否可以将类型参数约束为不具有属性?

如何避免TS2322;类型any不可分配给类型never;使用索引访问时

如何向我的自定义样式组件声明 custom.d.ts ?

Typescript 从泛型推断类型

如何在由函数参数推断的记录类型中具有多个对象字段类型

使用受保护的路由和入门来响应路由