如何测试使用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();