Модульное тестирование Angular 5 событие прокрутки срабатывает после whenStable - PullRequest
Новая
       12

Модульное тестирование Angular 5 событие прокрутки срабатывает после whenStable

0 голосов
/ 10 мая 2018

Мне не удалось выяснить, почему этот тест не работает. Учитывая мой пример кода ниже. Когда я выполняю модульное тестирование, изменения вносятся при прокрутке дочернего элемента DIV в компоненте. Обработчик событий срабатывает, как и ожидалось, но async \ whenStable не ожидает завершения задачи Zone, и задача срабатывает после завершения теста.

Я попытался назначить событие с Renderer2.listen с точно таким же результатом.

App.Component.ts 

import { Component, Renderer2, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('message') messageBox: HTMLDivElement;
  constructor(private renderer: Renderer2) {}

  onScroll() {
     this.renderer.setStyle(this.messageBox, 'color', 'blue');
  }
}

App.Component.html 

<div class="scrollWindow" (scroll)="onScroll($event)">
  <div class="scrollContent">Bacon ipsum dolor amet short ribs jowl ball tip turkey sirloin meatloaf ground round capicola pork belly pork chop doner
    flank brisket boudin. Pork chop sausage alcatra meatloaf pork belly meatball bacon tongue tenderloin pastrami hamburger
    pork ribeye andouille biltong. Doner bresaola biltong chicken cupim ham. Beef ribs drumstick ground round bresaola prosciutto
    andouille, pork belly beef flank. Bacon beef cupim turkey, buffalo sausage ham tongue rump ground round doner swine pastrami
    chuck.
  </div>
</div>
<p #message>This is a message</p>

App.Component.css 

.scrollWindow {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: auto;
}

.scrollContent {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: aquamarine;
}

App.Component.spec.ts 

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { By } from '@angular/platform-browser';

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

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

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

  it('should create the app', async(() => {
    const container = fixture.debugElement.query(By.css('.scrollWindow'));

    container.nativeElement.scrollLeft = 50;
    expect(container.nativeElement.scrollLeft).toEqual(50);

    container.nativeElement.scroll();
    fixture.detectChanges();

    fixture.whenStable().then(() => {
      const message = fixture.debugElement.query(By.css('p'));
      expect(message.styles.color).toEqual('blue');
    });
  }));
});

1 Ответ

0 голосов
/ 10 мая 2018

Оказывается, мне нужно было использовать линию 

container.triggerEventHandler('scroll', null);

вместо 

container.nativeElement.scroll();
...