Protractor: "busy indicator" testing / behavior with a slow Internet connection

Question

I have a busy indicator that appears if an HTTP request takes more than 1 second. If it returns in less than 1 second, the busy indicator does not appear.

What is the best way to test this with a protractor? I think I need two tests:

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

Answer 1

- -, , Protractor. - , / (, , ).

- + -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 API, /, JSON : latency , .

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

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

. , , , , . , 500 900 .

browser.ignoreSynchronization = false. false, , $http, , .