MWPW-154480 Split global-navigation.test.js into multiple files

test/blocks/global-navigation/gnav-brand.test.js

@@ -0,0 +1,103 @@
+/* eslint-disable no-restricted-syntax */
+import { expect } from '@esm-bundle/chai';
+import {
+  createFullGlobalNavigation,
+  selectors,
+  isElementVisible,
+} from './test-utilities.js';
+import logoOnlyNav from './mocks/global-navigation-only-logo.plain.js';
+import brandOnlyNav from './mocks/global-navigation-only-brand.plain.js';
+import nonSvgBrandOnlyNav from './mocks/global-navigation-only-non-svg-brand.plain.js';
+import noLogoBrandOnlyNav from './mocks/global-navigation-only-brand-no-image.plain.js';
+import noBrandImageOnlyNav from './mocks/global-navigation-only-brand-no-explicit-image.js';
+
+describe('brand', () => {
+  before(() => {
+    document.head.innerHTML = `<link rel="icon" href="/libs/img/favicons/favicon.ico" size="any">
+    <script src="https://auth.services.adobe.com/imslib/imslib.min.js" type="javascript/blocked" data-loaded="true"></script>
+    <script src="https://stage.adobeccstatic.com/unav/1.1/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
+    `;
+  });
+
+  describe('desktop', () => {
+    it('should render the whole block', async () => {
+      await createFullGlobalNavigation();
+
+      const container = document.querySelector(selectors.brandContainer);
+      const image = container.querySelector(selectors.brandImage);
+      const brandText = container.querySelector(selectors.brandLabel);
+
+      expect(isElementVisible(image)).to.equal(true);
+      expect(isElementVisible(brandText)).to.equal(true);
+      expect(brandText.innerText).to.equal('Adobe');
+    });
+
+    it('should not render the brand block if it was not authored', async () => {
+      await createFullGlobalNavigation({ globalNavigation: logoOnlyNav });
+
+      const container = document.querySelector(selectors.brandContainer);
+      const image = container.querySelector(selectors.brandImage);
+      const brandText = container.querySelector(selectors.brandLabel);
+
+      expect(isElementVisible(image)).to.equal(false);
+      expect(isElementVisible(brandText)).to.equal(false);
+    });
+
+    it('should only render the brand block', async () => {
+      await createFullGlobalNavigation({ globalNavigation: brandOnlyNav });
+
+      expect(isElementVisible(document.querySelector(selectors.brandContainer))).to.equal(true);
+      expect(isElementVisible(document.querySelector(selectors.logo))).to.equal(false);
+      expect(isElementVisible(document.querySelector(selectors.search))).to.equal(false);
+      expect(isElementVisible(document.querySelector(selectors.profile))).to.equal(false);
+      expect(document.querySelectorAll(selectors.navItem).length).to.equal(0);
+    });
+
+    it('should add an alt text if one is set', async () => {
+      await createFullGlobalNavigation({ globalNavigation: nonSvgBrandOnlyNav });
+      const brandImage = document.querySelector(`${selectors.brandImage} img`);
+      expect(isElementVisible(brandImage)).to.equal(true);
+      expect(brandImage.getAttribute('alt')).to.equal('Alternative text');
+    });
+
+    it('should not render an image if the "no-logo" modifier is used', async () => {
+      await createFullGlobalNavigation({ globalNavigation: noLogoBrandOnlyNav });
+      const brandImage = document.querySelector(`${selectors.brandImage}`);
+      expect(isElementVisible(brandImage)).to.equal(false);
+    });
+
+    it('should render a default image if the one defined is invalid', async () => {
+      await createFullGlobalNavigation({ globalNavigation: noBrandImageOnlyNav });
+      const brandImage = document.querySelector(`${selectors.brandImage}`);
+      expect(isElementVisible(brandImage)).to.equal(true);
+    });
+  });
+
+  describe('small desktop', () => {
+    it('should render the logo', async () => {
+      await createFullGlobalNavigation({ viewport: 'smallDesktop' });
+
+      const container = document.querySelector(selectors.brandContainer);
+      const image = container.querySelector(selectors.brandImage);
+      const brandText = container.querySelector(selectors.brandLabel);
+
+      expect(isElementVisible(image)).to.equal(true);
+      expect(isElementVisible(brandText)).to.equal(false);
+      expect(brandText.innerText).to.equal('Adobe');
+    });
+  });
+
+  describe('mobile', () => {
+    it('mobile - should render the logo', async () => {
+      await createFullGlobalNavigation({ viewport: 'mobile' });
+
+      const container = document.querySelector(selectors.brandContainer);
+      const image = container.querySelector(selectors.brandImage);
+      const brandText = container.querySelector(selectors.brandLabel);
+
+      expect(isElementVisible(image)).to.equal(true);
+      expect(isElementVisible(brandText)).to.equal(true);
+      expect(brandText.innerText).to.equal('Adobe');
+    });
+  });
+});

test/blocks/global-navigation/gnav-cross-cloud.test.js

