使用primeng进行单元测试

Question

I try to write my first unit test on a component in which I used some primeng components.

When I run "ng test" I got this error :

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>

Not sure about what I need to do? Do I need to inject or mock anything?

Here my unit test (basically the generated one) :

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

Answer 1

Add NO_ERRORS_SCHEMA in schemas, This is a way to ignore child components while unit testing.

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

Answer 2

Sure, you add the NO_ERROR_SCHEMA to ignore child components. In case you want to use the slider in a test it is better to mock it. Lib called ngMocks is the most common way to mock it out and it has the ability to assert on it's inputs or emit on an output to assert on a side effect.

ngMocks can be adde via npm: npm i ng-mocks

For example mocking out p-slider component would look like this:

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

Answer 3

Try importing the module in your testbed:

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