test(masthead): add e2e coverage for cloud masthead (experimental) (#…

…8174)

### Related Ticket(s)

Closes #8133 & #8138

### Changelog

**New**

- Adds e2e coverage for the cloud masthead

.github/workflows/e2e-tests.yml

@@ -29,6 +29,12 @@ jobs:
         run: yarn install --offline
       - name: Build project
         run: yarn lerna run --stream --ignore @carbon/ibmdotcom-react build
+      - name: Set Cloud Masthead env var
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/web-components/.env
+        env:
+          DDS_CLOUD_MASTHEAD: true
       - name: Build storybook
         working-directory: packages/web-components
         run: yarn build-storybook

packages/web-components/src/components/masthead/__stories__/cloud-masthead.stories.ts

@@ -31,14 +31,17 @@ const platformData = {
 };
 
 const urlObject = {
+  default: {
+    url: 'https://www.ibm.com/cloud',
+  },
   'en-US': {
-    url: 'https://www.example.com/us-en',
+    url: 'https://www.ibm.com/us-en/cloud',
   },
   'fr-FR': {
-    url: 'https://www.example.com/fr-fr/sample',
+    url: 'https://www.ibm.com/fr-fr/cloud',
   },
   'es-MX': {
-    url: 'https://www.example.com/es-mx/sample',
+    url: 'https://www.ibm.com/es-mx/cloud',
   },
 };
 

packages/web-components/tests/e2e-storybook/cypress/integration/masthead/cloud/cloud-masthead.e2e.js

