Угловое тестирование: невозможно прочитать свойство «nativeElement» со значением null

Я новичок в тестировании Angular, и в данный момент я пытаюсь протестировать этот фрагмент кода, но получаю сообщение об ошибке, связанное с событием, вызванным в DOM:

<li class="list-group-item" *ngFor="let user of users">
  <a class="test-link"[routerLink]="['/detail', user.id]">
    {{user.userName}}
  </a>
</li>

Тестовый файл:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [AdminComponent, UserDetailComponent],
    imports: [HttpClientModule,RouterTestingModule.withRoutes([
      {path:'detail/:id',
        component: UserDetailComponent}],
    )],
    providers: [UserService, AuthService]
  })
    .compileComponents();
}));

beforeEach(() => {
  router = TestBed.get(Router);
  location = TestBed.get(Location);

  fixture = TestBed.createComponent(AdminComponent);
  debugElement = fixture.debugElement;
  component = fixture.componentInstance;
  fixture.detectChanges();

});

it('test demands redirection', fakeAsync(() => {

  debugElement
    .query(By.css('.test-link'))
    .nativeElement.click();

  tick();

  expect(location.path()).toBe('/detail/testing/1');

}));

Почему событие клика на нативном элементе равно null?


integration-testing angular karma-runner angular-routerlink
person Mellville    schedule 15.10.2019    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Это связано с тем, что когда этот тест будет запущен, ваш массив пользователей будет пуст, и, следовательно, в html не будет элемента с селектором .test-link.

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

Код:

it('test demands redirection', fakeAsync(() => {

  component.users = [
    // fill it with user objects
  ];

  fixture.detectChanges();

  debugElement
    .query(By.css('.test-link'))
    .nativeElement.click();

  tick();

  expect(location.path()).toBe('/detail/testing/1');

}));
person Archit Garg    schedule 15.10.2019
comment
Спасибо за ответ, но могу ли я заполнить его фиктивными данными? - person Mellville; 15.10.2019
comment
Да, вы можете заполнить его любыми данными. - person Archit Garg; 15.10.2019

arrow_upward
0
arrow_downward

У меня была та же ошибка - TypeError: Cannot read property 'nativeElement' of null - и я обнаружил, что скопировал и вставил один и тот же идентификатор элемента html в несколько мест. я гарантировал

person Chris    schedule 04.12.2020