diff --git a/tests/jest/__snapshots__/stickyHeader.test.js.snap b/tests/jest/__snapshots__/stickyHeader.test.js.snap
new file mode 100644
index 00000000..ecf18fae
--- /dev/null
+++ b/tests/jest/__snapshots__/stickyHeader.test.js.snap
@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sticky header renders 1`] = `
+"
+"
+`;
diff --git a/tests/jest/__snapshots__/userLinks.test.js.snap b/tests/jest/__snapshots__/userLinks.test.js.snap
new file mode 100644
index 00000000..b8b0926e
--- /dev/null
+++ b/tests/jest/__snapshots__/userLinks.test.js.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserLinks renders 1`] = `
+"
+"
+`;
diff --git a/tests/jest/stickyHeader.test.js b/tests/jest/stickyHeader.test.js
index 465decf4..aec6c952 100644
--- a/tests/jest/stickyHeader.test.js
+++ b/tests/jest/stickyHeader.test.js
@@ -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': '',
+ 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: '
' // 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 = `
-
-`;
- 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 );
} );
diff --git a/tests/jest/userLinks.test.js b/tests/jest/userLinks.test.js
new file mode 100644
index 00000000..dca77ea6
--- /dev/null
+++ b/tests/jest/userLinks.test.js
@@ -0,0 +1,9 @@
+const { userLinksHTML } = require( './userLinksData.js' );
+
+beforeEach( () => {
+ document.body.innerHTML = userLinksHTML;
+} );
+
+test( 'UserLinks renders', () => {
+ expect( document.body.innerHTML ).toMatchSnapshot();
+} );
diff --git a/tests/jest/userLinksData.js b/tests/jest/userLinksData.js
new file mode 100644
index 00000000..99efe2da
--- /dev/null
+++ b/tests/jest/userLinksData.js
@@ -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': `
+ English
+ Admin
+ Alerts (0)Notices (0)
+ Watchlist
+ `
+ },
+ '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': `
+ Admin
+ Talk
+ Sandbox
+ Preferences
+ Beta
+ Watchlist
+ Uploads
+ Contributions
+ Gadget added item
+ `
+ }
+};
+
+const renderedHTML = mustache.render( userLinksTemplate, templateData, {
+ Menu: menuTemplate
+} );
+
+module.exports = {
+ userLinksHTML: renderedHTML
+};