How to test p-table row count?

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

23 Mar 2020, 11:42

Hello,

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';

@Component({
  selector: 'app-test',
  template: `
  <p-table class="testtable" [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td>{{car.vin}}</td>
            <td>{{car.year}}</td>
            <td>{{car.brand}}</td>
            <td>{{car.color}}</td>
        </tr>
    </ng-template>
</p-table>
  `
})
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(() => {
    TestBed.configureTestingModule({
      declarations: [
        TestComponent
      ],
    }).compileComponents();
  }));

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

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

    //const tableEl = fixture.debugElement.query(By.css('div'));
    //const bodyRows = tableEl.query(By.css('.ui-table-tbody')).queryAll(By.css('tr'));
    //expect(bodyRows.length).toEqual(10);
  });
});
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,
Mario

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: vardaru and 5 guests