Angular - тестирование жасмина с помощью таблицы PrimeNg - невозможно проверить количество строк внутри unittest - PullRequest
Новая
       21

Angular - тестирование жасмина с помощью таблицы PrimeNg - невозможно проверить количество строк внутри unittest

0 голосов
/ 30 марта 2020

Я пытаюсь создать юнит-тест для компонента angular, который использует таблицу PrimeNG. Он работает, как и ожидалось, с ng serve внутри браузера, но в рамках теста Жасмин я не могу получить обработанную HTML таблицы. Когда я проверяю разметку, она просто содержит следующую строку:

<p-table class="testtable"><!--container--><!--container--></p-table>

Я создал новый компонент с данными только stati c, чтобы воспроизвести проблему: 

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 {
  }
}

А вот и тест («должен отображать таблицу»): 

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

В настоящее время я использую Angular 9.0.6 и PrimeNG 9.0.0.

Я уже пробовал другие методы, такие как compileComponent, после createComponent или используя вспомогательную функцию asyn c для теста, но безуспешно. Кроме того, я задал тот же вопрос на форуме PrimeFaces, но не получил ответа в течение недели.

Любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 30 марта 2020

Ваше задание c отсутствует импорт модуля таблицы из primeng. Я думаю, что это может быть проблемой.

Пожалуйста, обновите spe c следующим образом 

import {TableModule} from 'primeng/table';

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        TestComponent
      ],
      imports:[TableModule]
    }).compileComponents();
  }));

Пожалуйста, дайте мне знать, если он не работает

...