web-dev-qa-db-de.com

Angular 5: So schreiben Sie einen Jasmin-Komponententest für ein Datenbindungsattribut

Voraussetzung: Ich muss einen Komponententest für ein data-binding-Attribut von HTML element schreiben.

Hier ist der Code: 

<kendo-grid
            [kendoGridBinding]="gridData"
            [resizable]="true"
            style="height: 300px">
            <kendo-grid-column
                field="UnitPrice"
                title="Unit Price"
                [width]="180"
                filter="numeric"
                format="{0:c}">
            </kendo-grid-column>
</kendo-grid>

Ich muss einen Komponententest für den Attributwert resizable schreiben. 

Was ich bisher ausprobiert habe: 

  it('kendo-grid element should contain resizable attribute with "true" value', () => {
    const element = fixture.debugElement.nativeElement.querySelector('kendo-grid');
    expect(element.resizable).toBeTruthy();
  });

Es schlägt fehl, während der Karma-Testläufer ausgeführt wird. 

 enter image description here

Jede Hilfe wird sehr wertvoll sein.

angularunit-testingjasmineangular5karma-jasmine
7
Rohit Jindal

Diese Attribute werden im Browser in ng-reflect- {attributeName} konvertiert. Daher muss Jasmin nach diesem Attribut suchen. Der folgende Test sollte funktionieren.

 it('kendo-grid element should contain resizable attribute with "true" value', () => {
    const element = fixture.debugElement.query(By.css('kendo-grid'));
    expect(element.nativeElement.getAttribute('ng-reflect-resizable')).toBe('true');
  });
3
Okan Aslankan

Sie müssen NO_ERRORS_SCHEMA in Ihre TestBed-Schemas einfügen:

import { NO_ERRORS_SCHEMA } from '@angular/core';
...
describe('HelloComponent', () => {
  ...
  TestBed.configureTestingModule({
    schemas: [NO_ERRORS_SCHEMA],
    declarations: [ ... ]
  });
  ...
});

Dadurch können alle untergeordneten Komponenten beim Komponententest einer Komponente ignoriert werden. Ihr Gerätetest wird also nicht fehlschlagen.

Sie können dieses Beispiel in der stackblitz Demo überprüfen.

0
shohrukh

Ich habe so etwas gemacht. Kannst du es einmal versuchen?.

const element = fixture.debugElement.query(By.css('kendo-grid'));
expect(element.nativeElement.resizable).toBeTruthy();
0
KunalMZ