Add snapshot class to sticky header tests

Change-Id: Id1383f234bd0518786feebbbb2d92f7345aa6e70
This commit is contained in:
bwang 2022-02-21 15:03:07 -06:00
parent 3a302bccea
commit dd8cc5dfe8
5 changed files with 243 additions and 32 deletions

View file

@ -0,0 +1,56 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Sticky header renders 1`] = `
"<header id=\\"vector-sticky-header\\" aria-hidden=\\"true\\" class=\\"vector-sticky-header\\">
<div class=\\"vector-sticky-header-start\\">
<div class=\\"vector-sticky-header-icon-start\\">
<button tabindex=\\"-1\\" data-event-name=\\"ui.vector-sticky-search-form.icon\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-search vector-sticky-header-search-toggle\\">
<span>search</span>
</button>
</div>
<div> </div> <div class=\\"vector-sticky-header-context-bar\\">
<div class=\\"vector-sticky-header-context-bar-primary\\"></div>
</div>
</div>
<div class=\\"vector-sticky-header-end\\">
<div class=\\"vector-sticky-header-icons\\">
<a href=\\"#\\" id=\\"ca-talk-sticky-header\\" data-event-name=\\"talk-sticky-header\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-speechBubbles sticky-header-icon\\">
<span></span>
</a>
<a href=\\"#\\" id=\\"ca-history-sticky-header\\" data-event-name=\\"history-sticky-header\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-history sticky-header-icon\\">
<span></span>
</a>
<a href=\\"#\\" id=\\"ca-watchstar-sticky-header\\" data-event-name=\\"watch-sticky-header\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-star sticky-header-icon mw-watchlink\\">
<span></span>
</a>
<a href=\\"#\\" id=\\"ca-ve-edit-sticky-header\\" data-event-name=\\"ve-edit-sticky-header\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-edit sticky-header-icon\\">
<span></span>
</a>
<a href=\\"#\\" id=\\"ca-edit-sticky-header\\" data-event-name=\\"wikitext-edit-sticky-header\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-wikiText sticky-header-icon\\">
<span></span>
</a>
<a href=\\"#\\" id=\\"ca-viewsource-sticky-header\\" data-event-name=\\"wikimedia-editLock\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-star sticky-header-icon\\">
<span></span>
</a>
</div>
<button id=\\"p-lang-btn-sticky-header\\" tabindex=\\"-1\\" data-event-name=\\"ui.dropdown-p-lang-btn-sticky-header\\" class=\\"mw-ui-button mw-ui-quiet mw-interlanguage-selector\\">
<span class=\\"mw-ui-icon mw-ui-icon-wikimedia-language\\"></span><span>0 languages</span>
</button>
<div class=\\"vector-sticky-header-icon-end\\">
<div class=\\"vector-user-links\\">
</div>
</div>
</div>
</header>
"
`;

View file

@ -0,0 +1,38 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`UserLinks renders 1`] = `
"<nav class=\\"vector-user-links\\" aria-label=\\"\\" role=\\"navigation\\">
<div id=\\"p-personal-more\\" class=\\"mw-portlet mw-portlet-personal-more vector-menu vector-user-menu-more\\">
<div class=\\"vector-menu-content\\">
<ul class=\\"vector-menu-content-list\\">
<li id=\\"ca-uls\\" class=\\"user-links-collapsible-item mw-list-item active\\"><a href=\\"#\\" class=\\"uls-trigger mw-ui-button mw-ui-quiet\\"><span class=\\"mw-ui-icon mw-ui-icon-wikimedia-language\\"></span> <span>English</span></a></li>
<li id=\\"pt-userpage-2\\" class=\\"user-links-collapsible-item mw-list-item\\"><a href=\\"/wiki/User:Admin\\" class=\\"mw-ui-button mw-ui-quiet\\" title=\\"Your user page [.]\\" accesskey=\\".\\"><span>Admin</span></a></li>
<li id=\\"pt-notifications-alert\\" class=\\"mw-list-item\\"><a href=\\"/wiki/Special:Notifications\\" class=\\"mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-bell mw-echo-notifications-badge-all-read\\" data-counter-num=\\"0\\" data-counter-text=\\"0\\" title=\\"Your alerts\\"><span>Alerts (0)</span></a></li><li id=\\"pt-notifications-notice\\" class=\\"mw-list-item\\"><a href=\\"/wiki/Special:Notifications\\" class=\\"mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-tray mw-echo-notifications-badge-all-read\\" data-counter-num=\\"0\\" data-counter-text=\\"0\\" title=\\"Your notices\\"><span>Notices (0)</span></a></li>
<li id=\\"pt-watchlist-2\\" class=\\"user-links-collapsible-item mw-list-item\\"><a href=\\"/wiki/Special:Watchlist\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-watchlist mw-ui-icon-wikimedia-watchlist\\" title=\\"A list of pages you are monitoring for changes [l]\\" accesskey=\\"l\\"><span>Watchlist</span></a></li>
</ul>
</div>
</div>
<div id=\\"p-personal\\" class=\\"mw-portlet mw-portlet-personal vector-user-menu vector-user-menu-logged-in vector-menu vector-menu-dropdown\\">
<div class=\\"vector-menu-content\\">
<ul class=\\"vector-menu-content-list\\">
<li id=\\"pt-userpage\\" class=\\"user-links-collapsible-item mw-list-item\\"><a class=\\"mw-ui-icon mw-ui-icon-before mw-ui-icon-userAvatar mw-ui-icon-wikimedia-userAvatar\\" href=\\"/wiki/User:Admin\\" title=\\"Your user page [.]\\" accesskey=\\".\\"><span>Admin</span></a></li>
<li id=\\"pt-mytalk\\" class=\\"mw-list-item\\"><a class=\\"mw-ui-icon mw-ui-icon-before mw-ui-icon-userTalk mw-ui-icon-wikimedia-userTalk\\" href=\\"/wiki/User_talk:Admin\\" title=\\"Your talk page [n]\\" accesskey=\\"n\\"><span>Talk</span></a></li>
<li id=\\"pt-sandbox\\" class=\\"new mw-list-item\\"><a class=\\"mw-ui-icon mw-ui-icon-before mw-ui-icon-sandbox mw-ui-icon-wikimedia-sandbox\\" href=\\"/w/index.php?title=User:Admin/sandbox&amp;action=edit&amp;redlink=1\\" title=\\"Your sandbox (page does not exist)\\"><span>Sandbox</span></a></li>
<li id=\\"pt-preferences\\" class=\\"mw-list-item\\"><a class=\\"mw-ui-icon mw-ui-icon-before mw-ui-icon-settings mw-ui-icon-wikimedia-settings\\" href=\\"/wiki/Special:Preferences\\" title=\\"Your preferences\\"><span>Preferences</span></a></li>
<li id=\\"pt-betafeatures\\" class=\\"mw-list-item\\"><a class=\\"mw-ui-icon mw-ui-icon-before mw-ui-icon-labFlask mw-ui-icon-wikimedia-labFlask\\" href=\\"/wiki/Special:Preferences#mw-prefsection-betafeatures\\" title=\\"Beta features\\"><span>Beta</span></a></li>
<li id=\\"pt-watchlist\\" class=\\"user-links-collapsible-item mw-list-item\\"><a class=\\"mw-ui-icon mw-ui-icon-before mw-ui-icon-watchlist mw-ui-icon-wikimedia-watchlist\\" href=\\"/wiki/Special:Watchlist\\" title=\\"A list of pages you are monitoring for changes [l]\\" accesskey=\\"l\\"><span>Watchlist</span></a></li>
<li id=\\"pt-uploads\\" class=\\"mw-list-item\\"><a class=\\"mw-ui-icon mw-ui-icon-before mw-ui-icon-imageGallery mw-ui-icon-wikimedia-imageGallery\\" href=\\"/w/index.php?title=Special:ListFiles/Admin&amp;ilshowall=1\\" title=\\"List of files you have uploaded\\"><span>Uploads</span></a></li>
<li id=\\"pt-mycontris\\" class=\\"mw-list-item\\"><a class=\\"mw-ui-icon mw-ui-icon-before mw-ui-icon-userContributions mw-ui-icon-wikimedia-userContributions\\" href=\\"/wiki/Special:Contributions/Admin\\" title=\\"A list of your contributions [y]\\" accesskey=\\"y\\"><span>Contributions</span></a></li>
<li id=\\"pt-custom\\" class=\\"mw-list-item mw-list-item-js\\">Gadget added item</li>
</ul>
</div>
</div>
</nav>
"
`;

View file

@ -1,41 +1,106 @@
const mustache = require( 'mustache' );
const fs = require( 'fs' );
const stickyHeaderTemplate = fs.readFileSync( 'includes/templates/StickyHeader.mustache', 'utf8' );
const buttonTemplate = fs.readFileSync( 'includes/templates/Button.mustache', 'utf8' );
const sticky = require( '../../resources/skins.vector.es6/stickyHeader.js' );
const { userLinksHTML } = require( './userLinksData.js' );
const defaultButtonsTemplateData = [ {
href: '#',
id: 'ca-talk-sticky-header',
event: 'talk-sticky-header',
icon: 'wikimedia-speechBubbles',
'is-quiet': true,
'tab-index': '-1',
class: 'sticky-header-icon'
}, {
href: '#',
id: 'ca-history-sticky-header',
event: 'history-sticky-header',
icon: 'wikimedia-history',
'is-quiet': true,
'tab-index': '-1',
class: 'sticky-header-icon'
}, {
href: '#',
id: 'ca-watchstar-sticky-header',
event: 'watch-sticky-header',
icon: 'wikimedia-star',
'is-quiet': true,
'tab-index': '-1',
class: 'sticky-header-icon mw-watchlink'
} ];
const editButtonsTemplateData = [ {
href: '#',
id: 'ca-ve-edit-sticky-header',
event: 've-edit-sticky-header',
icon: 'wikimedia-edit',
'is-quiet': true,
'tab-index': '-1',
class: 'sticky-header-icon'
}, {
href: '#',
id: 'ca-edit-sticky-header',
event: 'wikitext-edit-sticky-header',
icon: 'wikimedia-wikiText',
'is-quiet': true,
'tab-index': '-1',
class: 'sticky-header-icon'
}, {
href: '#',
id: 'ca-viewsource-sticky-header',
event: 'wikimedia-editLock',
icon: 'wikimedia-star',
'is-quiet': true,
'tab-index': '-1',
class: 'sticky-header-icon'
} ];
const templateData = {
'data-primary-action': {
id: 'p-lang-btn-sticky-header',
class: 'mw-interlanguage-selector',
'is-quiet': true,
tabindex: '-1',
label: '0 languages',
'html-vector-button-icon': '<span class="mw-ui-icon mw-ui-icon-wikimedia-language"></span>',
event: 'ui.dropdown-p-lang-btn-sticky-header'
},
'data-button-start': {
label: 'search',
icon: 'wikimedia-search',
'is-quiet': true,
tabindex: '-1',
class: 'vector-sticky-header-search-toggle',
event: 'ui.vector-sticky-search-form.icon'
},
'data-search': {},
'data-buttons': defaultButtonsTemplateData.concat( editButtonsTemplateData )
};
const renderedHTML = mustache.render( stickyHeaderTemplate, templateData, {
Button: buttonTemplate,
SearchBox: '<div> </div>' // ignore SearchBox for this test
} );
beforeEach( () => {
document.body.innerHTML = renderedHTML;
} );
test( 'Sticky header renders', () => {
expect( document.body.innerHTML ).toMatchSnapshot();
} );
describe( 'sticky header', () => {
test( 'prepareUserMenu removes gadgets from dropdown', async () => {
const menu = document.createElement( 'div' );
menu.innerHTML = `<input type="checkbox" id="p-personal-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-personal" class="vector-menu-checkbox" aria-labelledby="p-personal-label" aria-expanded="true">
<h3 id="p-personal-label" aria-label="" class="vector-menu-heading mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-userAvatar" aria-hidden="true">
<span class="vector-menu-heading-label">Personal tools</span>
</h3>
<div class="vector-menu-content">
<ul class="vector-menu-content-list">
<li id="pt-userpage" class="user-links-collapsible-item mw-list-item">
<a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-userAvatar" href="/w/index.php?title=Special:Homepage&amp;source=personaltoolslink&amp;namespace=0" dir="auto" title="Your homepage [⌃⌥.]" accesskey="."><span>Jdlrobson</span></a>
</li>
<li id="pt-mytalk" class="mw-list-item">
<a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-userTalk" href="/wiki/User_talk:Jdlrobson" title="Your talk page [⌃⌥n]" accesskey="n"><span>Talk</span></a>
</li>
<li id="pt-sandbox" class="mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-sandbox" href="/wiki/User:Jdlrobson/sandbox" title="Your sandbox"><span>Sandbox</span></a>
</li>
<li id="pt-preferences" class="mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-settings" href="/wiki/Special:Preferences" title="Your preferences"><span>Preferences</span></a>
</li>
<li id="pt-betafeatures" class="mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-labFlask" href="/wiki/Special:Preferences#mw-prefsection-betafeatures" title="Beta features"><span>Beta</span></a>
</li>
<li id="pt-watchlist" class="mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-watchlist" href="/wiki/Special:Watchlist" title="The list of pages you are monitoring for changes [⌃⌥L]" accesskey="L"><span>Watchlist</span></a>
</li>
<li id="pt-mycontris" class="mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-userContributions" href="/wiki/Special:Contributions/Jdlrobson" title="A list of your contributions [⌃⌥y]" accesskey="y"><span>Contributions</span></a>
</li>
<li class="mw-list-item mw-list-item-js" id="cx-language"><a href="/w/index.php?title=Special:ContentTranslation&amp;campaign=contributionsmenu&amp;to=en" title="Add a new translation" class="mw-ui-icon mw-ui-icon-before mw-ui-icon-vector-gadget-cx-language"><span>Translations</span></a>
</li>
<li class="mw-list-item mw-list-item-js" id="cx-imageGallery"><a href="//commons.wikimedia.org/wiki/Special:MyUploads" title="A list of your uploaded media" class="mw-ui-icon mw-ui-icon-before mw-ui-icon-vector-gadget-cx-imageGallery"><span>Uploaded media</span></a></li>
<li class="mw-list-item mw-list-item-js"><a href="Test"><span>Test</span></a></li>
</ul>
<div id="pt-logout" class="vector-user-menu-logout" title="Log out">
<a data-mw="interface" href="/w/index.php?title=Special:UserLogout&amp;returnto=Main+Page&amp;returntoquery=safemode%3D1" icon="logOut" class="vector-menu-content-item vector-menu-content-item-logout mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-logOut"><span>Log out</span></a>
</div>
</div>`;
const newMenu = sticky.prepareUserMenu( menu );
menu.innerHTML = userLinksHTML;
const userMenu = /** @type {Element} */ ( menu.querySelector( '#' + sticky.USER_MENU_ID ) );
const newMenu = sticky.prepareUserMenu( userMenu );
// check classes have been updated and removed.
expect( userMenu.querySelectorAll( '.user-links-collapsible-item' ).length > 0 ).toBeTruthy();
expect( userMenu.querySelectorAll( '.mw-list-item-js' ).length > 0 ).toBeTruthy();
expect( newMenu.querySelectorAll( '.user-links-collapsible-item' ).length ).toBe( 0 );
expect( newMenu.querySelectorAll( '.mw-list-item-js' ).length ).toBe( 0 );
} );

View file

@ -0,0 +1,9 @@
const { userLinksHTML } = require( './userLinksData.js' );
beforeEach( () => {
document.body.innerHTML = userLinksHTML;
} );
test( 'UserLinks renders', () => {
expect( document.body.innerHTML ).toMatchSnapshot();
} );

View file

@ -0,0 +1,43 @@
const mustache = require( 'mustache' );
const fs = require( 'fs' );
const userLinksTemplate = fs.readFileSync( 'includes/templates/UserLinks.mustache', 'utf8' );
const menuTemplate = fs.readFileSync( 'includes/templates/Menu.mustache', 'utf8' );
const templateData = {
'is-wide': false,
'data-user-more': {
id: 'p-personal-more',
class: 'mw-portlet mw-portlet-personal-more vector-menu vector-user-menu-more',
label: 'Toggle sidebar',
'html-items': `
<li id="ca-uls" class="user-links-collapsible-item mw-list-item active"><a href="#" class="uls-trigger mw-ui-button mw-ui-quiet"><span class="mw-ui-icon mw-ui-icon-wikimedia-language"></span> <span>English</span></a></li>
<li id="pt-userpage-2" class="user-links-collapsible-item mw-list-item"><a href="/wiki/User:Admin" class="mw-ui-button mw-ui-quiet" title="Your user page [.]" accesskey="."><span>Admin</span></a></li>
<li id="pt-notifications-alert" class="mw-list-item"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-bell mw-echo-notifications-badge-all-read" data-counter-num="0" data-counter-text="0" title="Your alerts"><span>Alerts (0)</span></a></li><li id="pt-notifications-notice" class="mw-list-item"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-tray mw-echo-notifications-badge-all-read" data-counter-num="0" data-counter-text="0" title="Your notices"><span>Notices (0)</span></a></li>
<li id="pt-watchlist-2" class="user-links-collapsible-item mw-list-item"><a href="/wiki/Special:Watchlist" class="mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-watchlist mw-ui-icon-wikimedia-watchlist" title="A list of pages you are monitoring for changes [l]" accesskey="l"><span>Watchlist</span></a></li>
`
},
'data-user-menu': {
id: 'p-personal',
class: 'mw-portlet mw-portlet-personal vector-user-menu vector-user-menu-logged-in vector-menu vector-menu-dropdown',
label: 'Personal tools',
'html-items': `
<li id="pt-userpage" class="user-links-collapsible-item mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-userAvatar mw-ui-icon-wikimedia-userAvatar" href="/wiki/User:Admin" title="Your user page [.]" accesskey="."><span>Admin</span></a></li>
<li id="pt-mytalk" class="mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-userTalk mw-ui-icon-wikimedia-userTalk" href="/wiki/User_talk:Admin" title="Your talk page [n]" accesskey="n"><span>Talk</span></a></li>
<li id="pt-sandbox" class="new mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-sandbox mw-ui-icon-wikimedia-sandbox" href="/w/index.php?title=User:Admin/sandbox&amp;action=edit&amp;redlink=1" title="Your sandbox (page does not exist)"><span>Sandbox</span></a></li>
<li id="pt-preferences" class="mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-settings mw-ui-icon-wikimedia-settings" href="/wiki/Special:Preferences" title="Your preferences"><span>Preferences</span></a></li>
<li id="pt-betafeatures" class="mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-labFlask mw-ui-icon-wikimedia-labFlask" href="/wiki/Special:Preferences#mw-prefsection-betafeatures" title="Beta features"><span>Beta</span></a></li>
<li id="pt-watchlist" class="user-links-collapsible-item mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-watchlist mw-ui-icon-wikimedia-watchlist" href="/wiki/Special:Watchlist" title="A list of pages you are monitoring for changes [l]" accesskey="l"><span>Watchlist</span></a></li>
<li id="pt-uploads" class="mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-imageGallery mw-ui-icon-wikimedia-imageGallery" href="/w/index.php?title=Special:ListFiles/Admin&amp;ilshowall=1" title="List of files you have uploaded"><span>Uploads</span></a></li>
<li id="pt-mycontris" class="mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-userContributions mw-ui-icon-wikimedia-userContributions" href="/wiki/Special:Contributions/Admin" title="A list of your contributions [y]" accesskey="y"><span>Contributions</span></a></li>
<li id="pt-custom" class="mw-list-item mw-list-item-js">Gadget added item</li>
`
}
};
const renderedHTML = mustache.render( userLinksTemplate, templateData, {
Menu: menuTemplate
} );
module.exports = {
userLinksHTML: renderedHTML
};