angular - 在 Angular 中，spyOn 无法使用异步管道

Question

我有一个运行良好的简单组件，如下所示:

@Component({
  selector: 'component',
  template: `
    {{userWithAsyncPipe | async | json}} <!-- = null in test -->
    {{userFromOnInit | json}} <!-- working test -->
  `,
})
export class Component implements OnInit {
  constructor(private service: MyService) {
  }

  userWithAsyncPipe = this.service.getUser();
  userFromOnInit;

  ngOnInit() {
    this.service.getUser().subscribe(user => this.userFromOnInit = user);
  }
}

我试图通过模拟 service.getUser() 方法来测试它。所以我编写了一个大约如下所示的测试组件:

describe('', () => {

  ...
  let myService;
  beforeEach(() => {
    myService = TestBed.inject(MyService);
  });

  it('', () => {
    spyOn(myService, 'getUser').and.returnValue(of({name: 'Jacob'}));
  });
});

但是当我查看 karma 浏览器时，只有变量 userFromOnInit 被解析。 userWithAsyncPipe 等于 null。

那是什么鬼？

Answer 1

这里有一个例子 ng-mocks

https://codesandbox.io/s/gallant-bas-is5zy?file=/src/test.spec.ts

import { CommonModule } from "@angular/common";
import {
  Component,
  EventEmitter,
  Input,
  NgModule,
  Injectable,
  Output
} from "@angular/core";
import { MockBuilder, MockInstance, MockRender, ngMocks } from "ng-mocks";
import { EMPTY, Observable, of } from "rxjs";

@Injectable()
class MyService {
  getUser(): Observable<any> {
    return EMPTY;
  }
}

@Component({
  selector: "app-target",
  template: `
    {{ userWithAsyncPipeFn() | async | json }}
    {{ userWithAsyncPipe | async | json }}
    {{ userFromOnInit | json }}
  `
})
class TargetComponent {
  userWithAsyncPipeFn = () => this.service.getUser();
  userWithAsyncPipe = this.service.getUser();
  userFromOnInit: any;

  constructor(private service: MyService) {}

  ngOnInit() {
    this.service.getUser().subscribe((user) => (this.userFromOnInit = user));
  }
}

@NgModule({
  imports: [CommonModule],
  declarations: [TargetComponent],
  providers: [MyService]
})
class TargetModule {}

describe("my sandbox", () => {
  beforeEach(() => MockBuilder(TargetComponent, TargetModule));

  it("should do something", () => {
    MockInstance(MyService, "getUser", () => of({ name: "Jacob" }));

    const fixture = MockRender(TargetComponent);
    expect(fixture.nativeElement.innerHTML.match(
      /\{\s*"name":\s*"Jacob"\s*\}/g
    ).length).toEqual(3);
  });
});