mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-30 18:35:44 +00:00
329d91c99c
Vector 2022:
mw.util.addPortlet('p-twinkle', 'TW', '#p-cactions');
mw.util.addPortletLink('p-twinkle','#', 'Hello world');
Or if preferred it can be added to the pinned menu
mw.util.addPortlet('p-twinkle-pinnable', 'TW', '#p-tb');
mw.util.addPortletLink('p-twinkle-pinnable','#', 'Hello world');
Bug: T342815
Change-Id: Id58515e72bfbd5f700aa573a122529c6efdfea9d
64 lines
2.4 KiB
JavaScript
64 lines
2.4 KiB
JavaScript
const portlets = require( '../../../resources/skins.vector.js/portlets.js' );
|
|
const mustache = require( 'mustache' );
|
|
const fs = require( 'fs' );
|
|
const menuTemplate = fs.readFileSync( 'includes/templates/Menu.mustache', 'utf8' );
|
|
const menuContentsTemplate = fs.readFileSync( 'includes/templates/MenuContents.mustache', 'utf8' );
|
|
const dropdownOpen = fs.readFileSync( 'includes/templates/Dropdown/Open.mustache', 'utf8' );
|
|
const dropdownClose = fs.readFileSync( 'includes/templates/Dropdown/Close.mustache', 'utf8' );
|
|
|
|
describe( 'portlets', () => {
|
|
beforeEach( () => {
|
|
const marker = document.querySelector( '#vector-page-tools-dropdown' );
|
|
if ( marker ) {
|
|
marker.remove();
|
|
}
|
|
} );
|
|
test( 'portlets that go through the hook method should match the menu template HTML', () => {
|
|
const id = 'foo';
|
|
const label = 'label text';
|
|
const portletHTML = mustache.render( menuTemplate, {
|
|
id, class: '', label
|
|
}, {
|
|
MenuContents: menuContentsTemplate
|
|
} );
|
|
|
|
const element = document.createElement( 'div' );
|
|
element.id = id;
|
|
const labelElement = document.createElement( 'label' );
|
|
labelElement.textContent = label;
|
|
element.appendChild( labelElement );
|
|
element.appendChild( document.createElement( 'ul' ) );
|
|
expect( portlets.addPortletHandler( element ).outerHTML.replace( /[\s\n]/gi, '' ) )
|
|
.toBe( portletHTML.replace( /[\s\n]/gi, '' ) );
|
|
} );
|
|
|
|
test( 'portlets that go through the hook method should match the menu template HTML (dropdowns)', () => {
|
|
const id = 'foo';
|
|
const label = 'dropdown label text';
|
|
const marker = document.createElement( 'div' );
|
|
marker.id = 'vector-page-tools-dropdown';
|
|
document.body.appendChild( marker );
|
|
const dropdownHTML = mustache.render( dropdownOpen, {
|
|
id: `${id}-dropdown`,
|
|
class: 'foo-dropdown',
|
|
label
|
|
}, {} ) + mustache.render( dropdownClose, {}, {} );
|
|
|
|
const element = document.createElement( 'div' );
|
|
element.id = id;
|
|
const labelElement = document.createElement( 'label' );
|
|
labelElement.textContent = label;
|
|
element.appendChild( labelElement );
|
|
element.appendChild( document.createElement( 'ul' ) );
|
|
document.body.appendChild( element );
|
|
|
|
const transformedPortlet = portlets.addPortletHandler( element, '#p-cactions' );
|
|
const dropdown = transformedPortlet.closest( '.vector-dropdown' );
|
|
// removing the portlet should give us an empty dropdown
|
|
transformedPortlet.remove();
|
|
|
|
expect( dropdown.outerHTML.replace( /[\s\n]/gi, '' ) )
|
|
.toBe( dropdownHTML.replace( /[\s\n]/gi, '' ) );
|
|
} );
|
|
} );
|