mediawiki-extensions-Echo/tests/qunit/mobile/test_NotificationBadge.js
Timo Tijhof 5a76489be0 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-02 12:52:06 +00:00

77 lines
2.9 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

( function ( M ) {
var OverlayManager = M.require( 'mobile.startup' ).OverlayManager,
NotificationBadge = require( 'ext.echo.mobile' ).NotificationBadge;
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' );
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 ) );