Angular2+中Protractor测试组件OnInit异步服务调用失败求助

我太懂你这种郁闷了——纯文本H1测试好好的，一用OnInit里的异步服务赋值就翻车，试了各种sleep、wait还是没用对吧？其实核心问题要么是组件里的异步操作没触发Angular的变更检测，要么是测试里没正确等待Angular的异步周期完成，给你几个靠谱的解决方案：

1. 优先用AsyncPipe处理异步数据（最推荐） #

把组件里的异步逻辑改成Observable+AsyncPipe，Angular会自动帮你处理变更检测，Protractor也能完美识别视图更新：

组件代码 #

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { HelloWorldService } from './hello-world.service';

@Component({
  selector: 'app-root',
  template: '<h1>{{ greeting$ | async }}</h1>'
})
export class AppComponent implements OnInit {
  greeting$: Observable<string>;

  constructor(private helloWorldService: HelloWorldService) {}

  ngOnInit() {
    // 若服务返回Promise，可使用fromPromise转成Observable
    this.greeting$ = this.helloWorldService.getGreeting();
  }
}

测试代码（用Async/Await+ExpectedConditions） #

别再用硬sleep了，用Protractor专门的等待条件，配合async/await确保测试等待异步完成：

import { browser, element, by, ExpectedConditions as EC } from 'protractor';

describe('Hello World Async Test', () => {
  beforeEach(async () => {
    await browser.get('/'); // 等待页面加载完成
  });

  it('should display the greeting from async service', async () => {
    const h1 = element(by.css('h1'));
    // 等待H1元素的文本包含预期内容，超时时间设5秒足够了
    await browser.wait(EC.textToBePresentInElement(h1, 'Hello World'), 5000);
    // 再断言文本完全匹配
    expect(await h1.getText()).toEqual('Hello World');
  });
});

2. 如果必须用Promise，手动触发变更检测 #

要是你的服务只能返回Promise，那得手动告诉Angular“数据更新了，刷新视图”——因为原生Promise的回调不在Angular的Zone里，Angular不知道要更新视图：

组件代码 #

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { HelloWorldService } from './hello-world.service';

@Component({
  selector: 'app-root',
  template: '<h1>{{ greeting }}</h1>'
})
export class AppComponent implements OnInit {
  greeting: string;

  constructor(
    private helloWorldService: HelloWorldService,
    private cdr: ChangeDetectorRef // 注入变更检测服务
  ) {}

  ngOnInit() {
    this.helloWorldService.getGreeting().then(greeting => {
      this.greeting = greeting;
      // 手动触发变更检测，让Angular更新视图
      this.cdr.detectChanges();
    });
  }
}

测试代码还是用上面的Async/Await+ExpectedConditions写法就行。

3. 检查Protractor配置是否正确 #

别不小心把ignoreSynchronization设为true了，这会让Protractor放弃等待Angular的异步周期，自然抓不到更新：
打开protractor.conf.js，确保没有以下错误配置：

exports.config = {
  // ...其他配置
  onPrepare() {
    // ❌ 绝对不能加这个，除非你测的是非Angular页面
    // browser.ignoreSynchronization = true;
  },
  // 针对Angular2+，确保这个配置开启
  useAllAngular2AppRoots: true
};

为什么你之前的方法没生效？比如browser.sleep只是硬等，但如果异步操作在sleep结束后才完成，测试还是会失败；用browser.wait但没配合async/await的话，测试会继续执行下一行，根本没等到条件满足。

内容的提问来源于stack exchange，提问作者Nolyurn