mediawiki-extensions-Echo/tests/qunit/viewmodel/test_mw.echo.dm.NotificationsModel.js
Moriel Schottlender 1ac72cc01a Split alerts and messages in Echo
Split the notifications into 'alert' and 'message' badget with two
different flyouts. Also clean up styling and module behavior.

** Depends on ooui change Id4bbe14ba0bf6c for footers in popups.
** Depends on ooui change Ie93e4d6ed5637c for fixing a bug in
   inverted icons.

** MobileFrontend must also be updated to support the new modules
   in this patch  I168f485d6e54cb4067

In this change:
* Split notifcations into alert and messages and display those in
  two different badges.
* Create two separate flyout/popups for each category with their
  notifications.
* Create a view-model to control notification state and emit events
  for both the popup and the badge to intercept and react to.
* Clean up module load and distribution:
  * Create an ext.echo.ui module for javascript-ui support and ooui
    widgets.
  * Create an ext.echo.nojs module that unifies all base classes that
    are needed for both nojs and js support, that the js version
    builds upon.
  * Create a separate ext.echo.logger module as a singleton that can
    be called to perform all logging.
* Clean up style uses
  * Move the special page LESS file into nojs module so all styles
    load properly even in nojs mode.
  * Transfer some of the styling from JS to LESS for consistency.
  * Make the 'read more' button load already with the styles it
    needs to look like a button, since its behavior is similar in
    nojs and js vesions, but before its classes were applied only
    by the js, making it inconsistent and also making its appearance
    'jump' from a link to a button.
* Delete and clean up all old and unused files.
* Moved 'Help.png' icon from modules/overlay to modules/icons for
  later use.

Bug: T108190
Change-Id: I55f440ed9f64c46817f620328a6bb522d44c9ca9
2015-09-02 15:36:37 -07:00

165 lines
4.7 KiB
JavaScript

( function ( mw ) {
QUnit.module( 'ext.echo.dm mw.echo.dm.NotificationsModel' );
function runPreparation( model, testPrepare ) {
var j, jlen;
for ( j = 0, jlen = testPrepare.length; j < jlen; j++ ) {
model[ testPrepare[j].method ].apply( model, testPrepare[j].params );
}
}
QUnit.test( 'Adding notifications', function ( assert ) {
var i, ilen, model, actual, test,
cases = [
{
prepare: [
{
method: 'addItems',
params: [
[
new mw.echo.dm.NotificationItem( 1, { content: '1', timestamp: '20150828172900' } ),
new mw.echo.dm.NotificationItem( 2, { content: '2', timestamp: '20150828172900' } )
]
]
}
],
run: {
method: 'getItemCount'
},
expect: 2,
message: 'Adding items'
},
{
prepare: [
{
method: 'addItems',
params: [
[
new mw.echo.dm.NotificationItem( 1, { content: '1', timestamp: '20150828172900' } ),
new mw.echo.dm.NotificationItem( 2, { content: '2', timestamp: '20150828172900' } )
// TODO: This should actually work, but due to a bug in List, the 'don't add items twice'
// only works when we explicitly request to add the item a separate second time.
// This should be fixed in List and upstreamed to OOUI GroupElement which is where
// it came from.
// new mw.echo.dm.NotificationItem( 1, { content: '1', timestamp: '20150828172900' } )
]
]
},
{
method: 'addItems',
params: [
[
new mw.echo.dm.NotificationItem( 1, { content: '1', timestamp: '20150828172900' } )
]
]
}
],
run: {
method: 'getItemCount'
},
expect: 2,
message: 'Do not re-add items with existing ids'
}
];
assert.expect( cases.length );
for ( i = 0, ilen = cases.length; i < ilen; i++ ) {
model = new mw.echo.dm.NotificationsModel( {
type: 'alert',
limit: 25,
userLang: 'en'
} );
test = cases[i];
// Run preparation
runPreparation( model, test.prepare );
// Test
actual = model[ test.run.method ].apply( model, cases[i].run.params );
assert.equal( actual, cases[i].expect, cases[i].message );
}
} );
QUnit.test( 'Deleting notifications', 2, function ( assert ) {
var model = new mw.echo.dm.NotificationsModel( {
type: 'alert',
limit: 25,
userLang: 'en'
} ),
items = [
new mw.echo.dm.NotificationItem( 1, { content: '1', timestamp: '20150828172900' } ),
new mw.echo.dm.NotificationItem( 2, { content: '2', timestamp: '20150828172900' } ),
new mw.echo.dm.NotificationItem( 3, { content: '3', timestamp: '20150828172900' } ),
new mw.echo.dm.NotificationItem( 4, { content: '4', timestamp: '20150828172900' } ),
new mw.echo.dm.NotificationItem( 5, { content: '5', timestamp: '20150828172900' } ),
new mw.echo.dm.NotificationItem( 6, { content: '6', timestamp: '20150828172900' } ),
new mw.echo.dm.NotificationItem( 7, { content: '7', timestamp: '20150828172900' } ),
new mw.echo.dm.NotificationItem( 8, { content: '8', timestamp: '20150828172900' } ),
new mw.echo.dm.NotificationItem( 9, { content: '9', timestamp: '20150828172900' } ),
new mw.echo.dm.NotificationItem( 10, { content: '10', timestamp: '20150828172900' } )
];
// Add initial notifications
model.addItems( items );
// Verify we have the correct number initially
assert.equal( model.getItemCount(), 10, 'Added initial number of notifications' );
// Remove notifications
model.removeItems( [ items[0], items[1], items[5] ] );
// Test
assert.equal( model.getItemCount(), 7, 'Successfully deleted notifications' );
} );
QUnit.test( 'Clearing notifications', function ( assert ) {
var i, ilen, model, actual, test,
cases = [
{
prepare: [
{
method: 'addItems',
params: [
[
new mw.echo.dm.NotificationItem( 1, { content: '1', timestamp: '20150828172900' } ),
new mw.echo.dm.NotificationItem( 2, { content: '2', timestamp: '20150828172900' } )
]
]
},
{
method: 'clearItems'
}
],
run: {
method: 'getItemCount'
},
expect: 0,
message: 'Clearing notifications'
}
];
assert.expect( cases.length );
for ( i = 0, ilen = cases.length; i < ilen; i++ ) {
model = new mw.echo.dm.NotificationsModel( {
type: 'alert',
limit: 25,
userLang: 'en'
} );
test = cases[i];
// Run preparation
runPreparation( model, test.prepare );
// Test
actual = model[ test.run.method ].apply( model, cases[i].run.params );
assert.equal( actual, cases[i].expect, cases[i].message );
}
} );
} )( mediaWiki );