4

如果 HTTP 请求花费的时间超过 1 秒，我会出现一个繁忙的指示器。如果它在 1 秒内返回，则不会出现忙指示符。

用量角器测试这个的最好方法是什么？我想我需要两个测试用例：

it('should not show busy indicator because http response is quick', function () {
    // ??
});

it('should show busy indicator because http response is taking longer than 1 second', function () {
    // ??
});
4

1 回答 1

2

一种方法是设置 Protractor 启动的浏览器使用的可配置代理服务器。此代理服务器可以为请求添加延迟，从而模拟缓慢的互联网连接/网络（或至少为您的目的模拟它）。

这样的代理服务器 + mini-API 允许它是可配置的，就像：

// proxy.js

// Config ports
var PROXY_PORT = 8001;
var CONFIG_PORT = 8002;

// Latency used for all requests
var latency = 0;

// Proxy
var hoxy = require('hoxy');
var proxy = new hoxy.Proxy();
proxy.intercept('request', function(req, resp) {
  req.slow({latency: latency}); 
});
proxy.listen(PROXY_PORT);

// API Server for tests to configure latency
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.post('/', function(req, res) {
  latency = req.body.latency;;
  res.send('');
});
app.listen(CONFIG_PORT);

以上请求 npm 包hoxy,express和body-parser, 每个都可以通过如下命令安装

npm install hoxy --save-dev

上面的服务器，假设它被保存到proxy.js可以通过命令行启动

node proxy.js

请注意，它侦听 2 个端口：8001 用于为请求添加延迟的简单 HTTP 代理，以及 8002 用于侦听/接受带有单个键的 JSON 对象的简单 API：latency用毫秒数来减慢所有后续请求通过代理。

要在 Protractor 中使用代理，您可以通过以下方式将其添加到其配置文件中，例如对于 Chrome：

capabilities: {
  browserName: 'chrome',
  proxy: {
    proxyType: 'manual',
    httpProxy: 'localhost:8001'
  }
}

然后在您的规范文件中，您可以创建一个函数来设置后续请求的延迟

describe('My Component', function() {
  var http = require('http');

  function setLatency(latency) {
    return browser.controlFlow().execute(function () {
      var deferred = protractor.promise.defer();
      var data = JSON.stringify({latency:latency});
      var req = http.request({
        method: 'POST',
        host: 'localhost',
        port: 8002,
        headers: {
          'Content-Type': 'application/json',
          'Content-Length': data.length
        }
      }, function() {
        deferred.fulfill();
      });
      req.write(data);
      req.end();  
      return deferred.promise;
    });
  }
...

请注意，我们将代码添加到控制流中，并返回一个承诺，一旦设置延迟的请求完成，该承诺就会被解决。这意味着我们可以像其他量角器元素查找器/期望一样自然地使用它，而不必使用手动then回调。

您的实际测试取决于您显示繁忙指示器的确切方式，但您应该能够执行以下操作：

it('should not show busy indicator because http response is quick', function () {
  setLatency(900);
  element(by.css('button')).click();
  browser.ignoreSynchronization = true;
  browser.sleep(500);
  expect(element(by.css('.loading-indicator')).isPresent()).not.toBe(true);
  browser.ignoreSynchronization = false;
  setLatency(0);
});

it('should show busy indicator because http response is taking longer than 1 second', function () {
  setLatency(2000);
  element(by.css('button')).click();
  browser.ignoreSynchronization = true;
  browser.sleep(1000);
  expect(element(by.css('.loading-indicator')).isPresent()).toBe(true);
  browser.ignoreSynchronization = false;
  setLatency(0);
});

上述测试并不完美。具体来说，繁忙指示器未显示的测试实际上并未表明它从未出现。它只是测试它在 900 毫秒的请求中没有出现 500 毫秒。

注意 的设置browser.ignoreSynchronization = false。如果我们不将它设置为false，那么在所有$http请求完成之前测试不会进行，在这种情况下我们不想这样做，因为我们正在测试请求期间发生的行为。

于 2015-05-04T17:39:41.870 回答