如何测试使用primeng组件的角度组件

Question

我会尽量减少代码。我刚刚开始观看关于单元测试的 Pluralsight 讲座。我有一个TimeselectorComponent，点击它应该会打开一个带有一些硬编码文本的覆盖。该覆盖实际上是来自primeng 的p-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,

1. 在您的测试中：

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

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