javascript - 如何在服务中测试 JSONP 方法 - Angular
问题描述
我正在制作一个简单的电子邮件订阅应用程序,我已经为其编写了测试,目前一切正常。
为了简单起见,我想解释一下我面临这个问题的确切部分。
我的服务.ts:
export class MyService {
mailChimpEndpoint =
'https://gmail.us10.list-manage.com/subscribe/post-json?u=aaa7182511d7bd278fb9d510d&id=01681f1b55&';
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')
}
}
以上是一个调用api的服务中的简单方法
服务文件链接:https ://stackblitz.com/edit/angular-testing-imniaf?file=app%2Fmy-service.ts
submitForm
现在我正在尝试为上述方法编写一个测试用例
我的服务.spec.ts
it('check subscribeEmail function has been called in service', (done: DoneFn) => {
const service = TestBed.get(MyService);
service.submitForm('test@gmail.com').subscribe(
response => {
expect(response).toEqual(mockServiceData);
}
)
const reqMock = httpTestingController.expectOne(request => request.url === mailChimpEndpoint);
expect(reqMock.request.method).toBe('GET');
reqMock.flush(mockServiceData);
});
链接到此规范文件:https ://stackblitz.com/edit/angular-testing-imniaf?file=app%2Fmy-service.spec.ts
这是我被卡住的地方,上面的代码抛出错误,
错误:应为条件“按功能匹配:”提供一个匹配请求,但没有找到。
完整的工作 stackblitz 链接:
请帮助我成功通过此测试。
解决方案
HttpClient
应该是间谍,那么你可以断言它。
TestBed.configureTestingModule({
// add this to the definition of the testing module
providers: [{
provide: HttpClient,
useValue: {
jsonp: jasmine.createSpy('httpClient.jsonp'),
}
}]
})
然后在测试中
it('check subscribeEmail function has been called in service', (done: DoneFn) => {
const service = TestBed.get(MyService);
const httpClient = TestBed.get(HttpClient);
const expected: any = Symbol();
(httpClient.jsonp as any).and.returnValue(expected);
const actual = service.submitForm('test@gmail.com');
expect(actual).toBe(expected);
expect(httpClient.jsonp).toHaveBeenCalledWith(provideValueHere, 'c');
});
现在你的测试应该是这样的:
import { HttpClient } from '@angular/common/http';
import { TestBed } from '@angular/core/testing';
import { MyService } from './my-service';
describe('MyService', () => {
beforeEach(() => TestBed.configureTestingModule({
providers: [
MyService,
{
provide: HttpClient,
useValue: {
jsonp: jasmine.createSpy('httpClient.jsonp'),
}
}
]
}).compileComponents());
it('check subscribeEmail function has been called in service', () => {
const httpClient = TestBed.get(HttpClient);
const service = TestBed.get(MyService);
const expected: any = Symbol();
(httpClient.jsonp as any).and.returnValue(expected);
const actual = service.submitForm('test@gmail.com');
expect(actual).toBe(expected);
expect(httpClient.jsonp).toHaveBeenCalledWith('https://gmail.us10.list-manage.com/subscribe/post-json?u=aaa7182511d7bd278fb9d510d&id=01681f1b55&EMAIL=test@gmail.com&subscribe=Subscribe&b_aaa7182511d7bd278fb9d510d_01681f1b55=', 'c');
});
});
推荐阅读
- javascript - 当页面上有很多项目时,Vuejs 似乎与 v-model 斗争
- javascript - 选择选项值未达到 if 语句
- python - 使用 web3.py 通过块哈希获取 Avalanche 块数据
- sql - 格式化 SQL 查询的输出
- google-apps-script - 从 Google AppScript 调用经过身份验证的云函数
- javascript - 使用 Javascript 的 cloneNode() 和 append()
- android - 如何修复已签名的 apk /app 捆绑签名问题 - 任务应用的 Android Studio 异常失败:验证签名版本
- python - 按住向左和向上箭头键时,Windows 不会注册空格键
- android - 颤动中的弯曲 Tabbar 指示器装饰
- jmeter - Jmeter Transactions Per Second 不代表每秒处理的实际请求