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