How to test an angular component that uses primeng component

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();