Angular 当稳定后，单元测试角度5滚动事件触发器

我一直无法找出为什么这个测试不起作用。下面给出了我的示例代码。在单元测试时，滚动组件中的子DIV元素时所做的更改。事件处理程序会按预期触发，但async\whenStable不会等待区域任务完成，并且任务会在测试完成时触发

我已尝试使用Renderr2分配事件。使用完全相同的结果进行侦听

应用程序组件.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');
  }
}

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

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

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');
    });
  }));
});

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>

应用组件规范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');
  }
}

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

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

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');
    });
  }));
});

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从“./app.component”导入{AppComponent}；
从“@angular/platform browser”导入{By}”；
描述（'AppComponent'，（）=>{
let组件：AppComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[AppComponent]
}).compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（AppComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
它（'应该创建应用'，异步（（）=>{
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（）然后（（）=>{
const message=fixture.debugElement.query（By.css（'p'）；
expect（message.style.color）.toEqual（'blue'）；
});
}));
});

原来我需要使用这条线路

container.triggerEventHandler('scroll', null); 

而不是

container.nativeElement.scroll(); 

---

我可以通过以下方式触发滚动事件：

page.myElement.dispatchEvent（新事件（'scroll'）；

假设我的

page.myElement

链接到我的HTML元素

---

这是一种更好的方法，而不是直接从单元测试调用

component.onScroll（）

。

您是否尝试过移动

fixture.detectChanges（）在
fixture.whenStable（）中。然后（（）=>{…}）
就像在教程中一样，或者使用fakeAsync（）和tick（）？是的，我已经尝试了这两种方法。当您手动执行它时，您尝试测试的东西会起作用；执行是否正确？是的，执行情况良好。然而，scroll实现在我们的应用程序中触发了一些效果，因此我们需要一个可靠的测试来验证它是否发生了。我认为nativeElement.scroll是一个事件映射，而不是触发器。。