web-dev-qa-db-ja.com

Angular 5：データバインディング属性のJasmineユニットテストを作成する方法

要件：data-bindingのHTML element属性の単体テストを作成する必要があります。

これがコードです：

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

resizable属性値の単体テストを作成する必要があります。

これまでに試したこと：

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

Karmaテストランナーの実行中に失敗します。

enter image description here

どんな助けも高く評価されます。

angularunit-testingjasmineangular5karma-jasmine
13
Rohit Jindal

これらの属性はブラウザーでng-reflect- {attributeName}に変換されるため、ジャスミンはその属性を探す必要があります。以下のテストはうまくいくはずです。

 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');
  });
8
Okan Aslankan

今日の時点で、落とし穴があります。私はいくつかの議論を見つけました、そこで人々はこの属性について不平を言っています。 Pawel Kozlowski言った ：

「深刻な」ものにはng-reflect -...を実際に使用すべきではないと思います。これらはデバッグモードのみであり、本番ビルドでは使用できません。

私が理解しているように、kendo-gridはサードパーティのコンポーネントです。この場合、実際にテストする必要はありません。正しく実装されていることを確認するには、統合テストが必要です。したがって、kendoコンポーネントをTestBed構成に含めて、NO_ERRORS_SCHEMAを設定しないでください。

1
Lunin Roman

追加する必要がありますNO_ERRORS_SCHEMA（TestBedスキーマ内）：

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

これにより、コンポーネントのユニットテスト中にすべての子コンポーネントを無視できます。したがって、単体テストは失敗しません。

この例は stackblitzデモ で確認できます。

0
shohrukh

私はこのようなことをしてきました。一度やってみてください。

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