@@ -0,0 +1,58 @@
+/* eslint-disable no-restricted-syntax */
+import { expect } from '@esm-bundle/chai';
+import {
+  createFullGlobalNavigation,
+  selectors,
+  isElementVisible,
+} from './test-utilities.js';
+import globalNavigationCrossCloud from './mocks/global-navigation-cross-cloud.plain.js';
+
+describe('Cross Cloud Menu', () => {
+  before(() => {
+    document.head.innerHTML = `<link rel="icon" href="/libs/img/favicons/favicon.ico" size="any">
+    <script src="https://auth.services.adobe.com/imslib/imslib.min.js" type="javascript/blocked" data-loaded="true"></script>
+    <script src="https://stage.adobeccstatic.com/unav/1.1/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
+    `;
+  });
+
+  describe('desktop', () => {
+    it('should render the Cross Cloud Menu', async () => {
+      await createFullGlobalNavigation({ globalNavigation: globalNavigationCrossCloud });
+      const crossCloudMenu = document.querySelector(selectors.crossCloudMenuWrapper);
+
+      expect(crossCloudMenu).to.exist;
+      expect(isElementVisible(crossCloudMenu)).to.equal(false);
+
+      document.querySelector(`${selectors.largeMenu} ${selectors.navLink}`).click();
+
+      crossCloudMenu.querySelectorAll(selectors.navLink).forEach((el) => {
+        expect(isElementVisible(el)).to.equal(true);
+      });
+    });
+
+    it('should not render Cross Cloud Menu if not authored', async () => {
+      await createFullGlobalNavigation();
+      expect(document.querySelector(selectors.crossCloudMenuWrapper)).to.not.exist;
+    });
+  });
+
+  describe('small desktop', () => {
+    it('should not render the Cross Cloud Menu', async () => {
+      await createFullGlobalNavigation({ globalNavigation: globalNavigationCrossCloud, viewport: 'smallDesktop' });
+      document.querySelector(`${selectors.largeMenu} ${selectors.navLink}`).click();
+
+      expect(isElementVisible(document.querySelector(selectors.crossCloudMenuWrapper)))
+        .to.equal(false);
+    });
+  });
+
+  describe('mobile', () => {
+    it('should not render the Cross Cloud Menu', async () => {
+      await createFullGlobalNavigation({ viewport: 'mobile' });
+      document.querySelector(`${selectors.largeMenu} ${selectors.navLink}`).click();
+
+      expect(isElementVisible(document.querySelector(selectors.crossCloudMenuWrapper)))
+        .to.equal(false);
+    });
+  });
+});

test/blocks/global-navigation/gnav-main-nav-popup.test.js

