Angular test - Получение "TypeError: Невозможно прочитать свойство 'textContent' of null" в Карме - PullRequest
Новая
       33

Angular test - Получение "TypeError: Невозможно прочитать свойство 'textContent' of null" в Карме

0 голосов
/ 29 апреля 2020

Я устанавливаю несколько тестов для моего Angular приложения, и в одном из них я получаю эту ошибку при попытке получить элемент HTML: TypeError: Cannot read property 'textContent' of null

Это образец моего шаблона : 

<div *ngIf="parentProps" class="detalhes-container">
  <!-- <p class="teste">teste</p> -->
  <div *ngFor="let info of parentProps.applicationsData; let i = index; trackBy: trackByFn">
    <p class="teste">teste</p>
  </div>
</div>

Для тестирования есть два тега p, первый комментируется (работает нормально), а второй - тот, который я хочу, чтобы он работал.

Сценарий

spe c .ts: 

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ ListDetailsComponent ]
    })
    .compileComponents();
  })

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

  it('should create list details', () => {
    expect(component).toBeTruthy();
  });

  it('functions', () => {
    component.parentProps = true
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement
    expect(compiled.querySelector('.teste').textContent).toContain('teste');
  })

});

Причина, по которой у меня есть два тега p, заключается в том, что я понял, что одна из проблем связана со свойством parentProps, используемым *ngIf, поэтому я установил в своем тесте true, затем он заработал, однако после этого *ngIf у меня также есть блок с *ngFor, и когда я запускаю свой тест с тегом внутри этого l oop Я получаю ту же ошибку, поэтому, я думаю, проблема в *ngFor. С *ngIf мне удалось обойти это, но я понятия не имею, как решить проблему *ngFor.

Одна вещь, которая может быть важной, parentProps действительно является объектом, исходящим из родительский компонент, который я получаю через @Input.

Как я могу решить эту проблему?

1 Ответ

1 голос
/ 29 апреля 2020

Вы должны сделать applicationsData массивом объекта, объект не может быть просто истинным.

Попробуйте: 

it('functions', () => {
    component.parentProps = { applicationsData: ['hello', 'world'] }; // mock applicationsData array.
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement
    expect(compiled.querySelector('.teste').textContent).toContain('teste');
  })
...