| Current File : /home/jvzmxxx/wiki1/extensions/Echo/tests/qunit/overlay/test_ext.echo.overlay.js |
( function ( $, mw ) {
QUnit.module( 'ext.echo.overlay', {
setup: function () {
var ApiStub;
this.$badge = $( '<a class="mw-echo-notifications-badge mw-echo-unseen-notifications">1</a>' );
this.sandbox.stub( mw.echo, 'getBadge' ).returns( this.$badge );
// Kill any existing overlays to avoid clashing with other tests
$( '.mw-echo-overlay' ).remove();
ApiStub = function ( mode, numberUnreadMessages ) {
this.mode = mode;
this.numberUnreadMessages = numberUnreadMessages || 7;
};
ApiStub.prototype = {
post: function ( data ) {
switch ( data.action ) {
case 'echomarkread':
data = this.getNewNotificationCountData( data, this.mode === 'with-new-messages' );
break;
case 'echomarkseen':
data = { query: { echomarkseen: { result: 'success', timestamp: '20140509000000' } } };
break;
default:
throw 'Unrecognized post action: ' + data.action;
}
return $.Deferred().resolve( data );
},
postWithToken: function ( type, data ) {
return this.post( data );
},
get: function () {
var i, id,
index = [],
listObj = {},
data = this.getData();
// a response which contains 0 unread messages and 1 unread alert
if ( this.mode === 'no-new-messages' ) {
data.query.notifications.message = {
index: [ 100 ],
list: {
100: {
'*': 'Jon sent you a message on the Flow board Talk:XYZ',
read: '20140805211446',
category: 'message',
id: 100,
timestamp: {
date: '8 May',
mw: '20140508211436',
unix: '1407273276',
utcunix: '1407273276'
},
type: 'message'
}
},
rawcount: 0,
count: '0'
};
// a response which contains 8 unread messages and 1 unread alert
} else if ( this.mode === 'with-new-messages' ) {
for ( i = 0; i < 7; i++ ) {
id = 500 + i;
index.push( id );
listObj[ id ] = {
'*': '!',
category: 'message',
id: id,
timestamp: {
date: '8 May',
mw: '20140508211436',
unix: '1407273276',
utcunix: '1407273276'
},
type: 'message'
};
}
data.query.notifications.message = {
index: index,
list: listObj,
rawcount: this.numberUnreadMessages,
count: String( this.numberUnreadMessages )
};
// Total number is number of messages + number of alerts (1)
data.query.notifications.count = this.numberUnreadMessages + 1;
data.query.notifications.rawcount = this.numberUnreadMessages + 1;
}
return $.Deferred().resolve( data );
},
getNewNotificationCountData: function ( data, hasNewMessages ) {
var alertCount, messageCount,
rawCount = 0,
count = 0;
messageCount = {
count: '0',
rawcount: 0
};
alertCount = {
count: '0',
rawcount: 0
};
if ( data.list === '100' ) {
alertCount = {
count: '0',
rawcount: 0
};
count = 1;
rawCount = 1;
}
if ( hasNewMessages && data.sections === 'alert' ) {
messageCount = {
count: '7',
rawcount: 7
};
rawCount = 7;
count = 7;
}
if ( data.list === 500 ) {
messageCount = {
count: '6',
rawcount: 6
};
rawCount = 6;
count = 6;
}
data = {
query: {
echomarkread: {
alert: alertCount,
message: messageCount,
rawcount: rawCount,
count: count
}
}
};
return data;
},
getData: function () {
return {
query: {
notifications: {
count: '1',
rawcount: 1,
message: {
rawcount: 0,
count: '0',
index: [],
list: {}
},
alert: {
rawcount: 1,
count: '1',
index: [ 70, 71 ],
list: {
70: {
'*': 'Jon mentioned you.',
agent: { id: 212, name: 'Jon' },
category: 'mention',
id: 70,
read: '20140805211446',
timestamp: {
date: '8 May',
mw: '20140508211436',
unix: '1407273276',
utcunix: '1407273276'
},
title: {
full: 'Spiders'
},
type: 'mention'
},
71: {
'*': 'X talked to you.',
category: 'edit-user-talk',
id: 71,
timestamp: {
date: '8 May',
mw: '20140508211436',
unix: '1407273276',
utcunix: '1407273276'
},
type: 'edit-user-talk'
}
}
}
}
}
};
}
};
this.ApiStub = ApiStub;
}
} );
QUnit.test( 'mw.echo.overlay.buildOverlay', 7, function ( assert ) {
var $overlay;
this.sandbox.stub( mw.echo.overlay, 'api', new this.ApiStub() );
mw.echo.overlay.buildOverlay( function ( $o ) {
$overlay = $o;
} );
assert.strictEqual( $overlay.find( '.mw-echo-overlay-title ul li' ).length, 1, 'Only one tab in header' );
assert.strictEqual( $overlay.find( '.mw-echo-notifications' ).length, 1, 'Overlay contains a list of notifications.' );
assert.strictEqual( $overlay.find( '.mw-echo-notifications li' ).length, 2, 'There are two notifications.' );
assert.strictEqual( $overlay.find( '.mw-echo-unread' ).length, 1, 'There is one unread notification.' );
assert.strictEqual( $overlay.find( '.mw-echo-overlay-footer a' ).length, 2,
'There is a footer with 2 links to preferences and all notifications.' );
assert.strictEqual( this.$badge.text(),
'0', 'The alerts are marked as read once opened.' );
assert.strictEqual( this.$badge.hasClass( 'mw-echo-unseen-notifications' ),
false, 'The badge no longer indicates new messages.' );
} );
QUnit.test( 'mw.echo.overlay.buildOverlay with messages', 5, function ( assert ) {
var $overlay;
this.sandbox.stub( mw.echo.overlay, 'api', new this.ApiStub( 'no-new-messages' ) );
mw.echo.overlay.buildOverlay( function ( $o ) {
$overlay = $o;
} );
assert.strictEqual( $overlay.find( '.mw-echo-overlay-title ul li' ).length, 2, 'There are two tabs in header' );
assert.strictEqual( $overlay.find( '.mw-echo-notifications' ).length, 2, 'Overlay contains 2 lists of notifications.' );
assert.strictEqual( $overlay.find( '.mw-echo-overlay-title a' ).eq( 0 ).hasClass( 'mw-ui-quiet' ),
true, 'First tab is the selected tab upon opening.' );
assert.strictEqual( this.$badge.text(),
'0', 'The label updates to 0 as alerts tab is default and now alerts have been read.' );
assert.strictEqual( this.$badge.hasClass( 'mw-echo-unseen-notifications' ),
false, 'The notification button class is updated with the default switch to alert tab.' );
} );
QUnit.test( 'Switch tabs on overlay. 1 unread alert, no unread messages.', 7, function ( assert ) {
var $overlay, $tabs;
this.sandbox.stub( mw.echo.overlay, 'api', new this.ApiStub( 'no-new-messages' ) );
mw.echo.overlay.buildOverlay( function ( $o ) {
$overlay = $o;
// switch to 1st tab (alerts)
$overlay.find( '.mw-echo-overlay-title li a' ).eq( 0 ).trigger( 'click' );
} );
$tabs = $overlay.find( '.mw-echo-overlay-title li a' );
assert.strictEqual( $tabs.eq( 0 ).hasClass( 'mw-ui-quiet' ),
true, 'First tab is now the selected tab.' );
assert.strictEqual( $tabs.eq( 1 ).hasClass( 'mw-ui-quiet' ),
false, 'Second tab is not the selected tab.' );
assert.strictEqual( this.$badge.text(),
'0', 'The label is now set to 0.' );
assert.strictEqual( this.$badge.hasClass( 'mw-echo-unseen-notifications' ),
false, 'There are now zero unread notifications.' );
assert.strictEqual( $tabs.eq( 0 ).text(), 'Alerts (0)', 'Check the label has a count in it.' );
assert.strictEqual( $tabs.eq( 1 ).text(), 'Messages (0)', 'Check the label has an updated count in it.' );
assert.strictEqual( $tabs.eq( 1 ).hasClass( 'mw-ui-active' ),
true, 'Second tab has active class .as it is the only clickable tab' );
} );
QUnit.test( 'Unread message behaviour', 5, function ( assert ) {
var $overlay;
this.sandbox.stub( mw.echo.overlay, 'api', new this.ApiStub( 'with-new-messages' ) );
mw.echo.overlay.buildOverlay( function ( $o ) {
$overlay = $o;
} );
// Test initial state
assert.strictEqual( $overlay.find( '.mw-echo-overlay-title li a' ).eq( 1 ).text(), 'Messages (7)',
'Check the label has a count in it and it is not automatically reset when tab is open.' );
assert.strictEqual( $overlay.find( '.mw-echo-unread' ).length, 8, 'There are 8 unread notifications.' );
// Click mark as read
$overlay.find( '.mw-echo-notifications > button' ).eq( 0 ).trigger( 'click' );
assert.strictEqual( $overlay.find( '.mw-echo-overlay-title li a' ).eq( 1 ).text(), 'Messages (0)',
'Check all the notifications (even those outside overlay) have been marked as read.' );
assert.strictEqual( $overlay.find( '.mw-echo-notifications ' ).eq( 1 ).find( '.mw-echo-unread' ).length,
0, 'There are now no unread notifications in this tab.' );
assert.strictEqual( $overlay.find( '.mw-echo-notifications > button' ).length, 0,
'There are no notifications now so no need for button.' );
} );
QUnit.test( 'Mark as read.', 8, function ( assert ) {
var $overlay;
this.$badge.text( '8' );
this.sandbox.stub( mw.echo.overlay, 'api', new this.ApiStub( 'with-new-messages' ) );
mw.echo.overlay.buildOverlay( function ( $o ) {
$overlay = $o;
} );
// Test initial state
assert.strictEqual( $overlay.find( '.mw-echo-overlay-title li a' ).eq( 1 ).text(), 'Messages (7)',
'Check the label has a count in it and it is not automatically reset when tab is open.' );
assert.strictEqual( $overlay.find( '.mw-echo-unread' ).length, 8,
'There are 7 unread message notifications and although the alert is marked as read on server is displays as unread in overlay.' );
assert.strictEqual( this.$badge.text(), '7', '7 unread notifications in badge (alerts get marked automatically).' );
assert.strictEqual( $overlay.find( '.mw-echo-notifications li button' ).length, 7,
'There are 7 mark as read button.' );
// Click first mark as read
$overlay.find( '.mw-echo-notifications li button' ).eq( 0 ).trigger( 'click' );
assert.strictEqual( $overlay.find( '.mw-echo-overlay-title li a' ).eq( 1 ).text(), 'Messages (6)',
'Check the notification was marked as read.' );
assert.strictEqual( $overlay.find( '.mw-echo-unread' ).length, 7,
'There are now 6 unread message notifications in UI and 1 unread alert.' );
assert.strictEqual( $overlay.find( '.mw-echo-notifications li button' ).length, 6,
'There are now 6 mark as read buttons.' );
assert.strictEqual( this.$badge.text(), '6', 'Now 6 unread notifications.' );
} );
QUnit.test( 'Tabs when there is overflow.', 2, function ( assert ) {
var $overlay;
this.sandbox.stub( mw.echo.overlay, 'api', new this.ApiStub( 'with-new-messages', 50 ) );
mw.echo.overlay.buildOverlay( function ( $o ) {
$overlay = $o;
} );
// Test initial state
assert.strictEqual( $overlay.find( '.mw-echo-overlay-title li a' ).eq( 1 ).text(), 'Messages (50)',
'Check the label has a count in it and reflects the total unread and not the shown unread' );
assert.strictEqual( $overlay.find( '.mw-echo-unread' ).length, 8, 'There are 8 unread notifications.' );
} );
QUnit.test( 'Switching tabs visibility', 4, function ( assert ) {
var $overlay;
this.sandbox.stub( mw.echo.overlay, 'api', new this.ApiStub( 'with-new-messages' ) );
mw.echo.overlay.buildOverlay( function ( $o ) {
// put in dom so we can do visibility tests
$overlay = $o.appendTo( '#qunit-fixture' );
} );
// Test initial state
assert.strictEqual( $overlay.find( '.mw-echo-notifications' ).eq( 0 ).is( ':visible' ),
true, 'First tab (alerts) starts visible.' );
assert.strictEqual( $overlay.find( '.mw-echo-notifications' ).eq( 1 ).is( ':visible' ),
false, 'Second tab (messages) starts hidden.' );
// Switch to second tab
$overlay.find( '.mw-echo-overlay-title li a' ).eq( 1 ).trigger( 'click' );
// check new tab visibility
assert.strictEqual( $overlay.find( '.mw-echo-notifications' ).eq( 0 ).is( ':visible' ),
false, 'First tab is now hidden.' );
assert.strictEqual( $overlay.find( '.mw-echo-notifications' ).eq( 1 ).is( ':visible' ),
true, 'Second tab is now visible.' );
} );
}( jQuery, mediaWiki ) );