Revert "Issue #3255809 by nod_, lauriii, hooroomoo: Add nightwatch tests for toolbar" (2f757712) · Commits · project / drupal

core/modules/toolbar/tests/src/Nightwatch/Tests/toolbarApiTest.js

deleted100644 → 0

+0 −270

Original line number	Diff line number	Diff line
		/**
		* @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

deleted100644 → 0

+0 −385

Original line number	Diff line number	Diff line
		/**
		* @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

Original line number	Diff line number	Diff line
		@@ -320,7 +320,7 @@
		############################################################################
		### JAVASCRIPT FILES
		############################################################################
		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
		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
		# 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