fix(footer): change cypress intercept for translation to use raw data

packages/react/package.json

@@ -133,7 +133,7 @@
     "core-js": "^3.1.3",
     "cross-env": "^7.0.0",
     "css-loader": "^5.2.0",
-    "cypress": "^9.3.1",
+    "cypress": "^9.4.1",
     "cypress-wait-until": "^1.7.2",
     "doctoc": "^2.0.0",
     "enzyme": "^3.10.0",

packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead-L1.e2e.js

@@ -0,0 +1,112 @@
+/**
+ * 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 (Masthead with L1)
+ *
+ * @type {string}
+ * @private
+ */
+const _pathl1 = '/iframe.html?id=components-masthead--with-l-1';
+
+describe('Masthead | with L1 (desktop)', () => {
+  beforeEach(() => {
+    cy.visit(_pathl1);
+    cy.viewport(1280, 780);
+
+    cy.waitUntil(() => cy.get('[data-autoid="dds--masthead-eco__l1-nav0"]').first().should('not.be.empty'));
+  });
+
+  it('should render platform below the IBM logo', () => {
+    cy.get('.bx--masthead__l1-name-title').then($platform => {
+      cy.get('[data-autoid="dds--masthead-eco__l0-logo"]').then($logo => {
+        expect($logo[0].getBoundingClientRect().down).to.equal(
+          $platform[0].parentElement.getBoundingClientRect().up
+        );
+      });
+    });
+  });
+
+  it('should render 5 menu items', () => {
+    cy.get('.bx--header__menu-bar > li').should('have.length', 5);
+  });
+
+  it('should load L1 menu item with selected state', () => {
+    cy.get('[data-autoid="dds--masthead-eco__l1-nav0"] a').then($menuItem => {
+      expect($menuItem).to.have.attr('data-selected', 'true');
+    });
+
+    cy.waitUntil(() =>
+      cy.get('.bx--header__nav-caret-right').then($elem => $elem.is(':visible'))
+    );
+
+    cy.takeSnapshots();
+  });
+
+  it('should load L1 menu - first L1 nav item', () => {
+    cy.get('[data-autoid="dds--masthead-eco__l1-nav0"]')
+      .trigger('click')
+      .find('a')
+      .then($menuItem => {
+        expect($menuItem).to.have.attr('aria-expanded', 'true');
+      });
+  });
+
+  it('should load L1 menu - second L1 nav item', () => {
+    cy.get('[data-autoid="dds--masthead-eco__l1-nav1"]')
+      .trigger('click')
+      .find('a')
+      .then($menuItem => {
+        expect($menuItem).to.have.attr('aria-expanded', 'true');
+      });
+  });
+
+  it('should load third nav L1 item', () => {
+    cy.get('[data-autoid="dds--masthead-eco__l1-nav2"]').then($link => {
+      const url = $link.prop('href');
+      expect(url).not.to.be.empty;
+    });
+  });
+
+  it('should load L1 menu - fourth L1 nav item', () => {
+    cy.get('[data-autoid="dds--masthead-eco__l1-nav3"]')
+      .trigger('click')
+      .find('a')
+      .then($menuItem => {
+        expect($menuItem).to.have.attr('aria-expanded', 'true');
+      });
+  });
+
+  it('should load fifth nav L1 item', () => {
+    cy.get('[data-autoid="dds--masthead-eco__l1-nav4"]').then($link => {
+      const url = $link.prop('href');
+      expect(url).not.to.be.empty;
+    });
+  });
+
+  it('should scroll the L1 overflow properly', () => {
+    cy.get('.bx--header__nav-caret-right').trigger('click');
+    cy.waitUntil(() =>
+      cy
+        .get('.bx--header__nav-caret-right')
+        .then($elem => !$elem.is(':visible'))
+    );
+
+    cy.get('.bx--header__nav-caret-left').should('be.visible');
+
+    cy.takeSnapshots();
+  });
+
+  it('should load platform containing a link', () => {
+    cy.get('.bx--masthead__l1-name-title')
+      .find('a')
+      .then($link => {
+        const url = $link.prop('href');
+        expect(url).not.to.be.empty;
+      });
+  });
+});

packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead-custom.e2e.js