@@ -0,0 +1,255 @@
+/**
+ * Copyright IBM Corp. 2021, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Sets the correct path (default Masthead)
+ *
+ * @type {string}
+ * @private
+ */
+const _pathDefault = '/iframe.html?id=components-cloud-masthead--default';
+
+function clickUntilGone($el) {
+  if ($el.is(':visible')) {
+    cy.get($el)
+      .click()
+      .wait(1000)
+      .then($clicked => {
+        if ($clicked.is(':visible')) {
+          clickUntilGone($clicked);
+        }
+      });
+  }
+}
+
+if (Cypress.env('DDS_CLOUD_MASTHEAD').toLowerCase() === 'true') {
+  describe('dds-masthead | cloud platform (desktop)', () => {
+    beforeEach(() => {
+      cy.viewport(1280, 780);
+      cy.visit(`/${_pathDefault}`);
+    });
+
+    it('should have url for IBM logo', () => {
+      cy.get('dds-masthead-logo')
+        .shadow()
+        .find('a')
+        .then($link => {
+          const url = new URL($link.prop('href'));
+          expect(['www.ibm.com', 'ibm.com']).to.include(url.host);
+          expect(url.pathname).to.be.equal('/');
+        });
+    });
+
+    it('should have cloud platform name', () => {
+      cy.get('dds-cloud-top-nav-name')
+        .shadow()
+        .find('a')
+        .then($link => {
+          const url = new URL($link.prop('href'));
+          const [langOrCloud, cloudOrNull] = url.split('/').filter(segment => segment !== '');
+          expect(['www.ibm.com', 'ibm.com']).to.include(url.host);
+          expect([langOrCloud, cloudOrNull]).to.include('cloud');
+        });
+    });
+
+    it('should load top-nav with no more than one active item', () => {
+      cy.get('dds-top-nav > *').then($topNavItems => {
+        const $activeItems = $topNavItems.filter('[active]');
+        expect($topNavItems.length).to.be.greaterThan(1);
+        expect($activeItems.length).to.be.equal(1);
+      });
+    });
+
+    it('should have tabbed-interface megamenus', () => {
+      cy.get('dds-top-nav > dds-megamenu-top-nav-menu').each($megaMenuNavItem => {
+        cy.get($megaMenuNavItem)
+          .shadow()
+          .find('a')
+          .click({ force: true })
+          .parent()
+          .find('dds-cloud-megamenu')
+          .should('be.visible')
+          .get('dds-cloud-megamenu-tab', { withinSubject: $megaMenuNavItem })
+          .each($tab => {
+            cy.get($tab)
+              .click('right')
+              .then($tab => {
+                const panelSelector = `#${$tab.attr('target')}`;
+                cy.get(panelSelector).should('be.visible');
+              });
+          });
+      });
+    });
+
+    it('should have functioning search bar with typeahead', () => {
+      cy.get('.bx--header__search--search')
+        .click()
+        .wait(1000)
+        .get('.bx--header__search--input')
+        .should('have.focus')
+        .type('test', { force: true })
+        .get('dds-search-with-typeahead-item')
+        .then($results => {
+          expect($results.length).to.be.equal(10);
+        })
+        .get('dds-megamenu-top-nav-menu, dds-top-nav-menu, dds-top-nav-menu-item')
+        .should('not.be.visible');
+    });
+
+    it('should have contact, login, and create-account CTAs', () => {
+      cy.get('dds-cloud-button-cta[data-ibm-contact="contact-link"]')
+        .should('be.visible')
+        .click()
+        .get('dds-cloud-button-cta[href="https://cloud.ibm.com/login"]')
+        .should('be.visible')
+        .click()
+        .get('dds-cloud-button-cta[kind="primary"]')
+        .should('be.visible')
+        .click();
+    });
+
+    it('should be able to scroll all nav elements into view if necessary', () => {
+      cy.viewport(960, 780)
+        .get('dds-top-nav')
+        .shadow()
+        .find('button')
+        .should($buttons => {
+          expect($buttons).to.have.length(2);
+        })
+        .then($buttons => {
+          let navItem, prevOffsetLeft;
+          cy.get('.bx--header__nav')
+            .then($nav => {
+              navItem = $nav;
+              prevOffsetLeft = $nav.offset().left;
+            })
+            .get($buttons[0])
+            .click({ force: true })
+            .wait(1000)
+            .click({ force: true })
+            .wait(1000)
+            .then(() => {
+              expect(navItem.offset().left).to.be.gte(prevOffsetLeft);
+              prevOffsetLeft = navItem.offset().left;
+            })
+            .get($buttons[1])
+            .click({ force: true })
+            .wait(1000)
+            .click({ force: true })
+            .wait(1000)
+            .then(() => {
+              expect(navItem.offset().left).to.be.lte(prevOffsetLeft);
+              prevOffsetLeft = navItem.offset().left;
+            })
+            .get($buttons[0])
+            .click({ force: true })
+            .wait(1000)
+            .click({ force: true })
+            .wait(1000)
+            .then(() => {
+              expect(navItem.offset().left).to.be.gte(prevOffsetLeft);
+              prevOffsetLeft = navItem.offset().left;
+            });
+        });
+    });
+  });
+
+  describe('dds-masthead | cloud platform (mobile)', () => {
+    beforeEach(() => {
+      cy.viewport(325, 780);
+      cy.visit(`/${_pathDefault}`);
+    });
+
+    it('should have url for IBM logo', () => {
+      cy.get('dds-masthead-logo')
+        .shadow()
+        .find('a')
+        .then($link => {
+          const url = new URL($link.prop('href'));
+          const [langOrCloud, cloudOrNull] = url.split('/').filter(segment => segment !== '');
+          expect(['www.ibm.com', 'ibm.com']).to.include(url.host);
+          expect([langOrCloud, cloudOrNull]).to.include('cloud');
+        });
+    });
+
+    it('should have cloud platform name', () => {
+      cy.get('dds-cloud-top-nav-name')
+        .shadow()
+        .find('a')
+        .then($link => {
+          const url = new URL($link.prop('href'));
+          expect(['www.ibm.com', 'ibm.com']).to.include(url.host);
+          expect(['/cloud', '/cloud/']).to.include(url.pathname);
+        });
+    });
+
+    it('should load menu hidden behind hamburger button', () => {
+      cy.get('dds-top-nav')
+        .should('not.be.visible')
+        .get('dds-left-nav')
+        .should('not.be.visible')
+        .get('dds-masthead-menu-button')
+        .click()
+        .get('dds-left-nav')
+        .should('be.visible');
+    });
+
+    it('should load top-nav with no more than one active item', () => {
+      cy.get('dds-masthead-menu-button')
+        .click()
+        .get('dds-left-nav-menu-section[expanded] > *')
+        .then($topNavItems => {
+          const $activeItems = $topNavItems.filter('[active]');
+          expect($topNavItems.length).to.be.greaterThan(1);
+          expect($activeItems.length).to.be.equal(1);
+        });
+    });
+
+    it('should have paged slide-out navigation', () => {
+      cy.get('dds-masthead-menu-button')
+        .click()
+        .get('dds-left-nav-menu-section[expanded] > dds-left-nav-menu')
+        .each($submenuItem => {
+          const sectionSelector = `[section-id="${$submenuItem.attr('panel-id')}"]`;
+          const backSelector = cy
+            .get($submenuItem)
+            .click()
+            .get(sectionSelector)
+            .should('be.visible')
+            .shadow()
+            .find('.bx--masthead__side-nav--submemu-back button')
+            .click()
+            .get($submenuItem)
+            .should('be.visible');
+        });
+    });
+
+    it('should have functioning search bar with typeahead', () => {
+      cy.get('.bx--header__search--search')
+        .click()
+        .wait(1000)
+        .get('.bx--header__search--input')
+        .should('have.focus')
+        .type('test', { force: true })
+        .get('dds-search-with-typeahead-item')
+        .then($results => {
+          expect($results.length).to.be.equal(10);
+        })
+        .get('dds-megamenu-top-nav-menu, dds-top-nav-menu, dds-top-nav-menu-item')
+        .should('not.be.visible');
+    });
+
+    it('should have contact, login, and create-account CTAs', () => {
+      cy.get('dds-masthead-menu-button')
+        .click()
+        .get('dds-cloud-left-nav-item[href="https://cloud.ibm.com/login"]')
+        .should('be.visible')
+        .get('dds-cloud-left-nav-item[href="https://cloud.ibm.com/registration"]')
+        .should('be.visible');
+    });
+  });
+}

packages/web-components/tests/e2e-storybook/cypress/plugins/index.js

@@ -5,8 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+require('dotenv').config({ path: `${__dirname}/../../../../.env` });
+
 // eslint-disable-next-line no-unused-vars
 module.exports = (on, config) => {
+  config.env.DDS_CLOUD_MASTHEAD = process.env.DDS_CLOUD_MASTHEAD;
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
   on('before:browser:launch', (browser = {}, launchOptions) => {
@@ -16,4 +19,6 @@ module.exports = (on, config) => {
       return launchOptions;
     }
   });
+
+  return config;
 };