Angular单元测试：HTTP与JSONP请求的模拟测试实战

本文基于codecraft-tv/angular-course项目中的单元测试教学内容，重点讲解如何在Angular应用中测试HTTP和JSONP请求。我们将通过一个iTunes搜索服务的测试案例，深入剖析Angular测试环境下的HTTP请求模拟技术。

测试HTTP请求的核心思路

在单元测试中，我们不应该依赖真实的网络请求，因为这会导致测试变得缓慢且不可靠。Angular提供了MockBackend机制，允许我们拦截和模拟HTTP请求的响应。

测试环境配置

服务类实现

首先我们来看待测试的SearchService服务类，它使用JSONP与iTunes API交互：

@Injectable()
export class SearchService {
  apiRoot: string = 'https://itunes.apple.com/search';
  results: SearchItem[];

  constructor(private jsonp: Jsonp) {
    this.results = [];
  }

  search(term: string) {
    return new Promise((resolve, reject) => {
      this.results = [];
      let apiURL = `${this.apiRoot}?term=${term}&media=music&limit=20&callback=JSONP_CALLBACK`;
      this.jsonp.request(apiURL)
          .toPromise()
          .then(
              res => {
                // 处理响应数据
                this.results = res.json().results.map(item => {
                  return new SearchItem(
                      item.trackName,
                      item.artistName,
                      item.artworkUrl60,
                      item.artistId
                  );
                });
                resolve(this.results);
              },
              msg => {
                reject(msg);
              }
          );
    });
  }
}

测试模块配置

测试配置的关键在于替换真实的HTTP/JSONP后端为MockBackend：

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [JsonpModule],
    providers: [
      SearchService,
      MockBackend,
      BaseRequestOptions,
      {
        provide: Jsonp,
        useFactory: (backend, options) => new Jsonp(backend, options),
        deps: [MockBackend, BaseRequestOptions]
      }
    ]
  });

  backend = TestBed.get(MockBackend);
  service = TestBed.get(SearchService);
});

这里使用了工厂提供者模式，确保Jsonp服务使用MockBackend而非真实后端。

模拟请求响应

创建模拟响应

我们可以通过订阅backend.connections来拦截请求并返回模拟数据：

it('search should return SearchItems', fakeAsync(() => {
  let response = {
    "resultCount": 1,
    "results": [
      {
        "artistId": 78500,
        "artistName": "U2",
        "trackName": "Beautiful Day",
        "artworkUrl60": "image.jpg",
      }]
  };

  backend.connections.subscribe(connection => {
    connection.mockRespond(new Response(<ResponseOptions>{
      body: JSON.stringify(response)
    }));
  });
}));

异步测试处理

由于HTTP请求是异步操作，我们需要使用fakeAsync和tick()来确保测试正确执行：

it('search should return SearchItems', fakeAsync(() => {
  // 设置模拟响应...
  
  // 执行搜索
  service.search("U2");
  tick(); // 等待异步操作完成
  
  // 验证结果
  expect(service.results.length).toBe(1);
  expect(service.results[0].artist).toBe("U2");
  expect(service.results[0].name).toBe("Beautiful Day");
  // 更多断言...
}));

测试要点解析

1. MockBackend的作用：拦截所有HTTP请求，防止真实网络调用
2. 工厂提供者模式：动态创建服务实例，注入模拟依赖
3. fakeAsync区域：提供可控的异步测试环境
4. tick()函数：刷新异步任务队列，确保所有Promise已解决

测试进阶技巧

1. 错误响应测试：可以模拟HTTP错误响应，测试服务的错误处理逻辑

   connection.mockError(new Error('Network error'));
   

2. 请求验证：可以检查请求的URL、参数是否符合预期

   expect(connection.request.url).toContain('term=U2');
   

3. 多次请求测试：可以配置不同的响应来测试多个连续请求的场景

总结

通过本文的讲解，我们掌握了Angular中HTTP/JSONP请求的测试方法。关键在于：

1. 正确配置测试模块，使用MockBackend替换真实后端
2. 拦截请求连接并返回模拟响应
3. 使用fakeAsync和tick()处理异步操作
4. 编写全面的断言验证业务逻辑

这种测试方法不仅适用于JSONP，同样适用于常规的HTTP请求测试，只需将Jsonp替换为Http即可。掌握了这些技巧，你就能为Angular应用中的网络请求编写可靠、高效的单元测试。