Unit test with 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

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 2

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