From ff221b3999816acaf846a649e1386ae8b861395a Mon Sep 17 00:00:00 2001 From: Anna Wen <54281166+annawen1@users.noreply.github.com> Date: Thu, 17 Feb 2022 13:34:23 -0500 Subject: [PATCH 1/2] test(storybook): exclude storybook e2e tests from browserstack --- .../tests/e2e-storybook/browserstack.json | 2 +- .../tests/e2e-storybook/browserstack.json | 2 +- .../masthead/cloud/cloud-masthead.e2e.js | 408 +++++++++--------- 3 files changed, 205 insertions(+), 207 deletions(-) diff --git a/packages/react/tests/e2e-storybook/browserstack.json b/packages/react/tests/e2e-storybook/browserstack.json index 88400ac389f..966efb17320 100644 --- a/packages/react/tests/e2e-storybook/browserstack.json +++ b/packages/react/tests/e2e-storybook/browserstack.json @@ -30,7 +30,7 @@ "cypress_config_file": "tests/e2e-storybook/cypress-canary.json", "project_name": "Carbon for IBM.com", "build_name": "React Storybook", - "exclude": [], + "exclude": ["cypress/integration/StorybookDocs/*.e2e.js"], "parallels": "5", "npm_dependencies": { "@percy/cypress": "^3.1.0", diff --git a/packages/web-components/tests/e2e-storybook/browserstack.json b/packages/web-components/tests/e2e-storybook/browserstack.json index 7db2d5fe448..eda561f32cb 100644 --- a/packages/web-components/tests/e2e-storybook/browserstack.json +++ b/packages/web-components/tests/e2e-storybook/browserstack.json @@ -30,7 +30,7 @@ "cypress_config_file": "tests/e2e-storybook/cypress-canary.json", "project_name": "Carbon for IBM.com", "build_name": "Web Components Storybook", - "exclude": ["cypress/integration/masthead/cloud/*.e2e.js"], + "exclude": ["cypress/integration/masthead/cloud/*.e2e.js", "cypress/integration/storybook-docs/*.e2e.js"], "parallels": "5", "npm_dependencies": { "@percy/cypress": "^3.1.0", 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 index 2171a9f97e7..1265fc53682 100644 --- 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 @@ -26,230 +26,228 @@ function clickUntilGone($el) { } } -if (Cypress.env('DDS_CLOUD_MASTHEAD').toLowerCase() === 'true') { - describe('dds-masthead | cloud platform (desktop)', () => { - beforeEach(() => { - cy.viewport(1280, 780); - cy.visit(`/${_pathDefault}`); - }); +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 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 cloud platform name', () => { - cy.get('dds-cloud-top-nav-name') + it('should have tabbed-interface megamenus', () => { + cy.get('dds-top-nav > dds-megamenu-top-nav-menu').each($megaMenuNavItem => { + cy.get($megaMenuNavItem) .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'); + .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 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 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 tabbed-interface megamenus', () => { - cy.get('dds-top-nav > dds-megamenu-top-nav-menu').each($megaMenuNavItem => { - cy.get($megaMenuNavItem) - .shadow() - .find('a') + 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 }) - .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'); - }); + .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; }); }); - }); - - 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}`); - }); +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 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 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 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 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 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 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'); - }); + 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'); }); -} +}); From c708798e8e749825dc29c71d969e280b21831b96 Mon Sep 17 00:00:00 2001 From: Anna Wen <54281166+annawen1@users.noreply.github.com> Date: Thu, 17 Feb 2022 15:25:20 -0500 Subject: [PATCH 2/2] fix(cypress): remove masthead specific path --- packages/web-components/tests/e2e-storybook/cypress.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-components/tests/e2e-storybook/cypress.json b/packages/web-components/tests/e2e-storybook/cypress.json index f08f981e36c..e8203be16cd 100644 --- a/packages/web-components/tests/e2e-storybook/cypress.json +++ b/packages/web-components/tests/e2e-storybook/cypress.json @@ -10,7 +10,7 @@ "supportFile": "tests/e2e-storybook/cypress/support/index.js", "pluginsFile": "tests/e2e-storybook/cypress/plugins/index.js", "includeShadowDom": true, - "testFiles": "**/masthead/*.e2e.js", + "testFiles": "**/*.e2e.js", "pageLoadTimeout": 90000, "defaultCommandTimeout": 90000, "retries": {