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/.yarn/offline-mirror/@carbon-ibmdotcom-services-1.31.0-canary.1827018708.0.tgz b/.yarn/offline-mirror/@carbon-ibmdotcom-services-1.31.0-canary.1827018708.0.tgz new file mode 100644 index 00000000000..cc2b13bacc0 Binary files /dev/null and b/.yarn/offline-mirror/@carbon-ibmdotcom-services-1.31.0-canary.1827018708.0.tgz differ diff --git a/.yarn/offline-mirror/@carbon-ibmdotcom-utilities-1.31.0-canary.1827018708.0.tgz b/.yarn/offline-mirror/@carbon-ibmdotcom-utilities-1.31.0-canary.1827018708.0.tgz new file mode 100644 index 00000000000..dd5affde65c Binary files /dev/null and b/.yarn/offline-mirror/@carbon-ibmdotcom-utilities-1.31.0-canary.1827018708.0.tgz differ diff --git a/packages/services-store/package.json b/packages/services-store/package.json index 961a4342191..46592c5265a 100644 --- a/packages/services-store/package.json +++ b/packages/services-store/package.json @@ -39,8 +39,8 @@ "prettier": "^1.19.0" }, "dependencies": { - "@carbon/ibmdotcom-services": "1.31.0-canary.adhoc5.6836", - "@carbon/ibmdotcom-utilities": "1.31.0-canary.adhoc5.6836", + "@carbon/ibmdotcom-services": "canary", + "@carbon/ibmdotcom-utilities": "canary", "carbon-components": "10.52.0", "redux": "^4.0.0", "redux-logger": "^3.0.0", diff --git a/packages/services/src/services/CloudAccountAuth/CloudAccountAuth.js b/packages/services/src/services/CloudAccountAuth/CloudAccountAuth.js index 62840ecf8e7..471e1937ba1 100644 --- a/packages/services/src/services/CloudAccountAuth/CloudAccountAuth.js +++ b/packages/services/src/services/CloudAccountAuth/CloudAccountAuth.js @@ -22,7 +22,7 @@ class CloudAccountAuthAPI { */ static async checkPersonalization() { return await DDOAPI.isReady().then(() => { - const status = root.digitalData.user.segment.isCloudLoggedOn; + const status = root.digitalData?.user?.segment?.isCloudLoggedOn; return { user: status === true ? 'authenticated' : 'anonymous' }; }); } diff --git a/packages/web-components/package.json b/packages/web-components/package.json index f55db9b2d53..ac04a9c7d82 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -96,9 +96,9 @@ "prettier": "^1.19.0" }, "dependencies": { - "@carbon/ibmdotcom-services": "1.31.0-canary.adhoc5.6836", + "@carbon/ibmdotcom-services": "canary", "@carbon/ibmdotcom-styles": "1.31.0-rc.0", - "@carbon/ibmdotcom-utilities": "1.31.0-canary.adhoc5.6836", + "@carbon/ibmdotcom-utilities": "canary", "@carbon/layout": "10.34.0", "@carbon/telemetry": "0.0.0-alpha.6", "carbon-components": "10.52.0", 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/src/components/tabs-extended/tabs-extended.ts b/packages/web-components/src/components/tabs-extended/tabs-extended.ts index 7c4905df336..0f80e6156c8 100644 --- a/packages/web-components/src/components/tabs-extended/tabs-extended.ts +++ b/packages/web-components/src/components/tabs-extended/tabs-extended.ts @@ -88,6 +88,12 @@ class DDSTabsExtended extends StableSelectorMixin(LitElement) { this._setActiveItem(this._getNextTab(activeTab)); } break; + case 'ArrowUp': + this._setActiveItem(this._getPrevTab(activeTab)); + break; + case 'ArrowDown': + this._setActiveItem(this._getNextTab(activeTab)); + break; case 'Home': this._setActiveItem(this._getNextTab(-1)); break; 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; }; diff --git a/yarn.lock b/yarn.lock index 5d8b12b1a7e..0c0ea89fb16 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1367,6 +1367,17 @@ axios "~0.21.4" window-or-global "^1.0.1" +"@carbon/ibmdotcom-services@canary": + version "1.31.0-canary.1827018708.0" + resolved "https://registry.yarnpkg.com/@carbon/ibmdotcom-services/-/ibmdotcom-services-1.31.0-canary.1827018708.0.tgz#2fa24ea199cdf026e177ba74f76f9190cf810ca8" + integrity sha512-9RvnbOtST2klP1sm4WhssXGr7Ey9vVu5a96TP4gahdv6hk9Vl+FyqU/oEbJ0lcKmdnN+8b82wpfaFK9h1LUu7w== + dependencies: + "@babel/runtime" "^7.5.0" + "@carbon/ibmdotcom-utilities" "1.31.0-canary.adhoc5.6836" + "@carbon/telemetry" "0.0.0-alpha.6" + axios "~0.21.4" + window-or-global "^1.0.1" + "@carbon/ibmdotcom-utilities@1.31.0-canary.adhoc5.6836", "@carbon/ibmdotcom-utilities@1.31.0-canary.adhoc5.6836+acf59c1b5": version "1.31.0-canary.adhoc5.6836" resolved "https://registry.yarnpkg.com/@carbon/ibmdotcom-utilities/-/ibmdotcom-utilities-1.31.0-canary.adhoc5.6836.tgz#61ebb6aaa3df135905ebc11f79c42927f250d839" @@ -1380,6 +1391,19 @@ marked "^4.0.10" window-or-global "^1.0.1" +"@carbon/ibmdotcom-utilities@canary": + version "1.31.0-canary.1827018708.0" + resolved "https://registry.yarnpkg.com/@carbon/ibmdotcom-utilities/-/ibmdotcom-utilities-1.31.0-canary.1827018708.0.tgz#37048fa89a65e34964f882a5c6de3329b428543e" + integrity sha512-1bAci1BdK3hykH29eKRlcRqQuNA8bOoOaHhwnCNFhZdGkUiXuA7A8W55JnMdC8an0UGXcMMGu5Gr0VmRzIhtsQ== + dependencies: + "@carbon/telemetry" "0.0.0-alpha.6" + axios "~0.21.4" + carbon-components "10.52.0" + isomorphic-dompurify "0.4.0" + js-cookie "^2.2.1" + marked "^4.0.10" + window-or-global "^1.0.1" + "@carbon/icon-helpers@10.26.0", "@carbon/icon-helpers@^10.26.0": version "10.26.0" resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.26.0.tgz#fe8277836e7b758ae48c93fbab8aab444b2f3b70"