How to test p-table row count?

UI Components for Angular
Post Reply
Posts: 1
Joined: 23 Mar 2020, 10:32

23 Mar 2020, 11:42


currently i'm evaluating NgPrime for our new Angular project. Therefore I tried to build a simple component with a p-table in it using some static test data.
It renders as it should when using ng serve, but when i try to verify the row count within a test, i don't get the expected results. It seems like the data isn't rendered probably inside a test.
I already checked how you test the p-table in your git repository, but when i try to do it the same way it doesn't work.

Here is the code for the component i want to test:

Code: Select all

import { Component, OnInit } from '@angular/core';

  selector: 'app-test',
  template: `
  <p-table class="testtable" [value]="cars">
    <ng-template pTemplate="header">
    <ng-template pTemplate="body" let-car>
export class TestComponent implements OnInit {

  cars = [
    {"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
    {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
    {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
    {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
    {"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
    {"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
    {"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
    {"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
    {"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
    {"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"}

  constructor() { }

  ngOnInit(): void {
And here is the testcode:

Code: Select all

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TestComponent } from './test.component';
import { By } from '@angular/platform-browser';

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

  beforeEach(async(() => {
      declarations: [

  beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;

  it("should render table", () => {
    const result = fixture.debugElement.queryAll(By.css(".testtable"));
    const markup = result[0].nativeNode.outerHTML;

    //const tableEl = fixture.debugElement.query(By.css('div'));
    //const bodyRows = tableEl.query(By.css('.ui-table-tbody')).queryAll(By.css('tr'));
Here is the markup result i get within the test:

Code: Select all

<p-table class="testtable"><!--container--><!--container--></p-table>
I already tried different other methods like compileComponent after createComponent or using async helper function but with no luck.

Any help is highly appreciated!

Kind regards,

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: vardaru and 5 guests