使用primeng进行单元测试

Question

我尝试编写第一个组件的单元测试，其中使用了一些primeng组件。

当我运行“ng test”时，出现以下错误：

Chrome 63.0.3239 (Linux 0.0.0) HeaderComponent should create FAILED
    1. If 'p-dropdown' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
    2. If 'p-dropdown' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("header-text">
            <p-dropdown [options]="languages" (onChange)="onDropdownChange($event.value)" [ERROR ->][(ngModel)]="selectedLanguage"></p-dropdown>
        </div>

不确定我需要做什么？我需要注入或模拟任何东西吗？

这是我的单元测试（基本上是生成的）：

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [],
      declarations: [HeaderComponent]

    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

Thx

- Lempkin

---

你是否在你的 app.module.ts 中导入了 "DropdownModule"？ - Osakr

不是，但它被导入到包含此组件的模块中。 - Lempkin

你还必须在测试模块中导入它。请展示你的规格文件。 - Yousef khan

我已经添加了我的规格。 - Lempkin

Answer 1

当你想忽略子组件时，可以添加NO_ERROR_SCHEMA。如果你想在测试中使用滑块，则最好进行模拟。名为ngMocks的库是模拟的最常见方法，它具有对其输入进行断言或发出输出以断言副作用的能力。

可以通过npm添加ngMocks：npm i ng-mocks 例如，模拟p-slider组件如下所示：

import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {MockComponent} from 'ng-mocks'; //step 1: add mock util function
import {Slider, SliderModule} from 'primeng/slider'; // setp 2: Mocked component and it's module

import {DateRangePickerComponent} from './date-range-picker.component';

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

    beforeEach(
        async(() => {
            TestBed.configureTestingModule({
                imports: [SliderModule], // add mocked comp's module
                declarations: [
                DateRangePickerComponent, 
                MockComponent(Slider) //actual mocking 
                ]  
            }).compileComponents();
        })
    );

    beforeEach(() => {
        fixture = TestBed.createComponent(DateRangePickerComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

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

- ZR87

---

ngMocks非常适合清除错误和构建组件，但是你如何使用它来实际测试primeng的事件处理程序是否真正触发了你的方法呢？ - CMLee

Answer 2

在schemas中添加NO_ERRORS_SCHEMA，这是一种在单元测试时忽略子组件的方法。

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [DropdownModule],
    declarations: [ HeaderComponent ],
    schemas: [NO_ERRORS_SCHEMA]   // <-- Add This Line. (make sure to import NO_ERRORS_SCHEMA)
  })
  .compileComponents();
}));

- Sachithra Wishwamal

---

不要使用 Angular 单元测试中的 noErrorsSchema，这是为什么？ - BlackICE

Answer 3

尝试在测试环境中导入该模块：

import { DropdownModule } from 'primeng/primeng';
describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [DropdownModule],
      declarations: [HeaderComponent]

    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

- nicolas.leblanc