这是我用Jasmine和Karma进行Angular单元测试的第三天。我是跟着Pluralsight讲课的。先说说第一件事。dls-option
是一个组件,我正在使用它来形成一个库。我来解释一下。我使用的是我们公司提供的angular组件库。在下面的代码中 <dls-dropdown>
和 <dls-option>
不过是 <select>
和 <option>
标签的HTML。他们在它周围创建了颜色和字体样式包装。这是我的代码。
timeselector. component. html
<div>
<h1>Choose one from the list</h1>
<dls-dropdown>
<dls-option *ngFor="let mode of modes" [value]="mode">
<p>{{ mode }}</p>
</dls-option>
</dls-dropdown>
</div>
timeselector.component.ts
import { Component, OnInit, ... } from '@angular/core';
...
@Component({
selector: 'app-timeselector',
templateUrl: './timeselector.component.html'
})
export class TimeselectorComponent implements OnInit {
modes = ["Novice", "Intermediate", "Expert", "Beast"];
...
}
这是我的测试文件。timeselector.component.spec.ts。
import { TestBed, ComponentFixture } from "@angular/core/testing"
import { TimeselectorComponent } from './timeselector.component'
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
fdescribe('TimeselectorComponent', () => {
let fixture: ComponentFixture<TimeselectorComponent>;
@Component({
selector: 'dls-label',
template: '<div></div>'
})
class DlsLabelComponent {}
@Component({
selector: 'dls-dropdown',
template: '<div></div>'
})
class DlsDropdownComponent {}
@Component({
selector: 'dls-option',
template: '<div></div>'
})
class DlsDropdownOption {}
beforeEach(()=>{
TestBed.configureTestingModule({
imports: [
FormsModule
],
declarations: [
TimeselectorComponent,
DlsLabelComponent,
DlsDropdownComponent,
DlsDropdownOption
]
});
fixture = TestBed.createComponent(TimeselectorComponent);
})
it('should create', ()=> {
//expect(fixture.componentInstance).toBeTruthy();
})
})
请帮我解决这个问题,也欢迎提出其他错误。这将对我的职业生涯有所帮助。
PS:我只是想做一个浅层的测试。我想模拟子组件。
我觉得这里的错误信息很精确----------。dls-options
缺少模拟组件 @Input() value
.
该 timeselector.component.html
正在呈现 dls-option
并通过 mode
入其 value
输入。
<dls-option *ngFor="let mode of modes" [value]="mode">
所以你需要在你的模拟中创建这个输入。
@Component({
selector: 'dls-option',
template: '<div></div>'
})
class DlsDropdownOption {
@Input() value;
}