angularjs – 量角器：使用慢速互联网连接测试“忙指示符”/行为

2023年1月4日 195次阅读

如果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 () {
    // ??
});

最佳答案 一种方法是设置Protractor启动的浏览器使用的可配置代理服务器.此代理服务器可以为请求添加延迟,从而模拟慢速Internet连接/网络(或至少为您的目的模拟它).

这样的代理服务器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：延迟,使用几毫秒来减慢所有后续请求通过代理.

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

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

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

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;
    });
  }
...

请注意,我们将代码添加到控制流中,并在设置延迟的请求完成后返回已解析的promise.这意味着我们可以以与其他量角器元素查找器/期望相同的自然方式使用它,而无需使用手动然后回调.

您的实际测试取决于您显示繁忙指标的具体方式,但您应该能够执行以下操作：

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请求都已完成,在这种情况下我们不想做,因为我们正在测试请求期间发生的事情的行为.

点赞