From 0281999f186591205bed2ac0d63431c0b7efdf18 Mon Sep 17 00:00:00 2001 From: Jeff Chew Date: Wed, 8 Sep 2021 14:35:20 -0400 Subject: [PATCH 1/8] test(e2e): introduce cypress for web components storybook --- packages/web-components/.env.example | 3 + packages/web-components/.eslintrc.js | 4 +- packages/web-components/.gitignore | 4 +- packages/web-components/package.json | 3 + .../masthead/__tests__/masthead.e2e.js | 148 ++++++++++++++++++ .../tests/e2e-storybook/.percy.json | 10 ++ .../tests/e2e-storybook/cypress.json | 17 ++ .../e2e-storybook/cypress/plugins/index.js | 12 ++ .../e2e-storybook/cypress/support/commands.js | 32 ++++ .../e2e-storybook/cypress/support/index.js | 18 +++ 10 files changed, 248 insertions(+), 3 deletions(-) create mode 100644 packages/web-components/src/components/masthead/__tests__/masthead.e2e.js create mode 100644 packages/web-components/tests/e2e-storybook/.percy.json create mode 100644 packages/web-components/tests/e2e-storybook/cypress.json create mode 100644 packages/web-components/tests/e2e-storybook/cypress/plugins/index.js create mode 100644 packages/web-components/tests/e2e-storybook/cypress/support/commands.js create mode 100644 packages/web-components/tests/e2e-storybook/cypress/support/index.js diff --git a/packages/web-components/.env.example b/packages/web-components/.env.example index 3bd0807b4bd..37600483b58 100644 --- a/packages/web-components/.env.example +++ b/packages/web-components/.env.example @@ -23,3 +23,6 @@ KALTURA_UICONF_ID= # Feature Flags DDS_FLAGS_ALL= DDS_CLOUD_MASTHEAD= + +# Storybook e2e host +C4IBM_E2E_STORYBOOK_HOST= diff --git a/packages/web-components/.eslintrc.js b/packages/web-components/.eslintrc.js index e46beaf4382..d39679c8c94 100644 --- a/packages/web-components/.eslintrc.js +++ b/packages/web-components/.eslintrc.js @@ -117,7 +117,7 @@ module.exports = { }, }, { - files: ['tests/e2e/cypress/**/*.js'], + files: ['tests/e2e/cypress/**/*.js', 'tests/e2e-storybook/cypress/**/*.js'], parserOptions: { sourceType: 'module', }, @@ -140,7 +140,7 @@ module.exports = { }, }, { - files: ['tests/e2e/**/*.e2e.js', 'tests/e2e/**/*.cdn.e2e.js'], + files: ['tests/e2e/**/*.e2e.js', 'tests/e2e/**/*.cdn.e2e.js', 'src/components/**/*.e2e.js'], extends: ['plugin:cypress/recommended'], parserOptions: { sourceType: 'script', diff --git a/packages/web-components/.gitignore b/packages/web-components/.gitignore index a3e6e9b84f6..2d25f09f36f 100644 --- a/packages/web-components/.gitignore +++ b/packages/web-components/.gitignore @@ -10,5 +10,7 @@ storybook-static-react .env tests/e2e/cypress/screenshots tests/e2e/cypress/videos +tests/e2e-storybook/cypress/screenshots +tests/e2e-storybook/cypress/videos templates -generate.sh \ No newline at end of file +generate.sh diff --git a/packages/web-components/package.json b/packages/web-components/package.json index b15681c58ba..050ceed19cd 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -72,6 +72,9 @@ "test:e2e:build": "node ./tests/e2e/build/build-examples.js", "test:e2e:run": "http-server -c-1 tests/e2e/dist --silent", "test:e2e:test": "start-server-and-test 'yarn test:e2e:run' 8080 'percy exec --config tests/e2e/.percy.json -- cypress run --config-file tests/e2e/cypress.json'", + "test:e2e-storybook:run": "http-server -c-1 storybook-static --silent -p 8081", + "test:e2e-storybook:test": "start-server-and-test 'yarn test:e2e-storybook:run' 8081 'percy exec --config tests/e2e-storybook/.percy.json -- cypress run --config-file tests/e2e-storybook/cypress.json'", + "test:e2e-storybook:test:no-percy": "start-server-and-test 'yarn test:e2e-storybook:run' 8081 'cypress run --config-file tests/e2e-storybook/cypress.json'", "typecheck": "tsc --noEmit -p tsconfig.json", "upgrade-carbon": "yarn upgrade-interactive carbon-components carbon-web-components @carbon/icon-helpers @carbon/icons --latest --exact", "visual-snapshot": "yarn build-storybook && percy-storybook --widths=320,1280", diff --git a/packages/web-components/src/components/masthead/__tests__/masthead.e2e.js b/packages/web-components/src/components/masthead/__tests__/masthead.e2e.js new file mode 100644 index 00000000000..973ec1d977d --- /dev/null +++ b/packages/web-components/src/components/masthead/__tests__/masthead.e2e.js @@ -0,0 +1,148 @@ +/** + * Copyright IBM Corp. 2021 + * + * 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 host to run tests + * + * @type {string|string} + * @private + */ +const _host = (process && process.env.C4IBM_E2E_STORYBOOK_HOST) || 'http://localhost:8081'; + +/** + * Sets the correct path (default Masthead) + * + * @type {string} + * @private + */ +const _pathDefault = '/iframe.html?id=components-masthead--default'; + +/** + * Sets the correct path (Custom Masthead) + * + * @type {string} + * @private + */ +const _pathCustom = '/iframe.html?id=components-masthead--with-custom-navigation'; + +/** + * Sets the correct path (Masthead with Platform) + * + * @type {string} + * @private + */ +const _pathPlatform = '/iframe.html?id=components-masthead--with-platform'; + +describe('dds-masthead | default (desktop)', () => { + beforeEach(() => { + cy.visit(`${_host}/${_pathDefault}`); + cy.viewport(1280, 780); + }); + + it('should load the megamenu - first nav item', () => { + cy.get('dds-megamenu-top-nav-menu:nth-child(1)') + .shadow() + .find('a') + .click(); + + // Take a snapshot for visual diffing + cy.percySnapshot('dds-masthead | mega menu (nav 0)', { + widths: [1280], + }); + }); + + it('should load the megamenu - second nav item', () => { + cy.get('dds-megamenu-top-nav-menu:nth-child(2)') + .shadow() + .find('a') + .click(); + + // Take a snapshot for visual diffing + cy.percySnapshot('dds-masthead | mega menu (nav 1)', { + widths: [1280], + }); + }); + + it('should open the login menu', () => { + cy.get('dds-masthead-profile') + .shadow() + .find('a') + .click(); + + // Take a snapshot for visual diffing + cy.percySnapshot('dds-masthead | profile menu', { + widths: [1280], + }); + }); +}); + +describe('dds-masthead | default (mobile)', () => { + beforeEach(() => { + cy.visit(`${_host}/${_pathDefault}`); + cy.viewport(320, 780); + }); + + it('should load the mobile menu', () => { + cy.get('dds-masthead-menu-button') + .shadow() + .find('button') + .click(); + + // Take a snapshot for visual diffing + cy.percySnapshot('dds-masthead | mobile menu', { + widths: [320], + }); + + cy.get('dds-left-nav-menu-section:nth-child(1) > dds-left-nav-menu:nth-child(1)') + .shadow() + .find('button') + .click(); + + // Take a snapshot for visual diffing + cy.percySnapshot('dds-masthead | mobile menu level 2', { + widths: [320], + }); + }); +}); + +describe('dds-masthead | custom (desktop)', () => { + beforeEach(() => { + cy.visit(`${_host}/${_pathCustom}`); + cy.viewport(1280, 780); + }); + + it('should scroll the L0 overflow properly', () => { + cy.get('dds-top-nav') + .shadow() + .find('.bx--header__nav-caret-right-container > button') + .click(); + + // Take a snapshot for visual diffing + cy.percySnapshot('dds-masthead | custom - overflow', { + widths: [1280], + }); + }); +}); + +describe('dds-masthead | with platform (desktop)', () => { + beforeEach(() => { + cy.visit(`${_host}/${_pathPlatform}`); + cy.viewport(1280, 780); + }); + + it('should open the search bar with platform', () => { + cy.get('dds-masthead > dds-search-with-typeahead') + .shadow() + .find('.bx--header__search--search') + .click(); + + // Take a snapshot for visual diffing + cy.percySnapshot('dds-masthead | with platform - search', { + widths: [1280], + }); + }); +}); diff --git a/packages/web-components/tests/e2e-storybook/.percy.json b/packages/web-components/tests/e2e-storybook/.percy.json new file mode 100644 index 00000000000..9261a86fcf8 --- /dev/null +++ b/packages/web-components/tests/e2e-storybook/.percy.json @@ -0,0 +1,10 @@ +{ + "version": 2, + "snapshot": { + "widths": [ + 375, + 1280 + ], + "enable-javascript": true + } +} diff --git a/packages/web-components/tests/e2e-storybook/cypress.json b/packages/web-components/tests/e2e-storybook/cypress.json new file mode 100644 index 00000000000..a4acca26f6d --- /dev/null +++ b/packages/web-components/tests/e2e-storybook/cypress.json @@ -0,0 +1,17 @@ +{ + "baseUrl": "http://localhost:8081", + "browser": "chrome", + "headless": false, + "fixturesFolder": false, + "fileServerFolder": "storybook-static", + "screenshotsFolder": "tests/e2e-storybook/cypress/screenshots", + "videosFolder": "tests/e2e-storybook/cypress/videos", + "integrationFolder": "src/components", + "supportFile": "tests/e2e-storybook/cypress/support/index.js", + "pluginsFile": "tests/e2e-storybook/cypress/plugins/index.js", + "nodeVersion": "system", + "includeShadowDom": true, + "testFiles": "**/*.e2e.js", + "pageLoadTimeout": 10000, + "defaultCommandTimeout": 20000 +} diff --git a/packages/web-components/tests/e2e-storybook/cypress/plugins/index.js b/packages/web-components/tests/e2e-storybook/cypress/plugins/index.js new file mode 100644 index 00000000000..3ae7465af44 --- /dev/null +++ b/packages/web-components/tests/e2e-storybook/cypress/plugins/index.js @@ -0,0 +1,12 @@ +/** + * Copyright IBM Corp. 2021 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +// eslint-disable-next-line no-unused-vars +module.exports = (on, config) => { + // `on` is used to hook into various events Cypress emits + // `config` is the resolved Cypress config +}; diff --git a/packages/web-components/tests/e2e-storybook/cypress/support/commands.js b/packages/web-components/tests/e2e-storybook/cypress/support/commands.js new file mode 100644 index 00000000000..0d37dff900d --- /dev/null +++ b/packages/web-components/tests/e2e-storybook/cypress/support/commands.js @@ -0,0 +1,32 @@ +/** + * Copyright IBM Corp. 2021 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +// *********************************************** +// This example commands.js shows you how to +// create various custom commands and overwrite +// existing commands. +// +// For more comprehensive examples of custom +// commands please read more here: +// https://on.cypress.io/custom-commands +// *********************************************** +// +// +// -- This is a parent command -- +// Cypress.Commands.add('login', (email, password) => { ... }) +// +// +// -- This is a child command -- +// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) +// +// +// -- This is a dual command -- +// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) +// +// +// -- This will overwrite an existing command -- +// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) diff --git a/packages/web-components/tests/e2e-storybook/cypress/support/index.js b/packages/web-components/tests/e2e-storybook/cypress/support/index.js new file mode 100644 index 00000000000..959c150e000 --- /dev/null +++ b/packages/web-components/tests/e2e-storybook/cypress/support/index.js @@ -0,0 +1,18 @@ +/** + * Copyright IBM Corp. 2021 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import '@percy/cypress'; +import serializeDOM from '@percy/dom'; + +import './commands'; + +// Workaround, @percy/cypress was not properly loading in PercyDOM +if (window) { + window.PercyDOM = { + serialize: serializeDOM, + }; +} From 66c77c21d095d919235f86e5eab2f8da903680ed Mon Sep 17 00:00:00 2001 From: Jeff Chew Date: Wed, 8 Sep 2021 18:54:12 -0400 Subject: [PATCH 2/8] test(e2e): introduce cypress for web components storybook --- packages/web-components/package.json | 1 + .../leadspace/__tests__/leadspace.e2e.js | 597 ++++++++++++++++++ .../__tests__/locale-modal.e2e.js | 62 ++ .../masthead/__tests__/masthead.e2e.js | 49 +- .../tests/e2e-storybook/cypress.json | 4 +- 5 files changed, 693 insertions(+), 20 deletions(-) create mode 100644 packages/web-components/src/components/leadspace/__tests__/leadspace.e2e.js create mode 100644 packages/web-components/src/components/locale-modal/__tests__/locale-modal.e2e.js diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 050ceed19cd..cf52b256e99 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -127,6 +127,7 @@ "@carbon/type": "10.33.0", "@open-wc/semantic-dom-diff": "^0.15.0", "@percy-io/in-percy": "^0.1.11", + "@percy/cli": "^1.0.0-beta.67", "@percy/cypress": "^3.1.0", "@percy/dom": "^1.0.0-beta.55", "@percy/sdk-utils": "^1.0.0-beta.55", diff --git a/packages/web-components/src/components/leadspace/__tests__/leadspace.e2e.js b/packages/web-components/src/components/leadspace/__tests__/leadspace.e2e.js new file mode 100644 index 00000000000..f39fd71a065 --- /dev/null +++ b/packages/web-components/src/components/leadspace/__tests__/leadspace.e2e.js @@ -0,0 +1,597 @@ +/** + * Copyright IBM Corp. 2021 + * + * 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 host to run tests + * + * @type {string|string} + * @private + */ +const _host = (process && process.env.C4IBM_E2E_STORYBOOK_HOST) || 'http://localhost:8081'; + +/** + * Sets the correct path (Tall) + * + * @type {string} + * @private + */ +const _pathTall = '/iframe.html?id=components-lead-space--tall'; + +/** + * Sets the correct path (Tall with image) + * + * @type {string} + * @private + */ +const _pathTallImage = '/iframe.html?id=components-lead-space--tall-with-image'; + +/** + * Sets the correct path (Centered) + * + * @type {string} + * @private + */ +const _pathCentered = '/iframe.html?id=components-lead-space--centered'; + +/** + * Sets the correct path (Centered with image) + * + * @type {string} + * @private + */ +const _pathCenteredImage = '/iframe.html?id=components-lead-space--centered-with-image'; + +/** + * Sets the correct path (Short) + * + * @type {string} + * @private + */ +const _pathShort = '/iframe.html?id=components-lead-space--short'; + +/** + * Sets the correct path (Short with image) + * + * @type {string} + * @private + */ +const _pathShortWithImage = '/iframe.html?id=components-lead-space--short-with-image'; + +/** + * Sets the correct path (Medium) + * + * @type {string} + * @private + */ +const _pathMedium = '/iframe.html?id=components-lead-space--medium'; + +/** + * Sets the correct path (Medium with image) + * + * @type {string} + * @private + */ +const _pathMediumWithImage = '/iframe.html?id=components-lead-space--medium-with-image'; + +/** + * Sets the correct path (Super) + * + * @type {string} + * @private + */ +const _pathSuper = '/iframe.html?id=components-lead-space--super'; + +/** + * Sets the correct path (Super with image) + * + * @type {string} + * @private + */ +const _pathSuperWithImage = '/iframe.html?id=components-lead-space--super-with-image'; + +/* eslint-disable cypress/no-unnecessary-waiting */ +xdescribe('dds-leadspace | tall', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathTall}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g100'); + cy.wait(500); + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | tall | g100 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathTall}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g90'); + cy.wait(500); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | tall | g90 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathTall}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g10'); + cy.wait(500); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | tall | g10 theme', { + // widths: [1280], + // }); + }); + }); +}); + +xdescribe('dds-leadspace | tall with image', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathTallImage}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g100'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | tall with image | g100 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathTallImage}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g90'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | tall with image | g90 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathTallImage}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g10'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | tall with image | g10 theme', { + // widths: [1280], + // }); + }); + }); +}); + +xdescribe('dds-leadspace | centered', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathCentered}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g100'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | centered | g100 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathCentered}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g90'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | centered | g90 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathCentered}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g10'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | centered | g10 theme', { + // widths: [1280], + // }); + }); + }); +}); + +xdescribe('dds-leadspace | centered with image', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathCenteredImage}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g100'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | centered with image | g100 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathCenteredImage}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g90'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | centered with image | g90 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathCenteredImage}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g10'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | centered with image | g10 theme', { + // widths: [1280], + // }); + }); + }); +}); + +xdescribe('dds-leadspace | short', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathShort}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g100'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | short | g100 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathShort}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g90'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | short | g90 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathShort}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g10'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | short | g10 theme', { + // widths: [1280], + // }); + }); + }); +}); + +xdescribe('dds-leadspace | short with image', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathShortWithImage}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g100'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | short with image | g100 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathShortWithImage}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g90'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | short with image | g90 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathShortWithImage}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g10'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | short with image | g10 theme', { + // widths: [1280], + // }); + }); + }); +}); + +xdescribe('dds-leadspace | medium', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathMedium}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g100'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | medium | g100 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathMedium}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g90'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | medium | g90 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathMedium}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g10'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | medium | g10 theme', { + // widths: [1280], + // }); + }); + }); +}); + +xdescribe('dds-leadspace | medium with image', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathMediumWithImage}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g100'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | medium with image | g100 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathMediumWithImage}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g90'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | medium with image | g90 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathMediumWithImage}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g10'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | medium with image | g10 theme', { + // widths: [1280], + // }); + }); + }); +}); + +xdescribe('dds-leadspace | super', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathSuper}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g100'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | super | g100 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathSuper}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g90'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | super | g90 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathSuper}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g10'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | super | g10 theme', { + // widths: [1280], + // }); + }); + }); +}); + +xdescribe('dds-leadspace | super with image', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathSuperWithImage}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g100'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | super with image | g100 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathSuperWithImage}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g90'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | super with image | g90 theme', { + // widths: [1280], + // }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathSuperWithImage}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute('storybook-carbon-theme', 'g10'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-leadspace | super with image | g10 theme', { + // widths: [1280], + // }); + }); + }); +}); diff --git a/packages/web-components/src/components/locale-modal/__tests__/locale-modal.e2e.js b/packages/web-components/src/components/locale-modal/__tests__/locale-modal.e2e.js new file mode 100644 index 00000000000..a1038888ec3 --- /dev/null +++ b/packages/web-components/src/components/locale-modal/__tests__/locale-modal.e2e.js @@ -0,0 +1,62 @@ +/** + * Copyright IBM Corp. 2021 + * + * 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 host to run tests + * + * @type {string|string} + * @private + */ +const _host = (process && process.env.C4IBM_E2E_STORYBOOK_HOST) || 'http://localhost:8081'; + +/** + * Sets the correct path + * + * @type {string} + * @private + */ +const _path = '/iframe.html?id=components-locale-modal--default'; + +describe('dds-locale-modal | default', () => { + beforeEach(() => { + cy.visit(`${_host}/${_path}`); + cy.viewport(1280, 780); + }); + + it('should load the Americas region', () => { + cy.get('dds-locale-modal > dds-regions > dds-region-item:nth-child(1)') + .shadow() + .find('a') + .click(); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-locale-modal | region selected', { + // widths: [1280], + // }); + }); + + it('should filter locales/languages', () => { + cy.get('dds-locale-modal > dds-regions > dds-region-item:nth-child(1)') + .shadow() + .find('a') + .click(); + + cy.get('dds-locale-search') + .shadow() + .find('.bx--search-input') + .type('ca'); + + cy.screenshot(); + // Take a snapshot for visual diffing + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-locale-modal | filter', { + // widths: [1280], + // }); + }); +}); diff --git a/packages/web-components/src/components/masthead/__tests__/masthead.e2e.js b/packages/web-components/src/components/masthead/__tests__/masthead.e2e.js index 973ec1d977d..1ba584908ca 100644 --- a/packages/web-components/src/components/masthead/__tests__/masthead.e2e.js +++ b/packages/web-components/src/components/masthead/__tests__/masthead.e2e.js @@ -49,10 +49,12 @@ describe('dds-masthead | default (desktop)', () => { .find('a') .click(); + cy.screenshot(); // Take a snapshot for visual diffing - cy.percySnapshot('dds-masthead | mega menu (nav 0)', { - widths: [1280], - }); + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-masthead | mega menu (nav 0)', { + // widths: [1280], + // }); }); it('should load the megamenu - second nav item', () => { @@ -61,10 +63,12 @@ describe('dds-masthead | default (desktop)', () => { .find('a') .click(); + cy.screenshot(); // Take a snapshot for visual diffing - cy.percySnapshot('dds-masthead | mega menu (nav 1)', { - widths: [1280], - }); + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-masthead | mega menu (nav 1)', { + // widths: [1280], + // }); }); it('should open the login menu', () => { @@ -73,10 +77,12 @@ describe('dds-masthead | default (desktop)', () => { .find('a') .click(); + cy.screenshot(); // Take a snapshot for visual diffing - cy.percySnapshot('dds-masthead | profile menu', { - widths: [1280], - }); + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-masthead | profile menu', { + // widths: [1280], + // }); }); }); @@ -92,6 +98,7 @@ describe('dds-masthead | default (mobile)', () => { .find('button') .click(); + cy.screenshot(); // Take a snapshot for visual diffing cy.percySnapshot('dds-masthead | mobile menu', { widths: [320], @@ -102,10 +109,12 @@ describe('dds-masthead | default (mobile)', () => { .find('button') .click(); + cy.screenshot(); // Take a snapshot for visual diffing - cy.percySnapshot('dds-masthead | mobile menu level 2', { - widths: [320], - }); + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-masthead | mobile menu level 2', { + // widths: [320], + // }); }); }); @@ -121,10 +130,12 @@ describe('dds-masthead | custom (desktop)', () => { .find('.bx--header__nav-caret-right-container > button') .click(); + cy.screenshot(); // Take a snapshot for visual diffing - cy.percySnapshot('dds-masthead | custom - overflow', { - widths: [1280], - }); + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-masthead | custom - overflow', { + // widths: [1280], + // }); }); }); @@ -140,9 +151,11 @@ describe('dds-masthead | with platform (desktop)', () => { .find('.bx--header__search--search') .click(); + cy.screenshot(); // Take a snapshot for visual diffing - cy.percySnapshot('dds-masthead | with platform - search', { - widths: [1280], - }); + // TODO: click states currently not working in percy for web components + // cy.percySnapshot('dds-masthead | with platform - search', { + // widths: [1280], + // }); }); }); diff --git a/packages/web-components/tests/e2e-storybook/cypress.json b/packages/web-components/tests/e2e-storybook/cypress.json index a4acca26f6d..c983d614a84 100644 --- a/packages/web-components/tests/e2e-storybook/cypress.json +++ b/packages/web-components/tests/e2e-storybook/cypress.json @@ -1,7 +1,7 @@ { "baseUrl": "http://localhost:8081", "browser": "chrome", - "headless": false, + "headless": true, "fixturesFolder": false, "fileServerFolder": "storybook-static", "screenshotsFolder": "tests/e2e-storybook/cypress/screenshots", @@ -12,6 +12,6 @@ "nodeVersion": "system", "includeShadowDom": true, "testFiles": "**/*.e2e.js", - "pageLoadTimeout": 10000, + "pageLoadTimeout": 20000, "defaultCommandTimeout": 20000 } From 9cdb8d66bfbf3bb19e69cffafeb74a7ff6f2248f Mon Sep 17 00:00:00 2001 From: Jeff Chew Date: Thu, 9 Sep 2021 11:45:10 -0400 Subject: [PATCH 3/8] test(e2e): introduce cypress for react storybook --- .eslintignore | 3 + .eslintrc | 3 +- packages/react/.env.example | 3 + packages/react/.gitignore | 2 + packages/react/package.json | 8 +- .../__tests__/CalloutQuote.e2e.js | 83 +++ .../LeadSpace/__tests__/LeadSpace.e2e.js | 663 ++++++++++++++++++ .../LocaleModal/__tests__/LocaleModal.e2e.js | 53 ++ .../Masthead/__tests__/Masthead.e2e.js | 136 ++++ .../components/Quote/__tests__/Quote.e2e.js | 83 +++ .../__tests__/TableOfContents.e2e.js | 84 +++ .../react/tests/e2e-storybook/.percy.json | 9 + .../react/tests/e2e-storybook/cypress.json | 16 + .../e2e-storybook/cypress/plugins/index.js | 12 + .../e2e-storybook/cypress/support/commands.js | 17 + .../cypress/support/data/countrylist.json | 1 + .../cypress/support/data/translation.json | 1 + .../e2e-storybook/cypress/support/index.js | 9 + packages/tests-e2e/.env.example | 8 - packages/tests-e2e/.gitignore | 1 - packages/tests-e2e/CHANGELOG.md | 79 --- .../callout-quote/callout-quote.e2e.js | 102 --- .../__tests__/leadspace/leadspace.e2e.js | 582 --------------- .../locale-modal/locale-modal.e2e.js | 97 --- .../__tests__/masthead/masthead.e2e.js | 318 --------- .../tests-e2e/__tests__/quote/quote.e2e.js | 102 --- .../table-of-contents.e2e.js | 103 --- packages/tests-e2e/babel.config.js | 27 - packages/tests-e2e/jest.config.js | 16 - packages/tests-e2e/package.json | 37 - packages/web-components/.eslintignore | 1 + packages/web-components/package.json | 9 +- .../e2e-storybook/cypress/support/commands.js | 35 +- .../cypress/support/data/countrylist.json | 1 + .../cypress/support/data/translation.json | 1 + .../tests/e2e/cypress/support/commands.js | 35 +- .../e2e/cypress/support/data/countrylist.json | 1 + .../e2e/cypress/support/data/translation.json | 1 + 38 files changed, 1214 insertions(+), 1528 deletions(-) create mode 100644 packages/react/src/components/CalloutQuote/__tests__/CalloutQuote.e2e.js create mode 100644 packages/react/src/components/LeadSpace/__tests__/LeadSpace.e2e.js create mode 100644 packages/react/src/components/LocaleModal/__tests__/LocaleModal.e2e.js create mode 100644 packages/react/src/components/Masthead/__tests__/Masthead.e2e.js create mode 100644 packages/react/src/components/Quote/__tests__/Quote.e2e.js create mode 100644 packages/react/src/components/TableOfContents/__tests__/TableOfContents.e2e.js create mode 100644 packages/react/tests/e2e-storybook/.percy.json create mode 100644 packages/react/tests/e2e-storybook/cypress.json create mode 100644 packages/react/tests/e2e-storybook/cypress/plugins/index.js create mode 100644 packages/react/tests/e2e-storybook/cypress/support/commands.js create mode 100644 packages/react/tests/e2e-storybook/cypress/support/data/countrylist.json create mode 100644 packages/react/tests/e2e-storybook/cypress/support/data/translation.json create mode 100644 packages/react/tests/e2e-storybook/cypress/support/index.js delete mode 100644 packages/tests-e2e/.env.example delete mode 100644 packages/tests-e2e/.gitignore delete mode 100644 packages/tests-e2e/CHANGELOG.md delete mode 100644 packages/tests-e2e/__tests__/callout-quote/callout-quote.e2e.js delete mode 100644 packages/tests-e2e/__tests__/leadspace/leadspace.e2e.js delete mode 100644 packages/tests-e2e/__tests__/locale-modal/locale-modal.e2e.js delete mode 100644 packages/tests-e2e/__tests__/masthead/masthead.e2e.js delete mode 100644 packages/tests-e2e/__tests__/quote/quote.e2e.js delete mode 100644 packages/tests-e2e/__tests__/table-of-contents/table-of-contents.e2e.js delete mode 100644 packages/tests-e2e/babel.config.js delete mode 100644 packages/tests-e2e/jest.config.js delete mode 100644 packages/tests-e2e/package.json create mode 100644 packages/web-components/tests/e2e-storybook/cypress/support/data/countrylist.json create mode 100644 packages/web-components/tests/e2e-storybook/cypress/support/data/translation.json create mode 100644 packages/web-components/tests/e2e/cypress/support/data/countrylist.json create mode 100644 packages/web-components/tests/e2e/cypress/support/data/translation.json diff --git a/.eslintignore b/.eslintignore index 10368575265..91e69ffb200 100644 --- a/.eslintignore +++ b/.eslintignore @@ -12,6 +12,7 @@ packages/react/ssr-tests/nextjs/.next packages/react/src/internal/vendor packages/react/tests/e2e/dist packages/react/tests/e2e/cypress +packages/react/tests/e2e-storybook/cypress # storybook-addon-theme packages/storybook-addon-theme/es @@ -59,3 +60,5 @@ packages/web-components/storybook-static packages/web-components/storybook-static-react packages/web-components/src/internal/vendor packages/web-components/tests/e2e/dist +packages/web-components/tests/e2e/cypress +packages/web-components/tests/e2e-storybook/cypress diff --git a/.eslintrc b/.eslintrc index 8cbad1243a2..380e7edaf20 100644 --- a/.eslintrc +++ b/.eslintrc @@ -105,7 +105,8 @@ { "files": [ "packages/react/tests/e2e/**/*.e2e.js", - "packages/react/tests/e2e/**/*.cdn.e2e.js" + "packages/react/tests/e2e/**/*.cdn.e2e.js", + "packages/react/src/components/**/*.e2e.js" ], "extends": [ "plugin:cypress/recommended" diff --git a/packages/react/.env.example b/packages/react/.env.example index 55dca039215..980ae4fd916 100644 --- a/packages/react/.env.example +++ b/packages/react/.env.example @@ -27,3 +27,6 @@ DDS_AUDIO_PLAYER= # Selenium SELENIUM_HOST= + +# Storybook e2e host +C4IBM_E2E_STORYBOOK_HOST= diff --git a/packages/react/.gitignore b/packages/react/.gitignore index ad2f41c66c3..642bd7201b9 100644 --- a/packages/react/.gitignore +++ b/packages/react/.gitignore @@ -14,3 +14,5 @@ src/internal/vendor # e2e tests tests/e2e/cypress/screenshots tests/e2e/cypress/videos +tests/e2e-storybook/cypress/screenshots +tests/e2e-storybook/cypress/videos diff --git a/packages/react/package.json b/packages/react/package.json index 69db935c56c..d91bbb2b9b8 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -37,8 +37,12 @@ "storybook": "start-storybook -p 9000", "test:e2e:build": "node ./tests/e2e/build/build-examples.js", "test:e2e:run": "http-server -c-1 tests/e2e/dist --silent", - "test:e2e:test": "start-server-and-test 'yarn test:e2e:run' 8080 'percy exec --config tests/e2e/.percy.json -- cypress run --config-file tests/e2e/cypress.json'", - "test:e2e:test:no-percy": "start-server-and-test 'yarn test:e2e:run' 8080 'cypress run --config-file tests/e2e/cypress.json'", + "test:e2e:test": "start-server-and-test 'yarn test:e2e:run' 8080 'percy exec --config tests/e2e/.percy.json -- cypress run --config video=false --config-file tests/e2e/cypress.json'", + "test:e2e:test:no-percy": "start-server-and-test 'yarn test:e2e:run' 8080 'cypress run --config video=false --config-file tests/e2e/cypress.json'", + "test:e2e-storybook:run": "http-server -c-1 storybook-static --silent -p 8081", + "test:e2e-storybook:test": "start-server-and-test 'yarn test:e2e-storybook:run' 8081 'percy exec --config tests/e2e-storybook/.percy.json -- cypress run --config video=false --config-file tests/e2e-storybook/cypress.json'", + "test:e2e-storybook:test:no-percy": "start-server-and-test 'yarn test:e2e-storybook:run' 8081 'cypress run --config video=false --config-file tests/e2e-storybook/cypress.json'", + "test:e2e-storybook:test:no-percy:with-video": "start-server-and-test 'yarn test:e2e-storybook:run' 8081 'cypress run --config-file tests/e2e-storybook/cypress.json'", "test:unit": "jest", "test:unit:updateSnapshot": "jest -u", "test:a11y": "gulp test:a11y", diff --git a/packages/react/src/components/CalloutQuote/__tests__/CalloutQuote.e2e.js b/packages/react/src/components/CalloutQuote/__tests__/CalloutQuote.e2e.js new file mode 100644 index 00000000000..cad12c0d680 --- /dev/null +++ b/packages/react/src/components/CalloutQuote/__tests__/CalloutQuote.e2e.js @@ -0,0 +1,83 @@ +/** + * Copyright IBM Corp. 2021 + * + * 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 host to run tests + * + * @type {string|string} + * @private + */ +const _host = + (process && process.env.C4IBM_E2E_STORYBOOK_HOST) || 'http://localhost:8081'; + +/** + * Sets the correct path + * + * @type {string} + * @private + */ +const _path = '/iframe.html?id=components-callout-quote--default'; + +/* eslint-disable cypress/no-unnecessary-waiting */ +describe('CalloutQuote | default', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_path}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g100' + ); + cy.wait(500); + cy.screenshot(); + + // Take a snapshot for visual diffing + cy.percySnapshot('CalloutQuote | default | g100 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_path}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g90' + ); + cy.wait(500); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('CalloutQuote | default | g90 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_path}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g10' + ); + cy.wait(500); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('CalloutQuote | default | g10 theme', { + widths: [1280], + }); + }); + }); +}); diff --git a/packages/react/src/components/LeadSpace/__tests__/LeadSpace.e2e.js b/packages/react/src/components/LeadSpace/__tests__/LeadSpace.e2e.js new file mode 100644 index 00000000000..99d61dcd474 --- /dev/null +++ b/packages/react/src/components/LeadSpace/__tests__/LeadSpace.e2e.js @@ -0,0 +1,663 @@ +/** + * Copyright IBM Corp. 2021 + * + * 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 host to run tests + * + * @type {string|string} + * @private + */ +const _host = + (process && process.env.C4IBM_E2E_STORYBOOK_HOST) || 'http://localhost:8081'; + +/** + * Sets the correct path (Tall) + * + * @type {string} + * @private + */ +const _pathTall = '/iframe.html?id=components-lead-space--tall'; + +/** + * Sets the correct path (Tall with image) + * + * @type {string} + * @private + */ +const _pathTallImage = '/iframe.html?id=components-lead-space--tall-with-image'; + +/** + * Sets the correct path (Centered) + * + * @type {string} + * @private + */ +const _pathCentered = '/iframe.html?id=components-lead-space--centered'; + +/** + * Sets the correct path (Centered with image) + * + * @type {string} + * @private + */ +const _pathCenteredImage = + '/iframe.html?id=components-lead-space--centered-with-image'; + +/** + * Sets the correct path (Short) + * + * @type {string} + * @private + */ +const _pathShort = '/iframe.html?id=components-lead-space--short'; + +/** + * Sets the correct path (Short with image) + * + * @type {string} + * @private + */ +const _pathShortWithImage = + '/iframe.html?id=components-lead-space--short-with-image'; + +/** + * Sets the correct path (Medium) + * + * @type {string} + * @private + */ +const _pathMedium = '/iframe.html?id=components-lead-space--medium'; + +/** + * Sets the correct path (Medium with image) + * + * @type {string} + * @private + */ +const _pathMediumWithImage = + '/iframe.html?id=components-lead-space--medium-with-image'; + +/** + * Sets the correct path (Super) + * + * @type {string} + * @private + */ +const _pathSuper = '/iframe.html?id=components-lead-space--super'; + +/** + * Sets the correct path (Super with image) + * + * @type {string} + * @private + */ +const _pathSuperWithImage = + '/iframe.html?id=components-lead-space--super-with-image'; + +/* eslint-disable cypress/no-unnecessary-waiting */ +describe('LeadSpace | tall', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathTall}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g100' + ); + cy.wait(500); + cy.screenshot(); + + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | tall | g100 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathTall}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g90' + ); + cy.wait(500); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | tall | g90 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathTall}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g10' + ); + cy.wait(500); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | tall | g10 theme', { + widths: [1280], + }); + }); + }); +}); + +describe('LeadSpace | tall with image', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathTallImage}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g100' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | tall with image | g100 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathTallImage}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g90' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | tall with image | g90 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathTallImage}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g10' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | tall with image | g10 theme', { + widths: [1280], + }); + }); + }); +}); + +describe('LeadSpace | centered', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathCentered}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g100' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | centered | g100 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathCentered}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g90' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | centered | g90 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathCentered}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g10' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | centered | g10 theme', { + widths: [1280], + }); + }); + }); +}); + +describe('LeadSpace | centered with image', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathCenteredImage}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g100' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | centered with image | g100 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathCenteredImage}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g90' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | centered with image | g90 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathCenteredImage}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g10' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | centered with image | g10 theme', { + widths: [1280], + }); + }); + }); +}); + +describe('LeadSpace | short', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathShort}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g100' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | short | g100 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathShort}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g90' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | short | g90 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathShort}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g10' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | short | g10 theme', { + widths: [1280], + }); + }); + }); +}); + +describe('LeadSpace | short with image', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathShortWithImage}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g100' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | short with image | g100 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathShortWithImage}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g90' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | short with image | g90 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathShortWithImage}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g10' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | short with image | g10 theme', { + widths: [1280], + }); + }); + }); +}); + +describe('LeadSpace | medium', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathMedium}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g100' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | medium | g100 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathMedium}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g90' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | medium | g90 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathMedium}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g10' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | medium | g10 theme', { + widths: [1280], + }); + }); + }); +}); + +describe('LeadSpace | medium with image', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathMediumWithImage}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g100' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | medium with image | g100 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathMediumWithImage}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g90' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | medium with image | g90 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathMediumWithImage}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g10' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | medium with image | g10 theme', { + widths: [1280], + }); + }); + }); +}); + +describe('LeadSpace | super', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathSuper}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g100' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | super | g100 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathSuper}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g90' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | super | g90 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathSuper}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g10' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | super | g10 theme', { + widths: [1280], + }); + }); + }); +}); + +describe('LeadSpace | super with image', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_pathSuperWithImage}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g100' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | super with image | g100 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_pathSuperWithImage}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g90' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | super with image | g90 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_pathSuperWithImage}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g10' + ); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LeadSpace | super with image | g10 theme', { + widths: [1280], + }); + }); + }); +}); diff --git a/packages/react/src/components/LocaleModal/__tests__/LocaleModal.e2e.js b/packages/react/src/components/LocaleModal/__tests__/LocaleModal.e2e.js new file mode 100644 index 00000000000..57e9d575cc3 --- /dev/null +++ b/packages/react/src/components/LocaleModal/__tests__/LocaleModal.e2e.js @@ -0,0 +1,53 @@ +/** + * Copyright IBM Corp. 2021 + * + * 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 host to run tests + * + * @type {string|string} + * @private + */ +const _host = + (process && process.env.C4IBM_E2E_STORYBOOK_HOST) || 'http://localhost:8081'; + +/** + * Sets the correct path + * + * @type {string} + * @private + */ +const _path = '/iframe.html?id=components-locale-modal--default'; + +describe('LocaleModal | default', () => { + beforeEach(() => { + cy.visit(`${_host}/${_path}`); + cy.viewport(1280, 780); + }); + + it('should load the Americas region', () => { + cy.get('[data-region="am"]').click(); + + cy.screenshot(); + + // Take a snapshot for visual diffing + cy.percySnapshot('LocaleModal | region selected', { + widths: [1280], + }); + }); + + it('should filter locales/languages', () => { + cy.get('[data-region="am"]').click(); + + cy.get('[data-autoid="dds--locale-modal__filter"]').type('ca'); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('LocaleModal | filter', { + widths: [1280], + }); + }); +}); diff --git a/packages/react/src/components/Masthead/__tests__/Masthead.e2e.js b/packages/react/src/components/Masthead/__tests__/Masthead.e2e.js new file mode 100644 index 00000000000..6198de8b5a2 --- /dev/null +++ b/packages/react/src/components/Masthead/__tests__/Masthead.e2e.js @@ -0,0 +1,136 @@ +/** + * Copyright IBM Corp. 2021 + * + * 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 host to run tests + * + * @type {string|string} + * @private + */ +const _host = + (process && process.env.C4IBM_E2E_STORYBOOK_HOST) || 'http://localhost:8081'; + +/** + * Sets the correct path (default Masthead) + * + * @type {string} + * @private + */ +const _pathDefault = '/iframe.html?id=components-masthead--default'; + +/** + * Sets the correct path (Custom Masthead) + * + * @type {string} + * @private + */ +const _pathCustom = + '/iframe.html?id=components-masthead--with-custom-navigation'; + +/** + * Sets the correct path (Masthead with Platform) + * + * @type {string} + * @private + */ +const _pathPlatform = '/iframe.html?id=components-masthead--with-platform'; + +describe('Masthead | default (desktop)', () => { + beforeEach(() => { + cy.visit(`${_host}/${_pathDefault}`); + cy.viewport(1280, 780); + }); + + it('should load the megamenu - first nav item', () => { + cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').click(); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('Masthead | mega menu (nav 0)', { + widths: [1280], + }); + }); + + it('should load the megamenu - second nav item', () => { + cy.get('[data-autoid="dds--masthead-default__l0-nav1"]').click(); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('Masthead | mega menu (nav 1)', { + widths: [1280], + }); + }); + + it('should open the login menu', () => { + cy.get('[data-autoid="dds--masthead-default__l0-account"]').click(); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('Masthead | profile menu', { + widths: [1280], + }); + }); +}); + +describe('Masthead | default (mobile)', () => { + beforeEach(() => { + cy.visit(`${_host}/${_pathDefault}`); + cy.viewport(320, 780); + }); + + it('should load the mobile menu', () => { + cy.get('[data-autoid="dds--masthead-default-sidenav__l0-menu"]').click(); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('Masthead | mobile menu', { + widths: [320], + }); + + cy.get('[data-autoid="dds--masthead-default-sidenav__l0-nav0"]').click(); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('Masthead | mobile menu level 2', { + widths: [320], + }); + }); +}); + +describe('Masthead | custom (desktop)', () => { + beforeEach(() => { + cy.visit(`${_host}/${_pathCustom}`); + cy.viewport(1280, 780); + }); + + it('should scroll the L0 overflow properly', () => { + cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').click(); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('Masthead | custom - overflow', { + widths: [1280], + }); + }); +}); + +describe('Masthead | with platform (desktop)', () => { + beforeEach(() => { + cy.visit(`${_host}/${_pathPlatform}`); + cy.viewport(1280, 780); + }); + + it('should open the search bar with platform', () => { + cy.get('[data-autoid="dds--masthead-eco__l0-search"]').click(); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('Masthead | with platform - search', { + widths: [1280], + }); + }); +}); diff --git a/packages/react/src/components/Quote/__tests__/Quote.e2e.js b/packages/react/src/components/Quote/__tests__/Quote.e2e.js new file mode 100644 index 00000000000..803d587b2c2 --- /dev/null +++ b/packages/react/src/components/Quote/__tests__/Quote.e2e.js @@ -0,0 +1,83 @@ +/** + * Copyright IBM Corp. 2021 + * + * 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 host to run tests + * + * @type {string|string} + * @private + */ +const _host = + (process && process.env.C4IBM_E2E_STORYBOOK_HOST) || 'http://localhost:8081'; + +/** + * Sets the correct path + * + * @type {string} + * @private + */ +const _path = '/iframe.html?id=components-quote--default'; + +/* eslint-disable cypress/no-unnecessary-waiting */ +describe('Quote | default', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_path}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g100' + ); + cy.wait(500); + cy.screenshot(); + + // Take a snapshot for visual diffing + cy.percySnapshot('Quote | default | g100 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_path}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g90' + ); + cy.wait(500); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('Quote | default | g90 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_path}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g10' + ); + cy.wait(500); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('Quote | default | g10 theme', { + widths: [1280], + }); + }); + }); +}); diff --git a/packages/react/src/components/TableOfContents/__tests__/TableOfContents.e2e.js b/packages/react/src/components/TableOfContents/__tests__/TableOfContents.e2e.js new file mode 100644 index 00000000000..29f46852f42 --- /dev/null +++ b/packages/react/src/components/TableOfContents/__tests__/TableOfContents.e2e.js @@ -0,0 +1,84 @@ +/** + * Copyright IBM Corp. 2021 + * + * 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 host to run tests + * + * @type {string|string} + * @private + */ +const _host = + (process && process.env.C4IBM_E2E_STORYBOOK_HOST) || 'http://localhost:8081'; + +/** + * Sets the correct path + * + * @type {string} + * @private + */ +const _path = + '/iframe.html?id=components-table-of-contents--manually-define-menu-items'; + +/* eslint-disable cypress/no-unnecessary-waiting */ +describe('TableOfContents | manually defined', () => { + it('should load the g100 theme', () => { + cy.visit(`${_host}/${_path}&theme=g100`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g100' + ); + cy.wait(500); + cy.screenshot(); + + // Take a snapshot for visual diffing + cy.percySnapshot('TableOfContents | manually defined | g100 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g90 theme', () => { + cy.visit(`${_host}/${_path}&theme=g90`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g90' + ); + cy.wait(500); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('TableOfContents | manually defined | g90 theme', { + widths: [1280], + }); + }); + }); + + it('should load the g10 theme', () => { + cy.visit(`${_host}/${_path}&theme=g10`); + cy.viewport(1280, 780); + + cy.window().then(win => { + win.document.documentElement.setAttribute( + 'storybook-carbon-theme', + 'g10' + ); + cy.wait(500); + + cy.screenshot(); + // Take a snapshot for visual diffing + cy.percySnapshot('TableOfContents | manually defined | g10 theme', { + widths: [1280], + }); + }); + }); +}); diff --git a/packages/react/tests/e2e-storybook/.percy.json b/packages/react/tests/e2e-storybook/.percy.json new file mode 100644 index 00000000000..6bed27c5f3a --- /dev/null +++ b/packages/react/tests/e2e-storybook/.percy.json @@ -0,0 +1,9 @@ +{ + "version": 2, + "snapshot": { + "widths": [ + 375, + 1280 + ] + } +} diff --git a/packages/react/tests/e2e-storybook/cypress.json b/packages/react/tests/e2e-storybook/cypress.json new file mode 100644 index 00000000000..42a0b4a7455 --- /dev/null +++ b/packages/react/tests/e2e-storybook/cypress.json @@ -0,0 +1,16 @@ +{ + "baseUrl": "http://localhost:8081", + "browser": "chrome", + "headless": true, + "fixturesFolder": false, + "fileServerFolder": "storybook-static", + "screenshotsFolder": "tests/e2e-storybook/cypress/screenshots", + "videosFolder": "tests/e2e-storybook/cypress/videos", + "integrationFolder": "src/components", + "supportFile": "tests/e2e-storybook/cypress/support/index.js", + "pluginsFile": "tests/e2e-storybook/cypress/plugins/index.js", + "nodeVersion": "system", + "testFiles": "**/*.e2e.js", + "pageLoadTimeout": 30000, + "defaultCommandTimeout": 30000 +} diff --git a/packages/react/tests/e2e-storybook/cypress/plugins/index.js b/packages/react/tests/e2e-storybook/cypress/plugins/index.js new file mode 100644 index 00000000000..3ae7465af44 --- /dev/null +++ b/packages/react/tests/e2e-storybook/cypress/plugins/index.js @@ -0,0 +1,12 @@ +/** + * Copyright IBM Corp. 2021 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +// eslint-disable-next-line no-unused-vars +module.exports = (on, config) => { + // `on` is used to hook into various events Cypress emits + // `config` is the resolved Cypress config +}; diff --git a/packages/react/tests/e2e-storybook/cypress/support/commands.js b/packages/react/tests/e2e-storybook/cypress/support/commands.js new file mode 100644 index 00000000000..1211d9f7b91 --- /dev/null +++ b/packages/react/tests/e2e-storybook/cypress/support/commands.js @@ -0,0 +1,17 @@ +/** + * Copyright IBM Corp. 2021 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import countrylist from './data/countrylist.json'; +import translation from './data/translation.json'; + +/** + * Sets the translation data in sessionStorage + */ +Cypress.Commands.add('setTranslations', () => { + window.sessionStorage.setItem('dds-countrylist-us-en', countrylist); + window.sessionStorage.setItem('dds-translation-us-en', translation); +}); diff --git a/packages/react/tests/e2e-storybook/cypress/support/data/countrylist.json b/packages/react/tests/e2e-storybook/cypress/support/data/countrylist.json new file mode 100644 index 00000000000..437dd737b7f --- /dev/null +++ b/packages/react/tests/e2e-storybook/cypress/support/data/countrylist.json @@ -0,0 +1 @@ +{"regionList":[{"name":"Americas","key":"am","countryList":[{"name":"Anguilla","locale":[["en-ai","English"]]},{"name":"Antigua and Barbuda","locale":[["en-ag","English"]]},{"name":"Argentina","locale":[["es-ar","Spanish (Español)"]]},{"name":"Aruba","locale":[["en-aw","English"]]},{"name":"Bahamas","locale":[["en-bs","English"]]},{"name":"Barbados","locale":[["en-bb","English"]]},{"name":"Bermuda","locale":[["en-bm","English"]]},{"name":"Bolivia","locale":[["es-bo","Spanish (Español)"]]},{"name":"Brazil (Brasil)","locale":[["pt-br","Portuguese (Português)"]]},{"name":"Canada","locale":[["en-ca","English"]]},{"name":"Canada","locale":[["fr-ca","French (Français)"]]},{"name":"Cayman Islands","locale":[["en-ky","English"]]},{"name":"Chile","locale":[["es-cl","Spanish (Español)"]]},{"name":"Colombia","locale":[["es-co","Spanish (Español)"]]},{"name":"Costa Rica","locale":[["es-cr","Spanish (Español)"]]},{"name":"Curacao","locale":[["en-cw","English"]]},{"name":"Dominica","locale":[["en-dm","English"]]},{"name":"Ecuador","locale":[["es-ec","Spanish (Español)"]]},{"name":"Grenada","locale":[["en-gd","English"]]},{"name":"Guyana","locale":[["en-gy","English"]]},{"name":"Jamaica","locale":[["en-jm","English"]]},{"name":"Mexico","locale":[["es-mx","Spanish (Español)"]]},{"name":"Montserrat","locale":[["en-ms","English"]]},{"name":"Paraguay","locale":[["es-py","Spanish (Español)"]]},{"name":"Peru","locale":[["es-pe","Spanish (Español)"]]},{"name":"Saint Kitts and Nevis","locale":[["en-kn","English"]]},{"name":"Saint Lucia","locale":[["en-lc","English"]]},{"name":"Saint Vincent and the Grenadines","locale":[["en-vc","English"]]},{"name":"Suriname","locale":[["en-sr","English"]]},{"name":"Trinidad and Tobago","locale":[["en-tt","English"]]},{"name":"Turks and Caicos Islands","locale":[["en-tc","English"]]},{"name":"United States","locale":[["en-us","English"]]},{"name":"Uruguay","locale":[["es-uy","Spanish (Español)"]]},{"name":"Venezuela","locale":[["es-ve","Spanish (Español)"]]},{"name":"Virgin Islands, British","locale":[["en-vg","English"]]}]},{"name":"Asia Pacific","key":"ap","countryList":[{"name":"Australia","locale":[["en-au","English"]]},{"name":"Bangladesh","locale":[["en-bd","English"]]},{"name":"Brunei Darussalam","locale":[["en-bn","English"]]},{"name":"Cambodia","locale":[["en-kh","English"]]},{"name":"China (中国)","locale":[["zh-cn","Chinese (简体中文)"]]},{"name":"Hong Kong S.A.R. of China","locale":[["en-hk","English"]]},{"name":"India","locale":[["en-in","English"]]},{"name":"Indonesia","locale":[["en-id","English"]]},{"name":"Japan (日本)","locale":[["ja-jp","Japanese (日本語)"]]},{"name":"Korea, Republic of (대한민국)","locale":[["ko-kr","Korean (한국어)"]]},{"name":"Malaysia","locale":[["en-my","English"]]},{"name":"Nepal","locale":[["en-np","English"]]},{"name":"New Zealand","locale":[["en-nz","English"]]},{"name":"Philippines","locale":[["en-ph","English"]]},{"name":"Singapore","locale":[["en-sg","English"]]},{"name":"Sri Lanka","locale":[["en-lk","English"]]},{"name":"Taiwan (台灣)","locale":[["zh-tw","Chinese (繁體中文)"]]},{"name":"Thailand","locale":[["en-th","English"]]},{"name":"Vietnam","locale":[["en-vn","English"]]}]},{"name":"Europe","key":"eu","countryList":[{"name":"Austria (Österreich)","locale":[["de-at","German (Deutsch)"]]},{"name":"Belgium/Luxembourg","locale":[["en-be","English"]]},{"name":"Bulgaria","locale":[["en-bg","English"]]},{"name":"Croatia","locale":[["en-hr","English"]]},{"name":"Cyprus","locale":[["en-cy","English"]]},{"name":"Czech Republic","locale":[["en-cz","English"]]},{"name":"Denmark","locale":[["en-dk","English"]]},{"name":"Estonia","locale":[["en-ee","English"]]},{"name":"Finland","locale":[["en-fi","English"]]},{"name":"France","locale":[["fr-fr","French (Français)"]]},{"name":"Germany (Deutschland)","locale":[["de-de","German (Deutsch)"]]},{"name":"Greece","locale":[["en-gr","English"]]},{"name":"Hungary","locale":[["en-hu","English"]]},{"name":"Ireland","locale":[["en-ie","English"]]},{"name":"Italy (Italia)","locale":[["it-it","Italian (Italiano)"]]},{"name":"Kazakhstan","locale":[["en-kz","English"]]},{"name":"Latvia","locale":[["en-lv","English"]]},{"name":"Lithuania","locale":[["en-lt","English"]]},{"name":"Netherlands","locale":[["en-nl","English"]]},{"name":"Norway","locale":[["en-no","English"]]},{"name":"Poland (Polska)","locale":[["pl-pl","Polish (Polskie)"]]},{"name":"Portugal","locale":[["en-pt","English"]]},{"name":"Romania","locale":[["en-ro","English"]]},{"name":"Russian (Россия)","locale":[["ru-ru","Russian (русский)"]]},{"name":"Serbia","locale":[["en-rs","English"]]},{"name":"Slovakia","locale":[["en-sk","English"]]},{"name":"Slovenia","locale":[["en-si","English"]]},{"name":"Spain (España)","locale":[["es-es","Spanish (Español)"]]},{"name":"Sweden","locale":[["en-se","English"]]},{"name":"Switzerland (Suisse)","locale":[["fr-ch","French (Français)"]]},{"name":"Switzerland (Schweiz)","locale":[["de-ch","German (Deutsch)"]]},{"name":"Turkey (Türkiye)","locale":[["tr-tr","Turkish (Türk)"]]},{"name":"Ukraine","locale":[["en-ua","English"]]},{"name":"United Kingdom","locale":[["en-uk","English"]]},{"name":"United Kingdom","locale":[["en-gb","English"]]},{"name":"Uzbekistan","locale":[["en-uz","English"]]}]},{"name":"Middle East and Africa","key":"mea","countryList":[{"name":"Afghanistan","locale":[["en-af","English"]]},{"name":"Algeria (Algérie)","locale":[["fr-dz","French (Français)"]]},{"name":"Angola","locale":[["pt-ao","Portuguese (Português)"]]},{"name":"Bahrain","locale":[["en-bh","English"]]},{"name":"Botswana","locale":[["en-bw","English"]]},{"name":"Burkina Faso","locale":[["fr-bf","French (Français)"]]},{"name":"Cameroon (Cameroun)","locale":[["fr-cm","French (Français)"]]},{"name":"Chad (Tchad)","locale":[["fr-td","French (Français)"]]},{"name":"Congo","locale":[["fr-cg","French (Français)"]]},{"name":"Congo, Democratic Republic of (République Démocratique du Congo)","locale":[["fr-cd","French (Français)"]]},{"name":"Egypt","locale":[["en-eg","English"]]},{"name":"Ethiopia","locale":[["en-et","English"]]},{"name":"Gabon","locale":[["fr-ga","French (Français)"]]},{"name":"Ghana","locale":[["en-gh","English"]]},{"name":"Iraq","locale":[["en-iq","English"]]},{"name":"Israel","locale":[["en-il","English"]]},{"name":"Ivory Coast (Côte d'Ivoire)","locale":[["fr-ci","French (Français)"]]},{"name":"Jordan","locale":[["en-jo","English"]]},{"name":"Kenya","locale":[["en-ke","English"]]},{"name":"Kuwait","locale":[["en-kw","English"]]},{"name":"Lebanon","locale":[["en-lb","English"]]},{"name":"Libya","locale":[["en-ly","English"]]},{"name":"Madagascar","locale":[["fr-mg","French (Français)"]]},{"name":"Malawi","locale":[["en-mw","English"]]},{"name":"Mauritius (Maurice)","locale":[["fr-mu","French (Français)"]]},{"name":"Morocco (Maroc)","locale":[["fr-ma","French (Français)"]]},{"name":"Mozambique","locale":[["pt-mz","Portuguese (Português)"]]},{"name":"Namibia","locale":[["en-na","English"]]},{"name":"Niger","locale":[["fr-ne","French (Français)"]]},{"name":"Nigeria","locale":[["en-ng","English"]]},{"name":"Oman","locale":[["en-om","English"]]},{"name":"Pakistan","locale":[["en-pk","English"]]},{"name":"Qatar","locale":[["en-qa","English"]]},{"name":"Saudi Arabia","locale":[["en-sa","English"]]},{"name":"Saudi Arabia (المملكة العربية السعودية)","locale":[["ar-sa","Arabic (عربى)"]]},{"name":"Senegal (Sénégal)","locale":[["fr-sn","French (Français)"]]},{"name":"Seychelles","locale":[["fr-sc","French (Français)"]]},{"name":"Sierra Leone","locale":[["en-sl","English"]]},{"name":"South Africa","locale":[["en-za","English"]]},{"name":"Tanzania, United Republic of","locale":[["en-tz","English"]]},{"name":"Tunisia (Tunisie)","locale":[["fr-tn","French (Français)"]]},{"name":"Uganda","locale":[["en-ug","English"]]},{"name":"United Arab Emirates","locale":[["en-ae","English"]]},{"name":"United Arab Emirates (الإمارات العربية المتحدة)","locale":[["ar-ae","Arabic (عربى)"]]},{"name":"Yemen","locale":[["en-ye","English"]]},{"name":"Zambia","locale":[["en-zm","English"]]},{"name":"Zimbabwe","locale":[["en-zw","English"]]}]}],"localeModal":{"headerTitle":"Select geographic area","modalClose":"Close modal","searchLabel":"Search by location or language. Note: Location/Language will be dynamically updated as you provide the input","searchClearText":"Clear search input","searchPlaceholder":"Search by location or language","availabilityText":"This page is available in the following locations and languages","unavailabilityText":"This page is unavailable in your preferred location or language"},"timestamp":1629893493451,"locale":{"lc":"en","cc":"us"}} diff --git a/packages/react/tests/e2e-storybook/cypress/support/data/translation.json b/packages/react/tests/e2e-storybook/cypress/support/data/translation.json new file mode 100644 index 00000000000..cb03bdd6b15 --- /dev/null +++ b/packages/react/tests/e2e-storybook/cypress/support/data/translation.json @@ -0,0 +1 @@ +{"mastheadNav":{"links":[{"title":"Products & Solutions","titleEnglish":"Products & Solutions","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"The essentials","menuItems":[{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"","highlighted":true,"megapanelContent":{"headingTitle":"Hybrid Cloud","headingUrl":"","description":"Blend cloud and on-premises resources for flexibility and balance","quickLinks":{"title":"","links":[{"title":"What is Hybrid Cloud?","titleEnglish":"What is Hybrid Cloud?","highlightedLink":true,"url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmps_ess"},{"title":"Hybrid Cloud solutions","titleEnglish":"Hybrid Cloud solutions","highlightedLink":true,"url":"https://www.ibm.com/cloud/go-hybrid?lnk=hpmps_ess"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"","highlighted":true,"megapanelContent":{"headingTitle":"Artificial intelligence","headingUrl":"","description":"Unlock the value in your organization with Watson","quickLinks":{"title":"","links":[{"title":"What is AI?","titleEnglish":"What is AI?","highlightedLink":true,"url":"https://www.ibm.com/cloud/learn/artificial-intelligence?lnk=hpmps_ess"},{"title":"AI solutions","titleEnglish":"AI solutions","highlightedLink":true,"url":"https://www.ibm.com/cloud/ai?lnk=hpmps_ess"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Top products & platforms","titleEnglish":"Top products & platforms","url":"https://www.ibm.com/products?lnk=hpmps_bupr","megapanelContent":{"headingTitle":"Top products & platforms","headingUrl":"https://www.ibm.com/products?lnk=hpmps_bupr","description":"","quickLinks":{"title":"","links":[{"title":"Aspera","titleEnglish":"Aspera","url":"https://www.ibm.com/products/aspera?lnk=hpmps_bupr"},{"title":"Cognos","titleEnglish":"Cognos","url":"https://www.ibm.com/products/cognos-analytics?lnk=hpmps_bupr"},{"title":"Db2","titleEnglish":"Db2","url":"https://www.ibm.com/analytics/db2?lnk=hpmps_bupr"},{"title":"IBM Cloud","titleEnglish":"IBM Cloud","url":"https://www.ibm.com/cloud?lnk=hpmps_bupr"},{"title":"IBM Cloud Paks","titleEnglish":"IBM Cloud Paks","url":"https://www.ibm.com/cloud/paks?lnk=hpmps_bupr"},{"title":"IBM Sterling","titleEnglish":"IBM Sterling","url":"https://www.ibm.com/supply-chain/sterling?lnk=hpmps_bupr"},{"title":"IBM Storage","titleEnglish":"IBM Storage","url":"https://www.ibm.com/it-infrastructure/storage/?lnk=hpmps_bupr"},{"title":"IBM Z","titleEnglish":"IBM Z","url":"https://www.ibm.com/it-infrastructure/z?lnk=hpmps_bupr"},{"title":"Red Hat OpenShift","titleEnglish":"Red Hat OpenShift","url":"https://www.ibm.com/cloud/openshift?lnk=hpmps_bupr"},{"title":"SPSS Statistics","titleEnglish":"SPSS Statistics","url":"https://www.ibm.com/products/spss-statistics?lnk=hpmps_bupr"},{"title":"Watson","titleEnglish":"Watson","url":"https://www.ibm.com/watson?lnk=hpmps_bupr"},{"title":"WebSphere","titleEnglish":"WebSphere","url":"https://www.ibm.com/cloud/websphere-application-server?lnk=hpmps_bupr"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Solutions","titleEnglish":"Solutions","url":"","megapanelContent":{"headingTitle":"Solutions","headingUrl":"","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"https://www.ibm.com/cloud/ai?lnk=hpmps_buai"},{"title":"Automation","titleEnglish":"Business automation","url":"https://www.ibm.com/cloud/automation?lnk=hpmps_buau"},{"title":"Blockchain","titleEnglish":"Blockchain","url":"https://www.ibm.com/blockchain?lnk=hpmps_bubc"},{"title":"Business operations","titleEnglish":"Business operations","url":"https://www.ibm.com/business-operations?lnk=hpmps_buop"},{"title":"Cloud computing","titleEnglish":"Cloud computing","url":"https://www.ibm.com/cloud?lnk=hpmps_bucl"},{"title":"Data & Analytics","titleEnglish":"Data & Analytics","url":"https://www.ibm.com/analytics?lnk=hpmps_buda"},{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"https://www.ibm.com/cloud/hybrid?lnk=hpmps_bucl"},{"title":"IT infrastructure","titleEnglish":"IT infrastructure","url":"https://www.ibm.com/it-infrastructure?lnk=hpmps_buit"},{"title":"Quantum computing","titleEnglish":"Quantum computing","url":"https://www.ibm.com/quantum-computing/?lnk=hpmps_qc"},{"title":"Security","titleEnglish":"Security","url":"https://www.ibm.com/security?lnk=hpmps_buse"},{"title":"Supply chain","titleEnglish":"Supply chain","url":"https://www.ibm.com/supply-chain?lnk=hpmps_busc"},{"title":"COVID-19 solutions","titleEnglish":"COVID-19 solutions","url":"https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmps_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Industries","titleEnglish":"Industries","url":"https://www.ibm.com/industries?lnk=hpmps_buin","megapanelContent":{"headingTitle":"Industries","headingUrl":"https://www.ibm.com/industries?lnk=hpmps_buin","description":"","quickLinks":{"title":"","links":[{"title":"Aerospace & defense","titleEnglish":"Aerospace & defense","url":"https://www.ibm.com/industries/aerospace-defense?lnk=hpmps_buin"},{"title":"Automotive","titleEnglish":"Automotive","url":"https://www.ibm.com/industries/automotive?lnk=hpmps_buin"},{"title":"Banking & financial markets","titleEnglish":"Banking & financial markets","url":"https://www.ibm.com/industries/banking-financial-markets?lnk=hpmps_buin"},{"title":"Education","titleEnglish":"Education","url":"https://www.ibm.com/industries/education?lnk=hpmps_buin"},{"title":"Electronics","titleEnglish":"Electronics","url":"https://www.ibm.com/industries/electronics?lnk=hpmps_buin"},{"title":"Energy & utilities","titleEnglish":"Energy & utilities","url":"https://www.ibm.com/industries/energy?lnk=hpmps_buin"},{"title":"Government","titleEnglish":"Government","url":"https://www.ibm.com/industries/government?lnk=hpmps_buin"},{"title":"Healthcare","titleEnglish":"Healthcare","url":"https://www.ibm.com/industries/healthcare?lnk=hpmps_buin"},{"title":"Insurance","titleEnglish":"Insurance","url":"https://www.ibm.com/industries/insurance?lnk=hpmps_buin"},{"title":"Life sciences","titleEnglish":"Life sciences","url":"https://www.ibm.com/industries/lifesciences?lnk=hpmps_buin"},{"title":"View all Industries","titleEnglish":"View all Industries","url":"https://www.ibm.com/industries?lnk=hpmps_buin#2546397"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"View all products","titleEnglish":"View all products","url":"https://www.ibm.com/products?lnk=hpmps_buall","megaPanelViewAll":true}]}]},{"title":"Services & Consulting","titleEnglish":"Services & Consulting","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"Business consulting services","titleEnglish":"Business process services","url":"https://www.ibm.com/services/business?lnk=hpmsc_bups","megapanelContent":{"headingTitle":"Business consulting services","headingUrl":"https://www.ibm.com/services/business?lnk=hpmsc_bups","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence services","titleEnglish":"Artificial intelligence services","url":"https://www.ibm.com/services/artificial-intelligence?lnk=hpmsc_bups"},{"title":"Automation","titleEnglish":"Automation","url":"https://www.ibm.com/cloud/automation/services?lnk=hpmsc_bups"},{"title":"Big data & data platform","titleEnglish":"Big data & data platform","url":"https://www.ibm.com/services/big-data-services?lnk=hpmsc_bups"},{"title":"Business process outsourcing","titleEnglish":"Business process outsourcing","url":"https://www.ibm.com/services/process/outsourcing?lnk=hpmsc_bups"},{"title":"Edge consulting","titleEnglish":"Edge consulting","url":"https://www.ibm.com/services/process/edge-services?lnk=hpmsc_bups"},{"title":"Finance consulting and outsourcing services","titleEnglish":"Finance transformation","url":"https://www.ibm.com/services/process/finance-consulting?lnk=hpmsc_bups"},{"title":"Operations consulting","titleEnglish":"IoT consulting","url":"https://www.ibm.com/services/process/operations-consulting?lnk=hpmsc_bups"},{"title":"Procurement consulting and managed services","titleEnglish":"Procurement & strategic sourcing","url":"https://www.ibm.com/services/process/procurement-consulting?lnk=hpmsc_bups"},{"title":"Risk management consulting services","titleEnglish":"Risk consulting & fraud management","url":"https://www.ibm.com/services/process/risk-management?lnk=hpmsc_bups"},{"title":"Supply chain consulting services","titleEnglish":"Supply chain","url":"https://www.ibm.com/services/process/supply-chain?lnk=hpmsc_bups"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/79a6c3cde7dd0665/original/megamenu-pictogram-business-process-service.png","linkTitle":"","linkUrl":""}}},{"title":"Design & business strategy","titleEnglish":"Design & business strategy","url":"https://www.ibm.com/services/ibmix/?lnk=hpmsc_budbs","megapanelContent":{"headingTitle":"Design & business strategy","headingUrl":"https://www.ibm.com/services/ibmix/?lnk=hpmsc_bubs","description":"","quickLinks":{"title":"","links":[{"title":"Customer experience consulting","titleEnglish":"Experience strategy","url":"https://www.ibm.com/services/customer-experience-consulting?lnk=hpmsc_bubs"},{"title":"E-commerce consulting","titleEnglish":"Digital strategy","url":"https://www.ibm.com/services/ecommerce?lnk=hpmsc_bubs"},{"title":"Marketing consulting","titleEnglish":"Marketing platforms","url":"https://www.ibm.com/services/marketing-consulting?lnk=hpmsc_bubs"},{"title":"Salesforce consulting","titleEnglish":"Salesforce consulting","url":"https://www.ibm.com/services/salesforce?lnk=hpmsc_bubs"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/1b7522c50ea39ca/original/megamenu-pictogram-design-business-strategy.png","linkTitle":"","linkUrl":""}}},{"title":"Hybrid multicloud services","titleEnglish":"Hybrid multicloud services","url":"https://www.ibm.com/services/cloud?lnk=hpmsc_buhs","megapanelContent":{"headingTitle":"Hybrid multicloud services","headingUrl":"https://www.ibm.com/services/cloud?lnk=hpmsc_buhs","description":"","quickLinks":{"title":"","links":[{"title":"Business continuity & resiliency","titleEnglish":"Business continuity & resiliency","url":"https://www.ibm.com/services/business-continuity?lnk=hpmsc_buhs"},{"title":"Cloud services","titleEnglish":"Cloud services","url":"https://www.ibm.com/cloud/services?lnk=hpmsc_buhs"},{"title":"Network","titleEnglish":"Network","url":"https://www.ibm.com/services/network?lnk=hpmsc_buhs"},{"title":"Workplace services","titleEnglish":"Workplace services","url":"https://www.ibm.com/services/digital-workplace?lnk=hpmsc_buhs"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5daa9dce872913ea/original/megamenu-pictogram-hybrid-multi-cloud-services.png","linkTitle":"","linkUrl":""}}},{"title":"Talent management services","titleEnglish":"Talent & transformation","url":"https://www.ibm.com/services/talent-management?lnk=hpmsc_buta","megapanelContent":{"headingTitle":"Talent management services","headingUrl":"https://www.ibm.com/services/talent-management?lnk=hpmsc_buta","description":"","quickLinks":{"title":"","links":[{"title":"HR transformation services","titleEnglish":"HR transformation","url":"https://www.ibm.com/services/talent-management/hr-transformation?lnk=hpmsc_buta"},{"title":"Talent acquisition services","titleEnglish":"Talent acquisition","url":"https://www.ibm.com/services/talent-management/talent-acquisition?lnk=hpmsc_buta"},{"title":"Talent development services","titleEnglish":"Talent development","url":"https://www.ibm.com/services/talent-management/talent-development?lnk=hpmsc_buta"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/69e350b141e12bd5/original/megamenu-pictogram-talent-and-transformation.png","linkTitle":"","linkUrl":""}}},{"title":"Application services","titleEnglish":"Application services","url":"https://www.ibm.com/services/applications?lnk=hpmsc_buas","megapanelContent":{"headingTitle":"Application services","headingUrl":"https://www.ibm.com/services/applications?lnk=hpmsc_buas","description":"","quickLinks":{"title":"","links":[{"title":"Application development","titleEnglish":"Application development","url":"https://www.ibm.com/services/applications/development?lnk=hpmsc_buas"},{"title":"Application Modernization","titleEnglish":"Application Modernization","url":"https://www.ibm.com/services/cloud/modernize-applications?lnk=hpmsc_buas"},{"title":"Enterprise application management","titleEnglish":"Enterprise application management","url":"https://www.ibm.com/services/cloud/enterprise-application-management?lnk=hpmsc_buas"},{"title":"Enterprise applications strategy","titleEnglish":"Enterprise applications strategy","url":"https://www.ibm.com/services/applications/enterprise?lnk=hpmsc_buas"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/2b7c180c68557dcb/original/megamenu-pictogram-application-services.png","linkTitle":"","linkUrl":""}}},{"title":"IBM Garage","titleEnglish":"IBM Garages","url":"https://www.ibm.com/garage?lnk=hpmsc_buas"},{"title":"Security services","titleEnglish":"Security services","url":"https://www.ibm.com/security/services?lnk=hpmsc_buse","megapanelContent":{"headingTitle":"Security services","headingUrl":"https://www.ibm.com/security/services?lnk=hpmsc_buse","description":"","quickLinks":{"title":"","links":[{"title":"Application security","titleEnglish":"Application security","url":"https://www.ibm.com/security/services/application-security-services?lnk=hpmsc_buse"},{"title":"Cloud security","titleEnglish":"Cloud security","url":"https://www.ibm.com/security/services/cloud-security-services?lnk=hpmsc_buse"},{"title":"Data security","titleEnglish":"Data security","url":"https://www.ibm.com/security/services/data-security?lnk=hpmsc_buse"},{"title":"Identity & access management","titleEnglish":"Identity & access management","url":"https://www.ibm.com/security/services/identity-access-management?lnk=hpmsc_buse"},{"title":"Managed security","titleEnglish":"Managed security","url":"https://www.ibm.com/security/services/managed-security-services?lnk=hpmsc_buse"},{"title":"Security governance","titleEnglish":"Security governance","url":"https://www.ibm.com/security/services/security-governance?lnk=hpmsc_buse"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/6ecec25a8489cf82/original/megamenu-pictogram-security-services.png","linkTitle":"","linkUrl":""}}},{"title":"Services for tech support","titleEnglish":"Services for tech support","url":"https://www.ibm.com/services/technology-support?lnk=hpmsc_busv","megapanelContent":{"headingTitle":"Services for tech support","headingUrl":"https://www.ibm.com/services/technology-support?lnk=hpmsc_busv","description":"","quickLinks":{"title":"","links":[{"title":"Open source","titleEnglish":"Open source","url":"https://www.ibm.com/services/technology-support/open-source?lnk=hpmsc_busv"},{"title":"Third party & multivendor","titleEnglish":"Third party & multivendor","url":"https://www.ibm.com/services/technology-support/multivendor-it?lnk=hpmsc_busv"},{"title":"IBM warranties and maintenance","titleEnglish":"IBM warranties and maintenance","url":"https://www.ibm.com/services/technology-support/hardware-software?lnk=hpmsc_busv"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/7056e2b83b04133e/original/megamenu-pictogram-services-for-tech-support.png","linkTitle":"","linkUrl":""}}},{"title":"Flexible payment plans","titleEnglish":"Flexible payment plans","url":"https://www.ibm.com/financing?lnk=hpmsc_bufi"},{"title":"View all services","titleEnglish":"View all services","url":"https://www.ibm.com/services?lnk=hpmsc_buall","megaPanelViewAll":true}]}]},{"title":"Learn & Support","titleEnglish":"Learn & Support","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"What is...","titleEnglish":"What is...","url":"https://www.ibm.com/cloud/learn?lnk=hpmls_buwi","megapanelContent":{"headingTitle":"What is...","headingUrl":"https://www.ibm.com/cloud/learn?lnk=hpmls_buwi","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=hpmls_buwi"},{"title":"Automation","titleEnglish":"Automation","url":"https://www.ibm.com/topics/automation?lnk=hpmls_buwi"},{"title":"Blockchain","titleEnglish":"Blockchain","url":"https://www.ibm.com/topics/what-is-blockchain?lnk=hpmls_buwi"},{"title":"Business intelligence","titleEnglish":"Business intelligence","url":"https://www.ibm.com/topics/business-intelligence?lnk=hpmls_buwi"},{"title":"Chatbots","titleEnglish":"Chatbots","url":"https://www.ibm.com/cloud/learn/chatbots-explained?lnk=hpmls_buwi"},{"title":"Cloud computing","titleEnglish":"Cloud computing","url":"https://www.ibm.com/cloud/learn/cloud-computing?lnk=hpmls_buwi"},{"title":"Containerization","titleEnglish":"Containerization","url":"https://www.ibm.com/cloud/container-service?lnk=hpmls_buwi"},{"title":"Cybersecurity","titleEnglish":"Cybersecurity","url":"https://www.ibm.com/topics/cybersecurity?lnk=hpmls_buwi"},{"title":"Databases","titleEnglish":"Databases","url":"https://www.ibm.com/cloud/learn/database?lnk=hpmls_buwi"},{"title":"DevOps","titleEnglish":"DevOps","url":"https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=hpmls_buwi"},{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmls_buwi"},{"title":"Kubernetes","titleEnglish":"Kubernetes","url":"https://www.ibm.com/cloud/learn/kubernetes?lnk=hpmls_buwi"},{"title":"Quantum computing","titleEnglish":"Quantum computing","url":"https://www.ibm.com/quantum-computing/learn/what-is-quantum-computing?lnk=hpmls_buwi"},{"title":"Supply chain","titleEnglish":"Supply chain","url":"https://www.ibm.com/topics/supply-chain-management?lnk=hpmls_buwi"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/581adf40f2b008ec/original/megamenu-pictogram-what-is-_.png","linkTitle":"","linkUrl":""}}},{"title":"Training","titleEnglish":"Training","url":"https://www.ibm.com/training/?lnk=hpmls_butr","megapanelContent":{"headingTitle":"Training","headingUrl":"https://www.ibm.com/training/?lnk=hpmls_butr","description":"","quickLinks":{"title":"","links":[{"title":"Courses","titleEnglish":"Courses","url":"https://www.ibm.com/training/search?q=course&lnk=hpmls_butr"},{"title":"Learning journeys","titleEnglish":"Learning journeys","url":"https://www.ibm.com/training/journeys?lnk=hpmls_butr"},{"title":"Professional certifications","titleEnglish":"Professional certifications","url":"https://www.ibm.com/certify?lnk=hpmls_butr"},{"title":"Digital learning subscriptions","titleEnglish":"Digital learning subscriptions","url":"https://www.ibm.com/training/subscriptions?lnk=hpmls_butr"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5540e5627aeb2568/original/megamenu-pictogram-training.png","linkTitle":"","linkUrl":""}}},{"title":"Developer education","titleEnglish":"Developer education","url":"https://developer.ibm.com/?lnk=hpmls_bude","megapanelContent":{"headingTitle":"Developer education","headingUrl":"https://developer.ibm.com/?lnk=hpmls_bude","description":"","quickLinks":{"title":"","links":[{"title":"Code patterns","titleEnglish":"Code patterns","url":"https://developer.ibm.com/patterns/?lnk=hpmls_bude"},{"title":"Developer community","titleEnglish":"Developer community","url":"https://developer.ibm.com/community/?lnk=hpmls_bude"},{"title":"Developer events","titleEnglish":"Developer events","url":"https://developer.ibm.com/events/?lnk=hpmls_bude"},{"title":"Open Source @ IBM","titleEnglish":"Open Source @ IBM","url":"https://ibm.com/opensource?lnk=hpmls_bude"},{"title":"Technical articles","titleEnglish":"Technical articles","url":"https://developer.ibm.com/articles?lnk=hpmls_bude"},{"title":"Tutorials","titleEnglish":"Tutorials","url":"https://developer.ibm.com/tutorials/?lnk=hpmls_bude"},{"title":"Videos","titleEnglish":"Videos","url":"https://developer.ibm.com/videos?lnk=hpmls_bude"},{"title":"View more Developer education","titleEnglish":"View more Developer education","url":"https://developer.ibm.com/?lnk=hpmls_bude"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/1e651d0f7b539774/original/megamenu-pictogram-developer-education.png","linkTitle":"","linkUrl":""}}},{"title":"Documentation","titleEnglish":"Documentation","url":"https://www.ibm.com/docs/en?lnk=hpmls_budc","megapanelContent":{"headingTitle":"Documentation","headingUrl":"https://www.ibm.com/docs/en?lnk=hpmls_budc","description":"","quickLinks":{"title":"","links":[{"title":"All product documentation","titleEnglish":"All product documentation","url":"https://www.ibm.com/docs/en?lnk=hpmls_budc"},{"title":"For products on IBM Cloud","titleEnglish":"For products on IBM Cloud","url":"https://cloud.ibm.com/docs?lnk=hpmls_budc"},{"title":"For use cases — IBM Redbooks","titleEnglish":"For use cases — IBM Redbooks","url":"https://www.redbooks.ibm.com/?lnk=hpmls_budc"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/49d529fab45bb565/original/megamenu-pictogram-documentation.png","linkTitle":"","linkUrl":""}}},{"title":"Community","titleEnglish":"Community","url":"","megapanelContent":{"headingTitle":"Community","headingUrl":"","description":"","quickLinks":{"title":"","links":[{"title":"IBM Developer","titleEnglish":"IBM Developer","url":"https://developer.ibm.com/?lnk=hpmls_buco"},{"title":"IBM Community","titleEnglish":"IBM Community","url":"https://community.ibm.com/community/user/home?lnk=hpmls_buco"},{"title":"Support forums","titleEnglish":"Support forums","url":"https://www.ibm.com/mysupport/s/forumshome?lnk=hpmls_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Resources","titleEnglish":"Resources","url":"https://www.ibm.com/blogs/?lnk=hpmls_bure","megapanelContent":{"headingTitle":"Resources","headingUrl":"https://www.ibm.com/blogs/?lnk=hpmls_bure","description":"","quickLinks":{"title":"","links":[{"title":"Blogs & thought leadership","titleEnglish":"Blogs & thought leadership","url":"https://www.ibm.com/blogs/?lnk=hpmls_bure"},{"title":"Case studies & client stories","titleEnglish":"Case studies & client stories","url":"https://www.ibm.com/case-studies?lnk=hpmls_bure"},{"title":"Upcoming events & webinars","titleEnglish":"Upcoming events & webinars","url":"https://www.ibm.com/events?lnk=hpmls_bure"},{"title":"IBM Institute for Business Value","titleEnglish":"IBM Institute for Business Value","url":"https://www.ibm.com/thought-leadership/institute-business-value?lnk=hpmls_bure"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/164ef3660bad78a8/original/megamenu-pictogram-resources.png","linkTitle":"","linkUrl":""}}},{"title":"Support","titleEnglish":"Support","url":"https://www.ibm.com/mysupport?lnk=hpmls_busu","megapanelContent":{"headingTitle":"Support","headingUrl":"https://www.ibm.com/mysupport?lnk=hpmls_busu","description":"","quickLinks":{"title":"","links":[{"title":"Download fixes, updates & drivers","titleEnglish":"Download fixes, updates & drivers","url":"https://www.ibm.com/support/fixcentral/?lnk=hpmls_busu"},{"title":"Download licensed software - Passport Advantage","titleEnglish":"Download licensed software - Passport Advantage","url":"https://www.ibm.com/software/passportadvantage/pao_customer.html?lnk=hpmls_busu"},{"title":"View your cases","titleEnglish":"View your cases","url":"https://www.ibm.com/mysupport/s/my-cases?lnk=hpmls_busu"},{"title":"Open a case","titleEnglish":"Open a case","url":"https://www.ibm.com/mysupport/s/redirecttoopencasepage?lnk=hpmls_busu"},{"title":"View available support plans","titleEnglish":"View available support plans","url":"https://www.ibm.com/support/offerings?lnk=hpmls_busu"},{"title":"View more on Support","titleEnglish":"View more on Support","url":"https://www.ibm.com/mysupport?lnk=hpmls_busu&lnk2=all"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5b1abed637b01b55/original/megamenu-pictogram-support.png","linkTitle":"","linkUrl":""}}},{"title":"Cloud platform support","titleEnglish":"Cloud platform support","url":"https://www.ibm.com/cloud/support?lnk=hpmls_bucl"}]}]},{"title":"Explore more","titleEnglish":"Explore more","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"Partner with us","titleEnglish":"Partners","url":"https://www.ibm.com/partners?lnk=hpmex_bupa","megapanelContent":{"headingTitle":"Partner with us","headingUrl":"https://www.ibm.com/partners?lnk=hpmex_bupa","description":"","quickLinks":{"title":"","links":[{"title":"PartnerWorld","titleEnglish":"Partner with us — PartnerWorld","url":"https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa"},{"title":"Our strategic partnerships","titleEnglish":"Our strategic partnerships","url":"https://www.ibm.com/alliances?lnk=hpmex_bupa"},{"title":"Flexible payment plans","titleEnglish":"Flexible payment plans","url":"https://www.ibm.com/partnerworld/financing?lnk=hpmex_bupa"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/4075a8633a1137d/original/megamenu-pictogram-partners.png","linkTitle":"","linkUrl":""}}},{"title":"IBM Research","titleEnglish":"IBM Research","url":"https://www.research.ibm.com/?lnk=hpmex_bure","megapanelContent":{"headingTitle":"IBM Research","headingUrl":"https://www.research.ibm.com/?lnk=hpmex_bure","description":"","quickLinks":{"title":"","links":[{"title":"Research areas","titleEnglish":"Research areas","url":"https://www.research.ibm.com/?lnk=hpmex_bure"},{"title":"Researcher directory","titleEnglish":"Researcher directory","url":"https://researcher.watson.ibm.com/researcher/people.php?lnk=hpmex_bure"},{"title":"Patents","titleEnglish":"Patents","url":"https://www.research.ibm.com/patents/?lnk=hpmex_bure"},{"title":"Work with us","titleEnglish":"Work with us","url":"https://www.research.ibm.com/frontiers/?lnk=hpmex_bure"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5e05b0b234bc3846/original/megamenu-pictogram-ibm-research.png","linkTitle":"","linkUrl":""}}},{"title":"About IBM","titleEnglish":"About IBM","url":"https://www.ibm.com/about?lnk=hpmex_buab","megapanelContent":{"headingTitle":"About IBM","headingUrl":"https://www.ibm.com/about?lnk=hpmex_buab","description":"","quickLinks":{"title":"","links":[{"title":"Annual report","titleEnglish":"Annual report","url":"https://www.ibm.com/annualreport/?lnk=hpmex_buab"},{"title":"Career opportunities","titleEnglish":"Career opportunities","url":"https://www.ibm.com/employment/?lnk=hpmex_buab"},{"title":"Corporate social responsibility","titleEnglish":"Corporate social responsibility","url":"https://www.ibm.org?lnk=hpmex_buab"},{"title":"Diversity & inclusion","titleEnglish":"Diversity & inclusion","url":"https://www.ibm.com/employment/inclusion/?lnk=hpmex_buab"},{"title":"Investor relations","titleEnglish":"Investor relations","url":"https://www.ibm.com/investor/?lnk=hpmex_buab"},{"title":"News & announcements","titleEnglish":"News & announcements","url":"https://newsroom.ibm.com?lnk=hpmex_buab"},{"title":"Thought leadership","titleEnglish":"Thought leadership","url":"https://www.ibm.com/thought-leadership/?lnk=hpmex_buab"},{"title":"Security, privacy & trust","titleEnglish":"Security, privacy & trust","url":"https://www.ibm.com/trust?lnk=hpmex_buab"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/220eb8ea8345a4d6/original/megamenu-pictogram-about-ibm.png","linkTitle":"","linkUrl":""}}},{"title":"COVID-19","titleEnglish":"COVID-19","url":"https://www.ibm.com/impact/covid-19?lnk=hpmex_buco","megapanelContent":{"headingTitle":"COVID-19","headingUrl":"https://www.ibm.com/impact/covid-19?lnk=hpmex_buco","description":"","quickLinks":{"title":"","links":[{"title":"Business solutions","titleEnglish":"Business solutions","url":"https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmex_buco"},{"title":"Action guide","titleEnglish":"Action guide","url":"https://www.ibm.com/thought-leadership/institute-business-value/report/covid-19-action-guide?lnk=hpmex_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}}]}]}]},"masthead":{"search":{"btnSearchClosed":"Open IBM search field","btnSearchOpen":"Search all of IBM","btnClose":"Close IBM search field","placeHolderText":"Search all of IBM"},"profileMenu":{"signedout":{"iconLabel":"User Profile","links":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Log in","url":"https://login.ibm.com/oidc/endpoint/default/authorize?redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&response_type=token&client_id=v18LoginProdCI&scope=openid&state=https%3A%2F%2Fwww.ibm.com&nonce=8675309"}]},"signedin":{"iconLabel":"User Profile: Logged in","links":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Profile","url":"https://myibm.ibm.com/profile/?lnk=mmi"},{"title":"Billing","url":"https://myibm.ibm.com/billing/?lnk=mmi"},{"title":"Log out","url":"https://myibm.ibm.com/pkmslogout?filename=accountRedir.html"}]}}},"profileMenu":{"signedout":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"id":"signin","title":"Log in","url":"https://login.ibm.com/oidc/endpoint/default/authorize?redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&response_type=token&client_id=v18LoginProdCI&scope=openid&state=https%3A%2F%2Fwww.ibm.com%2Fus-en%3Flnk%3Dfcc&nonce=8675309"}],"signedin":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Profile","url":"https://myibm.ibm.com/profile/?lnk=mmi"},{"title":"Billing","url":"https://myibm.ibm.com/billing/?lnk=mmi"},{"id":"signout","title":"Log out","url":"https://myibm.ibm.com/pkmslogout?filename=accountRedir.html"}]},"marketplace":{"title":"Products","url":""},"footerMenu":[{"title":"Products & Solutions","links":[{"title":"Top products & platforms","url":"https://www.ibm.com/products?lnk=fps"},{"title":"Industries","url":"https://www.ibm.com/industries?lnk=fps"},{"title":"Artificial intelligence","url":"https://ibm.com/cloud/ai?lnk=fps"},{"title":"Blockchain","url":"https://www.ibm.com/blockchain?lnk=fps"},{"title":"Business operations","url":"https://www.ibm.com/business-operations?lnk=fps"},{"title":"Cloud computing","url":"https://www.ibm.com/cloud?lnk=fps"},{"title":"Data & Analytics","url":"https://www.ibm.com/analytics?lnk=fps"},{"title":"Hybrid cloud","url":"https://www.ibm.com/cloud/hybrid?lnk=fps"},{"title":"IT infrastructure","url":"https://www.ibm.com/it-infrastructure?lnk=fps"},{"title":"Security","url":"https://www.ibm.com/security?lnk=fps"},{"title":"Supply chain","url":"https://www.ibm.com/supply-chain?lnk=fps"}]},{"title":"Learn about","links":[{"title":"What is Hybrid Cloud?","url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=fle"},{"title":"What is Artificial intelligence?","url":"https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=fle"},{"title":"What is Cloud Computing?","url":"https://www.ibm.com/cloud/learn/cloud-computing?lnk=fle"},{"title":"What is Kubernetes?","url":"https://www.ibm.com/cloud/learn/kubernetes?lnk=fle"},{"title":"What are Containers?","url":"https://www.ibm.com/cloud/learn/containers?lnk=fle"},{"title":"What is DevOps?","url":"https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=fle"},{"title":"What is Machine Learning?","url":"https://www.ibm.com/cloud/learn/machine-learning?lnk=fle"}]},{"title":"Popular links","links":[{"title":"Communities","url":"https://community.ibm.com/community/user/home?lnk=fpo"},{"title":"Developer education","url":"https://developer.ibm.com/?lnk=fpo"},{"title":"Support - Download fixes, updates & drivers","url":"https://www.ibm.com/support/fixcentral/?lnk=fpo"},{"title":"IBM Research","url":"https://www.research.ibm.com/?lnk=fpo"},{"title":"Partner with us - PartnerWorld","url":"https://www.ibm.com/partnerworld/public?lnk=fpo"},{"title":"Training - Courses","url":"https://www.ibm.com/training/search?q=course&lnk=fpo"},{"title":"Upcoming events & webinars","url":"https://www.ibm.com/events/?lnk=fpo"}]},{"title":"About IBM","links":[{"title":"Annual report","url":"https://www.ibm.com/annualreport/?lnk=fab"},{"title":"Career opportunities","url":"https://www.ibm.com/employment/?lnk=fab"},{"title":"Corporate social responsibility","url":"https://www.ibm.org/?lnk=fab"},{"title":"Diversity & inclusion","url":"https://www.ibm.com/employment/inclusion/?lnk=fab"},{"title":"Investor relations","url":"https://www.ibm.com/investor/?lnk=fab"},{"title":"News & announcements","url":"https://newsroom.ibm.com/?lnk=fab"},{"title":"Thought leadership","url":"https://www.ibm.com/thought-leadership/?lnk=fab"},{"title":"Security, privacy & trust","url":"https://www.ibm.com/trust?lnk=fab"},{"title":"About IBM","url":"https://www.ibm.com/about?lnk=fab"}]},{"title":"Follow IBM","links":[{"linkClass":"ibm-linkedin-encircled-link","title":"LinkedIn","url":"https://www.linkedin.com/company/ibm"},{"linkClass":"ibm-twitter-encircled-link","title":"Twitter","url":"https://www.twitter.com/ibm"},{"linkClass":"ibm-instagram-encircled-link","title":"Instagram","url":"https://www.instagram.com/ibm"}]}],"footerThin":[{"title":"Contact IBM","titleEnglish":"Contact IBM","url":"https://www.ibm.com/contact/us/en/?lnk=flg-cont-usen"},{"title":"Privacy","titleEnglish":"Privacy","url":"https://www.ibm.com/privacy/us/en/?lnk=flg-priv-usen"},{"title":"Terms of use","titleEnglish":"Terms of use","url":"https://www.ibm.com/us-en/legal?lnk=flg-tous-usen"},{"title":"Accessibility","titleEnglish":"Accessibility","url":"https://www.ibm.com/accessibility/us/en/?lnk=flg-acce-usen"}],"localeSelector":{"localVersions":"Localized versions of this page","homepages":"Worldwide ibm.com home pages"},"socialFollow":{"title":"Follow IBM","links":[{"linkClass":"ibm-linkedin-encircled-link","title":"LinkedIn","url":"https://www.linkedin.com/company/ibm"},{"linkClass":"ibm-twitter-encircled-link","title":"Twitter","url":"https://www.twitter.com/ibm"},{"linkClass":"ibm-instagram-encircled-link","title":"Instagram","url":"https://www.instagram.com/ibm"}]},"socialSharing":[{"id":"facebook","title":"Facebook","url":"https://www.facebook.com/sharer.php?u=%{URL}&t=%{TITLE}"},{"id":"twitter","title":"Twitter","url":"https://twitter.com/?status=%{URL}%20-%20%{TITLE}"},{"id":"linkedin","title":"Linked In","url":"https://www.linkedin.com/shareArticle?mini=true&url=%{URL}&title=%{TITLE}"}],"leaving":{"LEAVING001":"Leaving the IBM Web site","LEAVING002":"You are now leaving IBM.com and going to an external 3rd party site. Unless otherwise stated, the 3rd party's site Terms and Privacy Policy will apply, and may differ from IBM's.","LEAVING003":"You are headed to","LEAVING004":"Notice"},"misc":{"backtotop":"Back to top","cancelText":"Cancel","close":"Close","cookiePrefs":"Cookie preferences","continueText":"Continue","editProfile":"Edit profile","emailThisPage":"E-mail this page","feedback":"Feedback","mpScopedSearh":"Products","withinMp":"Products","next":"Next","noresults":"No results found","prev":"Previous","resultsNav":"Use down and up arrow keys to navigate through the results.","search":"Search","selectCountry":"Select a country/region","sharePage":"Share this page","signin":"Sign in","signout":"Sign out","sitenav":"Site navigation","welcomeback":"Welcome back"},"timestamp":1629893493671} diff --git a/packages/react/tests/e2e-storybook/cypress/support/index.js b/packages/react/tests/e2e-storybook/cypress/support/index.js new file mode 100644 index 00000000000..ae15fc0d6ae --- /dev/null +++ b/packages/react/tests/e2e-storybook/cypress/support/index.js @@ -0,0 +1,9 @@ +/** + * Copyright IBM Corp. 2021 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import '@percy/cypress'; +import './commands'; diff --git a/packages/tests-e2e/.env.example b/packages/tests-e2e/.env.example deleted file mode 100644 index 7bff4fca748..00000000000 --- a/packages/tests-e2e/.env.example +++ /dev/null @@ -1,8 +0,0 @@ -SELENIUM_HOST= -WEBCOMPONENTS_TESTS= -PERCY_TOKEN= -PERCY_PULL_REQUEST= -PERCY_BRANCH= -PERCY_COMMIT= -PERCY_TARGET_BRANCH= -PERCY_TARGET_COMMIT= diff --git a/packages/tests-e2e/.gitignore b/packages/tests-e2e/.gitignore deleted file mode 100644 index 4c49bd78f1d..00000000000 --- a/packages/tests-e2e/.gitignore +++ /dev/null @@ -1 +0,0 @@ -.env diff --git a/packages/tests-e2e/CHANGELOG.md b/packages/tests-e2e/CHANGELOG.md deleted file mode 100644 index c559134ef36..00000000000 --- a/packages/tests-e2e/CHANGELOG.md +++ /dev/null @@ -1,79 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -## [1.3.1-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/tests-e2e@1.3.0...@carbon/tests-e2e@1.3.1-rc.0) (2021-09-02) - -**Note:** Version bump only for package @carbon/tests-e2e - - - - - -# [1.3.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/tests-e2e@1.3.0-rc.0...@carbon/tests-e2e@1.3.0) (2021-07-26) - -**Note:** Version bump only for package @carbon/tests-e2e - - - - - -# [1.3.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/tests-e2e@1.2.0...@carbon/tests-e2e@1.3.0-rc.0) (2021-07-16) - -**Note:** Version bump only for package @carbon/tests-e2e - - - - - -# [1.2.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/tests-e2e@1.1.2-rc.0...@carbon/tests-e2e@1.2.0) (2021-07-06) - -**Note:** Version bump only for package @carbon/tests-e2e - - - - - -## [1.1.2-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/tests-e2e@1.1.1...@carbon/tests-e2e@1.1.2-rc.0) (2021-06-29) - - -### Bug Fixes - -* **leadspace:** added deprecation warning and sync with web-components version ([#6166](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6166)) ([5ab11b0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5ab11b0)), closes [#5507](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5507) - - - - - -## [1.1.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/tests-e2e@1.1.1-rc.0...@carbon/tests-e2e@1.1.1) (2021-06-01) - -**Note:** Version bump only for package @carbon/tests-e2e - - - - - -## [1.1.1-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/tests-e2e@1.1.0...@carbon/tests-e2e@1.1.1-rc.0) (2021-05-22) - - -### Bug Fixes - -* **localeModal:** e2e tests ([#5838](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5838)) ([6fd142e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6fd142e)) -* **storybook:** capitalization errors ([#5781](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5781)) ([4907b63](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4907b63)) - - - - - -# [1.1.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/tests-e2e@1.1.0-rc.0...@carbon/tests-e2e@1.1.0) (2021-04-21) - -**Note:** Version bump only for package @carbon/tests-e2e - - - - - -# 1.1.0-rc.0 (2021-04-14) - -**Note:** Version bump only for package @carbon/tests-e2e diff --git a/packages/tests-e2e/__tests__/callout-quote/callout-quote.e2e.js b/packages/tests-e2e/__tests__/callout-quote/callout-quote.e2e.js deleted file mode 100644 index 9fdfe1b480a..00000000000 --- a/packages/tests-e2e/__tests__/callout-quote/callout-quote.e2e.js +++ /dev/null @@ -1,102 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2021 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ -const puppeteer = require('puppeteer'); -const percySnapshot = require('@percy/puppeteer'); - -/** - * Flag to switch to the web components paths instead of the React ones - * - * @type {boolean} - * @private - */ -const _webcomponentsTests = - (process && process.env.WEBCOMPONENTS_TESTS === 'true') || false; - -/** - * Sets the default url - * - * @type {string} - * @private - */ -const _urlDefault = _webcomponentsTests - ? 'https://ibmdotcom-web-components-canary.mybluemix.net' - : 'https://ibmdotcom-react-canary.mybluemix.net'; - -/** - * Defines the host for testing - * - * @type {string | string} - * @private - */ -const _url = (process && process.env.SELENIUM_HOST) || _urlDefault; - -/** - * Sets the correct path (Default) - * - * @type {string} - * @private - */ -const _pathDefault = '/iframe.html?id=components-callout-quote--default'; - -describe('Callout quote', () => { - let browser, page; - - beforeAll(async () => { - browser = await puppeteer.launch(); - }); - - afterAll(async () => { - await browser.close(); - }); - - it('should load g100 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathDefault}`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g100")' - ); - - await percySnapshot(page, 'Components|Callout quote: g100 theme', { - widths: [320, 1280], - }); - }); - - it('should load g90 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathDefault}`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g90")' - ); - - await percySnapshot(page, 'Components|Callout quote: g90 theme', { - widths: [320, 1280], - }); - }); - - it('should load g10 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathDefault}`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g10")' - ); - - await percySnapshot(page, 'Components|Callout quote: g10 theme', { - widths: [320, 1280], - }); - }); -}); diff --git a/packages/tests-e2e/__tests__/leadspace/leadspace.e2e.js b/packages/tests-e2e/__tests__/leadspace/leadspace.e2e.js deleted file mode 100644 index f5981f3c9f8..00000000000 --- a/packages/tests-e2e/__tests__/leadspace/leadspace.e2e.js +++ /dev/null @@ -1,582 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2021 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ -const puppeteer = require('puppeteer'); -const percySnapshot = require('@percy/puppeteer'); - -/** - * Flag to switch to the web components paths instead of the React ones - * - * @type {boolean} - * @private - */ -const _webcomponentsTests = - (process && process.env.WEBCOMPONENTS_TESTS === 'true') || false; - -/** - * Sets the default url - * - * @type {string} - * @private - */ -const _urlDefault = _webcomponentsTests - ? 'https://ibmdotcom-web-components-canary.mybluemix.net' - : 'https://ibmdotcom-react-canary.mybluemix.net'; - -/** - * Defines the host for testing - * - * @type {string | string} - * @private - */ -const _url = (process && process.env.SELENIUM_HOST) || _urlDefault; - -/** - * Sets the correct path (Default) - * - * @type {string} - * @private - */ -const _pathDefaultNoImage = - '/iframe.html?id=components-lead-space--tall-with-no-image'; - -/** - * Sets the correct path (Default with image) - * - * @type {string} - * @private - */ -const _pathDefaultImage = - '/iframe.html?id=components-lead-space--tall-with-image'; - -/** - * Sets the correct path (Centered with no image) - * - * @type {string} - * @private - */ -const _pathCenteredNoImage = '/iframe.html?id=components-lead-space--centered'; - -/** - * Sets the correct path (Centered with image) - * - * @type {string} - * @private - */ -const _pathCenteredImage = - '/iframe.html?id=components-lead-space--centered-with-image'; - -/** - * Sets the correct path (Medium) - * - * @type {string} - * @private - */ -const _pathMedium = '/iframe.html?id=components-lead-space--medium'; - -/** - * Sets the correct path (Medium with image) - * - * @type {string} - * @private - */ -const _pathMediumWithImage = - '/iframe.html?id=components-lead-space--medium-with-image'; - -/** - * Sets the correct path (Super) - * - * @type {string} - * @private - */ -const _pathSuper = '/iframe.html?id=components-lead-space--super'; - -/** - * Sets the correct path (Super with image) - * - * @type {string} - * @private - */ -const _pathSuperWithImage = - '/iframe.html?id=components-lead-space--super-with-image'; - -describe('Leadspace', () => { - let browser, page; - - beforeAll(async () => { - browser = await puppeteer.launch(); - }); - - afterAll(async () => { - await browser.close(); - }); - - describe('tall', () => { - it('should load g100 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathDefaultNoImage}&theme=g100`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g100")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Default with no image - g100 theme', - { - widths: [320, 1280], - } - ); - }); - - it('should load g90 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathDefaultNoImage}&theme=g90`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g90")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Default with no image - g90 theme', - { - widths: [320, 1280], - } - ); - }); - - it('should load g10 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathDefaultNoImage}&theme=g10`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g10")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Default with no image - g10 theme', - { - widths: [320, 1280], - } - ); - }); - }); - - describe('tall with image', () => { - it('should load g100 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathDefaultImage}&theme=g100`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g100")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Default with image - g100 theme', - { - widths: [320, 1280], - } - ); - }); - - it('should load g90 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathDefaultImage}&theme=g90`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g90")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Default with image - g90 theme', - { - widths: [320, 1280], - } - ); - }); - - it('should load g90 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathDefaultImage}&theme=g10`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g10")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Default with image - g10 theme', - { - widths: [320, 1280], - } - ); - }); - }); - - describe('centered with no image', () => { - it('should load g100 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathCenteredNoImage}&theme=g100`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g100")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Centered with no image - g100 theme', - { - widths: [320, 1280], - } - ); - }); - - it('should load g90 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathCenteredNoImage}&theme=g90`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g90")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Centered with no image - g90 theme', - { - widths: [320, 1280], - } - ); - }); - - it('should load g10 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathCenteredNoImage}&theme=g10`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g10")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Centered with no image - g10 theme', - { - widths: [320, 1280], - } - ); - }); - }); - - describe('centered with image', () => { - it('should load g100 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathCenteredImage}&theme=g100`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g100")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Centered with image - g100 theme', - { - widths: [320, 1280], - } - ); - }); - - it('should load g90 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathCenteredImage}&theme=g90`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g90")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Centered with image - g90 theme', - { - widths: [320, 1280], - } - ); - }); - - it('should load g10 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathCenteredImage}&theme=g10`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g10")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Centered with image - g10 theme', - { - widths: [320, 1280], - } - ); - }); - }); - - describe('medium', () => { - it('should load g100 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathMedium}&theme=g100`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g100")' - ); - - await percySnapshot(page, 'Components|Leadspace: Medium - g100 theme', { - widths: [320, 1280], - }); - }); - - it('should load g90 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathMedium}&theme=g90`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g90")' - ); - - await percySnapshot(page, 'Components|Leadspace: Medium - g90 theme', { - widths: [320, 1280], - }); - }); - - it('should load g10 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathMedium}&theme=g10`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g10")' - ); - - await percySnapshot(page, 'Components|Leadspace: Medium - g10 theme', { - widths: [320, 1280], - }); - }); - }); - - describe('medium with image', () => { - it('should load g100 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathMediumWithImage}&theme=g100`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g100")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Medium with image - g100 theme', - { - widths: [320, 1280], - } - ); - }); - - it('should load g90 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathMediumWithImage}&theme=g90`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g90")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Medium with image - g90 theme', - { - widths: [320, 1280], - } - ); - }); - - it('should load g10 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathMediumWithImage}&theme=g10`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g10")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Medium with image - g10 theme', - { - widths: [320, 1280], - } - ); - }); - }); - - describe('super', () => { - it('should load g100 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathSuper}&theme=g100`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g100")' - ); - - await percySnapshot(page, 'Components|Leadspace: Super - g100 theme', { - widths: [320, 1280], - }); - }); - - it('should load g90 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathSuper}&theme=g90`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g90")' - ); - - await percySnapshot(page, 'Components|Leadspace: Super - g90 theme', { - widths: [320, 1280], - }); - }); - - it('should load g10 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathSuper}&theme=g10`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g10")' - ); - - await percySnapshot(page, 'Components|Leadspace: Super - g10 theme', { - widths: [320, 1280], - }); - }); - }); - - describe('super with image', () => { - it('should load g100 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathSuperWithImage}&theme=g100`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g100")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Super with image - g100 theme', - { - widths: [320, 1280], - } - ); - }); - - it('should load g90 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathSuperWithImage}&theme=g90`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g90")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Super with image - g90 theme', - { - widths: [320, 1280], - } - ); - }); - - it('should load g10 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathSuperWithImage}&theme=g10`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g10")' - ); - - await percySnapshot( - page, - 'Components|Leadspace: Super with image - g10 theme', - { - widths: [320, 1280], - } - ); - }); - }); -}); diff --git a/packages/tests-e2e/__tests__/locale-modal/locale-modal.e2e.js b/packages/tests-e2e/__tests__/locale-modal/locale-modal.e2e.js deleted file mode 100644 index eced5ec3f4a..00000000000 --- a/packages/tests-e2e/__tests__/locale-modal/locale-modal.e2e.js +++ /dev/null @@ -1,97 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2021 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ -const puppeteer = require('puppeteer'); -const percySnapshot = require('@percy/puppeteer'); - -/** - * Flag to switch to the web components paths instead of the React ones - * - * @type {boolean} - * @private - */ -const _webcomponentsTests = - (process && process.env.WEBCOMPONENTS_TESTS === 'true') || false; - -/** - * Sets the default url - * - * @type {string} - * @private - */ -const _urlDefault = _webcomponentsTests - ? 'https://ibmdotcom-web-components-canary.mybluemix.net' - : 'https://ibmdotcom-react-canary.mybluemix.net'; - -/** - * Defines the host for testing - * - * @type {string | string} - * @private - */ -const _url = (process && process.env.SELENIUM_HOST) || _urlDefault; - -/** - * Sets the correct path - * - * @type {string} - * @private - */ -const _path = '/iframe.html?id=components-locale-modal--default'; - -describe('LocaleModal', () => { - let browser, page; - - beforeAll(async () => { - browser = await puppeteer.launch(); - }); - - afterAll(async () => { - await browser.close(); - }); - - it('should load the Americas region', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_path}`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.waitForSelector('[data-autoid="dds--locale-modal"]'); - - if (_webcomponentsTests) { - const region = await page.evaluateHandle( - `document.querySelector('dds-locale-modal > dds-regions > dds-region-item:nth-child(1)').shadowRoot.querySelector('a')` - ); - region.click(); - } else { - await page.waitForSelector( - '.bx--locale-modal__regions > div > div:nth-child(1) > .bx--card > .bx--card__wrapper > .bx--card__content > a' - ); - await page.click('[data-region="am"]'); - } - - await percySnapshot(page, 'Components|LocaleModal: Region Selected', { - widths: [1280], - }); - - if (_webcomponentsTests) { - const filter = await page.evaluateHandle( - `document.querySelector('dds-locale-search').shadowRoot.querySelector('dds-search').shadowRoot.querySelector(".bx--search-input")` - ); - filter.focus(); - filter.type('ca'); - } else { - await page.type('[data-autoid="dds--locale-modal__filter"]', 'ca'); - } - - await page.waitForTimeout(1500); - - await percySnapshot(page, 'Components|LocaleModal: Filter', { - widths: [1280], - }); - }); -}); diff --git a/packages/tests-e2e/__tests__/masthead/masthead.e2e.js b/packages/tests-e2e/__tests__/masthead/masthead.e2e.js deleted file mode 100644 index fffe59ce80f..00000000000 --- a/packages/tests-e2e/__tests__/masthead/masthead.e2e.js +++ /dev/null @@ -1,318 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2021 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ -const puppeteer = require('puppeteer'); -const percySnapshot = require('@percy/puppeteer'); - -/** - * Flag to switch to the web components paths instead of the React ones - * - * @type {boolean} - * @private - */ -const _webcomponentsTests = - (process && process.env.WEBCOMPONENTS_TESTS === 'true') || false; - -/** - * Sets the default url - * - * @type {string} - * @private - */ -const _urlDefault = _webcomponentsTests - ? 'https://ibmdotcom-web-components-canary.mybluemix.net' - : 'https://ibmdotcom-react-canary.mybluemix.net'; - -/** - * Defines the host for testing - * - * @type {string | string} - * @private - */ -const _url = (process && process.env.SELENIUM_HOST) || _urlDefault; - -/** - * Sets the correct path (default Masthead) - * - * @type {string} - * @private - */ -const _pathDefault = '/iframe.html?id=components-masthead--default'; - -/** - * Sets the correct path (Custom Masthead) - * - * @type {string} - * @private - */ -const _pathCustom = - '/iframe.html?id=components-masthead--with-custom-navigation'; - -/** - * Sets the correct path (Masthead with Platform) - * - * @type {string} - * @private - */ -const _pathPlatform = '/iframe.html?id=components-masthead--with-platform'; - -describe('Masthead: Default', () => { - let browser, page; - - beforeAll(async () => { - browser = await puppeteer.launch(); - }); - - afterAll(async () => { - await browser.close(); - }); - - it('should take a snapshot of the megamenu - first nav item', async () => { - page = await browser.newPage(); - await page.setViewport({ - width: 1280, - height: 780, - }); - - await page.goto(`${_url}${_pathDefault}`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - if (_webcomponentsTests) { - const nav0 = await page.evaluateHandle( - `document.querySelector('dds-top-nav > dds-megamenu-top-nav-menu:nth-child(1)').shadowRoot.querySelector('a')` - ); - nav0.click(); - } else { - await page.waitForSelector( - '[data-autoid="dds--masthead-default__l0-nav0"]' - ); - await page.click('[data-autoid="dds--masthead-default__l0-nav0"]'); - } - - await percySnapshot( - page, - 'Components|Masthead: Default - Mega Menu (Nav 0)', - { - widths: [1280], - } - ); - }); - - it('should take a snapshot of the megamenu - second nav item', async () => { - page = await browser.newPage(); - await page.setViewport({ - width: 1280, - height: 780, - }); - - await page.goto(`${_url}${_pathDefault}`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - if (_webcomponentsTests) { - const nav0 = await page.evaluateHandle( - `document.querySelector('dds-top-nav > dds-megamenu-top-nav-menu:nth-child(2)').shadowRoot.querySelector('a')` - ); - nav0.click(); - } else { - await page.waitForSelector( - '[data-autoid="dds--masthead-default__l0-nav1"]' - ); - await page.click('[data-autoid="dds--masthead-default__l0-nav1"]'); - } - - await percySnapshot( - page, - 'Components|Masthead: Default - Mega Menu (Nav 1)', - { - widths: [1280], - } - ); - }); - - it('should open the login menu', async () => { - page = await browser.newPage(); - await page.setViewport({ - width: 1280, - height: 780, - }); - - await page.goto(`${_url}${_pathDefault}`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - if (_webcomponentsTests) { - const profile = await page.evaluateHandle( - `document.querySelector('dds-masthead-profile').shadowRoot.querySelector('a')` - ); - profile.click(); - } else { - await page.waitForSelector( - '[data-autoid="dds--masthead-default__l0-account"]' - ); - - // TODO: temporary until issue #5483 is fixed - await page.waitForTimeout(1500); - - await page.click('[data-autoid="dds--masthead-default__l0-account"]'); - } - - await percySnapshot(page, 'Components|Masthead: Default - Profile Menu', { - widths: [1280], - }); - }); - - it('should open the search bar', async () => { - page = await browser.newPage(); - await page.setViewport({ - width: 1280, - height: 780, - }); - - await page.goto(`${_url}${_pathDefault}`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - if (_webcomponentsTests) { - const search = await page.evaluateHandle( - `document.querySelector('dds-masthead-search').shadowRoot.querySelector('.bx--header__search--search')` - ); - await search.click(); - } else { - await page.waitForSelector( - '[data-autoid="dds--masthead-default__l0-search"]' - ); - await page.click('[data-autoid="dds--masthead-default__l0-search"]'); - } - - await page.waitForTimeout(1500); // still seeing flakiness in test results, adding additional wait to be safe - - await percySnapshot(page, 'Components|Masthead: Default - Search', { - widths: [1280], - }); - }); - - it('should take a snapshot of the mobile menu', async () => { - page = await browser.newPage(); - await page.setViewport({ - width: 320, - height: 780, - }); - - await page.goto(`${_url}${_pathDefault}`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - if (_webcomponentsTests) { - const menuButton = await page.evaluateHandle( - `document.querySelector('dds-masthead-menu-button').shadowRoot.querySelector('button')` - ); - await menuButton.click(); - } else { - await page.waitForSelector( - '[data-autoid="dds--masthead-default-sidenav__l0-menu"]' - ); - await page.click( - '[data-autoid="dds--masthead-default-sidenav__l0-menu"]' - ); - } - - await percySnapshot(page, 'Components|Masthead: Default - Mobile Menu', { - widths: [320], - }); - - if (_webcomponentsTests) { - const nav1 = await page.evaluateHandle( - `document.querySelector('dds-left-nav-menu:nth-child(1)').shadowRoot.querySelector('button')` - ); - await nav1.click(); - } else { - await page.click( - '[data-autoid="dds--masthead-default-sidenav__l0-nav0"]' - ); - } - - await percySnapshot( - page, - 'Components|Masthead: Default - Mobile Menu Level 2', - { - widths: [320], - } - ); - }); - - it('should scroll the L0 overflow properly', async () => { - page = await browser.newPage(); - await page.setViewport({ - width: 1280, - height: 780, - }); - - await page.goto(`${_url}${_pathCustom}`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - // Removes the animation of the nav container - await page.addStyleTag({ - content: '.bx--header__nav-content { transition: none !important; }', - }); - - if (_webcomponentsTests) { - const overflow = await page.evaluateHandle( - `document.querySelector('dds-top-nav').shadowRoot.querySelector('.bx--header__nav-caret-right-container > button')` - ); - overflow.click(); - } else { - await page.waitForSelector( - '[data-autoid="dds--masthead-default__l0-nav0"]' - ); - await page.waitForTimeout(1500); // still seeing flakiness in test results, adding additional wait to be safe - await page.click('.bx--header__nav-caret-right'); - } - - await percySnapshot(page, 'Components|Masthead: Custom - Overflow', { - widths: [1280], - }); - }); - - it('should open the search bar with platform', async () => { - page = await browser.newPage(); - await page.setViewport({ - width: 1280, - height: 780, - }); - - await page.goto(`${_url}${_pathPlatform}`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - if (_webcomponentsTests) { - const search = await page.evaluateHandle( - `document.querySelector('dds-masthead-search').shadowRoot.querySelector('.bx--header__search--search')` - ); - await search.click(); - } else { - await page.waitForSelector( - '[data-autoid="dds--masthead-eco__l0-search"]' - ); - await page.click('[data-autoid="dds--masthead-eco__l0-search"]'); - } - - await page.waitForTimeout(1500); // still seeing flakiness in test results, adding additional wait to be safe - - await percySnapshot(page, 'Components|Masthead: With Platform - Search', { - widths: [1280], - }); - }); -}); diff --git a/packages/tests-e2e/__tests__/quote/quote.e2e.js b/packages/tests-e2e/__tests__/quote/quote.e2e.js deleted file mode 100644 index ef64d75fadc..00000000000 --- a/packages/tests-e2e/__tests__/quote/quote.e2e.js +++ /dev/null @@ -1,102 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2021 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ -const puppeteer = require('puppeteer'); -const percySnapshot = require('@percy/puppeteer'); - -/** - * Flag to switch to the web components paths instead of the React ones - * - * @type {boolean} - * @private - */ -const _webcomponentsTests = - (process && process.env.WEBCOMPONENTS_TESTS === 'true') || false; - -/** - * Sets the default url - * - * @type {string} - * @private - */ -const _urlDefault = _webcomponentsTests - ? 'https://ibmdotcom-web-components-canary.mybluemix.net' - : 'https://ibmdotcom-react-canary.mybluemix.net'; - -/** - * Defines the host for testing - * - * @type {string | string} - * @private - */ -const _url = (process && process.env.SELENIUM_HOST) || _urlDefault; - -/** - * Sets the correct path (Default) - * - * @type {string} - * @private - */ -const _pathDefault = '/iframe.html?id=components-quote--default'; - -describe('Quote', () => { - let browser, page; - - beforeAll(async () => { - browser = await puppeteer.launch(); - }); - - afterAll(async () => { - await browser.close(); - }); - - it('should load g100 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathDefault}`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g100")' - ); - - await percySnapshot(page, 'Components|Quote: g100 theme', { - widths: [320, 1280], - }); - }); - - it('should load g90 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathDefault}`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g90")' - ); - - await percySnapshot(page, 'Components|Quote: g90 theme', { - widths: [320, 1280], - }); - }); - - it('should load g10 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathDefault}`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g10")' - ); - - await percySnapshot(page, 'Components|Quote: g10 theme', { - widths: [320, 1280], - }); - }); -}); diff --git a/packages/tests-e2e/__tests__/table-of-contents/table-of-contents.e2e.js b/packages/tests-e2e/__tests__/table-of-contents/table-of-contents.e2e.js deleted file mode 100644 index 9a3714b4c84..00000000000 --- a/packages/tests-e2e/__tests__/table-of-contents/table-of-contents.e2e.js +++ /dev/null @@ -1,103 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2021 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ -const puppeteer = require('puppeteer'); -const percySnapshot = require('@percy/puppeteer'); - -/** - * Flag to switch to the web components paths instead of the React ones - * - * @type {boolean} - * @private - */ -const _webcomponentsTests = - (process && process.env.WEBCOMPONENTS_TESTS === 'true') || false; - -/** - * Sets the default url - * - * @type {string} - * @private - */ -const _urlDefault = _webcomponentsTests - ? 'https://ibmdotcom-web-components-canary.mybluemix.net' - : 'https://ibmdotcom-react-canary.mybluemix.net'; - -/** - * Defines the host for testing - * - * @type {string | string} - * @private - */ -const _url = (process && process.env.SELENIUM_HOST) || _urlDefault; - -/** - * Sets the correct path (Manually defined menu items) - * - * @type {string} - * @private - */ -const _pathManual = - '/iframe.html?id=components-table-of-contents--manually-define-menu-items'; - -describe('Table of contents', () => { - let browser, page; - - beforeAll(async () => { - browser = await puppeteer.launch(); - }); - - afterAll(async () => { - await browser.close(); - }); - - it('should load g100 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathManual}&theme=g100`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g100")' - ); - - await percySnapshot(page, 'Components|Table of contents: g100 theme', { - widths: [320, 1280], - }); - }); - - it('should load g90 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathManual}&theme=g90`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g90")' - ); - - await percySnapshot(page, 'Components|Table of contents: g90 theme', { - widths: [320, 1280], - }); - }); - - it('should load g10 theme', async () => { - page = await browser.newPage(); - await page.goto(`${_url}${_pathManual}&theme=g10`, { - waitUntil: 'networkidle0', - timeout: 100000, - }); - await page.evaluate( - 'document.documentElement.setAttribute("storybook-carbon-theme","g10")' - ); - - await percySnapshot(page, 'Components|Table of contents: g10 theme', { - widths: [320, 1280], - }); - }); -}); diff --git a/packages/tests-e2e/babel.config.js b/packages/tests-e2e/babel.config.js deleted file mode 100644 index 81ed3f224ee..00000000000 --- a/packages/tests-e2e/babel.config.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2021 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -module.exports = { - presets: ['@babel/preset-env'], - plugins: [ - 'dev-expression', - 'macros', - '@babel/plugin-syntax-dynamic-import', - '@babel/plugin-syntax-import-meta', - '@babel/plugin-proposal-class-properties', - '@babel/plugin-proposal-export-namespace-from', - '@babel/plugin-proposal-export-default-from', - '@babel/plugin-proposal-nullish-coalescing-operator', - '@babel/plugin-proposal-optional-chaining', - [ - '@babel/plugin-transform-runtime', - { - runtimeHelpers: true, - }, - ], - ], -}; diff --git a/packages/tests-e2e/jest.config.js b/packages/tests-e2e/jest.config.js deleted file mode 100644 index c058f0ba864..00000000000 --- a/packages/tests-e2e/jest.config.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2021 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -module.exports = { - preset: 'jest-puppeteer', - testMatch: ['/**/__tests__/**/*.e2e.js'], - testRunner: 'jest-circus/runner', - testURL: 'http://localhost', - testTimeout: 100000, - moduleFileExtensions: ['js', 'json'], - setupFiles: ['dotenv/config'], -}; diff --git a/packages/tests-e2e/package.json b/packages/tests-e2e/package.json deleted file mode 100644 index d17f24a21b3..00000000000 --- a/packages/tests-e2e/package.json +++ /dev/null @@ -1,37 +0,0 @@ -{ - "name": "@carbon/tests-e2e", - "description": "e2e test package for Carbon for IBM.com", - "private": true, - "version": "1.3.1-rc.0", - "license": "Apache-2.0", - "repository": "https://github.com/carbon-design-system/carbon-for-ibm-dotcom", - "bugs": "https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues", - "scripts": { - "clean": "rimraf node_modules", - "test:e2e": "percy exec -- jest" - }, - "devDependencies": { - "@babel/cli": "^7.4.3", - "@babel/core": "^7.4.3", - "@babel/plugin-proposal-class-properties": "^7.4.0", - "@babel/plugin-proposal-export-default-from": "^7.2.0", - "@babel/plugin-proposal-export-namespace-from": "^7.2.0", - "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.0", - "@babel/plugin-proposal-optional-chaining": "^7.8.0", - "@babel/plugin-syntax-import-meta": "^7.2.0", - "@babel/plugin-transform-runtime": "^7.5.0", - "@babel/preset-env": "^7.5.5", - "@babel/register": "^7.10.1", - "@percy/cli": "^1.0.0-beta.41", - "@percy/puppeteer": "^2.0.0", - "babel-plugin-dev-expression": "^0.2.1", - "babel-plugin-macros": "^2.6.1", - "chromedriver": "^91.0.1", - "dotenv": "^8.2.0", - "expect-puppeteer": "^4.4.0", - "jest": "25.5.4", - "jest-puppeteer": "^4.4.0", - "puppeteer": "^8.0.0", - "rimraf": "^3.0.2" - } -} diff --git a/packages/web-components/.eslintignore b/packages/web-components/.eslintignore index e2854a3ef2d..53517077928 100644 --- a/packages/web-components/.eslintignore +++ b/packages/web-components/.eslintignore @@ -12,3 +12,4 @@ src/internal/vendor tests/coverage tests/e2e/dist tests/e2e/cypress +tests/e2e-storybook/cypress diff --git a/packages/web-components/package.json b/packages/web-components/package.json index cf52b256e99..902af98aac2 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -71,10 +71,13 @@ "test:unit:updateSnapshot": "gulp test:unit --update-snapshot", "test:e2e:build": "node ./tests/e2e/build/build-examples.js", "test:e2e:run": "http-server -c-1 tests/e2e/dist --silent", - "test:e2e:test": "start-server-and-test 'yarn test:e2e:run' 8080 'percy exec --config tests/e2e/.percy.json -- cypress run --config-file tests/e2e/cypress.json'", + "test:e2e:test": "start-server-and-test 'yarn test:e2e:run' 8080 'percy exec --config tests/e2e/.percy.json -- cypress run --config video=false --config-file tests/e2e/cypress.json'", + "test:e2e:test:no-percy": "start-server-and-test 'yarn test:e2e:run' 8080 'cypress run --config video=false --config-file tests/e2e/cypress.json'", + "test:e2e:test:no-percy:with-video": "start-server-and-test 'yarn test:e2e:run' 8080 'cypress run --config-file tests/e2e/cypress.json'", "test:e2e-storybook:run": "http-server -c-1 storybook-static --silent -p 8081", - "test:e2e-storybook:test": "start-server-and-test 'yarn test:e2e-storybook:run' 8081 'percy exec --config tests/e2e-storybook/.percy.json -- cypress run --config-file tests/e2e-storybook/cypress.json'", - "test:e2e-storybook:test:no-percy": "start-server-and-test 'yarn test:e2e-storybook:run' 8081 'cypress run --config-file tests/e2e-storybook/cypress.json'", + "test:e2e-storybook:test": "start-server-and-test 'yarn test:e2e-storybook:run' 8081 'percy exec --config tests/e2e-storybook/.percy.json -- cypress run --config video=false --config-file tests/e2e-storybook/cypress.json'", + "test:e2e-storybook:test:no-percy": "start-server-and-test 'yarn test:e2e-storybook:run' 8081 'cypress run --config video=false --config-file tests/e2e-storybook/cypress.json'", + "test:e2e-storybook:test:no-percy:with-video": "start-server-and-test 'yarn test:e2e-storybook:run' 8081 'cypress run --config-file tests/e2e-storybook/cypress.json'", "typecheck": "tsc --noEmit -p tsconfig.json", "upgrade-carbon": "yarn upgrade-interactive carbon-components carbon-web-components @carbon/icon-helpers @carbon/icons --latest --exact", "visual-snapshot": "yarn build-storybook && percy-storybook --widths=320,1280", diff --git a/packages/web-components/tests/e2e-storybook/cypress/support/commands.js b/packages/web-components/tests/e2e-storybook/cypress/support/commands.js index 0d37dff900d..1211d9f7b91 100644 --- a/packages/web-components/tests/e2e-storybook/cypress/support/commands.js +++ b/packages/web-components/tests/e2e-storybook/cypress/support/commands.js @@ -5,28 +5,13 @@ * LICENSE file in the root directory of this source tree. */ -// *********************************************** -// This example commands.js shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** -// -// -// -- This is a parent command -- -// Cypress.Commands.add('login', (email, password) => { ... }) -// -// -// -- This is a child command -- -// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This will overwrite an existing command -- -// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) +import countrylist from './data/countrylist.json'; +import translation from './data/translation.json'; + +/** + * Sets the translation data in sessionStorage + */ +Cypress.Commands.add('setTranslations', () => { + window.sessionStorage.setItem('dds-countrylist-us-en', countrylist); + window.sessionStorage.setItem('dds-translation-us-en', translation); +}); diff --git a/packages/web-components/tests/e2e-storybook/cypress/support/data/countrylist.json b/packages/web-components/tests/e2e-storybook/cypress/support/data/countrylist.json new file mode 100644 index 00000000000..437dd737b7f --- /dev/null +++ b/packages/web-components/tests/e2e-storybook/cypress/support/data/countrylist.json @@ -0,0 +1 @@ +{"regionList":[{"name":"Americas","key":"am","countryList":[{"name":"Anguilla","locale":[["en-ai","English"]]},{"name":"Antigua and Barbuda","locale":[["en-ag","English"]]},{"name":"Argentina","locale":[["es-ar","Spanish (Español)"]]},{"name":"Aruba","locale":[["en-aw","English"]]},{"name":"Bahamas","locale":[["en-bs","English"]]},{"name":"Barbados","locale":[["en-bb","English"]]},{"name":"Bermuda","locale":[["en-bm","English"]]},{"name":"Bolivia","locale":[["es-bo","Spanish (Español)"]]},{"name":"Brazil (Brasil)","locale":[["pt-br","Portuguese (Português)"]]},{"name":"Canada","locale":[["en-ca","English"]]},{"name":"Canada","locale":[["fr-ca","French (Français)"]]},{"name":"Cayman Islands","locale":[["en-ky","English"]]},{"name":"Chile","locale":[["es-cl","Spanish (Español)"]]},{"name":"Colombia","locale":[["es-co","Spanish (Español)"]]},{"name":"Costa Rica","locale":[["es-cr","Spanish (Español)"]]},{"name":"Curacao","locale":[["en-cw","English"]]},{"name":"Dominica","locale":[["en-dm","English"]]},{"name":"Ecuador","locale":[["es-ec","Spanish (Español)"]]},{"name":"Grenada","locale":[["en-gd","English"]]},{"name":"Guyana","locale":[["en-gy","English"]]},{"name":"Jamaica","locale":[["en-jm","English"]]},{"name":"Mexico","locale":[["es-mx","Spanish (Español)"]]},{"name":"Montserrat","locale":[["en-ms","English"]]},{"name":"Paraguay","locale":[["es-py","Spanish (Español)"]]},{"name":"Peru","locale":[["es-pe","Spanish (Español)"]]},{"name":"Saint Kitts and Nevis","locale":[["en-kn","English"]]},{"name":"Saint Lucia","locale":[["en-lc","English"]]},{"name":"Saint Vincent and the Grenadines","locale":[["en-vc","English"]]},{"name":"Suriname","locale":[["en-sr","English"]]},{"name":"Trinidad and Tobago","locale":[["en-tt","English"]]},{"name":"Turks and Caicos Islands","locale":[["en-tc","English"]]},{"name":"United States","locale":[["en-us","English"]]},{"name":"Uruguay","locale":[["es-uy","Spanish (Español)"]]},{"name":"Venezuela","locale":[["es-ve","Spanish (Español)"]]},{"name":"Virgin Islands, British","locale":[["en-vg","English"]]}]},{"name":"Asia Pacific","key":"ap","countryList":[{"name":"Australia","locale":[["en-au","English"]]},{"name":"Bangladesh","locale":[["en-bd","English"]]},{"name":"Brunei Darussalam","locale":[["en-bn","English"]]},{"name":"Cambodia","locale":[["en-kh","English"]]},{"name":"China (中国)","locale":[["zh-cn","Chinese (简体中文)"]]},{"name":"Hong Kong S.A.R. of China","locale":[["en-hk","English"]]},{"name":"India","locale":[["en-in","English"]]},{"name":"Indonesia","locale":[["en-id","English"]]},{"name":"Japan (日本)","locale":[["ja-jp","Japanese (日本語)"]]},{"name":"Korea, Republic of (대한민국)","locale":[["ko-kr","Korean (한국어)"]]},{"name":"Malaysia","locale":[["en-my","English"]]},{"name":"Nepal","locale":[["en-np","English"]]},{"name":"New Zealand","locale":[["en-nz","English"]]},{"name":"Philippines","locale":[["en-ph","English"]]},{"name":"Singapore","locale":[["en-sg","English"]]},{"name":"Sri Lanka","locale":[["en-lk","English"]]},{"name":"Taiwan (台灣)","locale":[["zh-tw","Chinese (繁體中文)"]]},{"name":"Thailand","locale":[["en-th","English"]]},{"name":"Vietnam","locale":[["en-vn","English"]]}]},{"name":"Europe","key":"eu","countryList":[{"name":"Austria (Österreich)","locale":[["de-at","German (Deutsch)"]]},{"name":"Belgium/Luxembourg","locale":[["en-be","English"]]},{"name":"Bulgaria","locale":[["en-bg","English"]]},{"name":"Croatia","locale":[["en-hr","English"]]},{"name":"Cyprus","locale":[["en-cy","English"]]},{"name":"Czech Republic","locale":[["en-cz","English"]]},{"name":"Denmark","locale":[["en-dk","English"]]},{"name":"Estonia","locale":[["en-ee","English"]]},{"name":"Finland","locale":[["en-fi","English"]]},{"name":"France","locale":[["fr-fr","French (Français)"]]},{"name":"Germany (Deutschland)","locale":[["de-de","German (Deutsch)"]]},{"name":"Greece","locale":[["en-gr","English"]]},{"name":"Hungary","locale":[["en-hu","English"]]},{"name":"Ireland","locale":[["en-ie","English"]]},{"name":"Italy (Italia)","locale":[["it-it","Italian (Italiano)"]]},{"name":"Kazakhstan","locale":[["en-kz","English"]]},{"name":"Latvia","locale":[["en-lv","English"]]},{"name":"Lithuania","locale":[["en-lt","English"]]},{"name":"Netherlands","locale":[["en-nl","English"]]},{"name":"Norway","locale":[["en-no","English"]]},{"name":"Poland (Polska)","locale":[["pl-pl","Polish (Polskie)"]]},{"name":"Portugal","locale":[["en-pt","English"]]},{"name":"Romania","locale":[["en-ro","English"]]},{"name":"Russian (Россия)","locale":[["ru-ru","Russian (русский)"]]},{"name":"Serbia","locale":[["en-rs","English"]]},{"name":"Slovakia","locale":[["en-sk","English"]]},{"name":"Slovenia","locale":[["en-si","English"]]},{"name":"Spain (España)","locale":[["es-es","Spanish (Español)"]]},{"name":"Sweden","locale":[["en-se","English"]]},{"name":"Switzerland (Suisse)","locale":[["fr-ch","French (Français)"]]},{"name":"Switzerland (Schweiz)","locale":[["de-ch","German (Deutsch)"]]},{"name":"Turkey (Türkiye)","locale":[["tr-tr","Turkish (Türk)"]]},{"name":"Ukraine","locale":[["en-ua","English"]]},{"name":"United Kingdom","locale":[["en-uk","English"]]},{"name":"United Kingdom","locale":[["en-gb","English"]]},{"name":"Uzbekistan","locale":[["en-uz","English"]]}]},{"name":"Middle East and Africa","key":"mea","countryList":[{"name":"Afghanistan","locale":[["en-af","English"]]},{"name":"Algeria (Algérie)","locale":[["fr-dz","French (Français)"]]},{"name":"Angola","locale":[["pt-ao","Portuguese (Português)"]]},{"name":"Bahrain","locale":[["en-bh","English"]]},{"name":"Botswana","locale":[["en-bw","English"]]},{"name":"Burkina Faso","locale":[["fr-bf","French (Français)"]]},{"name":"Cameroon (Cameroun)","locale":[["fr-cm","French (Français)"]]},{"name":"Chad (Tchad)","locale":[["fr-td","French (Français)"]]},{"name":"Congo","locale":[["fr-cg","French (Français)"]]},{"name":"Congo, Democratic Republic of (République Démocratique du Congo)","locale":[["fr-cd","French (Français)"]]},{"name":"Egypt","locale":[["en-eg","English"]]},{"name":"Ethiopia","locale":[["en-et","English"]]},{"name":"Gabon","locale":[["fr-ga","French (Français)"]]},{"name":"Ghana","locale":[["en-gh","English"]]},{"name":"Iraq","locale":[["en-iq","English"]]},{"name":"Israel","locale":[["en-il","English"]]},{"name":"Ivory Coast (Côte d'Ivoire)","locale":[["fr-ci","French (Français)"]]},{"name":"Jordan","locale":[["en-jo","English"]]},{"name":"Kenya","locale":[["en-ke","English"]]},{"name":"Kuwait","locale":[["en-kw","English"]]},{"name":"Lebanon","locale":[["en-lb","English"]]},{"name":"Libya","locale":[["en-ly","English"]]},{"name":"Madagascar","locale":[["fr-mg","French (Français)"]]},{"name":"Malawi","locale":[["en-mw","English"]]},{"name":"Mauritius (Maurice)","locale":[["fr-mu","French (Français)"]]},{"name":"Morocco (Maroc)","locale":[["fr-ma","French (Français)"]]},{"name":"Mozambique","locale":[["pt-mz","Portuguese (Português)"]]},{"name":"Namibia","locale":[["en-na","English"]]},{"name":"Niger","locale":[["fr-ne","French (Français)"]]},{"name":"Nigeria","locale":[["en-ng","English"]]},{"name":"Oman","locale":[["en-om","English"]]},{"name":"Pakistan","locale":[["en-pk","English"]]},{"name":"Qatar","locale":[["en-qa","English"]]},{"name":"Saudi Arabia","locale":[["en-sa","English"]]},{"name":"Saudi Arabia (المملكة العربية السعودية)","locale":[["ar-sa","Arabic (عربى)"]]},{"name":"Senegal (Sénégal)","locale":[["fr-sn","French (Français)"]]},{"name":"Seychelles","locale":[["fr-sc","French (Français)"]]},{"name":"Sierra Leone","locale":[["en-sl","English"]]},{"name":"South Africa","locale":[["en-za","English"]]},{"name":"Tanzania, United Republic of","locale":[["en-tz","English"]]},{"name":"Tunisia (Tunisie)","locale":[["fr-tn","French (Français)"]]},{"name":"Uganda","locale":[["en-ug","English"]]},{"name":"United Arab Emirates","locale":[["en-ae","English"]]},{"name":"United Arab Emirates (الإمارات العربية المتحدة)","locale":[["ar-ae","Arabic (عربى)"]]},{"name":"Yemen","locale":[["en-ye","English"]]},{"name":"Zambia","locale":[["en-zm","English"]]},{"name":"Zimbabwe","locale":[["en-zw","English"]]}]}],"localeModal":{"headerTitle":"Select geographic area","modalClose":"Close modal","searchLabel":"Search by location or language. Note: Location/Language will be dynamically updated as you provide the input","searchClearText":"Clear search input","searchPlaceholder":"Search by location or language","availabilityText":"This page is available in the following locations and languages","unavailabilityText":"This page is unavailable in your preferred location or language"},"timestamp":1629893493451,"locale":{"lc":"en","cc":"us"}} diff --git a/packages/web-components/tests/e2e-storybook/cypress/support/data/translation.json b/packages/web-components/tests/e2e-storybook/cypress/support/data/translation.json new file mode 100644 index 00000000000..cb03bdd6b15 --- /dev/null +++ b/packages/web-components/tests/e2e-storybook/cypress/support/data/translation.json @@ -0,0 +1 @@ +{"mastheadNav":{"links":[{"title":"Products & Solutions","titleEnglish":"Products & Solutions","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"The essentials","menuItems":[{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"","highlighted":true,"megapanelContent":{"headingTitle":"Hybrid Cloud","headingUrl":"","description":"Blend cloud and on-premises resources for flexibility and balance","quickLinks":{"title":"","links":[{"title":"What is Hybrid Cloud?","titleEnglish":"What is Hybrid Cloud?","highlightedLink":true,"url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmps_ess"},{"title":"Hybrid Cloud solutions","titleEnglish":"Hybrid Cloud solutions","highlightedLink":true,"url":"https://www.ibm.com/cloud/go-hybrid?lnk=hpmps_ess"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"","highlighted":true,"megapanelContent":{"headingTitle":"Artificial intelligence","headingUrl":"","description":"Unlock the value in your organization with Watson","quickLinks":{"title":"","links":[{"title":"What is AI?","titleEnglish":"What is AI?","highlightedLink":true,"url":"https://www.ibm.com/cloud/learn/artificial-intelligence?lnk=hpmps_ess"},{"title":"AI solutions","titleEnglish":"AI solutions","highlightedLink":true,"url":"https://www.ibm.com/cloud/ai?lnk=hpmps_ess"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Top products & platforms","titleEnglish":"Top products & platforms","url":"https://www.ibm.com/products?lnk=hpmps_bupr","megapanelContent":{"headingTitle":"Top products & platforms","headingUrl":"https://www.ibm.com/products?lnk=hpmps_bupr","description":"","quickLinks":{"title":"","links":[{"title":"Aspera","titleEnglish":"Aspera","url":"https://www.ibm.com/products/aspera?lnk=hpmps_bupr"},{"title":"Cognos","titleEnglish":"Cognos","url":"https://www.ibm.com/products/cognos-analytics?lnk=hpmps_bupr"},{"title":"Db2","titleEnglish":"Db2","url":"https://www.ibm.com/analytics/db2?lnk=hpmps_bupr"},{"title":"IBM Cloud","titleEnglish":"IBM Cloud","url":"https://www.ibm.com/cloud?lnk=hpmps_bupr"},{"title":"IBM Cloud Paks","titleEnglish":"IBM Cloud Paks","url":"https://www.ibm.com/cloud/paks?lnk=hpmps_bupr"},{"title":"IBM Sterling","titleEnglish":"IBM Sterling","url":"https://www.ibm.com/supply-chain/sterling?lnk=hpmps_bupr"},{"title":"IBM Storage","titleEnglish":"IBM Storage","url":"https://www.ibm.com/it-infrastructure/storage/?lnk=hpmps_bupr"},{"title":"IBM Z","titleEnglish":"IBM Z","url":"https://www.ibm.com/it-infrastructure/z?lnk=hpmps_bupr"},{"title":"Red Hat OpenShift","titleEnglish":"Red Hat OpenShift","url":"https://www.ibm.com/cloud/openshift?lnk=hpmps_bupr"},{"title":"SPSS Statistics","titleEnglish":"SPSS Statistics","url":"https://www.ibm.com/products/spss-statistics?lnk=hpmps_bupr"},{"title":"Watson","titleEnglish":"Watson","url":"https://www.ibm.com/watson?lnk=hpmps_bupr"},{"title":"WebSphere","titleEnglish":"WebSphere","url":"https://www.ibm.com/cloud/websphere-application-server?lnk=hpmps_bupr"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Solutions","titleEnglish":"Solutions","url":"","megapanelContent":{"headingTitle":"Solutions","headingUrl":"","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"https://www.ibm.com/cloud/ai?lnk=hpmps_buai"},{"title":"Automation","titleEnglish":"Business automation","url":"https://www.ibm.com/cloud/automation?lnk=hpmps_buau"},{"title":"Blockchain","titleEnglish":"Blockchain","url":"https://www.ibm.com/blockchain?lnk=hpmps_bubc"},{"title":"Business operations","titleEnglish":"Business operations","url":"https://www.ibm.com/business-operations?lnk=hpmps_buop"},{"title":"Cloud computing","titleEnglish":"Cloud computing","url":"https://www.ibm.com/cloud?lnk=hpmps_bucl"},{"title":"Data & Analytics","titleEnglish":"Data & Analytics","url":"https://www.ibm.com/analytics?lnk=hpmps_buda"},{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"https://www.ibm.com/cloud/hybrid?lnk=hpmps_bucl"},{"title":"IT infrastructure","titleEnglish":"IT infrastructure","url":"https://www.ibm.com/it-infrastructure?lnk=hpmps_buit"},{"title":"Quantum computing","titleEnglish":"Quantum computing","url":"https://www.ibm.com/quantum-computing/?lnk=hpmps_qc"},{"title":"Security","titleEnglish":"Security","url":"https://www.ibm.com/security?lnk=hpmps_buse"},{"title":"Supply chain","titleEnglish":"Supply chain","url":"https://www.ibm.com/supply-chain?lnk=hpmps_busc"},{"title":"COVID-19 solutions","titleEnglish":"COVID-19 solutions","url":"https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmps_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Industries","titleEnglish":"Industries","url":"https://www.ibm.com/industries?lnk=hpmps_buin","megapanelContent":{"headingTitle":"Industries","headingUrl":"https://www.ibm.com/industries?lnk=hpmps_buin","description":"","quickLinks":{"title":"","links":[{"title":"Aerospace & defense","titleEnglish":"Aerospace & defense","url":"https://www.ibm.com/industries/aerospace-defense?lnk=hpmps_buin"},{"title":"Automotive","titleEnglish":"Automotive","url":"https://www.ibm.com/industries/automotive?lnk=hpmps_buin"},{"title":"Banking & financial markets","titleEnglish":"Banking & financial markets","url":"https://www.ibm.com/industries/banking-financial-markets?lnk=hpmps_buin"},{"title":"Education","titleEnglish":"Education","url":"https://www.ibm.com/industries/education?lnk=hpmps_buin"},{"title":"Electronics","titleEnglish":"Electronics","url":"https://www.ibm.com/industries/electronics?lnk=hpmps_buin"},{"title":"Energy & utilities","titleEnglish":"Energy & utilities","url":"https://www.ibm.com/industries/energy?lnk=hpmps_buin"},{"title":"Government","titleEnglish":"Government","url":"https://www.ibm.com/industries/government?lnk=hpmps_buin"},{"title":"Healthcare","titleEnglish":"Healthcare","url":"https://www.ibm.com/industries/healthcare?lnk=hpmps_buin"},{"title":"Insurance","titleEnglish":"Insurance","url":"https://www.ibm.com/industries/insurance?lnk=hpmps_buin"},{"title":"Life sciences","titleEnglish":"Life sciences","url":"https://www.ibm.com/industries/lifesciences?lnk=hpmps_buin"},{"title":"View all Industries","titleEnglish":"View all Industries","url":"https://www.ibm.com/industries?lnk=hpmps_buin#2546397"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"View all products","titleEnglish":"View all products","url":"https://www.ibm.com/products?lnk=hpmps_buall","megaPanelViewAll":true}]}]},{"title":"Services & Consulting","titleEnglish":"Services & Consulting","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"Business consulting services","titleEnglish":"Business process services","url":"https://www.ibm.com/services/business?lnk=hpmsc_bups","megapanelContent":{"headingTitle":"Business consulting services","headingUrl":"https://www.ibm.com/services/business?lnk=hpmsc_bups","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence services","titleEnglish":"Artificial intelligence services","url":"https://www.ibm.com/services/artificial-intelligence?lnk=hpmsc_bups"},{"title":"Automation","titleEnglish":"Automation","url":"https://www.ibm.com/cloud/automation/services?lnk=hpmsc_bups"},{"title":"Big data & data platform","titleEnglish":"Big data & data platform","url":"https://www.ibm.com/services/big-data-services?lnk=hpmsc_bups"},{"title":"Business process outsourcing","titleEnglish":"Business process outsourcing","url":"https://www.ibm.com/services/process/outsourcing?lnk=hpmsc_bups"},{"title":"Edge consulting","titleEnglish":"Edge consulting","url":"https://www.ibm.com/services/process/edge-services?lnk=hpmsc_bups"},{"title":"Finance consulting and outsourcing services","titleEnglish":"Finance transformation","url":"https://www.ibm.com/services/process/finance-consulting?lnk=hpmsc_bups"},{"title":"Operations consulting","titleEnglish":"IoT consulting","url":"https://www.ibm.com/services/process/operations-consulting?lnk=hpmsc_bups"},{"title":"Procurement consulting and managed services","titleEnglish":"Procurement & strategic sourcing","url":"https://www.ibm.com/services/process/procurement-consulting?lnk=hpmsc_bups"},{"title":"Risk management consulting services","titleEnglish":"Risk consulting & fraud management","url":"https://www.ibm.com/services/process/risk-management?lnk=hpmsc_bups"},{"title":"Supply chain consulting services","titleEnglish":"Supply chain","url":"https://www.ibm.com/services/process/supply-chain?lnk=hpmsc_bups"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/79a6c3cde7dd0665/original/megamenu-pictogram-business-process-service.png","linkTitle":"","linkUrl":""}}},{"title":"Design & business strategy","titleEnglish":"Design & business strategy","url":"https://www.ibm.com/services/ibmix/?lnk=hpmsc_budbs","megapanelContent":{"headingTitle":"Design & business strategy","headingUrl":"https://www.ibm.com/services/ibmix/?lnk=hpmsc_bubs","description":"","quickLinks":{"title":"","links":[{"title":"Customer experience consulting","titleEnglish":"Experience strategy","url":"https://www.ibm.com/services/customer-experience-consulting?lnk=hpmsc_bubs"},{"title":"E-commerce consulting","titleEnglish":"Digital strategy","url":"https://www.ibm.com/services/ecommerce?lnk=hpmsc_bubs"},{"title":"Marketing consulting","titleEnglish":"Marketing platforms","url":"https://www.ibm.com/services/marketing-consulting?lnk=hpmsc_bubs"},{"title":"Salesforce consulting","titleEnglish":"Salesforce consulting","url":"https://www.ibm.com/services/salesforce?lnk=hpmsc_bubs"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/1b7522c50ea39ca/original/megamenu-pictogram-design-business-strategy.png","linkTitle":"","linkUrl":""}}},{"title":"Hybrid multicloud services","titleEnglish":"Hybrid multicloud services","url":"https://www.ibm.com/services/cloud?lnk=hpmsc_buhs","megapanelContent":{"headingTitle":"Hybrid multicloud services","headingUrl":"https://www.ibm.com/services/cloud?lnk=hpmsc_buhs","description":"","quickLinks":{"title":"","links":[{"title":"Business continuity & resiliency","titleEnglish":"Business continuity & resiliency","url":"https://www.ibm.com/services/business-continuity?lnk=hpmsc_buhs"},{"title":"Cloud services","titleEnglish":"Cloud services","url":"https://www.ibm.com/cloud/services?lnk=hpmsc_buhs"},{"title":"Network","titleEnglish":"Network","url":"https://www.ibm.com/services/network?lnk=hpmsc_buhs"},{"title":"Workplace services","titleEnglish":"Workplace services","url":"https://www.ibm.com/services/digital-workplace?lnk=hpmsc_buhs"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5daa9dce872913ea/original/megamenu-pictogram-hybrid-multi-cloud-services.png","linkTitle":"","linkUrl":""}}},{"title":"Talent management services","titleEnglish":"Talent & transformation","url":"https://www.ibm.com/services/talent-management?lnk=hpmsc_buta","megapanelContent":{"headingTitle":"Talent management services","headingUrl":"https://www.ibm.com/services/talent-management?lnk=hpmsc_buta","description":"","quickLinks":{"title":"","links":[{"title":"HR transformation services","titleEnglish":"HR transformation","url":"https://www.ibm.com/services/talent-management/hr-transformation?lnk=hpmsc_buta"},{"title":"Talent acquisition services","titleEnglish":"Talent acquisition","url":"https://www.ibm.com/services/talent-management/talent-acquisition?lnk=hpmsc_buta"},{"title":"Talent development services","titleEnglish":"Talent development","url":"https://www.ibm.com/services/talent-management/talent-development?lnk=hpmsc_buta"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/69e350b141e12bd5/original/megamenu-pictogram-talent-and-transformation.png","linkTitle":"","linkUrl":""}}},{"title":"Application services","titleEnglish":"Application services","url":"https://www.ibm.com/services/applications?lnk=hpmsc_buas","megapanelContent":{"headingTitle":"Application services","headingUrl":"https://www.ibm.com/services/applications?lnk=hpmsc_buas","description":"","quickLinks":{"title":"","links":[{"title":"Application development","titleEnglish":"Application development","url":"https://www.ibm.com/services/applications/development?lnk=hpmsc_buas"},{"title":"Application Modernization","titleEnglish":"Application Modernization","url":"https://www.ibm.com/services/cloud/modernize-applications?lnk=hpmsc_buas"},{"title":"Enterprise application management","titleEnglish":"Enterprise application management","url":"https://www.ibm.com/services/cloud/enterprise-application-management?lnk=hpmsc_buas"},{"title":"Enterprise applications strategy","titleEnglish":"Enterprise applications strategy","url":"https://www.ibm.com/services/applications/enterprise?lnk=hpmsc_buas"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/2b7c180c68557dcb/original/megamenu-pictogram-application-services.png","linkTitle":"","linkUrl":""}}},{"title":"IBM Garage","titleEnglish":"IBM Garages","url":"https://www.ibm.com/garage?lnk=hpmsc_buas"},{"title":"Security services","titleEnglish":"Security services","url":"https://www.ibm.com/security/services?lnk=hpmsc_buse","megapanelContent":{"headingTitle":"Security services","headingUrl":"https://www.ibm.com/security/services?lnk=hpmsc_buse","description":"","quickLinks":{"title":"","links":[{"title":"Application security","titleEnglish":"Application security","url":"https://www.ibm.com/security/services/application-security-services?lnk=hpmsc_buse"},{"title":"Cloud security","titleEnglish":"Cloud security","url":"https://www.ibm.com/security/services/cloud-security-services?lnk=hpmsc_buse"},{"title":"Data security","titleEnglish":"Data security","url":"https://www.ibm.com/security/services/data-security?lnk=hpmsc_buse"},{"title":"Identity & access management","titleEnglish":"Identity & access management","url":"https://www.ibm.com/security/services/identity-access-management?lnk=hpmsc_buse"},{"title":"Managed security","titleEnglish":"Managed security","url":"https://www.ibm.com/security/services/managed-security-services?lnk=hpmsc_buse"},{"title":"Security governance","titleEnglish":"Security governance","url":"https://www.ibm.com/security/services/security-governance?lnk=hpmsc_buse"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/6ecec25a8489cf82/original/megamenu-pictogram-security-services.png","linkTitle":"","linkUrl":""}}},{"title":"Services for tech support","titleEnglish":"Services for tech support","url":"https://www.ibm.com/services/technology-support?lnk=hpmsc_busv","megapanelContent":{"headingTitle":"Services for tech support","headingUrl":"https://www.ibm.com/services/technology-support?lnk=hpmsc_busv","description":"","quickLinks":{"title":"","links":[{"title":"Open source","titleEnglish":"Open source","url":"https://www.ibm.com/services/technology-support/open-source?lnk=hpmsc_busv"},{"title":"Third party & multivendor","titleEnglish":"Third party & multivendor","url":"https://www.ibm.com/services/technology-support/multivendor-it?lnk=hpmsc_busv"},{"title":"IBM warranties and maintenance","titleEnglish":"IBM warranties and maintenance","url":"https://www.ibm.com/services/technology-support/hardware-software?lnk=hpmsc_busv"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/7056e2b83b04133e/original/megamenu-pictogram-services-for-tech-support.png","linkTitle":"","linkUrl":""}}},{"title":"Flexible payment plans","titleEnglish":"Flexible payment plans","url":"https://www.ibm.com/financing?lnk=hpmsc_bufi"},{"title":"View all services","titleEnglish":"View all services","url":"https://www.ibm.com/services?lnk=hpmsc_buall","megaPanelViewAll":true}]}]},{"title":"Learn & Support","titleEnglish":"Learn & Support","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"What is...","titleEnglish":"What is...","url":"https://www.ibm.com/cloud/learn?lnk=hpmls_buwi","megapanelContent":{"headingTitle":"What is...","headingUrl":"https://www.ibm.com/cloud/learn?lnk=hpmls_buwi","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=hpmls_buwi"},{"title":"Automation","titleEnglish":"Automation","url":"https://www.ibm.com/topics/automation?lnk=hpmls_buwi"},{"title":"Blockchain","titleEnglish":"Blockchain","url":"https://www.ibm.com/topics/what-is-blockchain?lnk=hpmls_buwi"},{"title":"Business intelligence","titleEnglish":"Business intelligence","url":"https://www.ibm.com/topics/business-intelligence?lnk=hpmls_buwi"},{"title":"Chatbots","titleEnglish":"Chatbots","url":"https://www.ibm.com/cloud/learn/chatbots-explained?lnk=hpmls_buwi"},{"title":"Cloud computing","titleEnglish":"Cloud computing","url":"https://www.ibm.com/cloud/learn/cloud-computing?lnk=hpmls_buwi"},{"title":"Containerization","titleEnglish":"Containerization","url":"https://www.ibm.com/cloud/container-service?lnk=hpmls_buwi"},{"title":"Cybersecurity","titleEnglish":"Cybersecurity","url":"https://www.ibm.com/topics/cybersecurity?lnk=hpmls_buwi"},{"title":"Databases","titleEnglish":"Databases","url":"https://www.ibm.com/cloud/learn/database?lnk=hpmls_buwi"},{"title":"DevOps","titleEnglish":"DevOps","url":"https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=hpmls_buwi"},{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmls_buwi"},{"title":"Kubernetes","titleEnglish":"Kubernetes","url":"https://www.ibm.com/cloud/learn/kubernetes?lnk=hpmls_buwi"},{"title":"Quantum computing","titleEnglish":"Quantum computing","url":"https://www.ibm.com/quantum-computing/learn/what-is-quantum-computing?lnk=hpmls_buwi"},{"title":"Supply chain","titleEnglish":"Supply chain","url":"https://www.ibm.com/topics/supply-chain-management?lnk=hpmls_buwi"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/581adf40f2b008ec/original/megamenu-pictogram-what-is-_.png","linkTitle":"","linkUrl":""}}},{"title":"Training","titleEnglish":"Training","url":"https://www.ibm.com/training/?lnk=hpmls_butr","megapanelContent":{"headingTitle":"Training","headingUrl":"https://www.ibm.com/training/?lnk=hpmls_butr","description":"","quickLinks":{"title":"","links":[{"title":"Courses","titleEnglish":"Courses","url":"https://www.ibm.com/training/search?q=course&lnk=hpmls_butr"},{"title":"Learning journeys","titleEnglish":"Learning journeys","url":"https://www.ibm.com/training/journeys?lnk=hpmls_butr"},{"title":"Professional certifications","titleEnglish":"Professional certifications","url":"https://www.ibm.com/certify?lnk=hpmls_butr"},{"title":"Digital learning subscriptions","titleEnglish":"Digital learning subscriptions","url":"https://www.ibm.com/training/subscriptions?lnk=hpmls_butr"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5540e5627aeb2568/original/megamenu-pictogram-training.png","linkTitle":"","linkUrl":""}}},{"title":"Developer education","titleEnglish":"Developer education","url":"https://developer.ibm.com/?lnk=hpmls_bude","megapanelContent":{"headingTitle":"Developer education","headingUrl":"https://developer.ibm.com/?lnk=hpmls_bude","description":"","quickLinks":{"title":"","links":[{"title":"Code patterns","titleEnglish":"Code patterns","url":"https://developer.ibm.com/patterns/?lnk=hpmls_bude"},{"title":"Developer community","titleEnglish":"Developer community","url":"https://developer.ibm.com/community/?lnk=hpmls_bude"},{"title":"Developer events","titleEnglish":"Developer events","url":"https://developer.ibm.com/events/?lnk=hpmls_bude"},{"title":"Open Source @ IBM","titleEnglish":"Open Source @ IBM","url":"https://ibm.com/opensource?lnk=hpmls_bude"},{"title":"Technical articles","titleEnglish":"Technical articles","url":"https://developer.ibm.com/articles?lnk=hpmls_bude"},{"title":"Tutorials","titleEnglish":"Tutorials","url":"https://developer.ibm.com/tutorials/?lnk=hpmls_bude"},{"title":"Videos","titleEnglish":"Videos","url":"https://developer.ibm.com/videos?lnk=hpmls_bude"},{"title":"View more Developer education","titleEnglish":"View more Developer education","url":"https://developer.ibm.com/?lnk=hpmls_bude"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/1e651d0f7b539774/original/megamenu-pictogram-developer-education.png","linkTitle":"","linkUrl":""}}},{"title":"Documentation","titleEnglish":"Documentation","url":"https://www.ibm.com/docs/en?lnk=hpmls_budc","megapanelContent":{"headingTitle":"Documentation","headingUrl":"https://www.ibm.com/docs/en?lnk=hpmls_budc","description":"","quickLinks":{"title":"","links":[{"title":"All product documentation","titleEnglish":"All product documentation","url":"https://www.ibm.com/docs/en?lnk=hpmls_budc"},{"title":"For products on IBM Cloud","titleEnglish":"For products on IBM Cloud","url":"https://cloud.ibm.com/docs?lnk=hpmls_budc"},{"title":"For use cases — IBM Redbooks","titleEnglish":"For use cases — IBM Redbooks","url":"https://www.redbooks.ibm.com/?lnk=hpmls_budc"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/49d529fab45bb565/original/megamenu-pictogram-documentation.png","linkTitle":"","linkUrl":""}}},{"title":"Community","titleEnglish":"Community","url":"","megapanelContent":{"headingTitle":"Community","headingUrl":"","description":"","quickLinks":{"title":"","links":[{"title":"IBM Developer","titleEnglish":"IBM Developer","url":"https://developer.ibm.com/?lnk=hpmls_buco"},{"title":"IBM Community","titleEnglish":"IBM Community","url":"https://community.ibm.com/community/user/home?lnk=hpmls_buco"},{"title":"Support forums","titleEnglish":"Support forums","url":"https://www.ibm.com/mysupport/s/forumshome?lnk=hpmls_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Resources","titleEnglish":"Resources","url":"https://www.ibm.com/blogs/?lnk=hpmls_bure","megapanelContent":{"headingTitle":"Resources","headingUrl":"https://www.ibm.com/blogs/?lnk=hpmls_bure","description":"","quickLinks":{"title":"","links":[{"title":"Blogs & thought leadership","titleEnglish":"Blogs & thought leadership","url":"https://www.ibm.com/blogs/?lnk=hpmls_bure"},{"title":"Case studies & client stories","titleEnglish":"Case studies & client stories","url":"https://www.ibm.com/case-studies?lnk=hpmls_bure"},{"title":"Upcoming events & webinars","titleEnglish":"Upcoming events & webinars","url":"https://www.ibm.com/events?lnk=hpmls_bure"},{"title":"IBM Institute for Business Value","titleEnglish":"IBM Institute for Business Value","url":"https://www.ibm.com/thought-leadership/institute-business-value?lnk=hpmls_bure"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/164ef3660bad78a8/original/megamenu-pictogram-resources.png","linkTitle":"","linkUrl":""}}},{"title":"Support","titleEnglish":"Support","url":"https://www.ibm.com/mysupport?lnk=hpmls_busu","megapanelContent":{"headingTitle":"Support","headingUrl":"https://www.ibm.com/mysupport?lnk=hpmls_busu","description":"","quickLinks":{"title":"","links":[{"title":"Download fixes, updates & drivers","titleEnglish":"Download fixes, updates & drivers","url":"https://www.ibm.com/support/fixcentral/?lnk=hpmls_busu"},{"title":"Download licensed software - Passport Advantage","titleEnglish":"Download licensed software - Passport Advantage","url":"https://www.ibm.com/software/passportadvantage/pao_customer.html?lnk=hpmls_busu"},{"title":"View your cases","titleEnglish":"View your cases","url":"https://www.ibm.com/mysupport/s/my-cases?lnk=hpmls_busu"},{"title":"Open a case","titleEnglish":"Open a case","url":"https://www.ibm.com/mysupport/s/redirecttoopencasepage?lnk=hpmls_busu"},{"title":"View available support plans","titleEnglish":"View available support plans","url":"https://www.ibm.com/support/offerings?lnk=hpmls_busu"},{"title":"View more on Support","titleEnglish":"View more on Support","url":"https://www.ibm.com/mysupport?lnk=hpmls_busu&lnk2=all"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5b1abed637b01b55/original/megamenu-pictogram-support.png","linkTitle":"","linkUrl":""}}},{"title":"Cloud platform support","titleEnglish":"Cloud platform support","url":"https://www.ibm.com/cloud/support?lnk=hpmls_bucl"}]}]},{"title":"Explore more","titleEnglish":"Explore more","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"Partner with us","titleEnglish":"Partners","url":"https://www.ibm.com/partners?lnk=hpmex_bupa","megapanelContent":{"headingTitle":"Partner with us","headingUrl":"https://www.ibm.com/partners?lnk=hpmex_bupa","description":"","quickLinks":{"title":"","links":[{"title":"PartnerWorld","titleEnglish":"Partner with us — PartnerWorld","url":"https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa"},{"title":"Our strategic partnerships","titleEnglish":"Our strategic partnerships","url":"https://www.ibm.com/alliances?lnk=hpmex_bupa"},{"title":"Flexible payment plans","titleEnglish":"Flexible payment plans","url":"https://www.ibm.com/partnerworld/financing?lnk=hpmex_bupa"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/4075a8633a1137d/original/megamenu-pictogram-partners.png","linkTitle":"","linkUrl":""}}},{"title":"IBM Research","titleEnglish":"IBM Research","url":"https://www.research.ibm.com/?lnk=hpmex_bure","megapanelContent":{"headingTitle":"IBM Research","headingUrl":"https://www.research.ibm.com/?lnk=hpmex_bure","description":"","quickLinks":{"title":"","links":[{"title":"Research areas","titleEnglish":"Research areas","url":"https://www.research.ibm.com/?lnk=hpmex_bure"},{"title":"Researcher directory","titleEnglish":"Researcher directory","url":"https://researcher.watson.ibm.com/researcher/people.php?lnk=hpmex_bure"},{"title":"Patents","titleEnglish":"Patents","url":"https://www.research.ibm.com/patents/?lnk=hpmex_bure"},{"title":"Work with us","titleEnglish":"Work with us","url":"https://www.research.ibm.com/frontiers/?lnk=hpmex_bure"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5e05b0b234bc3846/original/megamenu-pictogram-ibm-research.png","linkTitle":"","linkUrl":""}}},{"title":"About IBM","titleEnglish":"About IBM","url":"https://www.ibm.com/about?lnk=hpmex_buab","megapanelContent":{"headingTitle":"About IBM","headingUrl":"https://www.ibm.com/about?lnk=hpmex_buab","description":"","quickLinks":{"title":"","links":[{"title":"Annual report","titleEnglish":"Annual report","url":"https://www.ibm.com/annualreport/?lnk=hpmex_buab"},{"title":"Career opportunities","titleEnglish":"Career opportunities","url":"https://www.ibm.com/employment/?lnk=hpmex_buab"},{"title":"Corporate social responsibility","titleEnglish":"Corporate social responsibility","url":"https://www.ibm.org?lnk=hpmex_buab"},{"title":"Diversity & inclusion","titleEnglish":"Diversity & inclusion","url":"https://www.ibm.com/employment/inclusion/?lnk=hpmex_buab"},{"title":"Investor relations","titleEnglish":"Investor relations","url":"https://www.ibm.com/investor/?lnk=hpmex_buab"},{"title":"News & announcements","titleEnglish":"News & announcements","url":"https://newsroom.ibm.com?lnk=hpmex_buab"},{"title":"Thought leadership","titleEnglish":"Thought leadership","url":"https://www.ibm.com/thought-leadership/?lnk=hpmex_buab"},{"title":"Security, privacy & trust","titleEnglish":"Security, privacy & trust","url":"https://www.ibm.com/trust?lnk=hpmex_buab"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/220eb8ea8345a4d6/original/megamenu-pictogram-about-ibm.png","linkTitle":"","linkUrl":""}}},{"title":"COVID-19","titleEnglish":"COVID-19","url":"https://www.ibm.com/impact/covid-19?lnk=hpmex_buco","megapanelContent":{"headingTitle":"COVID-19","headingUrl":"https://www.ibm.com/impact/covid-19?lnk=hpmex_buco","description":"","quickLinks":{"title":"","links":[{"title":"Business solutions","titleEnglish":"Business solutions","url":"https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmex_buco"},{"title":"Action guide","titleEnglish":"Action guide","url":"https://www.ibm.com/thought-leadership/institute-business-value/report/covid-19-action-guide?lnk=hpmex_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}}]}]}]},"masthead":{"search":{"btnSearchClosed":"Open IBM search field","btnSearchOpen":"Search all of IBM","btnClose":"Close IBM search field","placeHolderText":"Search all of IBM"},"profileMenu":{"signedout":{"iconLabel":"User Profile","links":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Log in","url":"https://login.ibm.com/oidc/endpoint/default/authorize?redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&response_type=token&client_id=v18LoginProdCI&scope=openid&state=https%3A%2F%2Fwww.ibm.com&nonce=8675309"}]},"signedin":{"iconLabel":"User Profile: Logged in","links":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Profile","url":"https://myibm.ibm.com/profile/?lnk=mmi"},{"title":"Billing","url":"https://myibm.ibm.com/billing/?lnk=mmi"},{"title":"Log out","url":"https://myibm.ibm.com/pkmslogout?filename=accountRedir.html"}]}}},"profileMenu":{"signedout":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"id":"signin","title":"Log in","url":"https://login.ibm.com/oidc/endpoint/default/authorize?redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&response_type=token&client_id=v18LoginProdCI&scope=openid&state=https%3A%2F%2Fwww.ibm.com%2Fus-en%3Flnk%3Dfcc&nonce=8675309"}],"signedin":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Profile","url":"https://myibm.ibm.com/profile/?lnk=mmi"},{"title":"Billing","url":"https://myibm.ibm.com/billing/?lnk=mmi"},{"id":"signout","title":"Log out","url":"https://myibm.ibm.com/pkmslogout?filename=accountRedir.html"}]},"marketplace":{"title":"Products","url":""},"footerMenu":[{"title":"Products & Solutions","links":[{"title":"Top products & platforms","url":"https://www.ibm.com/products?lnk=fps"},{"title":"Industries","url":"https://www.ibm.com/industries?lnk=fps"},{"title":"Artificial intelligence","url":"https://ibm.com/cloud/ai?lnk=fps"},{"title":"Blockchain","url":"https://www.ibm.com/blockchain?lnk=fps"},{"title":"Business operations","url":"https://www.ibm.com/business-operations?lnk=fps"},{"title":"Cloud computing","url":"https://www.ibm.com/cloud?lnk=fps"},{"title":"Data & Analytics","url":"https://www.ibm.com/analytics?lnk=fps"},{"title":"Hybrid cloud","url":"https://www.ibm.com/cloud/hybrid?lnk=fps"},{"title":"IT infrastructure","url":"https://www.ibm.com/it-infrastructure?lnk=fps"},{"title":"Security","url":"https://www.ibm.com/security?lnk=fps"},{"title":"Supply chain","url":"https://www.ibm.com/supply-chain?lnk=fps"}]},{"title":"Learn about","links":[{"title":"What is Hybrid Cloud?","url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=fle"},{"title":"What is Artificial intelligence?","url":"https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=fle"},{"title":"What is Cloud Computing?","url":"https://www.ibm.com/cloud/learn/cloud-computing?lnk=fle"},{"title":"What is Kubernetes?","url":"https://www.ibm.com/cloud/learn/kubernetes?lnk=fle"},{"title":"What are Containers?","url":"https://www.ibm.com/cloud/learn/containers?lnk=fle"},{"title":"What is DevOps?","url":"https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=fle"},{"title":"What is Machine Learning?","url":"https://www.ibm.com/cloud/learn/machine-learning?lnk=fle"}]},{"title":"Popular links","links":[{"title":"Communities","url":"https://community.ibm.com/community/user/home?lnk=fpo"},{"title":"Developer education","url":"https://developer.ibm.com/?lnk=fpo"},{"title":"Support - Download fixes, updates & drivers","url":"https://www.ibm.com/support/fixcentral/?lnk=fpo"},{"title":"IBM Research","url":"https://www.research.ibm.com/?lnk=fpo"},{"title":"Partner with us - PartnerWorld","url":"https://www.ibm.com/partnerworld/public?lnk=fpo"},{"title":"Training - Courses","url":"https://www.ibm.com/training/search?q=course&lnk=fpo"},{"title":"Upcoming events & webinars","url":"https://www.ibm.com/events/?lnk=fpo"}]},{"title":"About IBM","links":[{"title":"Annual report","url":"https://www.ibm.com/annualreport/?lnk=fab"},{"title":"Career opportunities","url":"https://www.ibm.com/employment/?lnk=fab"},{"title":"Corporate social responsibility","url":"https://www.ibm.org/?lnk=fab"},{"title":"Diversity & inclusion","url":"https://www.ibm.com/employment/inclusion/?lnk=fab"},{"title":"Investor relations","url":"https://www.ibm.com/investor/?lnk=fab"},{"title":"News & announcements","url":"https://newsroom.ibm.com/?lnk=fab"},{"title":"Thought leadership","url":"https://www.ibm.com/thought-leadership/?lnk=fab"},{"title":"Security, privacy & trust","url":"https://www.ibm.com/trust?lnk=fab"},{"title":"About IBM","url":"https://www.ibm.com/about?lnk=fab"}]},{"title":"Follow IBM","links":[{"linkClass":"ibm-linkedin-encircled-link","title":"LinkedIn","url":"https://www.linkedin.com/company/ibm"},{"linkClass":"ibm-twitter-encircled-link","title":"Twitter","url":"https://www.twitter.com/ibm"},{"linkClass":"ibm-instagram-encircled-link","title":"Instagram","url":"https://www.instagram.com/ibm"}]}],"footerThin":[{"title":"Contact IBM","titleEnglish":"Contact IBM","url":"https://www.ibm.com/contact/us/en/?lnk=flg-cont-usen"},{"title":"Privacy","titleEnglish":"Privacy","url":"https://www.ibm.com/privacy/us/en/?lnk=flg-priv-usen"},{"title":"Terms of use","titleEnglish":"Terms of use","url":"https://www.ibm.com/us-en/legal?lnk=flg-tous-usen"},{"title":"Accessibility","titleEnglish":"Accessibility","url":"https://www.ibm.com/accessibility/us/en/?lnk=flg-acce-usen"}],"localeSelector":{"localVersions":"Localized versions of this page","homepages":"Worldwide ibm.com home pages"},"socialFollow":{"title":"Follow IBM","links":[{"linkClass":"ibm-linkedin-encircled-link","title":"LinkedIn","url":"https://www.linkedin.com/company/ibm"},{"linkClass":"ibm-twitter-encircled-link","title":"Twitter","url":"https://www.twitter.com/ibm"},{"linkClass":"ibm-instagram-encircled-link","title":"Instagram","url":"https://www.instagram.com/ibm"}]},"socialSharing":[{"id":"facebook","title":"Facebook","url":"https://www.facebook.com/sharer.php?u=%{URL}&t=%{TITLE}"},{"id":"twitter","title":"Twitter","url":"https://twitter.com/?status=%{URL}%20-%20%{TITLE}"},{"id":"linkedin","title":"Linked In","url":"https://www.linkedin.com/shareArticle?mini=true&url=%{URL}&title=%{TITLE}"}],"leaving":{"LEAVING001":"Leaving the IBM Web site","LEAVING002":"You are now leaving IBM.com and going to an external 3rd party site. Unless otherwise stated, the 3rd party's site Terms and Privacy Policy will apply, and may differ from IBM's.","LEAVING003":"You are headed to","LEAVING004":"Notice"},"misc":{"backtotop":"Back to top","cancelText":"Cancel","close":"Close","cookiePrefs":"Cookie preferences","continueText":"Continue","editProfile":"Edit profile","emailThisPage":"E-mail this page","feedback":"Feedback","mpScopedSearh":"Products","withinMp":"Products","next":"Next","noresults":"No results found","prev":"Previous","resultsNav":"Use down and up arrow keys to navigate through the results.","search":"Search","selectCountry":"Select a country/region","sharePage":"Share this page","signin":"Sign in","signout":"Sign out","sitenav":"Site navigation","welcomeback":"Welcome back"},"timestamp":1629893493671} diff --git a/packages/web-components/tests/e2e/cypress/support/commands.js b/packages/web-components/tests/e2e/cypress/support/commands.js index 0d37dff900d..1211d9f7b91 100644 --- a/packages/web-components/tests/e2e/cypress/support/commands.js +++ b/packages/web-components/tests/e2e/cypress/support/commands.js @@ -5,28 +5,13 @@ * LICENSE file in the root directory of this source tree. */ -// *********************************************** -// This example commands.js shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** -// -// -// -- This is a parent command -- -// Cypress.Commands.add('login', (email, password) => { ... }) -// -// -// -- This is a child command -- -// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This will overwrite an existing command -- -// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) +import countrylist from './data/countrylist.json'; +import translation from './data/translation.json'; + +/** + * Sets the translation data in sessionStorage + */ +Cypress.Commands.add('setTranslations', () => { + window.sessionStorage.setItem('dds-countrylist-us-en', countrylist); + window.sessionStorage.setItem('dds-translation-us-en', translation); +}); diff --git a/packages/web-components/tests/e2e/cypress/support/data/countrylist.json b/packages/web-components/tests/e2e/cypress/support/data/countrylist.json new file mode 100644 index 00000000000..437dd737b7f --- /dev/null +++ b/packages/web-components/tests/e2e/cypress/support/data/countrylist.json @@ -0,0 +1 @@ +{"regionList":[{"name":"Americas","key":"am","countryList":[{"name":"Anguilla","locale":[["en-ai","English"]]},{"name":"Antigua and Barbuda","locale":[["en-ag","English"]]},{"name":"Argentina","locale":[["es-ar","Spanish (Español)"]]},{"name":"Aruba","locale":[["en-aw","English"]]},{"name":"Bahamas","locale":[["en-bs","English"]]},{"name":"Barbados","locale":[["en-bb","English"]]},{"name":"Bermuda","locale":[["en-bm","English"]]},{"name":"Bolivia","locale":[["es-bo","Spanish (Español)"]]},{"name":"Brazil (Brasil)","locale":[["pt-br","Portuguese (Português)"]]},{"name":"Canada","locale":[["en-ca","English"]]},{"name":"Canada","locale":[["fr-ca","French (Français)"]]},{"name":"Cayman Islands","locale":[["en-ky","English"]]},{"name":"Chile","locale":[["es-cl","Spanish (Español)"]]},{"name":"Colombia","locale":[["es-co","Spanish (Español)"]]},{"name":"Costa Rica","locale":[["es-cr","Spanish (Español)"]]},{"name":"Curacao","locale":[["en-cw","English"]]},{"name":"Dominica","locale":[["en-dm","English"]]},{"name":"Ecuador","locale":[["es-ec","Spanish (Español)"]]},{"name":"Grenada","locale":[["en-gd","English"]]},{"name":"Guyana","locale":[["en-gy","English"]]},{"name":"Jamaica","locale":[["en-jm","English"]]},{"name":"Mexico","locale":[["es-mx","Spanish (Español)"]]},{"name":"Montserrat","locale":[["en-ms","English"]]},{"name":"Paraguay","locale":[["es-py","Spanish (Español)"]]},{"name":"Peru","locale":[["es-pe","Spanish (Español)"]]},{"name":"Saint Kitts and Nevis","locale":[["en-kn","English"]]},{"name":"Saint Lucia","locale":[["en-lc","English"]]},{"name":"Saint Vincent and the Grenadines","locale":[["en-vc","English"]]},{"name":"Suriname","locale":[["en-sr","English"]]},{"name":"Trinidad and Tobago","locale":[["en-tt","English"]]},{"name":"Turks and Caicos Islands","locale":[["en-tc","English"]]},{"name":"United States","locale":[["en-us","English"]]},{"name":"Uruguay","locale":[["es-uy","Spanish (Español)"]]},{"name":"Venezuela","locale":[["es-ve","Spanish (Español)"]]},{"name":"Virgin Islands, British","locale":[["en-vg","English"]]}]},{"name":"Asia Pacific","key":"ap","countryList":[{"name":"Australia","locale":[["en-au","English"]]},{"name":"Bangladesh","locale":[["en-bd","English"]]},{"name":"Brunei Darussalam","locale":[["en-bn","English"]]},{"name":"Cambodia","locale":[["en-kh","English"]]},{"name":"China (中国)","locale":[["zh-cn","Chinese (简体中文)"]]},{"name":"Hong Kong S.A.R. of China","locale":[["en-hk","English"]]},{"name":"India","locale":[["en-in","English"]]},{"name":"Indonesia","locale":[["en-id","English"]]},{"name":"Japan (日本)","locale":[["ja-jp","Japanese (日本語)"]]},{"name":"Korea, Republic of (대한민국)","locale":[["ko-kr","Korean (한국어)"]]},{"name":"Malaysia","locale":[["en-my","English"]]},{"name":"Nepal","locale":[["en-np","English"]]},{"name":"New Zealand","locale":[["en-nz","English"]]},{"name":"Philippines","locale":[["en-ph","English"]]},{"name":"Singapore","locale":[["en-sg","English"]]},{"name":"Sri Lanka","locale":[["en-lk","English"]]},{"name":"Taiwan (台灣)","locale":[["zh-tw","Chinese (繁體中文)"]]},{"name":"Thailand","locale":[["en-th","English"]]},{"name":"Vietnam","locale":[["en-vn","English"]]}]},{"name":"Europe","key":"eu","countryList":[{"name":"Austria (Österreich)","locale":[["de-at","German (Deutsch)"]]},{"name":"Belgium/Luxembourg","locale":[["en-be","English"]]},{"name":"Bulgaria","locale":[["en-bg","English"]]},{"name":"Croatia","locale":[["en-hr","English"]]},{"name":"Cyprus","locale":[["en-cy","English"]]},{"name":"Czech Republic","locale":[["en-cz","English"]]},{"name":"Denmark","locale":[["en-dk","English"]]},{"name":"Estonia","locale":[["en-ee","English"]]},{"name":"Finland","locale":[["en-fi","English"]]},{"name":"France","locale":[["fr-fr","French (Français)"]]},{"name":"Germany (Deutschland)","locale":[["de-de","German (Deutsch)"]]},{"name":"Greece","locale":[["en-gr","English"]]},{"name":"Hungary","locale":[["en-hu","English"]]},{"name":"Ireland","locale":[["en-ie","English"]]},{"name":"Italy (Italia)","locale":[["it-it","Italian (Italiano)"]]},{"name":"Kazakhstan","locale":[["en-kz","English"]]},{"name":"Latvia","locale":[["en-lv","English"]]},{"name":"Lithuania","locale":[["en-lt","English"]]},{"name":"Netherlands","locale":[["en-nl","English"]]},{"name":"Norway","locale":[["en-no","English"]]},{"name":"Poland (Polska)","locale":[["pl-pl","Polish (Polskie)"]]},{"name":"Portugal","locale":[["en-pt","English"]]},{"name":"Romania","locale":[["en-ro","English"]]},{"name":"Russian (Россия)","locale":[["ru-ru","Russian (русский)"]]},{"name":"Serbia","locale":[["en-rs","English"]]},{"name":"Slovakia","locale":[["en-sk","English"]]},{"name":"Slovenia","locale":[["en-si","English"]]},{"name":"Spain (España)","locale":[["es-es","Spanish (Español)"]]},{"name":"Sweden","locale":[["en-se","English"]]},{"name":"Switzerland (Suisse)","locale":[["fr-ch","French (Français)"]]},{"name":"Switzerland (Schweiz)","locale":[["de-ch","German (Deutsch)"]]},{"name":"Turkey (Türkiye)","locale":[["tr-tr","Turkish (Türk)"]]},{"name":"Ukraine","locale":[["en-ua","English"]]},{"name":"United Kingdom","locale":[["en-uk","English"]]},{"name":"United Kingdom","locale":[["en-gb","English"]]},{"name":"Uzbekistan","locale":[["en-uz","English"]]}]},{"name":"Middle East and Africa","key":"mea","countryList":[{"name":"Afghanistan","locale":[["en-af","English"]]},{"name":"Algeria (Algérie)","locale":[["fr-dz","French (Français)"]]},{"name":"Angola","locale":[["pt-ao","Portuguese (Português)"]]},{"name":"Bahrain","locale":[["en-bh","English"]]},{"name":"Botswana","locale":[["en-bw","English"]]},{"name":"Burkina Faso","locale":[["fr-bf","French (Français)"]]},{"name":"Cameroon (Cameroun)","locale":[["fr-cm","French (Français)"]]},{"name":"Chad (Tchad)","locale":[["fr-td","French (Français)"]]},{"name":"Congo","locale":[["fr-cg","French (Français)"]]},{"name":"Congo, Democratic Republic of (République Démocratique du Congo)","locale":[["fr-cd","French (Français)"]]},{"name":"Egypt","locale":[["en-eg","English"]]},{"name":"Ethiopia","locale":[["en-et","English"]]},{"name":"Gabon","locale":[["fr-ga","French (Français)"]]},{"name":"Ghana","locale":[["en-gh","English"]]},{"name":"Iraq","locale":[["en-iq","English"]]},{"name":"Israel","locale":[["en-il","English"]]},{"name":"Ivory Coast (Côte d'Ivoire)","locale":[["fr-ci","French (Français)"]]},{"name":"Jordan","locale":[["en-jo","English"]]},{"name":"Kenya","locale":[["en-ke","English"]]},{"name":"Kuwait","locale":[["en-kw","English"]]},{"name":"Lebanon","locale":[["en-lb","English"]]},{"name":"Libya","locale":[["en-ly","English"]]},{"name":"Madagascar","locale":[["fr-mg","French (Français)"]]},{"name":"Malawi","locale":[["en-mw","English"]]},{"name":"Mauritius (Maurice)","locale":[["fr-mu","French (Français)"]]},{"name":"Morocco (Maroc)","locale":[["fr-ma","French (Français)"]]},{"name":"Mozambique","locale":[["pt-mz","Portuguese (Português)"]]},{"name":"Namibia","locale":[["en-na","English"]]},{"name":"Niger","locale":[["fr-ne","French (Français)"]]},{"name":"Nigeria","locale":[["en-ng","English"]]},{"name":"Oman","locale":[["en-om","English"]]},{"name":"Pakistan","locale":[["en-pk","English"]]},{"name":"Qatar","locale":[["en-qa","English"]]},{"name":"Saudi Arabia","locale":[["en-sa","English"]]},{"name":"Saudi Arabia (المملكة العربية السعودية)","locale":[["ar-sa","Arabic (عربى)"]]},{"name":"Senegal (Sénégal)","locale":[["fr-sn","French (Français)"]]},{"name":"Seychelles","locale":[["fr-sc","French (Français)"]]},{"name":"Sierra Leone","locale":[["en-sl","English"]]},{"name":"South Africa","locale":[["en-za","English"]]},{"name":"Tanzania, United Republic of","locale":[["en-tz","English"]]},{"name":"Tunisia (Tunisie)","locale":[["fr-tn","French (Français)"]]},{"name":"Uganda","locale":[["en-ug","English"]]},{"name":"United Arab Emirates","locale":[["en-ae","English"]]},{"name":"United Arab Emirates (الإمارات العربية المتحدة)","locale":[["ar-ae","Arabic (عربى)"]]},{"name":"Yemen","locale":[["en-ye","English"]]},{"name":"Zambia","locale":[["en-zm","English"]]},{"name":"Zimbabwe","locale":[["en-zw","English"]]}]}],"localeModal":{"headerTitle":"Select geographic area","modalClose":"Close modal","searchLabel":"Search by location or language. Note: Location/Language will be dynamically updated as you provide the input","searchClearText":"Clear search input","searchPlaceholder":"Search by location or language","availabilityText":"This page is available in the following locations and languages","unavailabilityText":"This page is unavailable in your preferred location or language"},"timestamp":1629893493451,"locale":{"lc":"en","cc":"us"}} diff --git a/packages/web-components/tests/e2e/cypress/support/data/translation.json b/packages/web-components/tests/e2e/cypress/support/data/translation.json new file mode 100644 index 00000000000..cb03bdd6b15 --- /dev/null +++ b/packages/web-components/tests/e2e/cypress/support/data/translation.json @@ -0,0 +1 @@ +{"mastheadNav":{"links":[{"title":"Products & Solutions","titleEnglish":"Products & Solutions","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"The essentials","menuItems":[{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"","highlighted":true,"megapanelContent":{"headingTitle":"Hybrid Cloud","headingUrl":"","description":"Blend cloud and on-premises resources for flexibility and balance","quickLinks":{"title":"","links":[{"title":"What is Hybrid Cloud?","titleEnglish":"What is Hybrid Cloud?","highlightedLink":true,"url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmps_ess"},{"title":"Hybrid Cloud solutions","titleEnglish":"Hybrid Cloud solutions","highlightedLink":true,"url":"https://www.ibm.com/cloud/go-hybrid?lnk=hpmps_ess"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"","highlighted":true,"megapanelContent":{"headingTitle":"Artificial intelligence","headingUrl":"","description":"Unlock the value in your organization with Watson","quickLinks":{"title":"","links":[{"title":"What is AI?","titleEnglish":"What is AI?","highlightedLink":true,"url":"https://www.ibm.com/cloud/learn/artificial-intelligence?lnk=hpmps_ess"},{"title":"AI solutions","titleEnglish":"AI solutions","highlightedLink":true,"url":"https://www.ibm.com/cloud/ai?lnk=hpmps_ess"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Top products & platforms","titleEnglish":"Top products & platforms","url":"https://www.ibm.com/products?lnk=hpmps_bupr","megapanelContent":{"headingTitle":"Top products & platforms","headingUrl":"https://www.ibm.com/products?lnk=hpmps_bupr","description":"","quickLinks":{"title":"","links":[{"title":"Aspera","titleEnglish":"Aspera","url":"https://www.ibm.com/products/aspera?lnk=hpmps_bupr"},{"title":"Cognos","titleEnglish":"Cognos","url":"https://www.ibm.com/products/cognos-analytics?lnk=hpmps_bupr"},{"title":"Db2","titleEnglish":"Db2","url":"https://www.ibm.com/analytics/db2?lnk=hpmps_bupr"},{"title":"IBM Cloud","titleEnglish":"IBM Cloud","url":"https://www.ibm.com/cloud?lnk=hpmps_bupr"},{"title":"IBM Cloud Paks","titleEnglish":"IBM Cloud Paks","url":"https://www.ibm.com/cloud/paks?lnk=hpmps_bupr"},{"title":"IBM Sterling","titleEnglish":"IBM Sterling","url":"https://www.ibm.com/supply-chain/sterling?lnk=hpmps_bupr"},{"title":"IBM Storage","titleEnglish":"IBM Storage","url":"https://www.ibm.com/it-infrastructure/storage/?lnk=hpmps_bupr"},{"title":"IBM Z","titleEnglish":"IBM Z","url":"https://www.ibm.com/it-infrastructure/z?lnk=hpmps_bupr"},{"title":"Red Hat OpenShift","titleEnglish":"Red Hat OpenShift","url":"https://www.ibm.com/cloud/openshift?lnk=hpmps_bupr"},{"title":"SPSS Statistics","titleEnglish":"SPSS Statistics","url":"https://www.ibm.com/products/spss-statistics?lnk=hpmps_bupr"},{"title":"Watson","titleEnglish":"Watson","url":"https://www.ibm.com/watson?lnk=hpmps_bupr"},{"title":"WebSphere","titleEnglish":"WebSphere","url":"https://www.ibm.com/cloud/websphere-application-server?lnk=hpmps_bupr"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Solutions","titleEnglish":"Solutions","url":"","megapanelContent":{"headingTitle":"Solutions","headingUrl":"","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"https://www.ibm.com/cloud/ai?lnk=hpmps_buai"},{"title":"Automation","titleEnglish":"Business automation","url":"https://www.ibm.com/cloud/automation?lnk=hpmps_buau"},{"title":"Blockchain","titleEnglish":"Blockchain","url":"https://www.ibm.com/blockchain?lnk=hpmps_bubc"},{"title":"Business operations","titleEnglish":"Business operations","url":"https://www.ibm.com/business-operations?lnk=hpmps_buop"},{"title":"Cloud computing","titleEnglish":"Cloud computing","url":"https://www.ibm.com/cloud?lnk=hpmps_bucl"},{"title":"Data & Analytics","titleEnglish":"Data & Analytics","url":"https://www.ibm.com/analytics?lnk=hpmps_buda"},{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"https://www.ibm.com/cloud/hybrid?lnk=hpmps_bucl"},{"title":"IT infrastructure","titleEnglish":"IT infrastructure","url":"https://www.ibm.com/it-infrastructure?lnk=hpmps_buit"},{"title":"Quantum computing","titleEnglish":"Quantum computing","url":"https://www.ibm.com/quantum-computing/?lnk=hpmps_qc"},{"title":"Security","titleEnglish":"Security","url":"https://www.ibm.com/security?lnk=hpmps_buse"},{"title":"Supply chain","titleEnglish":"Supply chain","url":"https://www.ibm.com/supply-chain?lnk=hpmps_busc"},{"title":"COVID-19 solutions","titleEnglish":"COVID-19 solutions","url":"https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmps_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Industries","titleEnglish":"Industries","url":"https://www.ibm.com/industries?lnk=hpmps_buin","megapanelContent":{"headingTitle":"Industries","headingUrl":"https://www.ibm.com/industries?lnk=hpmps_buin","description":"","quickLinks":{"title":"","links":[{"title":"Aerospace & defense","titleEnglish":"Aerospace & defense","url":"https://www.ibm.com/industries/aerospace-defense?lnk=hpmps_buin"},{"title":"Automotive","titleEnglish":"Automotive","url":"https://www.ibm.com/industries/automotive?lnk=hpmps_buin"},{"title":"Banking & financial markets","titleEnglish":"Banking & financial markets","url":"https://www.ibm.com/industries/banking-financial-markets?lnk=hpmps_buin"},{"title":"Education","titleEnglish":"Education","url":"https://www.ibm.com/industries/education?lnk=hpmps_buin"},{"title":"Electronics","titleEnglish":"Electronics","url":"https://www.ibm.com/industries/electronics?lnk=hpmps_buin"},{"title":"Energy & utilities","titleEnglish":"Energy & utilities","url":"https://www.ibm.com/industries/energy?lnk=hpmps_buin"},{"title":"Government","titleEnglish":"Government","url":"https://www.ibm.com/industries/government?lnk=hpmps_buin"},{"title":"Healthcare","titleEnglish":"Healthcare","url":"https://www.ibm.com/industries/healthcare?lnk=hpmps_buin"},{"title":"Insurance","titleEnglish":"Insurance","url":"https://www.ibm.com/industries/insurance?lnk=hpmps_buin"},{"title":"Life sciences","titleEnglish":"Life sciences","url":"https://www.ibm.com/industries/lifesciences?lnk=hpmps_buin"},{"title":"View all Industries","titleEnglish":"View all Industries","url":"https://www.ibm.com/industries?lnk=hpmps_buin#2546397"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"View all products","titleEnglish":"View all products","url":"https://www.ibm.com/products?lnk=hpmps_buall","megaPanelViewAll":true}]}]},{"title":"Services & Consulting","titleEnglish":"Services & Consulting","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"Business consulting services","titleEnglish":"Business process services","url":"https://www.ibm.com/services/business?lnk=hpmsc_bups","megapanelContent":{"headingTitle":"Business consulting services","headingUrl":"https://www.ibm.com/services/business?lnk=hpmsc_bups","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence services","titleEnglish":"Artificial intelligence services","url":"https://www.ibm.com/services/artificial-intelligence?lnk=hpmsc_bups"},{"title":"Automation","titleEnglish":"Automation","url":"https://www.ibm.com/cloud/automation/services?lnk=hpmsc_bups"},{"title":"Big data & data platform","titleEnglish":"Big data & data platform","url":"https://www.ibm.com/services/big-data-services?lnk=hpmsc_bups"},{"title":"Business process outsourcing","titleEnglish":"Business process outsourcing","url":"https://www.ibm.com/services/process/outsourcing?lnk=hpmsc_bups"},{"title":"Edge consulting","titleEnglish":"Edge consulting","url":"https://www.ibm.com/services/process/edge-services?lnk=hpmsc_bups"},{"title":"Finance consulting and outsourcing services","titleEnglish":"Finance transformation","url":"https://www.ibm.com/services/process/finance-consulting?lnk=hpmsc_bups"},{"title":"Operations consulting","titleEnglish":"IoT consulting","url":"https://www.ibm.com/services/process/operations-consulting?lnk=hpmsc_bups"},{"title":"Procurement consulting and managed services","titleEnglish":"Procurement & strategic sourcing","url":"https://www.ibm.com/services/process/procurement-consulting?lnk=hpmsc_bups"},{"title":"Risk management consulting services","titleEnglish":"Risk consulting & fraud management","url":"https://www.ibm.com/services/process/risk-management?lnk=hpmsc_bups"},{"title":"Supply chain consulting services","titleEnglish":"Supply chain","url":"https://www.ibm.com/services/process/supply-chain?lnk=hpmsc_bups"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/79a6c3cde7dd0665/original/megamenu-pictogram-business-process-service.png","linkTitle":"","linkUrl":""}}},{"title":"Design & business strategy","titleEnglish":"Design & business strategy","url":"https://www.ibm.com/services/ibmix/?lnk=hpmsc_budbs","megapanelContent":{"headingTitle":"Design & business strategy","headingUrl":"https://www.ibm.com/services/ibmix/?lnk=hpmsc_bubs","description":"","quickLinks":{"title":"","links":[{"title":"Customer experience consulting","titleEnglish":"Experience strategy","url":"https://www.ibm.com/services/customer-experience-consulting?lnk=hpmsc_bubs"},{"title":"E-commerce consulting","titleEnglish":"Digital strategy","url":"https://www.ibm.com/services/ecommerce?lnk=hpmsc_bubs"},{"title":"Marketing consulting","titleEnglish":"Marketing platforms","url":"https://www.ibm.com/services/marketing-consulting?lnk=hpmsc_bubs"},{"title":"Salesforce consulting","titleEnglish":"Salesforce consulting","url":"https://www.ibm.com/services/salesforce?lnk=hpmsc_bubs"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/1b7522c50ea39ca/original/megamenu-pictogram-design-business-strategy.png","linkTitle":"","linkUrl":""}}},{"title":"Hybrid multicloud services","titleEnglish":"Hybrid multicloud services","url":"https://www.ibm.com/services/cloud?lnk=hpmsc_buhs","megapanelContent":{"headingTitle":"Hybrid multicloud services","headingUrl":"https://www.ibm.com/services/cloud?lnk=hpmsc_buhs","description":"","quickLinks":{"title":"","links":[{"title":"Business continuity & resiliency","titleEnglish":"Business continuity & resiliency","url":"https://www.ibm.com/services/business-continuity?lnk=hpmsc_buhs"},{"title":"Cloud services","titleEnglish":"Cloud services","url":"https://www.ibm.com/cloud/services?lnk=hpmsc_buhs"},{"title":"Network","titleEnglish":"Network","url":"https://www.ibm.com/services/network?lnk=hpmsc_buhs"},{"title":"Workplace services","titleEnglish":"Workplace services","url":"https://www.ibm.com/services/digital-workplace?lnk=hpmsc_buhs"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5daa9dce872913ea/original/megamenu-pictogram-hybrid-multi-cloud-services.png","linkTitle":"","linkUrl":""}}},{"title":"Talent management services","titleEnglish":"Talent & transformation","url":"https://www.ibm.com/services/talent-management?lnk=hpmsc_buta","megapanelContent":{"headingTitle":"Talent management services","headingUrl":"https://www.ibm.com/services/talent-management?lnk=hpmsc_buta","description":"","quickLinks":{"title":"","links":[{"title":"HR transformation services","titleEnglish":"HR transformation","url":"https://www.ibm.com/services/talent-management/hr-transformation?lnk=hpmsc_buta"},{"title":"Talent acquisition services","titleEnglish":"Talent acquisition","url":"https://www.ibm.com/services/talent-management/talent-acquisition?lnk=hpmsc_buta"},{"title":"Talent development services","titleEnglish":"Talent development","url":"https://www.ibm.com/services/talent-management/talent-development?lnk=hpmsc_buta"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/69e350b141e12bd5/original/megamenu-pictogram-talent-and-transformation.png","linkTitle":"","linkUrl":""}}},{"title":"Application services","titleEnglish":"Application services","url":"https://www.ibm.com/services/applications?lnk=hpmsc_buas","megapanelContent":{"headingTitle":"Application services","headingUrl":"https://www.ibm.com/services/applications?lnk=hpmsc_buas","description":"","quickLinks":{"title":"","links":[{"title":"Application development","titleEnglish":"Application development","url":"https://www.ibm.com/services/applications/development?lnk=hpmsc_buas"},{"title":"Application Modernization","titleEnglish":"Application Modernization","url":"https://www.ibm.com/services/cloud/modernize-applications?lnk=hpmsc_buas"},{"title":"Enterprise application management","titleEnglish":"Enterprise application management","url":"https://www.ibm.com/services/cloud/enterprise-application-management?lnk=hpmsc_buas"},{"title":"Enterprise applications strategy","titleEnglish":"Enterprise applications strategy","url":"https://www.ibm.com/services/applications/enterprise?lnk=hpmsc_buas"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/2b7c180c68557dcb/original/megamenu-pictogram-application-services.png","linkTitle":"","linkUrl":""}}},{"title":"IBM Garage","titleEnglish":"IBM Garages","url":"https://www.ibm.com/garage?lnk=hpmsc_buas"},{"title":"Security services","titleEnglish":"Security services","url":"https://www.ibm.com/security/services?lnk=hpmsc_buse","megapanelContent":{"headingTitle":"Security services","headingUrl":"https://www.ibm.com/security/services?lnk=hpmsc_buse","description":"","quickLinks":{"title":"","links":[{"title":"Application security","titleEnglish":"Application security","url":"https://www.ibm.com/security/services/application-security-services?lnk=hpmsc_buse"},{"title":"Cloud security","titleEnglish":"Cloud security","url":"https://www.ibm.com/security/services/cloud-security-services?lnk=hpmsc_buse"},{"title":"Data security","titleEnglish":"Data security","url":"https://www.ibm.com/security/services/data-security?lnk=hpmsc_buse"},{"title":"Identity & access management","titleEnglish":"Identity & access management","url":"https://www.ibm.com/security/services/identity-access-management?lnk=hpmsc_buse"},{"title":"Managed security","titleEnglish":"Managed security","url":"https://www.ibm.com/security/services/managed-security-services?lnk=hpmsc_buse"},{"title":"Security governance","titleEnglish":"Security governance","url":"https://www.ibm.com/security/services/security-governance?lnk=hpmsc_buse"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/6ecec25a8489cf82/original/megamenu-pictogram-security-services.png","linkTitle":"","linkUrl":""}}},{"title":"Services for tech support","titleEnglish":"Services for tech support","url":"https://www.ibm.com/services/technology-support?lnk=hpmsc_busv","megapanelContent":{"headingTitle":"Services for tech support","headingUrl":"https://www.ibm.com/services/technology-support?lnk=hpmsc_busv","description":"","quickLinks":{"title":"","links":[{"title":"Open source","titleEnglish":"Open source","url":"https://www.ibm.com/services/technology-support/open-source?lnk=hpmsc_busv"},{"title":"Third party & multivendor","titleEnglish":"Third party & multivendor","url":"https://www.ibm.com/services/technology-support/multivendor-it?lnk=hpmsc_busv"},{"title":"IBM warranties and maintenance","titleEnglish":"IBM warranties and maintenance","url":"https://www.ibm.com/services/technology-support/hardware-software?lnk=hpmsc_busv"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/7056e2b83b04133e/original/megamenu-pictogram-services-for-tech-support.png","linkTitle":"","linkUrl":""}}},{"title":"Flexible payment plans","titleEnglish":"Flexible payment plans","url":"https://www.ibm.com/financing?lnk=hpmsc_bufi"},{"title":"View all services","titleEnglish":"View all services","url":"https://www.ibm.com/services?lnk=hpmsc_buall","megaPanelViewAll":true}]}]},{"title":"Learn & Support","titleEnglish":"Learn & Support","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"What is...","titleEnglish":"What is...","url":"https://www.ibm.com/cloud/learn?lnk=hpmls_buwi","megapanelContent":{"headingTitle":"What is...","headingUrl":"https://www.ibm.com/cloud/learn?lnk=hpmls_buwi","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=hpmls_buwi"},{"title":"Automation","titleEnglish":"Automation","url":"https://www.ibm.com/topics/automation?lnk=hpmls_buwi"},{"title":"Blockchain","titleEnglish":"Blockchain","url":"https://www.ibm.com/topics/what-is-blockchain?lnk=hpmls_buwi"},{"title":"Business intelligence","titleEnglish":"Business intelligence","url":"https://www.ibm.com/topics/business-intelligence?lnk=hpmls_buwi"},{"title":"Chatbots","titleEnglish":"Chatbots","url":"https://www.ibm.com/cloud/learn/chatbots-explained?lnk=hpmls_buwi"},{"title":"Cloud computing","titleEnglish":"Cloud computing","url":"https://www.ibm.com/cloud/learn/cloud-computing?lnk=hpmls_buwi"},{"title":"Containerization","titleEnglish":"Containerization","url":"https://www.ibm.com/cloud/container-service?lnk=hpmls_buwi"},{"title":"Cybersecurity","titleEnglish":"Cybersecurity","url":"https://www.ibm.com/topics/cybersecurity?lnk=hpmls_buwi"},{"title":"Databases","titleEnglish":"Databases","url":"https://www.ibm.com/cloud/learn/database?lnk=hpmls_buwi"},{"title":"DevOps","titleEnglish":"DevOps","url":"https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=hpmls_buwi"},{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmls_buwi"},{"title":"Kubernetes","titleEnglish":"Kubernetes","url":"https://www.ibm.com/cloud/learn/kubernetes?lnk=hpmls_buwi"},{"title":"Quantum computing","titleEnglish":"Quantum computing","url":"https://www.ibm.com/quantum-computing/learn/what-is-quantum-computing?lnk=hpmls_buwi"},{"title":"Supply chain","titleEnglish":"Supply chain","url":"https://www.ibm.com/topics/supply-chain-management?lnk=hpmls_buwi"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/581adf40f2b008ec/original/megamenu-pictogram-what-is-_.png","linkTitle":"","linkUrl":""}}},{"title":"Training","titleEnglish":"Training","url":"https://www.ibm.com/training/?lnk=hpmls_butr","megapanelContent":{"headingTitle":"Training","headingUrl":"https://www.ibm.com/training/?lnk=hpmls_butr","description":"","quickLinks":{"title":"","links":[{"title":"Courses","titleEnglish":"Courses","url":"https://www.ibm.com/training/search?q=course&lnk=hpmls_butr"},{"title":"Learning journeys","titleEnglish":"Learning journeys","url":"https://www.ibm.com/training/journeys?lnk=hpmls_butr"},{"title":"Professional certifications","titleEnglish":"Professional certifications","url":"https://www.ibm.com/certify?lnk=hpmls_butr"},{"title":"Digital learning subscriptions","titleEnglish":"Digital learning subscriptions","url":"https://www.ibm.com/training/subscriptions?lnk=hpmls_butr"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5540e5627aeb2568/original/megamenu-pictogram-training.png","linkTitle":"","linkUrl":""}}},{"title":"Developer education","titleEnglish":"Developer education","url":"https://developer.ibm.com/?lnk=hpmls_bude","megapanelContent":{"headingTitle":"Developer education","headingUrl":"https://developer.ibm.com/?lnk=hpmls_bude","description":"","quickLinks":{"title":"","links":[{"title":"Code patterns","titleEnglish":"Code patterns","url":"https://developer.ibm.com/patterns/?lnk=hpmls_bude"},{"title":"Developer community","titleEnglish":"Developer community","url":"https://developer.ibm.com/community/?lnk=hpmls_bude"},{"title":"Developer events","titleEnglish":"Developer events","url":"https://developer.ibm.com/events/?lnk=hpmls_bude"},{"title":"Open Source @ IBM","titleEnglish":"Open Source @ IBM","url":"https://ibm.com/opensource?lnk=hpmls_bude"},{"title":"Technical articles","titleEnglish":"Technical articles","url":"https://developer.ibm.com/articles?lnk=hpmls_bude"},{"title":"Tutorials","titleEnglish":"Tutorials","url":"https://developer.ibm.com/tutorials/?lnk=hpmls_bude"},{"title":"Videos","titleEnglish":"Videos","url":"https://developer.ibm.com/videos?lnk=hpmls_bude"},{"title":"View more Developer education","titleEnglish":"View more Developer education","url":"https://developer.ibm.com/?lnk=hpmls_bude"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/1e651d0f7b539774/original/megamenu-pictogram-developer-education.png","linkTitle":"","linkUrl":""}}},{"title":"Documentation","titleEnglish":"Documentation","url":"https://www.ibm.com/docs/en?lnk=hpmls_budc","megapanelContent":{"headingTitle":"Documentation","headingUrl":"https://www.ibm.com/docs/en?lnk=hpmls_budc","description":"","quickLinks":{"title":"","links":[{"title":"All product documentation","titleEnglish":"All product documentation","url":"https://www.ibm.com/docs/en?lnk=hpmls_budc"},{"title":"For products on IBM Cloud","titleEnglish":"For products on IBM Cloud","url":"https://cloud.ibm.com/docs?lnk=hpmls_budc"},{"title":"For use cases — IBM Redbooks","titleEnglish":"For use cases — IBM Redbooks","url":"https://www.redbooks.ibm.com/?lnk=hpmls_budc"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/49d529fab45bb565/original/megamenu-pictogram-documentation.png","linkTitle":"","linkUrl":""}}},{"title":"Community","titleEnglish":"Community","url":"","megapanelContent":{"headingTitle":"Community","headingUrl":"","description":"","quickLinks":{"title":"","links":[{"title":"IBM Developer","titleEnglish":"IBM Developer","url":"https://developer.ibm.com/?lnk=hpmls_buco"},{"title":"IBM Community","titleEnglish":"IBM Community","url":"https://community.ibm.com/community/user/home?lnk=hpmls_buco"},{"title":"Support forums","titleEnglish":"Support forums","url":"https://www.ibm.com/mysupport/s/forumshome?lnk=hpmls_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Resources","titleEnglish":"Resources","url":"https://www.ibm.com/blogs/?lnk=hpmls_bure","megapanelContent":{"headingTitle":"Resources","headingUrl":"https://www.ibm.com/blogs/?lnk=hpmls_bure","description":"","quickLinks":{"title":"","links":[{"title":"Blogs & thought leadership","titleEnglish":"Blogs & thought leadership","url":"https://www.ibm.com/blogs/?lnk=hpmls_bure"},{"title":"Case studies & client stories","titleEnglish":"Case studies & client stories","url":"https://www.ibm.com/case-studies?lnk=hpmls_bure"},{"title":"Upcoming events & webinars","titleEnglish":"Upcoming events & webinars","url":"https://www.ibm.com/events?lnk=hpmls_bure"},{"title":"IBM Institute for Business Value","titleEnglish":"IBM Institute for Business Value","url":"https://www.ibm.com/thought-leadership/institute-business-value?lnk=hpmls_bure"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/164ef3660bad78a8/original/megamenu-pictogram-resources.png","linkTitle":"","linkUrl":""}}},{"title":"Support","titleEnglish":"Support","url":"https://www.ibm.com/mysupport?lnk=hpmls_busu","megapanelContent":{"headingTitle":"Support","headingUrl":"https://www.ibm.com/mysupport?lnk=hpmls_busu","description":"","quickLinks":{"title":"","links":[{"title":"Download fixes, updates & drivers","titleEnglish":"Download fixes, updates & drivers","url":"https://www.ibm.com/support/fixcentral/?lnk=hpmls_busu"},{"title":"Download licensed software - Passport Advantage","titleEnglish":"Download licensed software - Passport Advantage","url":"https://www.ibm.com/software/passportadvantage/pao_customer.html?lnk=hpmls_busu"},{"title":"View your cases","titleEnglish":"View your cases","url":"https://www.ibm.com/mysupport/s/my-cases?lnk=hpmls_busu"},{"title":"Open a case","titleEnglish":"Open a case","url":"https://www.ibm.com/mysupport/s/redirecttoopencasepage?lnk=hpmls_busu"},{"title":"View available support plans","titleEnglish":"View available support plans","url":"https://www.ibm.com/support/offerings?lnk=hpmls_busu"},{"title":"View more on Support","titleEnglish":"View more on Support","url":"https://www.ibm.com/mysupport?lnk=hpmls_busu&lnk2=all"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5b1abed637b01b55/original/megamenu-pictogram-support.png","linkTitle":"","linkUrl":""}}},{"title":"Cloud platform support","titleEnglish":"Cloud platform support","url":"https://www.ibm.com/cloud/support?lnk=hpmls_bucl"}]}]},{"title":"Explore more","titleEnglish":"Explore more","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"Partner with us","titleEnglish":"Partners","url":"https://www.ibm.com/partners?lnk=hpmex_bupa","megapanelContent":{"headingTitle":"Partner with us","headingUrl":"https://www.ibm.com/partners?lnk=hpmex_bupa","description":"","quickLinks":{"title":"","links":[{"title":"PartnerWorld","titleEnglish":"Partner with us — PartnerWorld","url":"https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa"},{"title":"Our strategic partnerships","titleEnglish":"Our strategic partnerships","url":"https://www.ibm.com/alliances?lnk=hpmex_bupa"},{"title":"Flexible payment plans","titleEnglish":"Flexible payment plans","url":"https://www.ibm.com/partnerworld/financing?lnk=hpmex_bupa"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/4075a8633a1137d/original/megamenu-pictogram-partners.png","linkTitle":"","linkUrl":""}}},{"title":"IBM Research","titleEnglish":"IBM Research","url":"https://www.research.ibm.com/?lnk=hpmex_bure","megapanelContent":{"headingTitle":"IBM Research","headingUrl":"https://www.research.ibm.com/?lnk=hpmex_bure","description":"","quickLinks":{"title":"","links":[{"title":"Research areas","titleEnglish":"Research areas","url":"https://www.research.ibm.com/?lnk=hpmex_bure"},{"title":"Researcher directory","titleEnglish":"Researcher directory","url":"https://researcher.watson.ibm.com/researcher/people.php?lnk=hpmex_bure"},{"title":"Patents","titleEnglish":"Patents","url":"https://www.research.ibm.com/patents/?lnk=hpmex_bure"},{"title":"Work with us","titleEnglish":"Work with us","url":"https://www.research.ibm.com/frontiers/?lnk=hpmex_bure"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5e05b0b234bc3846/original/megamenu-pictogram-ibm-research.png","linkTitle":"","linkUrl":""}}},{"title":"About IBM","titleEnglish":"About IBM","url":"https://www.ibm.com/about?lnk=hpmex_buab","megapanelContent":{"headingTitle":"About IBM","headingUrl":"https://www.ibm.com/about?lnk=hpmex_buab","description":"","quickLinks":{"title":"","links":[{"title":"Annual report","titleEnglish":"Annual report","url":"https://www.ibm.com/annualreport/?lnk=hpmex_buab"},{"title":"Career opportunities","titleEnglish":"Career opportunities","url":"https://www.ibm.com/employment/?lnk=hpmex_buab"},{"title":"Corporate social responsibility","titleEnglish":"Corporate social responsibility","url":"https://www.ibm.org?lnk=hpmex_buab"},{"title":"Diversity & inclusion","titleEnglish":"Diversity & inclusion","url":"https://www.ibm.com/employment/inclusion/?lnk=hpmex_buab"},{"title":"Investor relations","titleEnglish":"Investor relations","url":"https://www.ibm.com/investor/?lnk=hpmex_buab"},{"title":"News & announcements","titleEnglish":"News & announcements","url":"https://newsroom.ibm.com?lnk=hpmex_buab"},{"title":"Thought leadership","titleEnglish":"Thought leadership","url":"https://www.ibm.com/thought-leadership/?lnk=hpmex_buab"},{"title":"Security, privacy & trust","titleEnglish":"Security, privacy & trust","url":"https://www.ibm.com/trust?lnk=hpmex_buab"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/220eb8ea8345a4d6/original/megamenu-pictogram-about-ibm.png","linkTitle":"","linkUrl":""}}},{"title":"COVID-19","titleEnglish":"COVID-19","url":"https://www.ibm.com/impact/covid-19?lnk=hpmex_buco","megapanelContent":{"headingTitle":"COVID-19","headingUrl":"https://www.ibm.com/impact/covid-19?lnk=hpmex_buco","description":"","quickLinks":{"title":"","links":[{"title":"Business solutions","titleEnglish":"Business solutions","url":"https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmex_buco"},{"title":"Action guide","titleEnglish":"Action guide","url":"https://www.ibm.com/thought-leadership/institute-business-value/report/covid-19-action-guide?lnk=hpmex_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}}]}]}]},"masthead":{"search":{"btnSearchClosed":"Open IBM search field","btnSearchOpen":"Search all of IBM","btnClose":"Close IBM search field","placeHolderText":"Search all of IBM"},"profileMenu":{"signedout":{"iconLabel":"User Profile","links":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Log in","url":"https://login.ibm.com/oidc/endpoint/default/authorize?redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&response_type=token&client_id=v18LoginProdCI&scope=openid&state=https%3A%2F%2Fwww.ibm.com&nonce=8675309"}]},"signedin":{"iconLabel":"User Profile: Logged in","links":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Profile","url":"https://myibm.ibm.com/profile/?lnk=mmi"},{"title":"Billing","url":"https://myibm.ibm.com/billing/?lnk=mmi"},{"title":"Log out","url":"https://myibm.ibm.com/pkmslogout?filename=accountRedir.html"}]}}},"profileMenu":{"signedout":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"id":"signin","title":"Log in","url":"https://login.ibm.com/oidc/endpoint/default/authorize?redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&response_type=token&client_id=v18LoginProdCI&scope=openid&state=https%3A%2F%2Fwww.ibm.com%2Fus-en%3Flnk%3Dfcc&nonce=8675309"}],"signedin":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Profile","url":"https://myibm.ibm.com/profile/?lnk=mmi"},{"title":"Billing","url":"https://myibm.ibm.com/billing/?lnk=mmi"},{"id":"signout","title":"Log out","url":"https://myibm.ibm.com/pkmslogout?filename=accountRedir.html"}]},"marketplace":{"title":"Products","url":""},"footerMenu":[{"title":"Products & Solutions","links":[{"title":"Top products & platforms","url":"https://www.ibm.com/products?lnk=fps"},{"title":"Industries","url":"https://www.ibm.com/industries?lnk=fps"},{"title":"Artificial intelligence","url":"https://ibm.com/cloud/ai?lnk=fps"},{"title":"Blockchain","url":"https://www.ibm.com/blockchain?lnk=fps"},{"title":"Business operations","url":"https://www.ibm.com/business-operations?lnk=fps"},{"title":"Cloud computing","url":"https://www.ibm.com/cloud?lnk=fps"},{"title":"Data & Analytics","url":"https://www.ibm.com/analytics?lnk=fps"},{"title":"Hybrid cloud","url":"https://www.ibm.com/cloud/hybrid?lnk=fps"},{"title":"IT infrastructure","url":"https://www.ibm.com/it-infrastructure?lnk=fps"},{"title":"Security","url":"https://www.ibm.com/security?lnk=fps"},{"title":"Supply chain","url":"https://www.ibm.com/supply-chain?lnk=fps"}]},{"title":"Learn about","links":[{"title":"What is Hybrid Cloud?","url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=fle"},{"title":"What is Artificial intelligence?","url":"https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=fle"},{"title":"What is Cloud Computing?","url":"https://www.ibm.com/cloud/learn/cloud-computing?lnk=fle"},{"title":"What is Kubernetes?","url":"https://www.ibm.com/cloud/learn/kubernetes?lnk=fle"},{"title":"What are Containers?","url":"https://www.ibm.com/cloud/learn/containers?lnk=fle"},{"title":"What is DevOps?","url":"https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=fle"},{"title":"What is Machine Learning?","url":"https://www.ibm.com/cloud/learn/machine-learning?lnk=fle"}]},{"title":"Popular links","links":[{"title":"Communities","url":"https://community.ibm.com/community/user/home?lnk=fpo"},{"title":"Developer education","url":"https://developer.ibm.com/?lnk=fpo"},{"title":"Support - Download fixes, updates & drivers","url":"https://www.ibm.com/support/fixcentral/?lnk=fpo"},{"title":"IBM Research","url":"https://www.research.ibm.com/?lnk=fpo"},{"title":"Partner with us - PartnerWorld","url":"https://www.ibm.com/partnerworld/public?lnk=fpo"},{"title":"Training - Courses","url":"https://www.ibm.com/training/search?q=course&lnk=fpo"},{"title":"Upcoming events & webinars","url":"https://www.ibm.com/events/?lnk=fpo"}]},{"title":"About IBM","links":[{"title":"Annual report","url":"https://www.ibm.com/annualreport/?lnk=fab"},{"title":"Career opportunities","url":"https://www.ibm.com/employment/?lnk=fab"},{"title":"Corporate social responsibility","url":"https://www.ibm.org/?lnk=fab"},{"title":"Diversity & inclusion","url":"https://www.ibm.com/employment/inclusion/?lnk=fab"},{"title":"Investor relations","url":"https://www.ibm.com/investor/?lnk=fab"},{"title":"News & announcements","url":"https://newsroom.ibm.com/?lnk=fab"},{"title":"Thought leadership","url":"https://www.ibm.com/thought-leadership/?lnk=fab"},{"title":"Security, privacy & trust","url":"https://www.ibm.com/trust?lnk=fab"},{"title":"About IBM","url":"https://www.ibm.com/about?lnk=fab"}]},{"title":"Follow IBM","links":[{"linkClass":"ibm-linkedin-encircled-link","title":"LinkedIn","url":"https://www.linkedin.com/company/ibm"},{"linkClass":"ibm-twitter-encircled-link","title":"Twitter","url":"https://www.twitter.com/ibm"},{"linkClass":"ibm-instagram-encircled-link","title":"Instagram","url":"https://www.instagram.com/ibm"}]}],"footerThin":[{"title":"Contact IBM","titleEnglish":"Contact IBM","url":"https://www.ibm.com/contact/us/en/?lnk=flg-cont-usen"},{"title":"Privacy","titleEnglish":"Privacy","url":"https://www.ibm.com/privacy/us/en/?lnk=flg-priv-usen"},{"title":"Terms of use","titleEnglish":"Terms of use","url":"https://www.ibm.com/us-en/legal?lnk=flg-tous-usen"},{"title":"Accessibility","titleEnglish":"Accessibility","url":"https://www.ibm.com/accessibility/us/en/?lnk=flg-acce-usen"}],"localeSelector":{"localVersions":"Localized versions of this page","homepages":"Worldwide ibm.com home pages"},"socialFollow":{"title":"Follow IBM","links":[{"linkClass":"ibm-linkedin-encircled-link","title":"LinkedIn","url":"https://www.linkedin.com/company/ibm"},{"linkClass":"ibm-twitter-encircled-link","title":"Twitter","url":"https://www.twitter.com/ibm"},{"linkClass":"ibm-instagram-encircled-link","title":"Instagram","url":"https://www.instagram.com/ibm"}]},"socialSharing":[{"id":"facebook","title":"Facebook","url":"https://www.facebook.com/sharer.php?u=%{URL}&t=%{TITLE}"},{"id":"twitter","title":"Twitter","url":"https://twitter.com/?status=%{URL}%20-%20%{TITLE}"},{"id":"linkedin","title":"Linked In","url":"https://www.linkedin.com/shareArticle?mini=true&url=%{URL}&title=%{TITLE}"}],"leaving":{"LEAVING001":"Leaving the IBM Web site","LEAVING002":"You are now leaving IBM.com and going to an external 3rd party site. Unless otherwise stated, the 3rd party's site Terms and Privacy Policy will apply, and may differ from IBM's.","LEAVING003":"You are headed to","LEAVING004":"Notice"},"misc":{"backtotop":"Back to top","cancelText":"Cancel","close":"Close","cookiePrefs":"Cookie preferences","continueText":"Continue","editProfile":"Edit profile","emailThisPage":"E-mail this page","feedback":"Feedback","mpScopedSearh":"Products","withinMp":"Products","next":"Next","noresults":"No results found","prev":"Previous","resultsNav":"Use down and up arrow keys to navigate through the results.","search":"Search","selectCountry":"Select a country/region","sharePage":"Share this page","signin":"Sign in","signout":"Sign out","sitenav":"Site navigation","welcomeback":"Welcome back"},"timestamp":1629893493671} From 6d2a6f1e22ca4bccfe541d4eafe707b98d932211 Mon Sep 17 00:00:00 2001 From: Jeff Chew Date: Thu, 9 Sep 2021 11:49:27 -0400 Subject: [PATCH 4/8] test(e2e): introduce cypress for react storybook --- .eslintignore | 2 ++ packages/react/.env.example | 3 +++ packages/react/.gitignore | 2 ++ packages/web-components/.eslintignore | 1 + 4 files changed, 8 insertions(+) diff --git a/.eslintignore b/.eslintignore index 91e69ffb200..88da9676436 100644 --- a/.eslintignore +++ b/.eslintignore @@ -62,3 +62,5 @@ packages/web-components/src/internal/vendor packages/web-components/tests/e2e/dist packages/web-components/tests/e2e/cypress packages/web-components/tests/e2e-storybook/cypress +packages/web-components/tests/e2e/cypress +packages/web-components/tests/e2e-storybook/cypress diff --git a/packages/react/.env.example b/packages/react/.env.example index 980ae4fd916..a75275a1372 100644 --- a/packages/react/.env.example +++ b/packages/react/.env.example @@ -30,3 +30,6 @@ SELENIUM_HOST= + +# Storybook e2e host +C4IBM_E2E_STORYBOOK_HOST= diff --git a/packages/react/.gitignore b/packages/react/.gitignore index 642bd7201b9..e18251d78c8 100644 --- a/packages/react/.gitignore +++ b/packages/react/.gitignore @@ -16,3 +16,5 @@ tests/e2e/cypress/screenshots tests/e2e/cypress/videos tests/e2e-storybook/cypress/screenshots tests/e2e-storybook/cypress/videos +tests/e2e-storybook/cypress/screenshots +tests/e2e-storybook/cypress/videos diff --git a/packages/web-components/.eslintignore b/packages/web-components/.eslintignore index 53517077928..95cbd3528fa 100644 --- a/packages/web-components/.eslintignore +++ b/packages/web-components/.eslintignore @@ -13,3 +13,4 @@ tests/coverage tests/e2e/dist tests/e2e/cypress tests/e2e-storybook/cypress +tests/e2e-storybook/cypress From 29697d3596053335633775007d221ff9b14a879d Mon Sep 17 00:00:00 2001 From: Jeff Chew Date: Thu, 9 Sep 2021 11:51:39 -0400 Subject: [PATCH 5/8] test(e2e): removed duplicate eslintignore entries --- .eslintignore | 2 -- 1 file changed, 2 deletions(-) diff --git a/.eslintignore b/.eslintignore index 88da9676436..91e69ffb200 100644 --- a/.eslintignore +++ b/.eslintignore @@ -62,5 +62,3 @@ packages/web-components/src/internal/vendor packages/web-components/tests/e2e/dist packages/web-components/tests/e2e/cypress packages/web-components/tests/e2e-storybook/cypress -packages/web-components/tests/e2e/cypress -packages/web-components/tests/e2e-storybook/cypress From 08e273664e4adc9697efe563aa8aaa115c09a599 Mon Sep 17 00:00:00 2001 From: Jeff Chew Date: Thu, 9 Sep 2021 11:53:21 -0400 Subject: [PATCH 6/8] test(e2e): removed duplicate eslintignore entries --- packages/react/.env.example | 3 --- packages/react/.gitignore | 2 -- packages/web-components/.eslintignore | 1 - 3 files changed, 6 deletions(-) diff --git a/packages/react/.env.example b/packages/react/.env.example index a75275a1372..980ae4fd916 100644 --- a/packages/react/.env.example +++ b/packages/react/.env.example @@ -30,6 +30,3 @@ SELENIUM_HOST= - -# Storybook e2e host -C4IBM_E2E_STORYBOOK_HOST= diff --git a/packages/react/.gitignore b/packages/react/.gitignore index e18251d78c8..642bd7201b9 100644 --- a/packages/react/.gitignore +++ b/packages/react/.gitignore @@ -16,5 +16,3 @@ tests/e2e/cypress/screenshots tests/e2e/cypress/videos tests/e2e-storybook/cypress/screenshots tests/e2e-storybook/cypress/videos -tests/e2e-storybook/cypress/screenshots -tests/e2e-storybook/cypress/videos diff --git a/packages/web-components/.eslintignore b/packages/web-components/.eslintignore index 95cbd3528fa..53517077928 100644 --- a/packages/web-components/.eslintignore +++ b/packages/web-components/.eslintignore @@ -13,4 +13,3 @@ tests/coverage tests/e2e/dist tests/e2e/cypress tests/e2e-storybook/cypress -tests/e2e-storybook/cypress From de72e17901461c0d6d7455709a094806d6a1e1f2 Mon Sep 17 00:00:00 2001 From: Jeff Chew Date: Thu, 9 Sep 2021 12:05:01 -0400 Subject: [PATCH 7/8] test(e2e): removed leadspace short tests in react --- .../LeadSpace/__tests__/LeadSpace.e2e.js | 129 ------------------ 1 file changed, 129 deletions(-) diff --git a/packages/react/src/components/LeadSpace/__tests__/LeadSpace.e2e.js b/packages/react/src/components/LeadSpace/__tests__/LeadSpace.e2e.js index 99d61dcd474..f841fe50cab 100644 --- a/packages/react/src/components/LeadSpace/__tests__/LeadSpace.e2e.js +++ b/packages/react/src/components/LeadSpace/__tests__/LeadSpace.e2e.js @@ -47,23 +47,6 @@ const _pathCentered = '/iframe.html?id=components-lead-space--centered'; const _pathCenteredImage = '/iframe.html?id=components-lead-space--centered-with-image'; -/** - * Sets the correct path (Short) - * - * @type {string} - * @private - */ -const _pathShort = '/iframe.html?id=components-lead-space--short'; - -/** - * Sets the correct path (Short with image) - * - * @type {string} - * @private - */ -const _pathShortWithImage = - '/iframe.html?id=components-lead-space--short-with-image'; - /** * Sets the correct path (Medium) * @@ -326,118 +309,6 @@ describe('LeadSpace | centered with image', () => { }); }); -describe('LeadSpace | short', () => { - it('should load the g100 theme', () => { - cy.visit(`${_host}/${_pathShort}&theme=g100`); - cy.viewport(1280, 780); - - cy.window().then(win => { - win.document.documentElement.setAttribute( - 'storybook-carbon-theme', - 'g100' - ); - - cy.screenshot(); - // Take a snapshot for visual diffing - cy.percySnapshot('LeadSpace | short | g100 theme', { - widths: [1280], - }); - }); - }); - - it('should load the g90 theme', () => { - cy.visit(`${_host}/${_pathShort}&theme=g90`); - cy.viewport(1280, 780); - - cy.window().then(win => { - win.document.documentElement.setAttribute( - 'storybook-carbon-theme', - 'g90' - ); - - cy.screenshot(); - // Take a snapshot for visual diffing - cy.percySnapshot('LeadSpace | short | g90 theme', { - widths: [1280], - }); - }); - }); - - it('should load the g10 theme', () => { - cy.visit(`${_host}/${_pathShort}&theme=g10`); - cy.viewport(1280, 780); - - cy.window().then(win => { - win.document.documentElement.setAttribute( - 'storybook-carbon-theme', - 'g10' - ); - - cy.screenshot(); - // Take a snapshot for visual diffing - cy.percySnapshot('LeadSpace | short | g10 theme', { - widths: [1280], - }); - }); - }); -}); - -describe('LeadSpace | short with image', () => { - it('should load the g100 theme', () => { - cy.visit(`${_host}/${_pathShortWithImage}&theme=g100`); - cy.viewport(1280, 780); - - cy.window().then(win => { - win.document.documentElement.setAttribute( - 'storybook-carbon-theme', - 'g100' - ); - - cy.screenshot(); - // Take a snapshot for visual diffing - cy.percySnapshot('LeadSpace | short with image | g100 theme', { - widths: [1280], - }); - }); - }); - - it('should load the g90 theme', () => { - cy.visit(`${_host}/${_pathShortWithImage}&theme=g90`); - cy.viewport(1280, 780); - - cy.window().then(win => { - win.document.documentElement.setAttribute( - 'storybook-carbon-theme', - 'g90' - ); - - cy.screenshot(); - // Take a snapshot for visual diffing - cy.percySnapshot('LeadSpace | short with image | g90 theme', { - widths: [1280], - }); - }); - }); - - it('should load the g10 theme', () => { - cy.visit(`${_host}/${_pathShortWithImage}&theme=g10`); - cy.viewport(1280, 780); - - cy.window().then(win => { - win.document.documentElement.setAttribute( - 'storybook-carbon-theme', - 'g10' - ); - - cy.screenshot(); - // Take a snapshot for visual diffing - cy.percySnapshot('LeadSpace | short with image | g10 theme', { - widths: [1280], - }); - }); - }); -}); - describe('LeadSpace | medium', () => { it('should load the g100 theme', () => { cy.visit(`${_host}/${_pathMedium}&theme=g100`); From 2ba5ee20e45cc9989892b9c7b189acae44d71bc4 Mon Sep 17 00:00:00 2001 From: Jeff Chew Date: Thu, 9 Sep 2021 12:07:02 -0400 Subject: [PATCH 8/8] test(e2e): fixed leadspace tall link --- .../react/src/components/LeadSpace/__tests__/LeadSpace.e2e.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/LeadSpace/__tests__/LeadSpace.e2e.js b/packages/react/src/components/LeadSpace/__tests__/LeadSpace.e2e.js index f841fe50cab..bd54d580da5 100644 --- a/packages/react/src/components/LeadSpace/__tests__/LeadSpace.e2e.js +++ b/packages/react/src/components/LeadSpace/__tests__/LeadSpace.e2e.js @@ -20,7 +20,7 @@ const _host = * @type {string} * @private */ -const _pathTall = '/iframe.html?id=components-lead-space--tall'; +const _pathTall = '/iframe.html?id=components-lead-space--tall-with-no-image'; /** * Sets the correct path (Tall with image)