@@ -0,0 +1,183 @@
+/* eslint-disable no-restricted-syntax */
+import { expect } from '@esm-bundle/chai';
+import sinon from 'sinon';
+import {
+  createFullGlobalNavigation,
+  selectors,
+  isElementVisible,
+} from './test-utilities.js';
+import { toFragment } from '../../../libs/blocks/global-navigation/utilities/utilities.js';
+import globalNavigationMock from './mocks/global-navigation.plain.js';
+import globalNavigationWideColumnMock from './mocks/global-navigation-wide-column.plain.js';
+
+describe('main nav popups', () => {
+  before(() => {
+    document.head.innerHTML = `<link rel="icon" href="/libs/img/favicons/favicon.ico" size="any">
+    <script src="https://auth.services.adobe.com/imslib/imslib.min.js" type="javascript/blocked" data-loaded="true"></script>
+    <script src="https://stage.adobeccstatic.com/unav/1.1/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
+    `;
+  });
+
+  describe('desktop', () => {
+    it('should render a popup properly', async () => {
+      await createFullGlobalNavigation();
+
+      const navItem = document.querySelector(selectors.navItem);
+      const navLink = navItem.querySelector(selectors.navLink);
+      const popup = navItem.querySelector(selectors.popup);
+      const columns = popup.querySelectorAll(selectors.column);
+      const navLinks = popup.querySelectorAll(selectors.navLink);
+
+      navLink.click();
+
+      expect(columns.length).to.equal(4);
+      expect(navLinks.length).to.equal(22);
+
+      [...columns].forEach((column) => {
+        expect(isElementVisible(column)).to.equal(true);
+      });
+
+      [...navLinks].forEach((link) => {
+        expect(isElementVisible(link)).to.equal(true);
+      });
+
+      const hasLinkgroupModifier = document.querySelector(`${selectors.navLink}--blue`) instanceof HTMLElement;
+      expect(hasLinkgroupModifier).to.equal(true);
+    });
+
+    it('should render popups with wide columns', async () => {
+      await createFullGlobalNavigation({ globalNavigation: globalNavigationWideColumnMock });
+      expect(document.querySelector('.feds-navItem--section .feds-menu-column--group .feds-menu-column + .feds-menu-column')).to.exist;
+      expect(document.querySelector('.column-break')).to.not.exist;
+    });
+
+    it('should render the promo', async () => {
+      await createFullGlobalNavigation();
+
+      document.querySelector(selectors.mainNavToggle).click();
+      document.querySelector(selectors.navLink).click();
+
+      expect(isElementVisible(document.querySelector(selectors.promoImage))).to.equal(true);
+    });
+
+    it('should allow CTAs in Promo boxes', async () => {
+      await createFullGlobalNavigation();
+      expect(document.querySelector(`${selectors.promo}${selectors.promo}--dark ${selectors.cta}`)).to.exist;
+    });
+
+    it('should render promo elements in initial order', async () => {
+      // Initial template order is text, then image
+      await createFullGlobalNavigation();
+
+      const imgAfterTxt = document.querySelector('.feds-promo-content + .feds-promo-image');
+      expect(imgAfterTxt).to.exist;
+
+      // Switch original order to be image, then text
+      const template = toFragment`<div></div>`;
+      template.innerHTML = globalNavigationMock;
+      const templatePromo = template.querySelector('.gnav-promo');
+      const templatePromoContent = templatePromo.firstElementChild;
+      templatePromoContent.remove();
+      templatePromo.append(templatePromoContent);
+      await createFullGlobalNavigation({ globalNavigation: template.innerHTML });
+
+      const txtAfterImg = document.querySelector('.feds-promo-image + .feds-promo-content');
+      expect(txtAfterImg).to.exist;
+    });
+  });
+
+  describe('small desktop', () => {
+    it('should render a popup properly', async () => {
+      await createFullGlobalNavigation({ viewport: 'smallDesktop' });
+
+      const navItem = document.querySelector(selectors.navItem);
+      const navLink = navItem.querySelector(selectors.navLink);
+      const popup = navItem.querySelector(selectors.popup);
+      const columns = popup.querySelectorAll(selectors.column);
+      const navLinks = popup.querySelectorAll(selectors.navLink);
+
+      navLink.click();
+
+      expect(columns.length).to.equal(4);
+      expect(navLinks.length).to.equal(22);
+
+      [...columns].forEach((column) => {
+        expect(isElementVisible(column)).to.equal(true);
+      });
+
+      [...navLinks].forEach((link) => {
+        expect(isElementVisible(link)).to.equal(true);
+      });
+
+      const hasLinkgroupModifier = document.querySelector(`${selectors.navLink}--blue`) instanceof HTMLElement;
+      expect(hasLinkgroupModifier).to.equal(true);
+    });
+
+    it('should render the promo', async () => {
+      await createFullGlobalNavigation({ viewport: 'smallDesktop' });
+
+      document.querySelector(selectors.mainNavToggle).click();
+      document.querySelector(selectors.navLink).click();
+
+      expect(isElementVisible(document.querySelector(selectors.promoImage))).to.equal(true);
+    });
+  });
+
+  describe('mobile', () => {
+    let clock;
+
+    beforeEach(async () => {
+      clock = sinon.useFakeTimers({
+        toFake: ['setTimeout'],
+        shouldAdvanceTime: true,
+      });
+    });
+
+    afterEach(() => {
+      clock.restore();
+    });
+
+    it('should open a popup and headline on click', async () => {
+      await createFullGlobalNavigation({ viewport: 'mobile' });
+
+      document.querySelector(selectors.mainNavToggle).click();
+
+      const navItem = document.querySelector(selectors.navItem);
+      const navLink = navItem.querySelector(selectors.navLink);
+      const popup = navItem.querySelector(selectors.popup);
+      const headline = popup.querySelector(selectors.headline);
+      const headlinePopupItems = popup.querySelector(selectors.popupItems);
+
+      expect(isElementVisible(popup.querySelector(selectors.navLink))).to.equal(false);
+      expect(navLink.getAttribute('aria-expanded')).to.equal('false');
+      expect(navLink.getAttribute('daa-lh')).to.equal('header|Open');
+      expect(isElementVisible(popup)).to.equal(false);
+      expect(headline.getAttribute('aria-expanded')).to.equal('false');
+      expect(isElementVisible(headlinePopupItems)).to.equal(false);
+
+      navLink.click();
+      await clock.runAllAsync();
+
+      expect(isElementVisible(popup.querySelector(selectors.navLink))).to.equal(true);
+      expect(navLink.getAttribute('aria-expanded')).to.equal('true');
+      expect(navLink.getAttribute('daa-lh')).to.equal('header|Close');
+      expect(isElementVisible(popup)).to.equal(true);
+      expect(headline.getAttribute('aria-expanded')).to.equal('false');
+      expect(isElementVisible(headlinePopupItems)).to.equal(false);
+
+      headline.click();
+
+      expect(headline.getAttribute('aria-expanded')).to.equal('true');
+      expect(isElementVisible(headlinePopupItems)).to.equal(true);
+    });
+
+    it('should not render the promo', async () => {
+      await createFullGlobalNavigation({ viewport: 'mobile' });
+
+      document.querySelector(selectors.mainNavToggle).click();
+      document.querySelector(selectors.navLink).click();
+
+      expect(isElementVisible(document.querySelector(selectors.promoImage))).to.equal(false);
+    });
+  });
+});