messages.component.spec.ts

it("Clicking the clear button calls clear on the message service", () => {
  const messagesService = TestBed.get(MessageService);
  messagesService.messages = [{}];
  spyOn(messagesService, "clear");
  fixture.detectChanges();
  const button: HTMLButtonElement = fixture.debugElement.query(
    By.css("button")
  ).nativeElement;
  button.click();

  // No need to detect changes because we're not checking changes in the DOM
  expect(messagesService.clear).toHaveBeenCalled();
});