Skip to main content

How to test PrimeNG

PrimeNG provides vast UI components. The best way to test their integration into the application is to mock them with ng-mocks and verify that inputs / outputs have been bound correctly, and if a component supports templates, it received right ones.

For example, a component uses p-calendar component, and its template is the next one:

<p-calendar [(ngModel)]="dateValue">  <ng-template pTemplate="header">Header</ng-template>  <ng-template pTemplate="footer">Footer</ng-template></p-calendar>

To test it, we need to:

  • mock p-calendar
  • assert passed inputs
  • assert listeners on outputs
  • assert templates
note

Information about testing ng-template and its TemplateRef is taken from the ngMocks.render.

Spec file#

With MockBuilder, our spec file needs a single line to provide mocks:

beforeEach(() => MockBuilder(TargetComponent, TargetModule));

Where TargetComponent is a component which uses p-calendar, and TargetModule is its module.

Testing inputs of p-calendar#

The tools from ng-mocks we need:

it('binds inputs', () => {  // Rendering TargetComponent and accessing its instance.  const targetComponent = MockRender(TargetComponent).point    .componentInstance;
  // Looking for a debug element of `p-calendar`.  const calendarEl = ngMocks.find('p-calendar');
  // Asserting bound properties.  const actual = ngMocks.input(calendarEl, 'ngModel');  expect(actual).toBe(targetComponent.dateValue);});

Testing outputs of p-calendar#

The tools from ng-mocks we need:

it('binds outputs', () => {  // Rendering TargetComponent and accessing its instance.  const targetComponent = MockRender(TargetComponent).point    .componentInstance;
  // Looking for a debug element of `p-calendar`.  const calendarEl = ngMocks.find('p-calendar');
  // Simulating an emit.  const expected = new Date();  ngMocks.output(calendarEl, 'ngModelChange').emit(expected);
  // Asserting the effect of the emit.  expect(targetComponent.dateValue).toEqual(expected);});

Testing pTemplate="header" template#

To test the ng-template, we should find TemplateRef which belongs to pTemplate attribute with the provided value, render it, and assert the rendered html.

The tools from ng-mocks we need:

it('provides correct template for pTemplate="header"', () => {  // Rendering TargetComponent.  MockRender(TargetComponent);
  // Looking for a debug element of `p-calendar`.  const calendarEl = ngMocks.find('p-calendar');
  // Looking for the template of 'header'.  const header = ngMocks.findTemplateRef(    calendarEl,    // attr name and its value    ['pTemplate', 'header'],  );
  // Verifies that the directive has been mocked.  // And renders it.  ngMocks.render(calendarEl.componentInstance, header);
  // Asserting the rendered template.  expect(calendarEl.nativeElement.innerHTML).toContain('Header');});

Testing pTemplate="footer" template#

The approach to test pTemplate="footer" is the same as above.

it('provides correct template for pTemplate="footer"', () => {  // Rendering TargetComponent.  MockRender(TargetComponent);
  // Looking for a debug element of `p-calendar`.  const calendarEl = ngMocks.find('p-calendar');
  // Looking for the template of 'footer'.  const footer = ngMocks.findTemplateRef(    calendarEl,    // attr name and its value    ['pTemplate', 'footer'],  );
  // Verifies that the directive has been mocked.  // And renders it.  ngMocks.render(calendarEl.componentInstance, footer);
  // Asserting the rendered template.  expect(calendarEl.nativeElement.innerHTML).toContain('Footer');});