@@ -0,0 +1,103 @@
+/**
+ * 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 (Custom Masthead)
+ *
+ * @type {string}
+ * @private
+ */
+const _pathCustom =
+  '/iframe.html?id=components-masthead--with-custom-navigation';
+
+describe('Masthead | custom (desktop)', () => {
+  beforeEach(() => {
+    cy.visit(_pathCustom);
+    cy.viewport(1280, 780);
+
+    cy.waitUntil(() => cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').should('not.be.empty'));
+  });
+
+  it('should render 5 custom menu items', () => {
+    cy.get('.bx--header__menu-bar > li').should('have.length', 5);
+  });
+
+  it('should load custom menu item with selected state', () => {
+    cy.get('[data-autoid="dds--masthead-default__l0-nav0"] a').then(
+      $menuItem => {
+        expect($menuItem).to.have.attr('data-selected', 'true');
+      }
+    );
+
+    cy.waitUntil(() =>
+      cy.get('.bx--header__nav-caret-right').then($elem => $elem.is(':visible'))
+    );
+
+    cy.takeSnapshots();
+  });
+
+  it('should load regular menu - custom first nav item', () => {
+    cy.get('[data-autoid="dds--masthead-default__l0-nav0"]')
+      .trigger('click')
+      .find('a')
+      .then($menuItem => {
+        expect($menuItem).to.have.attr('aria-expanded', 'true');
+      });
+
+    cy.takeSnapshots();
+  });
+
+  it('should load regular menu - custom second nav item', () => {
+    cy.get('[data-autoid="dds--masthead-default__l0-nav1"]')
+      .trigger('click')
+      .find('a')
+      .then($menuItem => {
+        expect($menuItem).to.have.attr('aria-expanded', 'true');
+      });
+
+    cy.takeSnapshots();
+  });
+
+  it('should load regular menu - custom third nav item', () => {
+    cy.get('[data-autoid="dds--masthead-default__l0-nav2"]').then($link => {
+      const url = $link.prop('href');
+      expect(url).not.to.be.empty;
+    });
+  });
+
+  it('should load regular menu - custom fourth nav item', () => {
+    cy.get('.bx--header__nav-caret-right').trigger('click');
+    cy.get('[data-autoid="dds--masthead-default__l0-nav3"]')
+      .trigger('click')
+      .find('a')
+      .then($menuItem => {
+        expect($menuItem).to.have.attr('aria-expanded', 'true');
+      });
+
+    cy.takeSnapshots();
+  });
+
+  it('should load regular menu - custom fifth nav item', () => {
+    cy.get('[data-autoid="dds--masthead-default__l0-nav4"]').then($link => {
+      const url = $link.prop('href');
+      expect(url).not.to.be.empty;
+    });
+  });
+
+  it('should scroll the L0 overflow properly', () => {
+    cy.get('.bx--header__nav-caret-right').trigger('click');
+    cy.waitUntil(() =>
+      cy
+        .get('.bx--header__nav-caret-right')
+        .then($elem => !$elem.is(':visible'))
+    );
+
+    cy.get('.bx--header__nav-caret-left').should('be.visible');
+
+    cy.takeSnapshots();
+  });
+});

packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead-search-open-onload.e2e.js

@@ -0,0 +1,60 @@
+/**
+ * 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 (Masthead search open onload)
+ *
+ * @type {string}
+ * @private
+ */
+const _pathSearchOpenOnload =
+  '/iframe.html?id=components-masthead--search-open-onload';
+
+describe('Masthead | search open onload (desktop)', () => {
+  beforeEach(() => {
+    // TODO: fix the uncaught exception in Firefox only
+    cy.on('uncaught:exception', (err, runnable) => {
+      if (err.message.includes('Request aborted')) {
+        return false;
+      }
+    });
+
+    cy.visit(`/${_pathSearchOpenOnload}`);
+    cy.viewport(1280, 780);
+
+    cy.waitUntil(() => cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').first().should('not.be.empty'));
+  });
+
+  it('should load search field open by default', () => {
+    cy.get('[data-autoid="dds--masthead__search"]')
+      .find('input[data-autoid="dds--header__search--input"]')
+      .should('be.visible');
+
+    cy.takeSnapshots();
+  });
+
+  it('should have typable search field', () => {
+    cy.get('[data-autoid="dds--masthead__search"]')
+      .find('input[data-autoid="dds--header__search--input"]')
+      .type('test')
+      .should('have.value', 'test');
+  });
+
+  it('should display 10 auto suggest results', () => {
+    cy.get('[data-autoid="dds--masthead__search"]')
+      .find('input[data-autoid="dds--header__search--input"]')
+      .type('test')
+      .get('.react-autosuggest__suggestions-list li')
+      .should('have.length', 10);
+
+    cy.takeSnapshots();
+  });
+
+  it('should not display menu options while search field is open', () => {
+    cy.get('.bx--header__nav-container').should('have.css', 'display', 'none');
+  });
+});

packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead-with-platform.e2e.js

@@ -0,0 +1,50 @@
+/**
+ * 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 (Masthead with Platform)
+ *
+ * @type {string}
+ * @private
+ */
+const _pathPlatform = '/iframe.html?id=components-masthead--with-platform';
+
+describe('Masthead | with platform (desktop)', () => {
+  beforeEach(() => {
+    cy.visit(_pathPlatform);
+    cy.viewport(1280, 780);
+
+    cy.waitUntil(() => cy.get('[data-autoid="dds--masthead-eco__l0-nav0"]').first().should('not.be.empty'));
+  });
+
+  it('should load platform containing a link', () => {
+    cy.get('[data-autoid="dds--masthead-eco__l0-ecosystemname"]').then(
+      $link => {
+        const url = $link.prop('href');
+        expect(url).not.to.be.empty;
+      }
+    );
+  });
+
+  it('should render platform next to IBM logo', () => {
+    cy.get('[data-autoid="dds--masthead-eco__l0-ecosystemname"]').then(
+      $platform => {
+        cy.get('[data-autoid="dds--masthead-eco__l0-logo"]').then($logo => {
+          expect($logo[0].getBoundingClientRect().right).to.equal(
+            $platform[0].parentElement.getBoundingClientRect().left
+          );
+        });
+      }
+    );
+  });
+
+  it('should open the search bar with platform', () => {
+    cy.get('[data-autoid="dds--masthead-eco__l0-search"]').trigger('click');
+
+    cy.takeSnapshots();
+  });
+});