Примеры тестирования компонент¶

Компонент с вызовом асинхронного метода¶

Практически в каждом приложении имеются компоненты, которые зависимы от сервисов, которые хранят асинхронные методы, инициирующие HTTP-запросы к удаленному серверу и возвращающие определенные данные.

Поскольку основное назначение unit-тестов проверка не работоспособности API, а результата преобразования и (или) отображения полученных данных, то вызовы этих методов и их данных эмулируются через константы или Spy объекты.

info-message.component.ts

@Component({
  selector: 'info-message',
  template: `
    <h1>Attention!</h1>

    <p>{{ appService.message }}</p>
  `,
})
export class InfoMessageComponent {
  constructor(public appService: AppService) {}
}

info-message.component.spec.ts

describe('InfoMessageComponent', () => {
  let fixture: ComponentFixture<InfoMessageComponent>

  beforeEach(() => {
    const appServiceStub = { message: 'Out of service' }

    TestBed.configureTestingModule({
      declarations: [InfoMessageComponent],
      providers: [
        { provide: AppService, useValue: appServiceStub },
      ],
    })

    fixture = TestBed.createComponent(InfoMessageComponent)
  })

  it('should get message from AppService stub', () => {
    fixture.detectChanges()
    const infoMessageEl: HTMLElement =
      fixture.debugElement.nativeElement
    const p = infoMessageEl.querySelector('p')
    expect(p.textContent).toContain('Out of service')
  })
})

Не используйте реальные сервисы в тестах компонентов. Их внедрение может оказаться крайне сложным, или вообще невозможным, поскольку в сервисах могут быть проверки, которые пройдут только в реально работающем приложении.

В приведенном примере Angular тестирования константа appService предоставляет все необходимые данные и методы для их преобразования подобно тому, как это делает реальный сервис.

Для эмуляции асинхронных методов сервисов лучше подойдут Spy объекты.

app.service.ts

@Injectable({ providedIn: 'root' })
export class AppService {
  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get('/api/data')
  }
}

app.service.spec.ts

describe('InfoMessageComponent', () => {
  let fixture: ComponentFixture<InfoMessageComponent>
  let appService

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [InfoMessageComponent],
      providers: [AppService],
    })

    fixture = TestBed.createComponent(InfoMessageComponent)
    appService = jasmine.createSpyObj('AppService', {
      getData: 'Out of service',
    })
  })

  it('should get message from AppService getData()', () => {
    const comp = fixture.componentInstance
    comp.message = appService.getData()
    expect(comp.message).toBe('Out of service')
  })
})

Объект Spy позволяет эмулировать обращение к асинхронному методу (название). Но сам тест выполняется синхронно, внутри него не выполняется никаких асинхронных действий.

При использовании в тестах Angular компонентов сервисов следует помнить, что Angular имеет иерархическое построение injector-ов. Так, если сервис был определен на уровне компонента, то при тестировании он должен быть взят не из корневого injector-а, а из injector-а самого компонента.

appService = fixture.debugElement.injector.get(AppService)

Но если сервис определен именно в модуле, т. е. находится в корневом injector-е, то можно использовать более простой в восприятии способ получения сервиса с использованием TestBed.get().

appService = TestBed.get(AppService)

Для асинхронности теста используйте функцию fakeAsync() библиотеки @angular/core/testing.

describe('InfoMessageComponent', () => {
  let fixture: ComponentFixture<InfoMessageComponent>
  let appService

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [InfoMessageComponent],
      providers: [AppService],
    })

    fixture = TestBed.createComponent(InfoMessageComponent)
    appService = jasmine.createSpyObj('AppService', {
      getData: 'Out of service',
    })
  })

  it('should get message from AppService getData()', fakeAsync(() => {
    const comp = fixture.componentInstance

    setTimeout(
      () => (comp.message = appService.getData()),
      180
    )

    tick(180)

    expect(comp.message).toBe('Out of service')
  }))
})

Важным здесь является функция tick(), без которой использование fakeAsync() было бы бессмысленным. В качестве аргумента она принимает количество миллисекунд, на которое выполнение теста приостановиться. Так, в примере дальнейшие операции в тесте зависимы от вызова асинхронного метода (название), который выполняется за 180 миллисекунд.

Но данный подход не подойдет, если вы не знаете точное время исполнения метода. Самый простой пример - обращение к удаленному API, где время исполнения зависит от множества неконтролируемых факторов: стабильность соединения, пропускная способность канала, нагрузка на сервер и т. д. Здесь необходимо использовать функцию async().

