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:
parent
b0b58915d4
commit
f14b4fe5f1
|
@ -3,3 +3,4 @@
|
||||||
var mockMediaWiki = require( '@wikimedia/mw-node-qunit/src/mockMediaWiki.js' );
|
var mockMediaWiki = require( '@wikimedia/mw-node-qunit/src/mockMediaWiki.js' );
|
||||||
global.mw = mockMediaWiki();
|
global.mw = mockMediaWiki();
|
||||||
global.$ = require('jquery');
|
global.$ = require('jquery');
|
||||||
|
global.mw.util.showPortlet = function() {};
|
||||||
|
|
|
@ -3538,9 +3538,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"@wikimedia/mw-node-qunit": {
|
"@wikimedia/mw-node-qunit": {
|
||||||
"version": "6.3.0",
|
"version": "6.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/@wikimedia/mw-node-qunit/-/mw-node-qunit-6.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/@wikimedia/mw-node-qunit/-/mw-node-qunit-6.4.0.tgz",
|
||||||
"integrity": "sha512-d2Wwu4RnzVbRJIBQOLm0WnhJjuPq61ALoeJUVPVfsCv9HdbeuTqG1gyBzZk6L1Jyg80jDPq19OGyyush9CftkA==",
|
"integrity": "sha512-WrAPZGsvUTb0LYG1U4S1KP8FB1+zPIYpCG2IDkJ0AyLnjXxM/AsyLFQnG+RLG3aQN3LSfbSECGWyPP4ITQocXQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"eslint-config-wikimedia": "0.21.0",
|
"eslint-config-wikimedia": "0.21.0",
|
||||||
|
|
|
@ -34,7 +34,7 @@
|
||||||
"@wikimedia/codex": "0.1.0-alpha.8",
|
"@wikimedia/codex": "0.1.0-alpha.8",
|
||||||
"@wikimedia/codex-icons": "0.1.0-alpha.8",
|
"@wikimedia/codex-icons": "0.1.0-alpha.8",
|
||||||
"@wikimedia/codex-search": "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",
|
"@wikimedia/types-wikimedia": "0.3.3",
|
||||||
"babel-loader": "8.0.6",
|
"babel-loader": "8.0.6",
|
||||||
"commander": "9.1.0",
|
"commander": "9.1.0",
|
||||||
|
|
|
@ -45,11 +45,10 @@ describe( 'AB.js', () => {
|
||||||
} );
|
} );
|
||||||
|
|
||||||
describe( 'initialization when body tag does not contain bucket', () => {
|
describe( 'initialization when body tag does not contain bucket', () => {
|
||||||
let /** @type {jest.Mock} */ hookMock;
|
let /** @type {jest.SpyInstance} */ hookMock;
|
||||||
|
|
||||||
beforeEach( () => {
|
beforeEach( () => {
|
||||||
hookMock = jest.fn().mockReturnValue( { fire: () => {} } );
|
hookMock = jest.spyOn( mw, 'hook' );
|
||||||
mw.hook = hookMock;
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
it( 'sends data to WikimediaEvents when the bucket is part of sample (e.g. control)', () => {
|
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', () => {
|
describe( 'initialization when body tag contains bucket', () => {
|
||||||
let /** @type {jest.Mock} */ hookMock;
|
let /** @type {jest.SpyInstance} */ hookMock;
|
||||||
|
|
||||||
beforeEach( () => {
|
beforeEach( () => {
|
||||||
hookMock = jest.fn().mockReturnValue( { fire: () => {} } );
|
hookMock = jest.spyOn( mw, 'hook' );
|
||||||
mw.hook = hookMock;
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
it( 'sends data to WikimediaEvents when the bucket is part of sample (e.g. control)', () => {
|
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( () => {
|
beforeEach( () => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
global.window.matchMedia = jest.fn( () => ( {} ) );
|
global.window.matchMedia = jest.fn( () => ( {} ) );
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
global.mw = {
|
|
||||||
hook: jest.fn( () => ( {
|
|
||||||
add: () => {}
|
|
||||||
} ) )
|
|
||||||
};
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
describe( 'renders', () => {
|
describe( 'renders', () => {
|
||||||
|
@ -195,11 +188,12 @@ describe( 'Table of contents', () => {
|
||||||
|
|
||||||
describe( 'applies the correct aria attributes', () => {
|
describe( 'applies the correct aria attributes', () => {
|
||||||
test( 'when initialized', () => {
|
test( 'when initialized', () => {
|
||||||
|
const spy = jest.spyOn( mw, 'hook' );
|
||||||
const toc = mount();
|
const toc = mount();
|
||||||
const toggleButton = /** @type {HTMLElement} */ ( barSection.querySelector( `.${toc.TOGGLE_CLASS}` ) );
|
const toggleButton = /** @type {HTMLElement} */ ( barSection.querySelector( `.${toc.TOGGLE_CLASS}` ) );
|
||||||
|
|
||||||
expect( toggleButton.getAttribute( 'aria-expanded' ) ).toEqual( 'true' );
|
expect( toggleButton.getAttribute( 'aria-expanded' ) ).toEqual( 'true' );
|
||||||
expect( mw.hook ).toBeCalledWith( 'wikipage.tableOfContents' );
|
expect( spy ).toBeCalledWith( 'wikipage.tableOfContents' );
|
||||||
} );
|
} );
|
||||||
|
|
||||||
test( 'when expanding sections', () => {
|
test( 'when expanding sections', () => {
|
||||||
|
|
Loading…
Reference in New Issue