javascript - 如何以 Angular 覆盖按钮点击测试？ (附 Stackblitz)

Question

我正在制作一个非常简单的应用程序，它有一个输入框和一个按钮。

1. Input 用于输入email

2. 使用事件处理器订阅按钮

输入电子邮件并点击按钮将进行 api 调用，(此方法有效)

  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<MailChimpResponse>(mailChimpUrl, 'c').subscribe(response => {
        console.log('response ', response)
                if (response.result && response.result !== 'error') {
                    this.submitted = true;
                }
                else {
                    this.error = response.msg;
                }
            }, error => {
                console.error(error);
                this.error = 'Sorry, an error occurred.';
            });
        }
  }

A complete working example here

没有问题，您也可以检查一切正常。

要求:我需要涵盖此按钮点击和带参数的 http 调用的测试用例。

我无法编写测试用例，它显示测试未涵盖带参数的 http 调用。

我为实现按钮点击场景而编写的测试，例如，

describe('HelloComponent', () => {

  let component: HelloComponent;
  let fixture: ComponentFixture<HelloComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
       imports: [
        HttpClientTestingModule,
        ReactiveFormsModule
      ],
      declarations: [HelloComponent]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HelloComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('check subscribeEmail function has value', (done: DoneFn) => {

    const subscribeButton = fixture.debugElement.query(By.css('.subscribe'));
    subscribeButton.triggerEventHandler('click', {});

    done();
  });
});

还有 Working stackblitz with test cases here

(请查看 hello.component.spec.ts )

对于按钮点击，我已经介绍过了并且它有效

    const subscribeButton = fixture.debugElement.query(By.css('.subscribe'));
    subscribeButton.triggerEventHandler('click', {});

你能帮我实现覆盖带有参数的http调用的按钮点击的测试用例的结果吗？

更新:经过一番搜索后，我发现我可以使用 httpmock 来调用带有参数的 url，但我以错误告终，

Error: Expected one matching request for criteria "Match URL: https://gmail.us10.list-manage.com/subscribe/post-json?u=aaa7182511d7bd278fb9d510d&id=01681f1b55&amp", found none.

您还可以看到 Modified stackblitz with httpMock here...

毕竟我只是在尝试发表这篇文章，所以请考虑这个问题并提供正确的解决方案。

提前致谢。

Answer 1

这是一个很长的问题，我知道您花了很多时间来创建它。因此，我也花了一些时间来重构代码以使其符合最佳实践。这将需要将您的代码拆分为服务，并使代码更好地进行单元测试。 (组件和服务的单元测试)

1. 创建一个服务，例如MyService 并将http 代码移入其中。它将帮助您分别对 component 和 service 进行单元测试。我创建如下:

export class MyService {
  mailChimpEndpoint = 'https://gmail.us10.list-manage.com/subscribe/post-json?u=aaa7182511d7bd278fb9d510d&id=01681f1b55&amp';
  constructor(private _http: HttpClient) {}

  submitForm(email: string){
    const params = new HttpParams()
                .set('EMAIL', email)
        .set('subscribe','Subscribe')
        .set('b_aaa7182511d7bd278fb9d510d_01681f1b55','')
    const mailChimpUrl = this.mailChimpEndpoint + params.toString();

    return this._http.jsonp<MailChimpResponse>(mailChimpUrl, 'c')
  }
}

1. 为组件 as you can see here in the stackblitz 创建单元测试.仔细查看重构代码以及我如何根据场景涵盖所有案例。正如我已经在 your previous question 中解释的那样, 你可以测试 MatSnackBar 调用

2. 同样可以引用one my of my articles to test a service编写服务的单元测试。