Angular TestBed - 测试组件

Question

我正在搜索组件和测试。我试图找出如何使用组件进行测试，可能忘记导入或声明某些内容

HTML：

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <form class="form-search" [formGroup]="searchForm" novalidate>
        <div class="form-group input-group">
          <input type="text" id="key" class="form-control" aria-describedby="basic-addon1" placeholder={{placeholder}} formControlName="key">
        </div>
      </form>
    </div>
  </div>
</div>

组件条形图：

 <div *ngIf="barChartData">
        <div style="display: block">
            <canvas (contextmenu)="onRightClick($event)" baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend"
                [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
        </div>
    </div>

组件：

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import 'rxjs/add/operator/debounceTime';

@Component({
  selector: 'test-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {

  @Input()
  placeholder: string;

  @Output()
  onKeyChange: EventEmitter<any> = new EventEmitter<any>();

  public searchForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.searchForm = this.fb.group({
      key: ['']
    });

    this.searchForm.valueChanges
        .debounceTime(300)
        .subscribe(value => {
          this.onKeyChange.emit(value.key);
        });
  }
}

测试：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { SearchComponent } from './search.component';
import { ReactiveFormsModule } from '@angular/forms';

describe('SearchComponent', () => {
  let component: SearchComponent;
  let fixture: ComponentFixture<SearchComponent>;

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

  beforeEach(() => {
    fixture = TestBed.createComponent(SearchComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

我收到以下错误：

HeadlessChrome 67.0.3396 (Windows 10.0.0) SearchComponent should create FAILED
        Can't bind to 'datasets' since it isn't a known property of 'canvas'. (">
            <div style="display: block">
                <canvas (contextmenu)="onRightClick($event)" baseChart [ERROR ->][datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLeg"): ng:///DynamicTestModule/BarChartComponent.html@2:63
        Can't bind to 'labels' since it isn't a known property of 'canvas'. (": block">
                <canvas (contextmenu)="onRightClick($event)" baseChart [datasets]="barChartData" [ERROR ->][labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend"
                    [chartTy"): ng:///DynamicTestModule/BarChartComponent.html@2:89
        Can't bind to 'options' since it isn't a known property of 'canvas'. (" (contextmenu)="onRightClick($event)" baseChart [datasets]="barChartData" [labels]="barChartLabels" [ERROR ->][options]="barChartOptions" [legend]="barChartLegend"
                    [chartType]="barChartType" (chartH"): ng:///DynamicTestModule/BarChartComponent.html@2:115
        Can't bind to 'legend' since it isn't a known property of 'canvas'. ("($event)" baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [ERROR ->][legend]="barChartLegend"
                    [chartType]="barChartType" (chartHover)="chartHovered($event)""): ng:///DynamicTestModule/BarChartComponent.html@2:143
        Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("tData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend"
                    [ERROR ->][chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></"): ng:///DynamicTestModule/BarChartComponent.html@3:12