From dd8cc5dfe80a16d6f0013e2ba7c9c7c0a3c897b4 Mon Sep 17 00:00:00 2001 From: bwang Date: Mon, 21 Feb 2022 15:03:07 -0600 Subject: [PATCH] Add snapshot class to sticky header tests Change-Id: Id1383f234bd0518786feebbbb2d92f7345aa6e70 --- .../__snapshots__/stickyHeader.test.js.snap | 56 ++++++++ .../jest/__snapshots__/userLinks.test.js.snap | 38 ++++++ tests/jest/stickyHeader.test.js | 129 +++++++++++++----- tests/jest/userLinks.test.js | 9 ++ tests/jest/userLinksData.js | 43 ++++++ 5 files changed, 243 insertions(+), 32 deletions(-) create mode 100644 tests/jest/__snapshots__/stickyHeader.test.js.snap create mode 100644 tests/jest/__snapshots__/userLinks.test.js.snap create mode 100644 tests/jest/userLinks.test.js create mode 100644 tests/jest/userLinksData.js diff --git a/tests/jest/__snapshots__/stickyHeader.test.js.snap b/tests/jest/__snapshots__/stickyHeader.test.js.snap new file mode 100644 index 000000000..ecf18fae7 --- /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 000000000..b8b0926eb --- /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 465decf41..aec6c952e 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 = ` - -
- -
- Log out -
-
`; - 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 000000000..dca77ea69 --- /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 000000000..99efe2da4 --- /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': ` + + +
  • Alerts (0)
  • Notices (0)
    • + + ` + }, + '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': ` + +
  • Talk
    • +
  • Sandbox
    • +
  • Preferences
    • +
  • Beta
    • + +
  • Uploads
    • +
  • Contributions
    • +
  • Gadget added item
    • + ` + } +}; + +const renderedHTML = mustache.render( userLinksTemplate, templateData, { + Menu: menuTemplate +} ); + +module.exports = { + userLinksHTML: renderedHTML +};