Angular 如何修复此测试用例：Can'；t绑定到'；价值'；因为它不是'；t'的已知属性；dls选项'；

这是我与Jasmine和Karma进行角度单元测试的第3天。我在听Pluralsight的讲座。首先，

dls选项

是我从库中使用的组件。我会解释的。我使用的是我们公司提供的一个角度元件库。在下面的代码

和

中，只有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.spec.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"];
    ...
}

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();
    })
})

从“@angular/core/testing”导入{TestBed，ComponentFixture}
从“/timeselector.component”导入{TimeselectorComponent}
从'@angular/core'导入{Component}；
从'@angular/forms'导入{FormsModule}；
fdescribe（'TimeselectorComponent'，（）=>{
let夹具：组件夹具；
@组成部分({
选择器：“dls标签”，
模板：“”
})
类DlsLabelComponent{}
@组成部分({
选择器：“dls下拉列表”，
模板：“”
})
类DlsDropdownComponent{}
@组成部分({
选择器：“dls选项”，
模板：“”
})
类DlsDropdownOption{}
在每个之前（（）=>{
TestBed.configureTestingModule({
进口：[
FormsModule
],
声明：[
时间选择器组件，
DLSLabel组件，
DlsDropdownComponent，
DlsDropdownOption
]
});
fixture=TestBed.createComponent（TimeselectorComponent）；
})
它（'应该创建'，（）=>{
//expect（fixture.componentInstance）.toBeTruthy（）；
})
})

但是我的测试用例失败了。以下是截图：

请帮我解决这个问题，也可以随意提出其他错误。这将有助于我的职业生涯

---

附言：我只想做一个肤浅的测试。我想模拟子组件。

我认为这里的错误消息非常准确-缺少

dls选项
mock组件
@Input（）值

timeselector.component.html
正在呈现
dls选项
，并将
模式
传递到其
值
输入：



因此，您需要在模拟中创建该输入：

@组件({
选择器：“dls选项”，
模板：“”
})
类DlsDropdownOption{
@输入（）值；
}
我认为在每个模块导入之前，您的测试床中缺少DlsDropdownModule导入。这解决了我的问题。你能再解释一下吗。为什么以及它现在是如何工作的。很高兴它这样做了。
timeselector.component.html
表示，对于每个“模式”，您希望呈现
dls选项
，并通过其
[值]
输入传递该模式-因此Angular希望
dls选项
组件具有名为“值”的输入。如果Angular在
dls选项
类中找不到此类属性，则表示代码中存在问题，Angular会抛出错误。