0

I am having a search component and test. I am trying to figure out how to do the tests with components, probably forgot to import or declare something

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>

Component barchart:

 <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>

Components:

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

Test:

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

I get the following error:

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
sensei
  • 7,044
  • 10
  • 57
  • 125
  • As the error messages say: datasets, labels, options, leend and chartType are not properties of canvas. If that works in your application, it means your application uses at least one directive that makes these properties valid for a canvas. So this directive should also be declated in the testing module of your test. – JB Nizet Jun 15 '18 at 14:44
  • Can you show example didn’t use testbed. – sensei Jun 15 '18 at 15:28
  • I don't understand what you mean by that. – JB Nizet Jun 15 '18 at 15:43
  • Any example possible? – sensei Jun 15 '18 at 15:48
  • Well, in the declarations of your testing module (`TestBed.configureTestingModule({ declarations: [ SearchComponent ]`), you need to have the directive that makes all this code valid. Or, if the directive is part of a module, that module needs to be added to the imports of the testing module, along with ReactiveFormsModule. Just like you're doing in your application module to make it possible to use that code. – JB Nizet Jun 15 '18 at 15:50

0 Answers0