Как проверить внешний вид дочернего компонента в выражении ngIf в Angular 8 - PullRequest
Новая
       6

Как проверить внешний вид дочернего компонента в выражении ngIf в Angular 8

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

У меня есть родительский компонент, в котором отображается один из двух дочерних компонентов, в зависимости от значения переменной (workHistoryState.ViewType): 

<div class="work-history-wrapper">
    <div class='jobList' *ngIf="workHistoryState.ViewType === 'summary'">
        <app-job-list></app-job-list>
    </div>
    <div class='assignmentList' *ngIf="workHistoryState.ViewType === 'detailed'">
        <app-assignment-list ></app-assignment-list>
    </div>
</div>

Значение в workHistoryState.ViewType обновляется другим дочерним элементом составная часть. Он вызывает этот метод в сервисе workHistoryState: 

public ViewTypeChanged(viewType: string) {
    this.ViewType = viewType;
}

В моем тестовом коде для родительского компонента я должен использовать mocks для дочерних компонентов. Вот такие макеты: 

import { Component } from "@angular/core";
@Component({
    selector: 'app-assignment-list',
    template: '<p>Mock Assignment List Component</p>'
})
export class AssignmentListComponentMock {}


import { Component } from "@angular/core";
@Component({
    selector: 'app-job-list',
    template: '<p>Mock Job List Component</p>'
})
export class JobListComponentMock {}

Итак, мой тестовый код выглядит следующим образом (и оба теста не пройдены): 

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { WorkHistoryParentComponent } from './work-history-parent.component';
import { JobListComponentMock } from '../component-mocks/job-list.component.mock';
import { AssignmentListComponentMock } from '../component-mocks/assignment-list.component.mock';
import { IndustryDropDownComponentMock } from '../component-mocks/industry-drop-down.component.mock';
import { RoleTypeDropDownComponentMock } from '../component-mocks/role-type-drop-down.component.mock';
import { ViewTypeSelectComponentMock } from '../component-mocks/view-type-select.component.mock';
import { By } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';

describe('WorkHistoryParentComponent', () => {
    let component: WorkHistoryParentComponent;
    let fixture: ComponentFixture<WorkHistoryParentComponent>;
beforeEach(async(() => {
  TestBed.configureTestingModule({
  declarations: [WorkHistoryParentComponent, JobListComponentMock, AssignmentListComponentMock, IndustryDropDownComponentMock, RoleTypeDropDownComponentMock, ViewTypeSelectComponentMock],
  providers:[
    { provide: APP_BASE_HREF, useValue : '/' },

],
}).compileComponents();
}));

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

it('should not find job list by css when detailed view is chosen', () => {
    component.workHistoryState.ViewTypeChanged("detailed");

    let jobList = fixture.debugElement.query(By.css('.jobList'));

    expect(jobList).toBeNull();
});

it('should not find job list when detailed view is chosen', () => {
    component.workHistoryState.ViewTypeChanged("detailed");

    let jobList = fixture.debugElement.query(By.directive(JobListComponentMock));

    expect(jobList).toBeNull();
    });
});

Кто-нибудь знает, почему они терпят неудачу?

1 Ответ

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

Мне нужно было вызвать fixture.detectChanges () после изменения значения в сервисе. Итак, тесты должны были быть: 

it('should not find job list by css when detailed view is chosen', () => {
  component.workHistoryState.ViewTypeChanged("detailed");
  fixture.detectChanges();

  let jobList = fixture.debugElement.query(By.css('.jobList'));

  expect(jobList).toBeNull();
});

it('should not find job list when detailed view is chosen', () => {
  component.workHistoryState.ViewTypeChanged("detailed");
  fixture.detectChanges();

  let jobList = fixture.debugElement.query(By.directive(JobListComponentMock));

  expect(jobList).toBeNull();
});
...