Add tests for dropdownMenu.js
Adds tests for the addPortletLinkHandler, which should add an icon element to items added via 'mw.util.addPortletLink' and conditionally move elements from the toolbar into the more menu at narrow widths. - Adds tests for dropdownMenu.js - Adds associated Jest snapshots - Stubs the mediawiki.page.ready module - Updates mockMediawiki.js to 4.6.0 - Adds global mock for mw.util.showPortlet() - Cleans up tests using local versions of these mocks Bug: T314798 Change-Id: I81394d840321916756a41a23c40d96c4b6341931
This commit is contained in:
Jan Drewniak
Jon Robson
parent
b0b58915d4
commit
f14b4fe5f1
|
|
@ -3,3 +3,4 @@
|
|||
var mockMediaWiki = require( '@wikimedia/mw-node-qunit/src/mockMediaWiki.js' );
|
||||
global.mw = mockMediaWiki();
|
||||
global.$ = require('jquery');
|
||||
global.mw.util.showPortlet = function() {};
|
||||
|
|
|
|||
|
|
@ -3538,9 +3538,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"@wikimedia/mw-node-qunit": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@wikimedia/mw-node-qunit/-/mw-node-qunit-6.3.0.tgz",
|
||||
"integrity": "sha512-d2Wwu4RnzVbRJIBQOLm0WnhJjuPq61ALoeJUVPVfsCv9HdbeuTqG1gyBzZk6L1Jyg80jDPq19OGyyush9CftkA==",
|
||||
"version": "6.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@wikimedia/mw-node-qunit/-/mw-node-qunit-6.4.0.tgz",
|
||||
"integrity": "sha512-WrAPZGsvUTb0LYG1U4S1KP8FB1+zPIYpCG2IDkJ0AyLnjXxM/AsyLFQnG+RLG3aQN3LSfbSECGWyPP4ITQocXQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"eslint-config-wikimedia": "0.21.0",
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
"@wikimedia/codex": "0.1.0-alpha.8",
|
||||
"@wikimedia/codex-icons": "0.1.0-alpha.8",
|
||||
"@wikimedia/codex-search": "0.1.0-alpha.8",
|
||||
"@wikimedia/mw-node-qunit": "6.3.0",
|
||||
"@wikimedia/mw-node-qunit": "6.4.0",
|
||||
"@wikimedia/types-wikimedia": "0.3.3",
|
||||
"babel-loader": "8.0.6",
|
||||
"commander": "9.1.0",
|
||||
|
|
|
|||
|
|
@ -45,11 +45,10 @@ describe( 'AB.js', () => {
|
|||
} );
|
||||
|
||||
describe( 'initialization when body tag does not contain bucket', () => {
|
||||
let /** @type {jest.Mock} */ hookMock;
|
||||
let /** @type {jest.SpyInstance} */ hookMock;
|
||||
|
||||
beforeEach( () => {
|
||||
hookMock = jest.fn().mockReturnValue( { fire: () => {} } );
|
||||
mw.hook = hookMock;
|
||||
hookMock = jest.spyOn( mw, 'hook' );
|
||||
} );
|
||||
|
||||
it( 'sends data to WikimediaEvents when the bucket is part of sample (e.g. control)', () => {
|
||||
|
|
@ -70,11 +69,10 @@ describe( 'AB.js', () => {
|
|||
} );
|
||||
|
||||
describe( 'initialization when body tag contains bucket', () => {
|
||||
let /** @type {jest.Mock} */ hookMock;
|
||||
let /** @type {jest.SpyInstance} */ hookMock;
|
||||
|
||||
beforeEach( () => {
|
||||
hookMock = jest.fn().mockReturnValue( { fire: () => {} } );
|
||||
mw.hook = hookMock;
|
||||
hookMock = jest.spyOn( mw, 'hook' );
|
||||
} );
|
||||
|
||||
it( 'sends data to WikimediaEvents when the bucket is part of sample (e.g. control)', () => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
checkboxHack: () => {}
|
||||
};
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`addPortletLinkHandler Adds a span with icon class to dropdown menus 1`] = `
|
||||
"
|
||||
<ul class=\\"vector-menu vector-menu-dropdown\\">
|
||||
<li class=\\"mw-list-item mw-list-item-js\\" id=\\"test-id\\">
|
||||
<a href=\\"#test-href\\"><span class=\\"mw-ui-icon mw-ui-icon-vector-gadget-test-id\\"></span>
|
||||
<span>
|
||||
test link content
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>"
|
||||
`;
|
||||
|
||||
exports[`addPortletLinkHandler Does not add an icon when noicon class is present 1`] = `
|
||||
"
|
||||
<ul class=\\"vector-menu vector-menu-dropdown vector-menu-dropdown-noicon\\">
|
||||
<li class=\\"mw-list-item mw-list-item-js\\" id=\\"test-id\\">
|
||||
<a href=\\"#test-href\\">
|
||||
<span>
|
||||
test link content
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>"
|
||||
`;
|
||||
|
||||
exports[`addPortletLinkHandler JS portlet should be moved to more menu (#p-cactions) at narrow widths 1`] = `
|
||||
"
|
||||
<div class=\\"mw-article-toolbar-container\\" style=\\"width:1000px\\">
|
||||
|
||||
<div id=\\"p-namespaces\\" style=\\"width:1001px\\"></div>
|
||||
|
||||
<div id=\\"p-variants\\"></div>
|
||||
|
||||
<div id=\\"p-cactions\\">
|
||||
<ul>
|
||||
<li class=\\"mw-list-item mw-list-item-js\\" id=\\"test-id\\">
|
||||
<a href=\\"#test-href\\"><span class=\\"mw-ui-icon mw-ui-icon-vector-gadget-test-id\\"></span>
|
||||
<span>
|
||||
test link content
|
||||
</span>
|
||||
</a>
|
||||
</li></ul>
|
||||
</div>
|
||||
|
||||
<ul id=\\"p-views\\" class=\\"vector-menu vector-menu-dropdown\\">
|
||||
|
||||
</ul>
|
||||
</div>"
|
||||
`;
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
const { addPortletLinkHandler } = require( '../../resources/skins.vector.js/dropdownMenus.js' );
|
||||
|
||||
describe( 'addPortletLinkHandler', () => {
|
||||
|
||||
test( 'Adds a span with icon class to dropdown menus', () => {
|
||||
|
||||
// <li> element is the assumed HTML output of mw.util.addPortlet
|
||||
document.body.innerHTML = `
|
||||
<ul class="vector-menu vector-menu-dropdown">
|
||||
<li class="mw-list-item mw-list-item-js" id="test-id">
|
||||
<a href="#test-href">
|
||||
<span>
|
||||
test link content
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>`;
|
||||
|
||||
const mockPortletItem = document.getElementById( 'test-id' );
|
||||
// @ts-ignore: mockPortletItem possibly 'null'.
|
||||
addPortletLinkHandler( mockPortletItem, { id: 'test-id' } );
|
||||
expect( document.body.innerHTML ).toMatchSnapshot();
|
||||
} );
|
||||
|
||||
test( 'Does not add an icon when noicon class is present', () => {
|
||||
|
||||
// <li> element is the assumed HTML output of mw.util.addPortlet
|
||||
document.body.innerHTML = `
|
||||
<ul class="vector-menu vector-menu-dropdown vector-menu-dropdown-noicon">
|
||||
<li class="mw-list-item mw-list-item-js" id="test-id">
|
||||
<a href="#test-href">
|
||||
<span>
|
||||
test link content
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>`;
|
||||
|
||||
const mockPortletItem = document.getElementById( 'test-id' );
|
||||
// @ts-ignore: mockPortletItem possibly 'null'.
|
||||
addPortletLinkHandler( mockPortletItem, { id: 'test-id' } );
|
||||
expect( document.body.innerHTML ).toMatchSnapshot();
|
||||
} );
|
||||
|
||||
test( 'JS portlet should be moved to more menu (#p-cactions) at narrow widths', () => {
|
||||
|
||||
// <li> element is the assumed HTML output of mw.util.addPortlet
|
||||
document.body.innerHTML = `
|
||||
<div class="mw-article-toolbar-container" style="width:1000px">
|
||||
|
||||
<div id="p-namespaces" style="width:1001px"></div>
|
||||
|
||||
<div id="p-variants"></div>
|
||||
|
||||
<div id="p-cactions">
|
||||
<ul>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul id="p-views" class="vector-menu vector-menu-dropdown">
|
||||
<li class="mw-list-item mw-list-item-js" id="test-id">
|
||||
<a href="#test-href">
|
||||
<span>
|
||||
test link content
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>`;
|
||||
|
||||
const mockPortletItem = document.getElementById( 'test-id' );
|
||||
// @ts-ignore: mockPortletItem possibly 'null'.
|
||||
addPortletLinkHandler( mockPortletItem, { id: 'test-id' } );
|
||||
expect( document.body.innerHTML ).toMatchSnapshot();
|
||||
} );
|
||||
} );
|
||||
|
|
@ -97,13 +97,6 @@ describe( 'Table of contents', () => {
|
|||
beforeEach( () => {
|
||||
// @ts-ignore
|
||||
global.window.matchMedia = jest.fn( () => ( {} ) );
|
||||
|
||||
// @ts-ignore
|
||||
global.mw = {
|
||||
hook: jest.fn( () => ( {
|
||||
add: () => {}
|
||||
} ) )
|
||||
};
|
||||
} );
|
||||
|
||||
describe( 'renders', () => {
|
||||
|
|
@ -195,11 +188,12 @@ describe( 'Table of contents', () => {
|
|||
|
||||
describe( 'applies the correct aria attributes', () => {
|
||||
test( 'when initialized', () => {
|
||||
const spy = jest.spyOn( mw, 'hook' );
|
||||
const toc = mount();
|
||||
const toggleButton = /** @type {HTMLElement} */ ( barSection.querySelector( `.${toc.TOGGLE_CLASS}` ) );
|
||||
|
||||
expect( toggleButton.getAttribute( 'aria-expanded' ) ).toEqual( 'true' );
|
||||
expect( mw.hook ).toBeCalledWith( 'wikipage.tableOfContents' );
|
||||
expect( spy ).toBeCalledWith( 'wikipage.tableOfContents' );
|
||||
} );
|
||||
|
||||
test( 'when expanding sections', () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue