Issue #3244621 by mherchel, rikki_iki, catch, cathwaldron, rachel_norfolk,... (f8a197f5) · Commits · project / drupal

core/tests/Drupal/Nightwatch/Tests/Olivero/oliveroPrimaryTabsTest.js

0 → 100644

+50 −0

Original line number	Diff line number	Diff line
		const primaryTabsWrapper = '[data-drupal-nav-primary-tabs]';
		const activeTab = '.tabs__tab.is-active';
		const inactiveTab = '.tabs__tab:not(.is-active)';
		const mobileToggle = `${activeTab} .tabs__trigger`;

		module.exports = {
		'@tags': ['core', 'olivero'],
		before(browser) {
		browser
		.drupalInstall({
		setupFile:
		'core/tests/Drupal/TestSite/TestSiteOliveroInstallTestScript.php',
		installProfile: 'minimal',
		})
		.drupalCreateUser({
		name: 'user',
		password: '123',
		permissions: ['administer nodes'],
		})
		.drupalLogin({ name: 'user', password: '123' });
		browser.resizeWindow(1600, 800);
		},
		after(browser) {
		browser.drupalUninstall();
		},
		'Verify desktop primary tab display': (browser) => {
		browser
		.drupalRelativeURL('/node/1')
		.waitForElementVisible(primaryTabsWrapper)
		.assert.visible(activeTab)
		.assert.visible(inactiveTab)
		.assert.not.visible(mobileToggle);
		},
		'Verify mobile tab display and click functionality': (browser) => {
		browser
		.resizeWindow(699, 800)
		.drupalRelativeURL('/node/1')
		.waitForElementVisible(primaryTabsWrapper)
		.assert.visible(activeTab)
		.assert.not.visible(inactiveTab)
		.assert.visible(mobileToggle)
		.assert.attributeEquals(mobileToggle, 'aria-expanded', 'false')
		.click(mobileToggle)
		.waitForElementVisible(inactiveTab)
		.assert.attributeEquals(mobileToggle, 'aria-expanded', 'true')
		.click(mobileToggle)
		.waitForElementNotVisible(inactiveTab)
		.assert.attributeEquals(mobileToggle, 'aria-expanded', 'false');
		},
		};

+11 −9

Original line number	Diff line number	Diff line
		/**
		* @file
		* Provides interactivity for showing and hiding the tabs at mobile widths.
		* Provides interactivity for showing and hiding the primary tabs at mobile widths.
		*/

		((Drupal, once) => {
		/**
		* Initialize the tabs.
		* Initialize the primary tabs.
		*
		* @param {HTMLElement} el
		* The DOM element containing the tabs.
		* The DOM element containing the primary tabs.
		*/
		function init(el) {
		const tabs = el.querySelector('.tabs');
		@@ -16,7 +16,7 @@
		const activeTab = tabs.querySelector('.is-active');

		/**
		* Determines if tabs are expanded for mobile layouts.
		* Determines if primary tabs are expanded for mobile layouts.
		*
		* @return {boolean}
		* Whether the tabs trigger element is expanded.
		@@ -26,7 +26,7 @@
		}

		/**
		* Controls tab visibility on click events.
		* Controls primary tab visibility on click events.
		*
		* @param {Event} e
		* The event object.
		@@ -54,16 +54,18 @@
		}

		/**
		* Initialize the tabs.
		* Initialize the primary tabs.
		*
		* @type {Drupal~behavior}
		*
		* @prop {Drupal~behaviorAttach} attach
		* Display tabs according to the screen width.
		* Display primary tabs according to the screen width.
		*/
		Drupal.behaviors.tabs = {
		Drupal.behaviors.primaryTabs = {
		attach(context) {
		once('olivero-tabs', '[data-drupal-nav-tabs]', context).forEach(init);
		once('olivero-tabs', '[data-drupal-nav-primary-tabs]', context).forEach(
		init,
		);
		},
		};
		})(Drupal, once);

+2 −2

Original line number	Diff line number	Diff line
		@@ -35,9 +35,9 @@
		tabs.querySelector('.tabs__trigger').addEventListener('click', handleTriggerClick);
		}

		Drupal.behaviors.tabs = {
		Drupal.behaviors.primaryTabs = {
		attach: function attach(context) {
		once('olivero-tabs', '[data-drupal-nav-tabs]', context).forEach(init);
		once('olivero-tabs', '[data-drupal-nav-primary-tabs]', context).forEach(init);
		}
		};
		})(Drupal, once);
		No newline at end of file

+2 −2

Original line number	Diff line number	Diff line
		@@ -18,13 +18,13 @@

		{% if primary %}
		<h2 id="primary-tabs-title" class="visually-hidden">{{ 'Primary tabs'\|t }}</h2>
		<nav role="navigation" class="tabs-wrapper" aria-labelledby="primary-tabs-title" data-drupal-nav-tabs>
		<nav role="navigation" class="tabs-wrapper" aria-labelledby="primary-tabs-title" data-drupal-nav-primary-tabs>
		<ul class="tabs tabs--primary">{{ primary }}</ul>
		</nav>
		{% endif %}
		{% if secondary %}
		<h2 id="secondary-tabs-title" class="visually-hidden">{{ 'Secondary tabs'\|t }}</h2>
		<nav role="navigation" class="tabs-wrapper" aria-labelledby="secondary-tabs-title" data-drupal-nav-tabs>
		<nav role="navigation" class="tabs-wrapper" aria-labelledby="secondary-tabs-title">
		<ul class="tabs tabs--secondary">{{ secondary }}</ul>
		</nav>
		{% endif %}