mediawiki-extensions-Echo/tests/qunit/mobile/test_NotificationBadge.js

77 lines
2.9 KiB
JavaScript
Raw Normal View History

Dormant mobile notifications overlay lives in Echo This code will be enabled when Iba1d7863171268066bf7597182c57a0a2041497f relinquishes the responsibility for rendering the Echo notification badge and wiring up of the related JS. It makes 3 assumptions: 1) Minerva will expose a VERSION property on the skins.minerva.scripts module to tell Echo it can begin control of the functionality 2) A new hook `SkinMinervaReplaceNotificationsBadge` will run on the server side allowing Echo extension to render the Notifications badge in Minerva. 3) A new client side hook (echo.mobile) will fire whenever the Echo dialog is opened or closed. All code relating to Echo inside MobileFrontend and Minerva is moved here. CSS for the modules is kept in Minerva as skinStyles This code remains dormant until Iba1d7863171268066bf7597182c57a0a2041497f lands. It pre-registers a "to-be-created" hook SkinMinervaReplaceNotificationsBadge that substitutes the Minerva badge. It also watches the export value of skins.minerva.scripts for a VERSION value - when this appears it will take the signal that it should manage the frontend code. In the new system the mobile specific code is limited to the mobile version of Minerva. The desktop version of Echo loads on Minerva desktop - presenting an opportunity in future to consolidate both implementations to use the same component. The mobile version of Vector and Timeless for example will load the mobile overlay (with existing styling issues that we don't need to worry about right now given we don't officially support skins other than Minerva as mobile) Testers: * Check require( 'ext.echo.mobile' )(); inside initMobile inside ext.echo.init does not fire until Iba1d7863171268066bf7597182c57a0a2041497f is checked out. Depends-On: I1a66939d2b596094b419de40b370e79f09c85581 Bug: T221007 Change-Id: I09c27a084100b223662f84de6cbe01bebe1fe774
2019-10-01 20:15:25 +00:00
( function ( M ) {
var OverlayManager = M.require( 'mobile.startup' ).OverlayManager,
tests: Fix QUnit warnings and resolve complex test_NotificationBadge == Problem 1 == As of I09c27a084100b223, tests/qunit/index.js or equiv was used to load test files asynchronously from a using() callback. This was untracked by RL or QUnit, and thus sometimes ended up finishing after the test runner was already done executing all tests. In CI this means the tests are sometimes never loaded and the browser (or Node) process already killed before they even have a chance to arrive. Prior to QUnit 2.17, this was no way of detecting this. As of QUnit 2.17 (core upgraded last week) when running tests manually the following helpful warnings appear in the console: > [warning] Unexpected test after runEnd. > [warning] This is unstable and will fail in QUnit 3.0. > test @ qunit.js > tests/qunit/model/test_mw.echo.dm.SeenTimeModel.js > require There were about 1072 instances of this warning, all from Echo. Fix this problem by removing the async callbacks and specifying the two modules as normal dependencies instead. == Problem 2 == Class NotificationBadge was being loaded in a strange way out of bound. This was a violation of module boundaries and should not be needed other than for a temporary hack or other tech debt. More generally when a test uses `packageFiles` this is a likely sign of tech debt or misunderstandings. Instead, depend on `ext.echo.mobile` and export/import the class as normal. After this, the test module can use `scripts` instead. == Problem 3 == The `ext.echo.mobile` uses a Mustache template which the test was also duplicating a reference to. This is no longer needed now. Due to the `qunit/index.js` file carefully splitting the operations between template assignment and file loading, I wondered whether it was meaning to replace or mock it with something else, but it simply refers to the same file and only does this because it wasn't using the module directly. This is now resolved. If you do need to mock in the future, this can simply be done by assigning `NotificationBadge.prototype.template` from a beforeEach() callback in the test suite, or by supporting it property as a constructor option in NotificationBadge.js and assigning `this.template` there, which is supported by the mobile `View` class already it seems and would follow DI patterns more effectively. == Problem 4 == Most of the Echo tests were ignored sometimes and executed other times. The test for `ext.echo.mobile` in particular though was never executed in CI specifically because: > Undefined module: 'mobile.startup' This became a hard error with this patch, which is fixed by the CI config change with Ie9dabe3269c56fa76db8e51. Bug: T299780 Change-Id: Ie4a87f3b8085fd6ae53ec586c1782cc266d5288a
2022-03-01 23:16:33 +00:00
NotificationBadge = require( 'ext.echo.mobile' ).NotificationBadge;
Dormant mobile notifications overlay lives in Echo This code will be enabled when Iba1d7863171268066bf7597182c57a0a2041497f relinquishes the responsibility for rendering the Echo notification badge and wiring up of the related JS. It makes 3 assumptions: 1) Minerva will expose a VERSION property on the skins.minerva.scripts module to tell Echo it can begin control of the functionality 2) A new hook `SkinMinervaReplaceNotificationsBadge` will run on the server side allowing Echo extension to render the Notifications badge in Minerva. 3) A new client side hook (echo.mobile) will fire whenever the Echo dialog is opened or closed. All code relating to Echo inside MobileFrontend and Minerva is moved here. CSS for the modules is kept in Minerva as skinStyles This code remains dormant until Iba1d7863171268066bf7597182c57a0a2041497f lands. It pre-registers a "to-be-created" hook SkinMinervaReplaceNotificationsBadge that substitutes the Minerva badge. It also watches the export value of skins.minerva.scripts for a VERSION value - when this appears it will take the signal that it should manage the frontend code. In the new system the mobile specific code is limited to the mobile version of Minerva. The desktop version of Echo loads on Minerva desktop - presenting an opportunity in future to consolidate both implementations to use the same component. The mobile version of Vector and Timeless for example will load the mobile overlay (with existing styling issues that we don't need to worry about right now given we don't officially support skins other than Minerva as mobile) Testers: * Check require( 'ext.echo.mobile' )(); inside initMobile inside ext.echo.init does not fire until Iba1d7863171268066bf7597182c57a0a2041497f is checked out. Depends-On: I1a66939d2b596094b419de40b370e79f09c85581 Bug: T221007 Change-Id: I09c27a084100b223662f84de6cbe01bebe1fe774
2019-10-01 20:15:25 +00:00
QUnit.module( 'ext.echo.mobile - NotificationBadge', {
beforeEach: function () {
this.OverlayManager = OverlayManager.getSingleton();
}
} );
QUnit.test( '#setCount', function ( assert ) {
var initialClassExpectationsMet,
badge = new NotificationBadge( {
overlayManager: this.OverlayManager,
hasNotifications: true,
hasUnseenNotifications: true,
notificationCountRaw: 5
} );
initialClassExpectationsMet = badge.$el.find( '.mw-ui-icon' ).length === 0 &&
badge.$el.find( '.zero' ).length === 0;
badge.setCount( 0 );
assert.true( initialClassExpectationsMet, 'No icon and no zero class' );
Dormant mobile notifications overlay lives in Echo This code will be enabled when Iba1d7863171268066bf7597182c57a0a2041497f relinquishes the responsibility for rendering the Echo notification badge and wiring up of the related JS. It makes 3 assumptions: 1) Minerva will expose a VERSION property on the skins.minerva.scripts module to tell Echo it can begin control of the functionality 2) A new hook `SkinMinervaReplaceNotificationsBadge` will run on the server side allowing Echo extension to render the Notifications badge in Minerva. 3) A new client side hook (echo.mobile) will fire whenever the Echo dialog is opened or closed. All code relating to Echo inside MobileFrontend and Minerva is moved here. CSS for the modules is kept in Minerva as skinStyles This code remains dormant until Iba1d7863171268066bf7597182c57a0a2041497f lands. It pre-registers a "to-be-created" hook SkinMinervaReplaceNotificationsBadge that substitutes the Minerva badge. It also watches the export value of skins.minerva.scripts for a VERSION value - when this appears it will take the signal that it should manage the frontend code. In the new system the mobile specific code is limited to the mobile version of Minerva. The desktop version of Echo loads on Minerva desktop - presenting an opportunity in future to consolidate both implementations to use the same component. The mobile version of Vector and Timeless for example will load the mobile overlay (with existing styling issues that we don't need to worry about right now given we don't officially support skins other than Minerva as mobile) Testers: * Check require( 'ext.echo.mobile' )(); inside initMobile inside ext.echo.init does not fire until Iba1d7863171268066bf7597182c57a0a2041497f is checked out. Depends-On: I1a66939d2b596094b419de40b370e79f09c85581 Bug: T221007 Change-Id: I09c27a084100b223662f84de6cbe01bebe1fe774
2019-10-01 20:15:25 +00:00
assert.strictEqual( badge.$el.find( '.zero' ).length, 1, 'A zero class is present on the badge' );
badge.setCount( 105 );
assert.strictEqual( badge.options.notificationCountRaw, 100, 'Number is capped to 100.' );
} );
QUnit.test( '#setCount (Eastern Arabic numerals)', function ( assert ) {
var badge;
this.sandbox.stub( mw.language, 'convertNumber' )
.withArgs( 2 ).returns( '۲' )
.withArgs( 5 ).returns( '۵' );
this.sandbox.stub( mw, 'message' )
.withArgs( 'echo-badge-count', '۵' ).returns( { text: function () { return '۵'; } } )
.withArgs( 'echo-badge-count', '۲' ).returns( { text: function () { return '۲'; } } );
badge = new NotificationBadge( {
overlayManager: this.OverlayManager,
el: $( '<div><a title="n" href="/" class="notification-unseen"><div class="circle" ><span data-notification-count="2">۲</span></div></a></div>' )
} );
assert.strictEqual( badge.options.notificationCountRaw, 2,
'Number is parsed from Eastern Arabic numerals' );
assert.strictEqual( badge.options.notificationCountString, '۲',
'Number will be rendered in Eastern Arabic numerals' );
badge.setCount( 5 );
assert.strictEqual( badge.options.notificationCountString, '۵',
'Number will be rendered in Eastern Arabic numerals' );
} );
QUnit.test( '#render [hasUnseenNotifications]', function ( assert ) {
var badge = new NotificationBadge( {
notificationCountRaw: 0,
overlayManager: this.OverlayManager,
hasNotifications: false,
hasUnseenNotifications: false
} );
assert.strictEqual( badge.$el.find( '.mw-ui-icon' ).length, 1, 'A bell icon is visible' );
} );
QUnit.test( '#markAsSeen', function ( assert ) {
var badge = new NotificationBadge( {
notificationCountRaw: 2,
overlayManager: this.OverlayManager,
hasNotifications: true,
hasUnseenNotifications: true
} );
// Badge resets counter to zero
badge.setCount( 0 );
assert.strictEqual( badge.$el.find( '.mw-ui-icon' ).length, 0, 'The bell icon is not visible' );
badge.markAsSeen();
assert.strictEqual( badge.$el.find( '.notification-unseen' ).length, 0,
'Unseen class disappears after markAsSeen called.' );
} );
}( mw.mobileFrontend ) );