Test the call to method into a subscribe on Jamine (Isolated Test)

Question

I try to test a call to method inside on a subscriber, but I can't. Always that I call to method that has a subscribe, console send to me the error "Error: Expected spy saveMug to have been called". Also fail with reContent method.

My test should be isolated, so I can´t use fixture or testbed.

This is my component code

@Component({
  selector: "app-mug",
  templateUrl: "./mug.component.html",
  styleUrls: ["./mug.component.scss"],
})
export class MugComponent implements OnInit
{

  public mug: Mug= new Mug();

  constructor(
    public constants: Constants,
    public mugService: mugService,
    private messageService: MessageService,
    public route: ActivatedRoute,
    public router: Router,
  ) {
    super(constants, route);
  }

  ngOnInit() {}

  public saveMug(previous?: boolean): void {
    const sub = this.mugService.saveMug(this.mug).subscribe((mug) => {
      if (previous === undefined || previous === false) {
        this.messageService.showMessage(
          this.constants.MUG,
          [this.constants.MUG_OK]
        );
      } else {
        this.messageService.showMessage(
          this.constants.MUG,
          [this.constants.NO_MUG]
        );
      }
      this.mug= new Mug(mug.dates);
    });
    this.subscriptions.add(sub);
  }
}

This is my Spec.ts code

describe("MugComponent", () => {
  let component;
  const constants: Constants = new Constants();
  let messageService= jasmine.createSpyObj("messageService", ["showMessage"]);
  let route;
  let router: Router;

  beforeEach(() => {
    component = new MugComponent(
      constants,
      messageService,
      route,
      router
    );
    component.mug= new Mug();
  });

  it("should call to showMessage", () => {
    spyOn(component, "showMessage");
    component.saveMug(true);
    expect(component.showMessage).toHaveBeenCalled();
  });
});

This is the Error

Error: Expected spy showMessage to have been called. at

Thanks.

score 1 · Accepted Answer · answered Jun 16 '22 at 13:09

What is mugService? How do you have access to it without injecting it in the constructor?

That being said, I think you may need to use fakeAsync/tick to make the subscription happen before your assertion.

In the component, I am going to assume there is a MugService now.

constructor(
    public constants: Constants,
    private messageService: MessageService,
    private mugService: MugService,
    public route: ActivatedRoute,
    public router: Router,
  ) {
    super(constants, route);
  }

let component;
  const constants: Constants = new Constants();
  let messageService= jasmine.createSpyObj("messageService", ["showMessage"]);
  // !! create a spy
  let mugService = jasmine.createSpyObj<MugService>("MugService", ['saveMug']);
  let route;
  let router: Router;

  beforeEach(() => {
    component = new MugComponent(
      constants,
      messageService,
      // !! give spy object to component
      mugService,
      route,
      router
    );
    component.mug= new Mug();
  });
  
// !! wrap in fakeAsync
  it("should call to showMessage", fakeAsync(() => {
    // !! I don't think component.showMessage exists, messageService.showMessge does and it is already spied on
    // !! make mugService.saveMug and return an observable
    mugService.saveMug.and.returnValue(of({})); // you can mock what it returns however you wish
    component.saveMug(true);
    // !! wait for the subscription to complete
    tick();
    expect(messageService.showMessage).toHaveBeenCalled();
  });
}));

Thanks a lot. I forgot to write mugService when bringing it here, sorry. i tried what you told me but now I get another error "TypeError: Cannot read properties of undefined (reading 'id')". Is it possible that it is a problem of what the mock returns? — Ivan Martin Blanco, Jun 16 '22 at 15:57
Somewhere in your component you're reading a `.id` (I can't seem to find it). Wherever you find that, what is to the left of the `.id` is `undefined` and in your test you have to make sure you mock it so it is not `undefined` and maybe an empty object. — AliF50, Jun 16 '22 at 16:22

score 0 · Answer 2 · answered Jun 15 '22 at 19:03

Well, I would suggest to let the mocked messageService's saveMenu method return a value like of(new Mug()).

I assume, the test case should validate, whether the messageService got called correctly after the component's saveMug method was executed. This could be accomplished by doing something similar like:

describe("MugComponent", () => {
  let component: MugComponent;
  const constants: Constants = new Constants();
  let route;
  let router: Router;

  let messageService= jasmine.createSpyObj("messageService", ["showMessage", "saveMenu"]);
  messageService.saveMenu.and.returnValue(of(new Mug()));

  beforeEach(() => {
    component = new MugComponent(
      constants,
      messageService,
      route,
      router
    );
    component.mug = new Mug();
  });

  it("should call to showMessage", () => {
    component.saveMug(true);
    expect(messageService.showMessage).toHaveBeenCalled();
  });
});

Hi! Thanks for the answerd but thats didn't work for me. Test bring back Error: Expected spy messageService.showMessage to have been called. — Ivan Martin Blanco, Jun 16 '22 at 11:17

Test the call to method into a subscribe on Jamine (Isolated Test)

2 Answers2