Angular karma jasmine 组件测试 - TestBed 必须导入/声明被测组件的孙子组件 [英] Angular karma jasmine component testing - TestBed have to import/declare grand children components of component under test
问题描述
问题描述:在为使用其他 angular 组件的 angular 组件编写 karma/jasmine 单元测试时,我必须在测试台配置中递归导入子组件中包含的所有组件.有没有一种方法,我只需要导入被测组件的直接子项.
Problem Description: While writing karma/jasmine unit tests for angular component, which uses other angular components, I have to recursively import all the components included in child components, in testbed configuration. Is there a way that I only have to import direct children of the component under test.
示例代码:
父组件模板:(top-most-parent.component.html)
<h1>This is topmost parent in the current example. It has children components</h1>
<app-direct-child #scheduleEditor
[param1]="val1" [param2]="val2"></app-direct-child>
直接子组件模板:(app-direct-child.component.html):
<h1>This is first direct child in the current example. It itself has children
components</h1>
<app-grand-child
[aparam1]="ap1val" [aparam2]="ap2val"></app-grand-child>
孙子组件模板:(app-grand-child.component.html):
<h1>This is third level child in the current example</h1>
<p-radioButton name="dummyName" value="dummyVal" [label]="'testing"
[(ngModel)]="myModel" (onClick)="myOnClick()"
class="field-input"></p-radioButton>
问题:在上面的示例代码中,在为最顶层的父组件编写测试用例(spec.ts)文件时,我必须导入子组件和孙组件中使用的组件.就像上面的例子,在为 top-most-parent.component 编写测试用例时,我必须导入 app-grand-child.component 和 p-radioButton,它们与被测组件没有直接关系.spec文件如下
The Question: In the above sample codes, while writing the test cases (spec.ts) file for topmost parent component, I have to import the components used in the children and grand children components. Like in the above example, while writing the test cases for top-most-parent.component, I have to import app-grand-child.component and p-radioButton, which are not directly related to the component under test. spec file is as follows
top-most-parent.component.spec.ts:请在下面的代码注释中查看我的问题
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { BrowserModule, Title } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';
import { DirectChildComponent } from './direct-child.component';
import { GrandChildComponent } from './grand-child.component';
import { RadioButtonModule } from 'primeng/primeng';
describe('TopMostParentComponentTestSuite', () => {
let component: TopMostParentComponent;
let fixture: ComponentFixture<TopMostParentComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
TopMostParentComponent,
DirectChildComponent, // I understand, this is used by the current component under test, so this should be declared
GrandChildComponent // But why this is needed? Is there a way this can be avoided ?
],
imports: [
RadioButtonModule // Also this is being used by grand child component, why is this import needed, is there a way this can be avoided?
]
}).compileComponents();
fixture = TestBed.createComponent(TopMostParentComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should be created', () => {
expect(component).toBeTruthy();
});
});
推荐答案
您需要将您的装置和组件分配到一个单独的 beforeEach 中.如下
You need to assign your fixture and component into a seperated beforeEach. As bellow
describe('TopMostParentComponentTestSuite', () => {
let component: TopMostParentComponent;
let fixture: ComponentFixture<TopMostParentComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
TopMostParentComponent,
DirectChildComponent, // I understand, this is used by the current component under test, so this should be declared
GrandChildComponent // But why this is needed? Is there a way this can be avoided ?
],
imports: [
RadioButtonModule // Also this is being used by grand child component, why is this import needed, is there a way this can be avoided?
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TopMostParentComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should be created', () => {
expect(component).toBeTruthy();
});
});
此外,如果您进行单元测试,则只需测试您的组件.这样你就可以添加到你的 TestBed.configureTestinModule
Also if you do unit testing you need only to test your component. This way you can add to your TestBed.configureTestinModule
schemas: [ NO_ERRORS_SCHEMA ],
这篇关于Angular karma jasmine 组件测试 - TestBed 必须导入/声明被测组件的孙子组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!