title: How to cover test for button click in angular? (Stackblitz attached)
body: <p>I am making a very simple application which has one input box and a button.</p>
  
  <ol>
  <li><p>Input is for entering <strong>email</strong></p></li>
  <li><p>Subscribe <strong>button</strong> with event handler</p></li>
  </ol>
  
  <p>Entering email and click over the button will make an api call, (This method works)</p>
  
  <pre><code>  subscribeEmail() {
      this.error = '';
  
  
          if (this.userForm.controls.email.status === 'VALID') {
  
        const params = new HttpParams()
                  .set('EMAIL', this.userForm.controls.email.value)
          .set('subscribe','Subscribe')
          .set('b_aaa7182511d7bd278fb9d510d_01681f1b55','')
        console.log(params);
              const mailChimpUrl = this.mailChimpEndpoint + params.toString();
  
              this.http.jsonp&lt;MailChimpResponse&gt;(mailChimpUrl, 'c').subscribe(response =&gt; {
          console.log('response ', response)
                  if (response.result &amp;&amp; response.result !== 'error') {
                      this.submitted = true;
                  }
                  else {
                      this.error = response.msg;
                  }
              }, error =&gt; {
                  console.error(error);
                  this.error = 'Sorry, an error occurred.';
              });
          }
    }
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-jsonp-riatjf" rel="nofollow noreferrer"><strong>A complete working example here</strong></a></p>
  
  <p>There is no issues with it and you can also check everything works fine.</p>
  
  <p><strong>Requirement:</strong> I am in the need to cover test case for this button click and the http call with params.</p>
  
  <p>I am unable to write the test case and it is showing that the tests are not covered for the http calls with params.</p>
  
  <p><a href="https://i.stack.imgur.com/oyCVu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oyCVu.png" alt="enter image description here"></a></p>
  
  <p>The tests that I have written so for for achieving the button click scenario like,</p>
  
  <pre><code>describe('HelloComponent', () =&gt; {
  
    let component: HelloComponent;
    let fixture: ComponentFixture&lt;HelloComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
         imports: [
          HttpClientTestingModule,
          ReactiveFormsModule
        ],
        declarations: [HelloComponent]
      }).compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(HelloComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('check subscribeEmail function has value', (done: DoneFn) =&gt; {
  
      const subscribeButton = fixture.debugElement.query(By.css('.subscribe'));
      subscribeButton.triggerEventHandler('click', {});
  
      done();
    });
  });
  </code></pre>
  
  <p>And the <a href="https://stackblitz.com/edit/angular-testing-qdernl" rel="nofollow noreferrer"><strong>Working stackblitz with test cases here</strong></a></p>
  
  <p>(Please look into <strong>hello.component.spec.ts</strong> )</p>
  
  <p>For button click, I have covered and it works</p>
  
  <pre><code>    const subscribeButton = fixture.debugElement.query(By.css('.subscribe'));
      subscribeButton.triggerEventHandler('click', {});
  </code></pre>
  
  <p>Could you please help me to achieve the result of covering the test case for the button click that has http call with params?</p>
  
  <p><strong>Update:</strong>
  After some search I have found that I can use httpmock to call the url with params but I am ending up with error as,</p>
  
  <blockquote>
    <p>Error: Expected one matching request for criteria "Match URL:
    <a href="https://gmail.us10.list-manage.com/subscribe/post-json?u=aaa7182511d7bd278fb9d510d&amp;id=01681f1b55&amp;amp" rel="nofollow noreferrer">https://gmail.us10.list-manage.com/subscribe/post-json?u=aaa7182511d7bd278fb9d510d&amp;id=01681f1b55&amp;amp</a>",
    found none.</p>
  </blockquote>
  
  <p>You can also see the <a href="https://stackblitz.com/edit/angular-testing-9uvra9" rel="nofollow noreferrer"><strong>Modified stackblitz with httpMock here...</strong></a></p>
  
  <p>After all try only I am making this post so please consider this question and provide right solution.</p>
  
  <p>A big thanks in advance.</p>