Как исправить этот тестовый пример: невозможно выполнить привязку к 'значению', поскольку это не известное свойство 'dls-option'

Question

Это мой третий день из Angular модульного тестирования с Jasmine и Karma. Я слежу за лекциями 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.spe c .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: Я просто хочу провести поверхностное тестирование. Я хочу имитировать дочерние компоненты.

Answer 1

Я думаю, что сообщение об ошибке здесь довольно точное - отсутствует фиктивный компонент dls-options @Input() value.

timeselector.component.html отображает dls-option и передает mode в его value input:

<dls-option *ngFor="let mode of modes" [value]="mode">

Итак, вам нужно создать этот ввод в вашем макете:

@Component({
    selector: 'dls-option',
    template: '<div></div>'
})
class DlsDropdownOption {
    @Input() value;
}