Angular и Karma: Невозможно привязать к списку, так как это не известное свойство pq-button

Question

В моем приложении есть компонент, который называется pq-button :

<div class="container mt-5" *ngIf="categoryData">
  <div class="row">
    <div class="col">
      <h5 class="text-center">I am looking for a 
        <pq-button [list]="listCategories" (onSelect)="setCategory($event)" title="{{ category ? category.name : 'Category' }}"></pq-button> that can 
        <pq-button [list]="listCriteria" [disabled]="!category" (onSelect)="setCategory($event)" title="{{ criteria ? criteria.name : 'Criteria' }}"></pq-button> and is good for 
        <pq-button [list]="categoryData.list" [disabled]="!category" (onSelect)="setCategory($event)" title="{{ persona ? persona.name : 'Persona' }}"></pq-button></h5>
    </div>
  </div>  
</div>

Когда я загружаю свое приложение, оно работает без проблем.Затем, когда я запускаю ng test, первая ошибка, которую я получаю:

AppComponent должен создать приложение Failed: Ошибки синтаксического анализа шаблона: Невозможно привязать к 'list', так как это не известное свойствоиз 'pq-button'.

Первое, что он говорит, - убедитесь, что он является частью этого модуля.Итак, когда я смотрю в свой модуль, я вижу это:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http'; 

import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';
import { SelectorComponent } from './selector/selector.component';
import { ButtonComponent } from './button/button.component';


@NgModule({
  declarations: [
    AppComponent,
    SelectorComponent,
    ButtonComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,

    SharedModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Так что это часть этого.Кто-нибудь знает какие-либо другие причины, по которым он может выйти из строя?

---

В соответствии с запросом это компонент pq-button и компонент pq-selector :

вид:

<button class="btn" type="button btn-default" [ngClass]="{ 'btn-active': selected }" [disabled]="disabled" (click)="openSelector = !openSelector">{{ title }}</button>
<pq-selector [items]="items" colour="#e95344" (onSelect)="set($event)" [(visible)]="openSelector"></pq-selector>

код:

import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';

@Component({
  selector: 'pq-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent implements OnChanges {  
  @Input() list: Function;
  @Input() title: string;
  @Input() disabled: boolean;
  @Output() onSelect = new EventEmitter<string>(); 
  items: any[];

  constructor() { }

  ngOnChanges() {
    if (!this.disabled)
        this.list().subscribe(response => this.items = response);
  }

  set($event) {
    this.onSelect.emit($event);
  } 
}

и селектор html:

<div class="container-fluid selector" [ngStyle]="{'background-color': colour}" [@dialog] *ngIf="visible">
    <div class="row h-100 justify-content-center">
        <div class="col-2 my-auto">
            <ul class="list-unstyled">
                <li *ngFor="let item of items"><a href="#" (click)="select(item)">{{ item.name }}</a></li>
            </ul>
        </div>
    </div>
</div>

<button type="button" class="close" aria-label="Close" (click)="close()">
    <span aria-hidden="true">&times;</span>
</button>

и код:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';


@Component({
  selector: 'pq-selector',
  templateUrl: './selector.component.html',
  styleUrls: ['./selector.component.scss'],
  animations: [
    trigger('dialog', [
      transition('void => *', [
        style({ transform: 'scale3d(.3, .3, .3)' }),
        animate(100)
      ]),
      transition('* => void', [
        animate(100, style({ transform: 'scale3d(.0, .0, .0)' }))
      ])
    ])
  ]
})
export class SelectorComponent implements OnInit {
  @Input() items: any[];
  @Input() colour: string; 
  @Input() closable = true;
  @Input() visible: boolean;
  @Output() onSelect = new EventEmitter<string>();  
  @Output() visibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();

  private show: boolean;

  constructor() { }

  ngOnInit() {
    this.colour = this.colour || '#000000';
  }

  select(item) {
    this.onSelect.emit(item);
    this.close();
  }

  close() {
    this.visible = false;
    this.visibleChange.emit(this.visible);
  }
}

Надеюсь, это поможет!

Answer 1

После прочтения нескольких похожих сценариев я думаю, что вероятное решение состоит в том, что вы захотите убедиться, что app.component.spec.ts имеет следующее:

import { ButtonComponent } from './button/button.component';

...

describe('AppComponent'), () => {

...

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [ 
      ...
    ],
    declarations: [ ButtonComponent ]
  })
  .compileComponents();
}));

...

Файл app.component.spec.ts должен иметь ту же видимость для подкомпонентов, что и файл app.component.ts.