Angular Tutorial里的测试坑

发现Angular Tutorial里根本没有提到Unit Test，其实我们每generate一个component，就会自动生成unit test spec，作为一个资深强迫症攻城狮，实在不能视而不见。

按照Angular Tutorial里的step，每增加一个功能，基本上会有一些test case会fail，虽然程序运行正常。主要是因为使用ng generate component时，会把新Module加入app.module.ts，但是却不会更新Unit Test。其他组件fail的原因也类似。

app-<component> is not a known element

app-heros代码敲完后，页面显示正常，单元测试却报错如下。

 Error: Template parse errors:
        'app-heros' is not a known element:
        1. If 'app-heros' is an Angular component, then verify that it is part of this module.
        2. If 'app-heros' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 

解决办法有两种。

直觉Mock才是好方法，不过有待证实。

因为后面会继续增加很多component，所以直接declare比较简单。

1. 导入HerosComponent

import {
   
    HerosComponent } from './heros/heros.component';

  beforeEach(async(() => {
   
   
    TestBed.configureTestingModule({
   
   
      declarations: [
        AppComponent,
        HerosComponent
      ],
    }).compileComponents();
  }));

2. Mock HerosComponent

  beforeEach(async(() => {
   
   
    TestBed.configureTestingModule({
   
   
      declarations: [
        AppComponent,
        MockHerosComponent
      ],
    }).compileComponents();
  }));

@Component({
   
   
  selector: 'app-heros',
  template: ''
})
class MockHerosComponent{
   
   
}

其他Component

添加其他Component的时候也是一样，会遇到类似的错。

• app-heroes (HeroesComponent)
• app-messages (MessagesComponent)
• app-hero-detail (HeroDetailComponent)
• router-outlet (AppRoutingModule)
• app-dashboard (DashboardComponent)
• app-hero-search (HeroSearchComponent)

解决方法类似，如app-hero-detail报错，即需要declare HeroDetailComponent。

Error: Template parse errors:
Can't bind to 'hero' since it isn't a known property of 'app-hero-detail'.
1. If 'app-hero-detail' is an Angular component and it has 'hero' input, then verify that it is part of this module.
2. If 'app-hero-detail' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</ul>

The module has not been imported

以下错误也一样，把相应Module放进declarations即可。

Failed: Component DashboardComponent is not part of any NgModule or the module has not been imported into your module.

router-outlet is not a known element

router-outlet的情况有些特别，因为是RouterModule，所以AppRoutingModule需要放到imports下，而不是declarations里，与下面FormsModule一样。

Failed: Template parse errors:
'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  </nav>
  <!-- <app-heroes></app-heroes> -->
  [ERROR ->]<router-outlet></router-outlet>
  <app-messages></app-messages>
<!-- </div> -->
"): ng:///DynamicTestModule/AppComponent.html@9:2

但是AppRoutingModule是路由，import AppRoutingModule将导致子模块须引入更多其他不相关模块，所以不能作为解决方案。

还好Angular提供了RouterTestingModule。Import RouterTestingModule， 错误消失。