info-message.component.ts

constructor(public appService: AppService){}

message: string = '';

ngOnInit(){
    this.appService.getData().subscribe(message => this.message = message);
}

info-message.component.spec.ts

describe('InfoMessageComponent', () => {
  let fixture: ComponentFixture<InfoMessageComponent>

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [InfoMessageComponent],
      providers: [AppService],
    })

    fixture = TestBed.createComponent(InfoMessageComponent)
  })

  it('should get message from AppService getData()', async(() => {
    const comp = fixture.componentInstance
    fixture.detectChanges() //Вызов ngOnInit()

    fixture.whenStable().then(() => {
      expect(comp.message).toBe('Out of service')
    })
  }))
})

async() запускает тест в специальной среде исполнения. Но главное здесь - метод whenSable(), возвращающий объект Promise, который выполнится после того, как очередь задач JavaScript станет пустой, т. е. будут исполнены все асинхронные и синхронные действия. Здесь отпадает необходимость в знании точного времени исполнения.

Взаимодействие компонентов¶

Когда вы передаете данные из одного компонента в другой через @Output() свойство, вам понадобится в тесте получить доступ к двум компонентам одновременно. Пример тестирования для такого случая.

parent.component.ts

@Component({
  selector: 'parent-component',
  template: `
    <child-component
      (message)="setMessage($event)"
    ></child-component>
  `,
})
export class ParentComponent {
  message: string = ''

  constructor() {}

  setMessage(text): void {
    this.message = text
  }
}

child.component.ts

@Component({
  selector: 'child-component',
  template: `
    <div class="child">
      <button (click)="sendMessage()">Send message</button>
    </div>
  `,
})
export class ChildComponent {
  @Output() message: EventEmitter<any> = new EventEmitter<
    any
  >()

  constructor() {}

  sendMessage(): void {
    this.message.emit('Child message')
  }
}

parent.component.spec.ts

describe('ParentComponent', () => {
  let fixture: ComponentFixture<ParentComponent>
  let parentComp: ParentComponent

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ParentComponent, ChildComponent],
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(ParentComponent)
        parentComp = fixture.componentInstance
      })
  }))

  it('should get message from ChildComponent', () => {
    const childEl: HTMLElement = fixture.debugElement.nativeElement.query(
      '.child'
    )
    childEl.click()

    expect(parentComp.message).toBe('Child message')
  })
})

Основное внимание здесь нужно сосредоточить на блоке beforeEach(). При конфигурации модуля TestingModule в части providers необходимо указать все компоненты, к которым происходит обращение в процессе тестирования. При этом явно создается именно экземпляр класса того компонента, который является родительским ко всем другим.

Доступ к дочерним компонентам осуществляется с помощью селекторов, применяемых относительно свойства nativeElement объекта debugElement с использованием функции querySelector(). В качестве селектора следует использовать id-атрибуты или классы, которые однозначно идентифицируют нужный компонент. Метод detectChanges() вызывается для привязки переданных значений в HTML-шаблоне.

Задать значения свойств дочернего компонента без явного создания экземпляра класса не получится.

Организация кода¶

Даже при тестировании небольшого компонента часто приходится производить много манипуляций с его свойствами или осуществлять выборку HTML-элементов по селекторам в пределах шаблона.

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

page.class.ts

class Page {
  get links() {
    return this.queryAll<HTMLElement>('a')
  }

  get inputs() {
    return this.query<HTMLInputElement>('input')
  }

  fixture: ComponentFixture<TestComponent>

  constructor(fixture: ComponentFixture<TestComponent>) {
    this.fixture = fixture.componentInstance
  }

  private query<T>(selector: string): T {
    return this.fixture.nativeElement.querySelector(
      selector
    )
  }

  private queryAll<T>(selector: string): T[] {
    return this.fixture.nativeElement.querySelectorAll(
      selector
    )
  }
}

При написании сценариев тестирования экземпляр класса Page создается в блоке beforeEach().

import { Page } from './page.ts'

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [TestComponent],
  })
    .compileComponents()
    .then(() => {
      fixture = TestBed.createComponent(TestComponent)
      page = new Page(fixture)
    })
}))

Примеры тестирования компонент¶

Компонент с вызовом асинхронного метода¶

Взаимодействие компонентов¶

Организация кода¶

Комментарии