如何修复这个测试用例。不能绑定到'value',因为它不是'dls-option'的已知属性。

问题描述 投票:0回答:1

这是我用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();
    })
})

但我的测试用例却失败了。这里是截图。enter image description here

请帮我解决这个问题,也欢迎提出其他错误。这将对我的职业生涯有所帮助。

PS:我只是想做一个浅层的测试。我想模拟子组件。

angular jasmine karma-jasmine angular-unit-test
1个回答
1
投票

我觉得这里的错误信息很精确----------。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;
}
© www.soinside.com 2019 - 2024. All rights reserved.