如何测试使用primeng组件的angular组件

Question

I'll try to keep the code as minimal as possible. I've just started watching lectures on Pluralsight on Unit testing. I've a TimeselectorComponent , on click it should open an overlay with some hard coded text. That overlay is actually p-overlayPanel from primeng . I just want to write a unit test using Jasmine and Karma that when I click on TimeselectorComponent then the overlay should come up. Here's the code:

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>

Here's my spec file:

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

Please correct me. Is it even testable? Please help me.

Answer 1

1. In your TestBed.configureTestingModule you have to import:

BrowserAnimationsModule,
OverlayPanelModule,

2. In your test:

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

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