Sam Vevang
8 years ago
committed by
lilia
parent
e4a21d1a53
commit
ed4991974b
Binary file not shown.
|
Before Width: | Height: | Size: 500 B |
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><circle cx="11" cy="-1041.36" r="8" transform="matrix(1 0 0-1 0-1030.36)" opacity=".98" fill="#da4453"/><path d="m-26.309 18.07c-1.18 0-2.135.968-2.135 2.129v12.82c0 1.176.948 2.129 2.135 2.129 1.183 0 2.135-.968 2.135-2.129v-12.82c0-1.176-.946-2.129-2.135-2.129zm0 21.348c-1.18 0-2.135.954-2.135 2.135 0 1.18.954 2.135 2.135 2.135 1.181 0 2.135-.954 2.135-2.135 0-1.18-.952-2.135-2.135-2.135z" transform="matrix(.30056 0 0 .30056 18.902 1.728)" fill="#fff" stroke="#fff"/></svg>
|
||||||
|
After Width: | Height: | Size: 539 B |
@ -0,0 +1,92 @@
|
|||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
window.Whisper = window.Whisper || {};
|
||||||
|
|
||||||
|
Whisper.NetworkStatusView = Whisper.View.extend({
|
||||||
|
className: 'network-status',
|
||||||
|
initialize: function() {
|
||||||
|
this.$el.hide();
|
||||||
|
|
||||||
|
var renderIntervalHandle = setInterval(this.render.bind(this), 5000);
|
||||||
|
extension.windows.onClosed(function () { clearInterval(renderIntervalHandle); });
|
||||||
|
|
||||||
|
setTimeout(this.finishConnectingGracePeriod.bind(this), 5000);
|
||||||
|
|
||||||
|
this.withinConnectingGracePeriod = true;
|
||||||
|
this.setSocketReconnectInterval(null);
|
||||||
|
|
||||||
|
window.addEventListener('online', this.render.bind(this));
|
||||||
|
window.addEventListener('offline', this.render.bind(this));
|
||||||
|
},
|
||||||
|
finishConnectingGracePeriod: function() {
|
||||||
|
this.withinConnectingGracePeriod = false;
|
||||||
|
},
|
||||||
|
setSocketReconnectInterval: function(millis) {
|
||||||
|
this.socketReconnectWaitDuration = moment.duration(millis);
|
||||||
|
},
|
||||||
|
navigatorOnLine: function() { return navigator.onLine; },
|
||||||
|
getSocketStatus: function() { return window.getSocketStatus(); },
|
||||||
|
getNetworkStatus: function() {
|
||||||
|
|
||||||
|
var message = '';
|
||||||
|
var instructions = '';
|
||||||
|
var hasInterruption = false;
|
||||||
|
|
||||||
|
var socketStatus = this.getSocketStatus();
|
||||||
|
switch(socketStatus) {
|
||||||
|
case WebSocket.CONNECTING:
|
||||||
|
message = i18n('connecting');
|
||||||
|
this.setSocketReconnectInterval(null);
|
||||||
|
break;
|
||||||
|
case WebSocket.OPEN:
|
||||||
|
this.setSocketReconnectInterval(null);
|
||||||
|
break;
|
||||||
|
case WebSocket.CLOSING:
|
||||||
|
message = i18n('disconnected');
|
||||||
|
instructions = i18n('checkNetworkConnection');
|
||||||
|
hasInterruption = true;
|
||||||
|
break;
|
||||||
|
case WebSocket.CLOSED:
|
||||||
|
message = i18n('disconnected');
|
||||||
|
instructions = i18n('checkNetworkConnection');
|
||||||
|
hasInterruption = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (socketStatus == WebSocket.CONNECTING && !this.withinConnectingGracePeriod) {
|
||||||
|
hasInterruption = true;
|
||||||
|
}
|
||||||
|
if (this.socketReconnectWaitDuration.asSeconds() > 0) {
|
||||||
|
instructions = i18n('attemptingReconnection', [this.socketReconnectWaitDuration.asSeconds()]);
|
||||||
|
}
|
||||||
|
if (!this.navigatorOnLine()) {
|
||||||
|
hasInterruption = true;
|
||||||
|
message = i18n('offline');
|
||||||
|
instructions = i18n('checkNetworkConnection');
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
message: message,
|
||||||
|
instructions: instructions,
|
||||||
|
hasInterruption: hasInterruption
|
||||||
|
};
|
||||||
|
},
|
||||||
|
render: function() {
|
||||||
|
var status = this.getNetworkStatus();
|
||||||
|
|
||||||
|
if (status.hasInterruption) {
|
||||||
|
this.$el.slideDown();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.$el.hide();
|
||||||
|
}
|
||||||
|
var template = Whisper.View.Templates['networkStatus'];
|
||||||
|
this.$el.html(Mustache.render(template, status, Whisper.View.Templates));
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
})();
|
||||||
@ -0,0 +1,125 @@
|
|||||||
|
|
||||||
|
describe('NetworkStatusView', function() {
|
||||||
|
describe('getNetworkStatus', function() {
|
||||||
|
var networkStatusView;
|
||||||
|
var socketStatus = WebSocket.OPEN;
|
||||||
|
|
||||||
|
var oldGetMessage;
|
||||||
|
var oldGetSocketStatus;
|
||||||
|
|
||||||
|
/* BEGIN stubbing globals */
|
||||||
|
before(function() {
|
||||||
|
oldGetSocketStatus = window.getSocketStatus;
|
||||||
|
/* chrome i18n support is missing in 'regular' webpages */
|
||||||
|
window.chrome.i18n = { getMessage: function(message, args) {
|
||||||
|
// translationMessageName-arg1-arg2
|
||||||
|
return _([message, args]).chain().flatten().compact().value().join('-');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
window.getSocketStatus = function() { return socketStatus; };
|
||||||
|
});
|
||||||
|
|
||||||
|
after(function() {
|
||||||
|
window.getSocketStatus = oldGetSocketStatus;
|
||||||
|
});
|
||||||
|
/* END stubbing globals */
|
||||||
|
|
||||||
|
beforeEach(function(done) {
|
||||||
|
|
||||||
|
networkStatusView = new Whisper.NetworkStatusView();
|
||||||
|
$('.network-status-container').append(networkStatusView.el);
|
||||||
|
// stubbing global
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
describe('initialization', function() {
|
||||||
|
it('should have an empty interval', function() {
|
||||||
|
assert.equal(networkStatusView.socketReconnectWaitDuration.asSeconds(), 0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
describe('network status with no connection', function() {
|
||||||
|
beforeEach(function() {
|
||||||
|
networkStatusView.navigatorOnLine = function() { return false; };
|
||||||
|
});
|
||||||
|
it('should be interrupted', function() {
|
||||||
|
networkStatusView.render();
|
||||||
|
var status = networkStatusView.getNetworkStatus();
|
||||||
|
assert(status.hasInterruption);
|
||||||
|
assert.equal(status.instructions, "checkNetworkConnection");
|
||||||
|
});
|
||||||
|
it('should display an offline message', function() {
|
||||||
|
networkStatusView.render();
|
||||||
|
assert.match(networkStatusView.$el.text(), /offline/);
|
||||||
|
});
|
||||||
|
it('should override socket status', function() {
|
||||||
|
_([WebSocket.CONNECTING,
|
||||||
|
WebSocket.OPEN,
|
||||||
|
WebSocket.CLOSING,
|
||||||
|
WebSocket.CLOSED]).map(function(socketStatusVal) {
|
||||||
|
socketStatus = socketStatusVal;
|
||||||
|
networkStatusView.render();
|
||||||
|
assert.match(networkStatusView.$el.text(), /offline/);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
describe('network status when socket is connecting', function() {
|
||||||
|
beforeEach(function() {
|
||||||
|
socketStatus = WebSocket.CONNECTING;
|
||||||
|
networkStatusView.render();
|
||||||
|
});
|
||||||
|
it('it should display a connecting string if connecting and not in the connecting grace period', function() {
|
||||||
|
networkStatusView.withinConnectingGracePeriod = false;
|
||||||
|
var status = networkStatusView.getNetworkStatus();
|
||||||
|
|
||||||
|
assert.match(networkStatusView.$el.text(), /connecting/);
|
||||||
|
});
|
||||||
|
it('it should not be interrupted if in connecting grace period', function() {
|
||||||
|
assert(networkStatusView.withinConnectingGracePeriod);
|
||||||
|
var status = networkStatusView.getNetworkStatus();
|
||||||
|
|
||||||
|
assert.match(networkStatusView.$el.text(), /connecting/);
|
||||||
|
assert(!status.hasInterruption);
|
||||||
|
});
|
||||||
|
it('it should be interrupted if connecting grace period is over', function() {
|
||||||
|
networkStatusView.withinConnectingGracePeriod = false;
|
||||||
|
var status = networkStatusView.getNetworkStatus();
|
||||||
|
|
||||||
|
assert(status.hasInterruption);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
describe('network status when socket is open', function() {
|
||||||
|
before(function() {
|
||||||
|
socketStatus = WebSocket.OPEN;
|
||||||
|
});
|
||||||
|
it('should not be interrupted', function() {
|
||||||
|
var status = networkStatusView.getNetworkStatus();
|
||||||
|
assert(!status.hasInterruption);
|
||||||
|
assert.match(networkStatusView.$el.find('.network-status-message').text().trim(), /^$/);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
describe('network status when socket is closed or closing', function() {
|
||||||
|
_([WebSocket.CLOSED, WebSocket.CLOSING]).map(function(socketStatusVal) {
|
||||||
|
it('should be interrupted', function() {
|
||||||
|
socketStatus = socketStatusVal;
|
||||||
|
networkStatusView.render();
|
||||||
|
var status = networkStatusView.getNetworkStatus();
|
||||||
|
assert(status.hasInterruption);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
|
describe('the socket reconnect interval', function() {
|
||||||
|
beforeEach(function() {
|
||||||
|
socketStatus = WebSocket.CLOSED;
|
||||||
|
networkStatusView.setSocketReconnectInterval(61000);
|
||||||
|
networkStatusView.render();
|
||||||
|
});
|
||||||
|
it('should format the message based on the socketReconnectWaitDuration property', function() {
|
||||||
|
assert.equal(networkStatusView.socketReconnectWaitDuration.asSeconds(), 61);
|
||||||
|
assert.match(networkStatusView.$('.network-status-message:last').text(), /attemptingReconnection-61/);
|
||||||
|
});
|
||||||
|
it('should be reset by changing the socketStatus to CONNECTING', function() {
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue