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