Skip to content
Snippets Groups Projects
Commit b9b40f30 authored by Ben Mullins's avatar Ben Mullins
Browse files

Issue #3255809 by nod_, lauriii, hooroomoo: Add nightwatch tests for toolbar

parent 4fa5f16f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
core/modules/toolbar/tests/src/Nightwatch/Tests/toolbarApiTest.js 0 → 100644
+ 270
− 0
View file @ b9b40f30
/**
* @file
* Tests of the existing Toolbar JS Api.
*/
module.exports = {
'@tags': ['core'],
before(browser) {
browser.drupalInstall().drupalLoginAsAdmin(() => {
browser
.drupalRelativeURL('/admin/modules')
.setValue('input[type="search"]', 'toolbar')
.waitForElementVisible('input[name="modules[toolbar][enable]"]', 1000)
.click('input[name="modules[breakpoint][enable]"]')
.click('input[name="modules[toolbar][enable]"]')
.click('input[type="submit"]');
});
browser
.drupalCreateUser({
name: 'user',
password: '123',
permissions: [
'access site reports',
'access toolbar',
'administer menu',
'administer modules',
'administer site configuration',
'administer account settings',
'administer software updates',
'access content',
'administer permissions',
'administer users',
],
})
.drupalLogin({ name: 'user', password: '123' })
.drupalRelativeURL('/')
.waitForElementPresent('#toolbar-administration', 10000);
},
beforeEach(browser) {
// Set the resolution to the default desktop resolution. Ensure the default
// toolbar is horizontal in headless mode.
browser.resizeWindow(1920, 1080);
// To clear active tab/tray from previous tests
browser.execute(function () {
localStorage.clear();
// Clear escapeAdmin url values.
sessionStorage.clear();
});
browser.drupalRelativeURL('/');
},
after(browser) {
browser.drupalUninstall();
},
'Drupal.Toolbar.models': (browser) => {
browser.execute(
function () {
const toReturn = {};
const { models } = Drupal.toolbar;
toReturn.hasMenuModel = models.hasOwnProperty('menuModel');
toReturn.menuModelType = typeof models.menuModel === 'object';
toReturn.hasToolbarModel = models.hasOwnProperty('toolbarModel');
toReturn.toolbarModelType = typeof models.toolbarModel === 'object';
toReturn.toolbarModelActiveTab =
models.toolbarModel.get('activeTab').id ===
'toolbar-item-administration';
toReturn.toolbarModelActiveTray =
models.toolbarModel.get('activeTray').id ===
'toolbar-item-administration-tray';
toReturn.toolbarModelIsOriented =
models.toolbarModel.get('isOriented') === true;
toReturn.toolbarModelIsFixed =
models.toolbarModel.get('isFixed') === true;
toReturn.toolbarModelAreSubtreesLoaded =
models.toolbarModel.get('areSubtreesLoaded') === false;
toReturn.toolbarModelIsViewportOverflowConstrained =
models.toolbarModel.get('isViewportOverflowConstrained') === false;
toReturn.toolbarModelOrientation =
models.toolbarModel.get('orientation') === 'horizontal';
toReturn.toolbarModelLocked =
models.toolbarModel.get('locked') === null;
toReturn.toolbarModelIsTrayToggleVisible =
models.toolbarModel.get('isTrayToggleVisible') === true;
toReturn.toolbarModelHeight = models.toolbarModel.get('height') === 79;
toReturn.toolbarModelOffsetsBottom =
models.toolbarModel.get('offsets').bottom === 0;
toReturn.toolbarModelOffsetsLeft =
models.toolbarModel.get('offsets').left === 0;
toReturn.toolbarModelOffsetsRight =
models.toolbarModel.get('offsets').right === 0;
toReturn.toolbarModelOffsetsTop =
models.toolbarModel.get('offsets').top === 79;
toReturn.toolbarModelSubtrees =
Object.keys(models.menuModel.get('subtrees')).length === 0;
return toReturn;
},
[],
(result) => {
const expectedTrue = {
hasMenuModel: 'has menu model',
menuModelType: 'menu model is an object',
hasToolbarModel: 'has toolbar model',
toolbarModelType: 'toolbar model is an object',
toolbarModelActiveTab: 'get("activeTab") has expected result',
toolbarModelActiveTray: 'get("activeTray") has expected result',
toolbarModelIsOriented: 'get("isOriented") has expected result',
toolbarModelIsFixed: 'get("isFixed") has expected result',
toolbarModelAreSubtreesLoaded:
'get("areSubtreesLoaded") has expected result',
toolbarModelIsViewportOverflowConstrained:
'get("isViewportOverflowConstrained") has expected result',
toolbarModelOrientation: 'get("orientation") has expected result',
toolbarModelLocked: 'get("locked") has expected result',
toolbarModelIsTrayToggleVisible:
'get("isTrayToggleVisible") has expected result',
toolbarModelHeight: 'get("height") has expected result',
toolbarModelOffsetsBottom:
'get("offsets") bottom has expected result',
toolbarModelOffsetsLeft: 'get("offsets") left has expected result',
toolbarModelOffsetsRight: 'get("offsets") right has expected result',
toolbarModelOffsetsTop: 'get("offsets") top has expected result',
toolbarModelSubtrees: 'get("subtrees") has expected result',
};
browser.assert.deepEqual(
Object.keys(expectedTrue).sort(),
Object.keys(result.value).sort(),
'Keys to check match',
);
Object.keys(expectedTrue).forEach((property) => {
browser.assert.equal(
result.value[property],
true,
expectedTrue[property],
);
});
},
);
},
'Change tab': (browser) => {
browser.execute(
function () {
const toReturn = {};
const { models } = Drupal.toolbar;
toReturn.hasMenuModel = models.hasOwnProperty('menuModel');
toReturn.menuModelType = typeof models.menuModel === 'object';
toReturn.hasToolbarModel = models.hasOwnProperty('toolbarModel');
toReturn.toolbarModelType = typeof models.toolbarModel === 'object';
const tab = document.querySelector('#toolbar-item-user');
tab.dispatchEvent(new MouseEvent('click', { bubbles: true }));
toReturn.toolbarModelChangedTab =
models.toolbarModel.get('activeTab').id === 'toolbar-item-user';
toReturn.toolbarModelChangedTray =
models.toolbarModel.get('activeTray').id === 'toolbar-item-user-tray';
return toReturn;
},
[],
(result) => {
const expectedTrue = {
hasMenuModel: 'has menu model',
menuModelType: 'menu model is an object',
hasToolbarModel: 'has toolbar model',
toolbarModelType: 'toolbar model is an object',
toolbarModelChangedTab: 'get("activeTab") has expected result',
toolbarModelChangedTray: 'get("activeTray") has expected result',
};
browser.assert.deepEqual(
Object.keys(expectedTrue).sort(),
Object.keys(result.value).sort(),
'Keys to check match',
);
Object.keys(expectedTrue).forEach((property) => {
browser.assert.equal(
result.value[property],
true,
expectedTrue[property],
);
});
},
);
},
'Change orientation': (browser) => {
browser.executeAsync(
function (done) {
const toReturn = {};
const { models } = Drupal.toolbar;
const orientationToggle = document.querySelector(
'#toolbar-item-administration-tray .toolbar-toggle-orientation button',
);
toReturn.toolbarOrientation =
models.toolbarModel.get('orientation') === 'horizontal';
orientationToggle.dispatchEvent(
new MouseEvent('click', { bubbles: true }),
);
setTimeout(() => {
toReturn.toolbarChangeOrientation =
models.toolbarModel.get('orientation') === 'vertical';
done(toReturn);
}, 100);
},
[],
(result) => {
const expectedTrue = {
toolbarOrientation: 'get("orientation") has expected result',
toolbarChangeOrientation: 'changing orientation has expected result',
};
browser.assert.deepEqual(
Object.keys(expectedTrue).sort(),
Object.keys(result.value).sort(),
'Keys to check match',
);
Object.keys(expectedTrue).forEach((property) => {
browser.assert.equal(
result.value[property],
true,
expectedTrue[property],
);
});
},
);
},
'Open submenu': (browser) => {
browser.executeAsync(
function (done) {
const toReturn = {};
const { models } = Drupal.toolbar;
Drupal.toolbar.models.toolbarModel.set('orientation', 'vertical');
toReturn.toolbarOrientation =
models.toolbarModel.get('orientation') === 'vertical';
const manageTab = document.querySelector(
'#toolbar-item-administration',
);
Drupal.toolbar.models.toolbarModel.set('activeTab', manageTab);
const menuDropdown = document.querySelector(
'#toolbar-item-administration-tray button',
);
menuDropdown.dispatchEvent(new MouseEvent('click', { bubbles: true }));
setTimeout(() => {
const statReportElement = document.querySelector(
'#toolbar-link-system-status',
);
toReturn.submenuItem =
statReportElement.textContent === 'Status report';
done(toReturn);
}, 100);
},
[],
(result) => {
const expectedTrue = {
toolbarOrientation: 'get("orientation") has expected result',
submenuItem: 'opening submenu has expected result',
};
browser.assert.deepEqual(
Object.keys(expectedTrue).sort(),
Object.keys(result.value).sort(),
'Keys to check match',
);
Object.keys(expectedTrue).forEach((property) => {
browser.assert.equal(
result.value[property],
true,
expectedTrue[property],
);
});
},
);
},
};
core/modules/toolbar/tests/src/Nightwatch/Tests/toolbarTest.js 0 → 100644
+ 385
− 0
View file @ b9b40f30
/**
* @file
* Test the expected toolbar functionality.
*/
const itemAdministration = '#toolbar-item-administration';
const itemAdministrationTray = '#toolbar-item-administration-tray';
const adminOrientationButton = `${itemAdministrationTray} .toolbar-toggle-orientation button`;
const itemUser = '#toolbar-item-user';
const itemUserTray = '#toolbar-item-user-tray';
const userOrientationBtn = `${itemUserTray} .toolbar-toggle-orientation button`;
module.exports = {
'@tags': ['core'],
before(browser) {
browser.drupalInstall().drupalLoginAsAdmin(() => {
browser
.drupalRelativeURL('/admin/modules')
.setValue('input[type="search"]', 'toolbar')
.waitForElementVisible('input[name="modules[toolbar][enable]"]', 1000)
.click('input[name="modules[breakpoint][enable]"]')
.click('input[name="modules[toolbar][enable]"]')
.click('input[type="submit"]');
});
browser
.drupalCreateUser({
name: 'user',
password: '123',
permissions: [
'access site reports',
'access toolbar',
'access administration pages',
'administer menu',
'administer modules',
'administer site configuration',
'administer account settings',
'administer software updates',
'access content',
'administer permissions',
'administer users',
],
})
.drupalLogin({ name: 'user', password: '123' })
.drupalRelativeURL('/')
.waitForElementPresent('#toolbar-administration', 10000);
},
beforeEach(browser) {
browser.resizeWindow(1920, 1080);
browser.execute(function () {
// To clear active tab/tray from previous tests.
localStorage.clear();
// Clear escapeAdmin URL values.
sessionStorage.clear();
});
browser.drupalRelativeURL('/');
},
after(browser) {
browser.drupalUninstall();
},
'Change tab': (browser) => {
browser.waitForElementPresent(itemUserTray);
browser.assert.not.cssClassPresent(itemUser, 'is-active');
browser.assert.not.cssClassPresent(itemUserTray, 'is-active');
browser.click(itemUser);
browser.assert.cssClassPresent(itemUser, 'is-active');
browser.assert.cssClassPresent(itemUserTray, 'is-active');
},
'Change orientation': (browser) => {
browser.waitForElementPresent(adminOrientationButton);
browser.assert.cssClassPresent(
itemAdministrationTray,
'is-active toolbar-tray-horizontal',
);
browser.click(adminOrientationButton);
browser.assert.cssClassPresent(
itemAdministrationTray,
'is-active toolbar-tray-vertical',
);
browser.click(adminOrientationButton);
browser.assert.cssClassPresent(
itemAdministrationTray,
'is-active toolbar-tray-horizontal',
);
},
'Toggle tray': (browser) => {
browser.waitForElementPresent(itemUserTray);
browser.click(itemUser);
browser.assert.cssClassPresent(itemUserTray, 'is-active');
browser.click(itemUser);
browser.assert.not.cssClassPresent(itemUserTray, 'is-active');
browser.click(itemUser);
browser.assert.cssClassPresent(itemUserTray, 'is-active');
},
'Toggle submenu and sub-submenu': (browser) => {
browser.waitForElementPresent(adminOrientationButton);
browser.assert.cssClassPresent(
itemAdministrationTray,
'is-active toolbar-tray-horizontal',
);
browser.click(adminOrientationButton);
browser.assert.cssClassPresent(
itemAdministrationTray,
'is-active toolbar-tray-vertical',
);
browser.waitForElementPresent(
'#toolbar-item-administration-tray li:nth-child(4) button',
);
browser.assert.not.cssClassPresent(
'#toolbar-item-administration-tray li:nth-child(4)',
'open',
);
browser.assert.not.cssClassPresent(
'#toolbar-item-administration-tray li:nth-child(4) button',
'open',
);
browser.click('#toolbar-item-administration-tray li:nth-child(4) button');
browser.assert.cssClassPresent(
'#toolbar-item-administration-tray li:nth-child(4)',
'open',
);
browser.assert.cssClassPresent(
'#toolbar-item-administration-tray li:nth-child(4) button',
'open',
);
browser.expect
.element('#toolbar-link-user-admin_index')
.text.to.equal('People');
browser.expect
.element('#toolbar-link-system-admin_config_system')
.text.to.equal('System');
// Check sub-submenu.
browser.waitForElementPresent(
'#toolbar-item-administration-tray li.menu-item.level-2',
);
browser.assert.not.cssClassPresent(
'#toolbar-item-administration-tray li.menu-item.level-2',
'open',
);
browser.assert.not.cssClassPresent(
'#toolbar-item-administration-tray li.menu-item.level-2 button',
'open',
);
browser.click(
'#toolbar-item-administration-tray li.menu-item.level-2 button',
);
browser.assert.cssClassPresent(
'#toolbar-item-administration-tray li.menu-item.level-2',
'open',
);
browser.assert.cssClassPresent(
'#toolbar-item-administration-tray li.menu-item.level-2 button',
'open',
);
browser.expect
.element('#toolbar-link-entity-user-admin_form')
.text.to.equal('Account settings');
},
'Narrow toolbar width breakpoint': (browser) => {
browser.waitForElementPresent(adminOrientationButton);
browser.assert.cssClassPresent(
itemAdministrationTray,
'is-active toolbar-tray-horizontal',
);
browser.assert.cssClassPresent(
'#toolbar-administration',
'toolbar-oriented',
);
browser.resizeWindow(263, 900);
browser.assert.cssClassPresent(
itemAdministrationTray,
'is-active toolbar-tray-vertical',
);
browser.assert.not.cssClassPresent(itemAdministration, 'toolbar-oriented');
},
'Standard width toolbar breakpoint': (browser) => {
browser.resizeWindow(1000, 900);
browser.waitForElementPresent(adminOrientationButton);
browser.assert.cssClassPresent('body', 'toolbar-fixed');
browser.resizeWindow(609, 900);
browser.assert.cssClassPresent(
itemAdministrationTray,
'is-active toolbar-tray-vertical',
);
browser.assert.not.cssClassPresent('body', 'toolbar-fixed');
},
'Wide toolbar breakpoint': (browser) => {
browser.waitForElementPresent(adminOrientationButton);
browser.resizeWindow(975, 900);
browser.assert.cssClassPresent(
itemAdministrationTray,
'is-active toolbar-tray-vertical',
);
},
'Back to site link': (browser) => {
const escapeSelector = '[data-toolbar-escape-admin]';
browser.drupalRelativeURL('/user');
browser.drupalRelativeURL('/admin');
// Don't check the visibility as stark doesn't add the .path-admin class
// to the <body> required to display the button.
browser.assert.attributeContains(escapeSelector, 'href', '/user/2');
},
'Aural view test: tray orientation': (browser) => {
browser.waitForElementPresent(
'#toolbar-item-administration-tray .toolbar-toggle-orientation button',
);
browser.executeAsync(
function (done) {
Drupal.announce = done;
const orientationButton = document.querySelector(
'#toolbar-item-administration-tray .toolbar-toggle-orientation button',
);
orientationButton.dispatchEvent(
new MouseEvent('click', { bubbles: true }),
);
},
(result) => {
browser.assert.equal(
result.value,
'Tray orientation changed to vertical.',
);
},
);
browser.executeAsync(
function (done) {
Drupal.announce = done;
const orientationButton = document.querySelector(
'#toolbar-item-administration-tray .toolbar-toggle-orientation button',
);
orientationButton.dispatchEvent(
new MouseEvent('click', { bubbles: true }),
);
},
(result) => {
browser.assert.equal(
result.value,
'Tray orientation changed to horizontal.',
);
},
);
},
'Aural view test: tray toggle': (browser) => {
browser.executeAsync(
function (done) {
Drupal.announce = done;
const $adminButton = jQuery('#toolbar-item-administration');
$adminButton.trigger('click');
},
(result) => {
browser.assert.equal(
result.value,
'Tray "Administration menu" closed.',
);
},
);
browser.executeAsync(
function (done) {
Drupal.announce = done;
const $adminButton = jQuery('#toolbar-item-administration');
$adminButton.trigger('click');
},
(result) => {
browser.assert.equal(
result.value,
'Tray "Administration menu" opened.',
);
},
);
},
'Toolbar event: drupalToolbarOrientationChange': (browser) => {
browser.executeAsync(
function (done) {
jQuery(document).on(
'drupalToolbarOrientationChange',
function (event, orientation) {
done(orientation);
},
);
const orientationButton = document.querySelector(
'#toolbar-item-administration-tray .toolbar-toggle-orientation button',
);
orientationButton.dispatchEvent(
new MouseEvent('click', { bubbles: true }),
);
},
(result) => {
browser.assert.equal(result.value, 'vertical');
},
);
},
'Toolbar event: drupalToolbarTabChange': (browser) => {
browser.executeAsync(
function (done) {
jQuery(document).on('drupalToolbarTabChange', function (event, tab) {
done(tab.id);
});
jQuery('#toolbar-item-user').trigger('click');
},
(result) => {
browser.assert.equal(result.value, 'toolbar-item-user');
},
);
},
'Toolbar event: drupalToolbarTrayChange': (browser) => {
browser.executeAsync(
function (done) {
const $adminButton = jQuery('#toolbar-item-administration');
// Hide the admin menu first, this event is not firing reliably
// otherwise.
$adminButton.trigger('click');
jQuery(document).on('drupalToolbarTrayChange', function (event, tray) {
done(tray.id);
});
$adminButton.trigger('click');
},
(result) => {
browser.assert.equal(result.value, 'toolbar-item-administration-tray');
},
);
},
'Locked toolbar vertical wide viewport': (browser) => {
browser.resizeWindow(1000, 900);
browser.waitForElementPresent(adminOrientationButton);
// eslint-disable-next-line no-unused-expressions
browser.expect.element(adminOrientationButton).to.be.visible;
browser.resizeWindow(975, 900);
browser.assert.cssClassPresent(
itemAdministrationTray,
'is-active toolbar-tray-vertical',
);
// eslint-disable-next-line no-unused-expressions
browser.expect.element(adminOrientationButton).to.not.be.visible;
},
'Settings are retained on refresh': (browser) => {
browser.waitForElementPresent(itemUser);
// Set user as active tab.
browser.assert.not.cssClassPresent(itemUser, 'is-active');
browser.assert.not.cssClassPresent(itemUserTray, 'is-active');
browser.click(itemUser);
// Check tab and tray are open.
browser.assert.cssClassPresent(itemUser, 'is-active');
browser.assert.cssClassPresent(itemUserTray, 'is-active');
// Set orientation to vertical.
browser.waitForElementPresent(userOrientationBtn);
browser.assert.cssClassPresent(
itemUserTray,
'is-active toolbar-tray-horizontal',
);
browser.click(userOrientationBtn);
browser.assert.cssClassPresent(
itemUserTray,
'is-active toolbar-tray-vertical',
);
browser.refresh();
// Check user tab is active.
browser.assert.cssClassPresent(itemUser, 'is-active');
// Check tray is active and orientation is vertical.
browser.assert.cssClassPresent(
itemUserTray,
'is-active toolbar-tray-vertical',
);
},
'Check toolbar overlap with page content': (browser) => {
browser.assert.cssClassPresent('body', 'toolbar-horizontal');
browser.execute(
() => {
const toolbar = document.querySelector('#toolbar-administration');
const nextElement = toolbar.nextElementSibling.getBoundingClientRect();
const tray = document
.querySelector('#toolbar-item-administration-tray')
.getBoundingClientRect();
// Page content should start after the toolbar height to not overlap.
return nextElement.top > tray.top + tray.height;
},
(result) => {
browser.assert.equal(
result.value,
true,
'Toolbar and page content do not overlap',
);
},
);
},
};
core/scripts/dev/commit-code-check.sh
+ 1
− 1
View file @ b9b40f30
......@@ -286,7 +286,7 @@
############################################################################
### JAVASCRIPT FILES
############################################################################
if [[ -f "$TOP_LEVEL/$FILE" ]] && [[ $FILE =~ \.js$ ]] && [[ ! $FILE =~ ^core/tests/Drupal/Nightwatch ]] && [[ ! $FILE =~ ^core/assets/vendor/jquery.ui/ui ]] && [[ ! $FILE =~ ^core/modules/ckeditor5/js/ckeditor5_plugins ]]; then
if [[ -f "$TOP_LEVEL/$FILE" ]] && [[ $FILE =~ \.js$ ]] && [[ ! $FILE =~ ^core/tests/Drupal/Nightwatch ]] && [[ ! $FILE =~ /tests/src/Nightwatch/ ]] && [[ ! $FILE =~ ^core/assets/vendor/jquery.ui/ui ]] && [[ ! $FILE =~ ^core/modules/ckeditor5/js/ckeditor5_plugins ]]; then
# Work out the root name of the JavaScript so we can ensure that the ES6
# version has been compiled correctly.
if [[ $FILE =~ \.es6\.js$ ]]; then
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment