Как протестировать компонент AgRendererComponent в Angular Ag Grid - PullRequest
Новая
       65

Как протестировать компонент AgRendererComponent в Angular Ag Grid

0 голосов
/ 03 августа 2020

У меня есть специальный компонент рендеринга ячеек, который преобразует текст в ссылку. Все работает нормально. Я пытаюсь выполнить модульное тестирование компонента рендеринга. Проблема, с которой сталкивается при модульном тестировании, заключается в том, что сетка отображается со ссылкой, но она недоступна, когда я запрашиваю через собственный элемент, я получаю значение, так как другие пустые значения сетки уже присутствуют, я могу это видеть. Я думаю, это связано с жизненным циклом тестирования или рендеринга AG Grid. Как мне сказать тестовой платформе ждать, пока компонент не будет отрисован? 

fdescribe('AgnavigatorComponent', () => {
  let component: TestCustomComponent;
  let fixture: ComponentFixture<TestCustomComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [RouterLinkRendererComponent, TestCustomComponent],
      imports: [
        RouterTestingModule,
        AgGridModule.withComponents([RouterLinkRendererComponent])
      ]
    }).compileComponents();
  }));

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

  it('should create', () => {
    const appElement = fixture.nativeElement;
    // here the values are empty only for the first column which uses custom renderer.
    const cellElements = appElement.querySelectorAll('.ag-cell-value');
  });
});

после завершения выполнения теста я вижу столбец с правильным значением с href в нем.

1 Ответ

0 голосов
/ 14 августа 2020

Проблема в том, что на момент выполнения компонент еще не загружен. поэтому мне нужно ввести функцию ожидания, как указано в SO.post, что я должен ждать, пока этот парень не войдет. 

export const waitUntil = async (
  untilTruthy: () => boolean
): Promise<boolean> => {
  while (!untilTruthy()) {
    await interval(25)
      .pipe(take(1))
      .toPromise();
  }
  return Promise.resolve(true);
};

, и тест похож на ниже 

  it('should render the component', async done => {
    let appElement: any;
    let cellElement: any;
    fixture.detectChanges();
    await fixture.whenStable();
    await waitUntil(() => {
      appElement = fixture.nativeElement;
      cellElement = appElement.querySelectorAll('.ag-cell-value');
      if (cellElement[0].textContent !== '') {
        return true;
      }
      return false;
    });
    expect(cellElement[0].children[0].children[0].href.split('/')[3]).toEqual(
      'Toyota'
    );
    done();
  });
...