如何測試使用primeng組件的angular組件

Question

我會盡量減少代碼。 我剛剛開始觀看關於單元測試的 Pluralsight 講座。 我有一個TimeselectorComponent ，點擊它應該打開一個帶有一些硬編碼文本的覆蓋。 該疊加層實際上是來自primeng的p-overlayPanel overlayPanel 。 我只想使用 Jasmine 和 Karma 編寫一個單元測試，當我單擊TimeselectorComponent時，應該會出現覆蓋。 這是代碼：

timeselector.component.html

<div (click)="op.toggle($event)">
    Click to see the text
</div>

<div class="timeselector">
  <p-overlayPanel #op>
    <div>
      <p>Hello world!</p>
    </div>
   </p-overlayPanel>
</div>

這是我的規格文件：

import { TestBed, ComponentFixture, async } from "@angular/core/testing"
import { TimeselectorComponent } from './timeselector.component'
import { Component, Input } from '@angular/core';
import { FormsModule } from '@angular/forms';
...

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

    @Component({
        selector: 'p-overlayPanel',
        template: '<div></div>'
    })
    class FakePOverlayPanel {
    }

    beforeEach(async(()=>{
        TestBed.configureTestingModule({
            imports: [
                FormsModule
            ],
            providers: [

            ],
            declarations: [
                TimeselectorComponent,
                FakePOverlayPanel
            ]
        });
        fixture = TestBed.createComponent(TimeselectorComponent);

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

    it('should apply filters across dashboards', () => {
        // assert

        // expect
    })
})

請糾正我。 它甚至可以測試嗎？ 請幫我。

Answer 1

1. 在您的TestBed.configureTestingModule中，您必須導入：

BrowserAnimationsModule,
OverlayPanelModule,

2. 在您的測試中：

let debugEl: DebugElement = fixture.debugElement;
debugEl.nativeElement.click();

fixture.detectChanges();
  
let overlayPanel = debugEl.query(By.directive(OverlayPanel));
expect(overlayPanel).toBeTruthy();