カルマでPrimeNGコンポーネントを使用しているときにエラーが発生しました

Question

こんにちは、私の（bk）stackerzzzをwhazzupしてください。

私はy'allのための本当のdoozyを得た：

私は、角2アプリでPrimeNGライブラリからConfirmDialogコンポーネントを使用しています。コンポーネントはブラウザでテストするときに問題なく動作しますが、何らかの理由でコンポーネントを使用するとカルマが爆発します。 component.spec.tsファイルで

Error: Error in ./ReturnFileParameterComponent class ReturnFileParameterComponent - inline template:2:4 caused by: undefined is not a constructor (evaluating 'this.documentResponsiveListener()') in C:/Users/wlaw/Desktop/ens_fits_ui/karma-shim.js (line 41475) 
     ngOnDestroy@C:/Users/wlaw/Desktop/ens_fits_ui/karma-shim.js:71991:45 <- webpack:///~/primeng/components/confirmdialog/confirmdialog.js:140:0 
     ngOnDestroy 
     destroyInternal 
     destroy@C:/Users/wlaw/Desktop/ens_fits_ui/karma-shim.js:41076:34 <- webpack:///~/@angular/core/bundles/core.umd.js:12361:0 
     ... 

、私は、ダイアログ・コンポーネントが動作するために必要な対話サービスおよびモジュールの両方にインポート：

import { 
    ... 
    ConfirmDialogModule, 
    ConfirmationService 
} from 'primeng/primeng'; 


describe('Return File Parameter Component Test',() => { 

    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      declarations: [ReturnFileParameterComponent, HtmlUserFriendlyTimePipe, Html24HourDatePipe, DayOfWeekPipe], 
      providers: [ 
       ... 
       ConfirmationService, 
       ... 
      ], 
      imports: [ 
       ... 
       ConfirmDialogModule 
      ] 
     }); 
     TestBed.compileComponents(); 
    }); 

... 

    it('should call add on a new Return File Parameter and submit it to the service', inject(
     [ReturnFileParameterComponent, AuthHelper], 
     (component: ReturnFileParameterComponent, authHelper: AuthHelper) => { 
      let fixture: ComponentFixture<ReturnFileParameterComponent> = 
       getTestBed().createComponent(ReturnFileParameterComponent); 

      fixture.componentInstance.ngOnInit() 
       .then(fixture.detectChanges) 
       .then(function() { 
        let newParam = fixture.componentInstance.add(); 
        expect(fixture.componentInstance.selectedParam).toBe(newParam); 
        expect(fixture.componentInstance.editParam).toBe(true); 
       }); 
     }) 
    ); 
}); 

をしかし、ほとんどすべてのテストは失敗します。ここで

は、テンプレートファイルの最初の部分である：

<div class="ui-grid-row" id="return-parameter-table"> 
    <h5>Return File Parameters</h5> 
    <p-growl [value]="msgs" life="3000"></p-growl> 
    <p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="425"></p-confirmDialog> 
... 

だから、基本的に、私はそのテストを失敗する理由はわかりませんが、私は、ブラウザでそれを使用して全く問題を取得していません。どんな助けでも大歓迎です。

Answer 1

私は回避策を見つけました。 ConfirmDialogModuleモジュールによって宣言されたConfirmDialogコンポーネントには、Karma/Jasmineで問題が発生しているようです。そこで私が仕様で行ったことは、偽のコンポーネントを探す代わりにConfirmDialogModuleモジュールのメタデータをオーバーライドして、偽のConfirmDialogコンポーネントを作成することでした。次のようにコードのように見える：

// Fake component class because the ConfirmDialog has issues with Karma/Jasmine 
@Component({ 
    selector: 'p-confirmDialog', 
    template: '' 
}) 
class FakeConfirmDialogComponent { 
} 

describe('Return File Parameter Component Test',() => { 

    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      declarations: [ReturnFileParameterComponent, HtmlUserFriendlyTimePipe, Html24HourDatePipe, DayOfWeekPipe], 
      providers: [ 
       ... 
       ConfirmationService, 
       ... 
      ], 
      imports: [ 
       ConfirmDialogModule, 
       ... 
      ] 
     }); 
     TestBed.overrideModule(ConfirmDialogModule, { 
      set: { 
       declarations: [FakeConfirmDialogComponent], 
       exports: [FakeConfirmDialogComponent] 
      } 
     }) 
     TestBed.compileComponents(); 
    }); 

    // All my tests here 
}); 

本の重要な部分は、ConfirmDialogModuleモジュールのメタデータを変更TestBed.overrideModule()メソッド呼び出しです。