title: Angular: Testing - Expected spy open to have been called
body: <p>I'm writing a test for pop up modal. Its throwing an error <code>Expected spy open to have been called</code> and spy <code>open</code> already declared. May i know what I missed here?</p>
  <p><strong>app.spec.ts</strong></p>
  <pre><code>      it('should open modal', () =&gt; {
          const translation = {
            statusMessage: {
              popup: {
                badRequest: {
                  title: 'Bad Request',
                  message: 'Message..'
                }
              }
            }
          };
          spyOn(translate, 'getTranslation').and.returnValue(of(translation));
          spyOn(modalService, 'open').and.callThrough();
  
          const title = translate.get('title');
          const message = translate.get('message');
  
          component.showPopUp('title', 'message');
          fixture.detectChanges();
          expect(modalService.open).toHaveBeenCalled();
        });
  </code></pre>
  <p><strong>app.ts</strong></p>
  <pre><code>  showModal(title, message) {
      this.translate.getTranslation('en').subscribe((translations) =&gt; {
        this.modalService.open(
          title,
          message,
          {
            title: 'Go back',
            onClick: () =&gt; {
              return;
            }
          },
          true
        );
      });
    }
  </code></pre>