diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml index 782958f1104..7643de917bb 100644 --- a/.github/workflows/e2e-tests.yml +++ b/.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 diff --git a/packages/web-components/src/components/masthead/__stories__/cloud-masthead.stories.ts b/packages/web-components/src/components/masthead/__stories__/cloud-masthead.stories.ts index 0f4d7fd4f09..a918a70e0d8 100644 --- a/packages/web-components/src/components/masthead/__stories__/cloud-masthead.stories.ts +++ b/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', }, }; diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/cloud/cloud-masthead.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/cloud/cloud-masthead.e2e.js new file mode 100644 index 00000000000..2171a9f97e7 --- /dev/null +++ b/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'); + }); + }); +} diff --git a/packages/web-components/tests/e2e-storybook/cypress/plugins/index.js b/packages/web-components/tests/e2e-storybook/cypress/plugins/index.js index 81a6d7199a7..cc809644726 100644 --- a/packages/web-components/tests/e2e-storybook/cypress/plugins/index.js +++ b/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; };