Page MenuHomeWickedGov Phorge
Files F4163475

limitSelectors.test.js
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

limitSelectors.test.js
View Options

const limitSelectors = require( 'mediawiki.pager.codex/limitSelectors.js' );
QUnit.module( 'mediawiki.pager.codex.limitSelectors', QUnit.newMwEnvironment( {
beforeEach: function () {
mw.config.set( {
wgCodexTablePagerLimit: '10'
} );
}
} ) );
/**
* Creates the HTML element for the limit selector
*
* @param {Function} submitCallback Provide a callback here that is called when
* the form has a submit event fired
* @return {HTMLFormElement}
*/
function createLimitSelector( submitCallback ) {
const formElement = document.createElement( 'form' );
formElement.setAttribute( 'class', 'cdx-table-pager__limit-form' );
$( formElement ).on( 'submit', ( event ) => {
event.preventDefault();
submitCallback();
} );
const selectorElement = document.createElement( 'select' );
selectorElement.setAttribute( 'class', 'cdx-select' );
selectorElement.setAttribute( 'name', 'limit' );
const limitOptionOne = document.createElement( 'option' );
limitOptionOne.setAttribute( 'value', '10' );
limitOptionOne.setAttribute( 'selected', 'selected' );
const limitOptionTwo = document.createElement( 'option' );
limitOptionTwo.setAttribute( 'value', '20' );
const submitButton = document.createElement( 'button' );
submitButton.setAttribute( 'class', 'cdx-table-pager__limit-form__submit' );
selectorElement.append( limitOptionOne );
selectorElement.append( limitOptionTwo );
formElement.append( selectorElement );
formElement.append( submitButton );
return formElement;
}
QUnit.test( 'should trigger form submit on any limit selector change', ( assert ) => {
const done = assert.async();
const $qunitFixture = $( '#qunit-fixture' );
// Create two limit selectors on the page, and create variables to store whether the limit selectors have
// had their forms submitted
let firstSelectorFormSubmitted = false;
const firstLimitSelectorForm = createLimitSelector( () => ( firstSelectorFormSubmitted = true ) );
$qunitFixture.append( firstLimitSelectorForm );
let secondSelectorFormSubmitted = false;
const secondLimitSelectorForm = createLimitSelector( () => ( secondSelectorFormSubmitted = true ) );
$qunitFixture.append( secondLimitSelectorForm );
// Run the code we are testing
limitSelectors( $qunitFixture );
// Update the selected option on the first limit selector, then expect that the submit event has been fired
// on the first limit selector (but not the second)
$( '.cdx-select', firstLimitSelectorForm ).val( '20' ).trigger( 'change' );
setTimeout( () => {
assert.true( firstSelectorFormSubmitted, 'First selector form was submitted after interaction' );
assert.false( secondSelectorFormSubmitted, 'Second selector form was not submitted as not interacted with' );
// Then update the selected option on the second limit selector, and expect that the submit event is
// fired on the second limit selector (but not the first)
firstSelectorFormSubmitted = false;
$( '.cdx-select', secondLimitSelectorForm ).val( '20' ).trigger( 'change' );
setTimeout( () => {
assert.true( secondSelectorFormSubmitted, 'Second selector form was submitted after interaction' );
assert.false( firstSelectorFormSubmitted, 'First selector form was not submitted as not interacted with' );
done();
} );
} );
} );

File Metadata

Mime Type
text/plain
Expires
Aug 20 2026, 02:04 (10 w, 3 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
72/07/9862e50f2996171ff830b65cb103
Default Alt Text
limitSelectors.test.js (3 KB)

Event Timeline