spyOn not working with async pipe in Angular

user_5735030 0
Viewed 272

I have a simple component working well looking like that:

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

I'm trying to test it by mocking the service.getUser() method. So I wrote a test component approximatly looking like this:

describe('', () => {

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

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

But when I look at the karma browser, only the variable userFromOnInit is resolved. userWithAsyncPipe is equal to null.

What the hell is that ?

jasmine angular typescript
1 Answers

There is an example for you with 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);
  });
});
user_131120180
Related