Angular 2 Jasmine 测试，加载 app.component.ts 中的所有组件? [英] Angular 2 Jasmine testing, Loading all components in app.component.ts?

问题描述

我正在开发一个小型测试应用程序来更好地学习 Angular 2 和 Angular 2 中的单元测试.来自 react - Jest 背景；在 app.component.ts 中包含所有组件感觉很奇怪.

I'm working on a small test app to learn Angular 2 and unit testing in Angular 2 a bit better. Coming from a react - Jest background; it feels weird to include all components in the app.component.ts.

这就是我目前所拥有的组件层次结构的样子:

This is what the component Hierarchy looks like for what I have so far:

App.Component > Layout.Component > Header.Component > Nav.Component

App.Component > Layout.Component > Header.Component > Nav.Component

当我运行 npm test 时，我得到了

When I run npm test, I get the error of

main-header' 不是已知元素:

main-header' is not a known element:

当我通过在 App.Component.spec.ts 中导入并声明绑定到该选择器的组件来解决此问题时，我只会在下一个组件/选择器内联时遇到相同的错误.

When I'd fix this by Importing and declaring the component bound to that selector in App.Component.spec.ts, I would just get the same error for the next component/selector inline.

这是一个包含许多组件的大型应用程序吗?我可以看到 App.Component 的测试变得庞大且无法维护.经过几次谷歌搜索，产生了 AngularJS 和 Angular RC.X 结果……我已经走到了死胡同.我的直觉告诉我出了点问题，这不可能是在 Angular 2 中完成测试的方式......但我可能是错的！

Had this been a large app with many components; I could see App.Component's Test becoming large and unmaintainable. After several google searches that yielded AngularJS and Angular RC.X results.. I've hit a dead end. My Gut is telling me something is wrong and that this can't be the way Testing in Angular 2 is done.. but I could be wrong!

推荐答案

请详细说明您在 Angular 上生成项目的方式.我建议你使用 Angular CLI 来生成你的项目/组件/管道/服务，因为它会代表你为每个生成一个 spec.ts 文件，并将你的组件链接到一个模块.

Please give more details about the way you generate your project on Angular. I recommend you to use Angular CLI to generate your project/components/pipes/services because it will generate a spec.ts file for each on your behalf and will also link your components to a module.

然后，将 Angular 的测试类视为一个空的测试平台，您必须在其中重新创建组件的结构才能进行测试.在实际的应用程序中，所有绑定都在模块内部进行，但在测试中，您必须导入和声明组件的所有组件才能使测试框架能够构建和测试它.

Then, think about the test class of Angular as an empty test bench where you have to recreate the structure of your component in order to be able to test. In the actual app, all binding is made inside of the module, but this is not the case of tests where you have to import and declare all the components of a component in order for test framework to be able to build it and test it.

在您展示的结构中，您将为每个组件创建一个测试类，例如:

In the structure you presented, you are going to have a test class for each component like:

Nav.Component.spec.ts
Header.Component.spec.ts
Layout.Component.spec.ts
App.Component.spec.ts

在给定层次结构的情况下，您将在每一个上执行以下操作:

And given the hierarchy, on each you will do something like:

Nav.Component.spec.ts

 import { NavComponent } from './your path to component';
 ...
 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ NavComponent  ]
    })
    .compileComponents();
 }));

Header.Component.spec.ts

 import { NavComponent } from './your path to component';
 import { HeaderComponent } from './your path to component';
 ...
 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ NavComponent , HeaderComponent ]
    })
    .compileComponents();
 }));

Layout.Component.spec.ts

 import { NavComponent } from './your path to component';
 import { HeaderComponent } from './your path to component';
 import { LayoutComponent } from './your path to component';
 ...
 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ NavComponent , HeaderComponent , LayoutComponent ]
    })
    .compileComponents();
 }));

App.Component.spec.ts

 import { NavComponent } from './your path to component';
 import { HeaderComponent } from './your path to component';
 import { LayoutComponent } from './your path to component';
 import { AppComponent } from './your path to component';
 ...
 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ NavComponent , HeaderComponent , LayoutComponent, AppComponent  ]
    })
    .compileComponents();
 }));

如果你这样做，应该可以工作.整个想法是在测试每个元素时使用它使用的所有元素来重构它以便工作.如果有些地方不够清楚或不起作用，请提供更多详细信息.

If you do it like this, should work. The whole idea is to reconstruct on test each element with all the elements it uses in order to work. If something is not clear enough or not working, put more details.

我给出的导入每个组件的示例是使其与您呈现的未链接到模块的组件结构一起工作的方法.但是，正如我告诉你的那样，这不是它的建造方式.如果您使用 Angular CLI 生成，您可以执行以下操作:生成您的模块，如:

The example I give with importing each component is the way to make it work with your presented structure of components not linked on modules. But, as I told you, this is not the way it was intended to be built. If you generate with Angular CLI you can do the following: Generate your module like:

ng generate module layout -m app

这将生成您的布局模块并将其导入 app.module然后以相同的方式生成所有组件:

This will generate your layout module and import it for you into app.module Generate then all your components the same way:

ng generate component layout -m layout
ng generate component header -m layout
ng generate component nav -m layout

这会生成所有组件，将每个组件导入到 layout.module 中，layout.module 已经导入到 app.module 中.这样您就不必再导入任何内容，您的测试就可以正常工作了.

This generates all you components, import each into the layout.module, which is already imported into app.module. This way you don't have to import anything more and your tests will just work.

这是每个元素之后的样子:

This is how each element will look like after:

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { LayoutModule } from './layout/layout.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

布局模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LayoutComponent } from './layout.component';
import { HeaderComponent } from '../header/header.component';
import { NavComponent } from '../nav/nav.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [LayoutComponent, HeaderComponent, NavComponent]
})
export class LayoutModule { }

布局组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.css']
})
export class LayoutComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

标题组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

导航组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

这篇关于Angular 2 Jasmine 测试，加载 app.component.ts 中的所有组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！