@commercetools-frontend/cypress 24.3.0 → 24.4.0

package/add-commands/dist/commercetools-frontend-cypress-add-commands.cjs.dev.js

@@ -10,13 +10,10 @@ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/ob
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
-var constants$1 = require('@commercetools-frontend/constants');
-var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
+var constants = require('@commercetools-frontend/constants');
 var _URL = require('@babel/runtime-corejs3/core-js-stable/url');
 var semver = require('semver');
-var uuid = require('uuid');
-var ssr = require('@commercetools-frontend/application-shell/ssr');
-var constants = require('../../dist/constants-009cb682.cjs.dev.js');
+var constants$1 = require('../../dist/constants-009cb682.cjs.dev.js');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _Array$from = require('@babel/runtime-corejs3/core-js-stable/array/from');
@@ -34,7 +31,6 @@ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_O
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
-var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
 var _URL__default = /*#__PURE__*/_interopDefault(_URL);
 var semver__default = /*#__PURE__*/_interopDefault(semver);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
@@ -43,7 +39,7 @@ var _entriesInstanceProperty__default = /*#__PURE__*/_interopDefault(_entriesIns
 var _reduceRightInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceRightInstanceProperty);
 
 function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$1(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
@@ -54,15 +50,27 @@ function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _
 function isFeatureSupported(expectedVersion) {
   return semver__default["default"].gte(Cypress.version, expectedVersion);
 }
+function isRunningOnLocalhost() {
+  const baseUrl = new _URL__default["default"](Cypress.config('baseUrl'));
+  return baseUrl.hostname === 'localhost';
+}
+const isCustomView = commandOptions => commandOptions.entryPointUriPath === constants.CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH;
 function loginByForm(commandOptions) {
-  if (isLocalhost()) {
-    throw new Error(`At the moment, the "loginByForm" command only works when testing a Merchant Center production URL. Using form login in an application running on localhost is not supported due to issues with "cy.origin".`);
-  }
+  const isLocalhost = isRunningOnLocalhost();
+  Cypress.log({
+    name: 'isLocalhost',
+    message: isLocalhost
+  });
   const projectKey = commandOptions.projectKey ?? Cypress.env('PROJECT_KEY');
-  cy.task('customApplicationConfig', {
+  const isCustomViewConfigCommand = isCustomView(commandOptions);
+  const customEntityConfigCommand = isCustomViewConfigCommand ? 'customViewConfig' : 'customApplicationConfig';
+  const packageName = commandOptions.packageName ?? Cypress.env('PACKAGE_NAME');
+  cy.task(customEntityConfigCommand, _objectSpread$1({
     entryPointUriPath: commandOptions.entryPointUriPath,
     dotfiles: commandOptions.dotfiles
-  },
+  }, isCustomViewConfigCommand ? {
+    packageName
+  } : {}),
   // Do not show log, as it may contain sensible information.
   {
     log: false
@@ -75,7 +83,7 @@ function loginByForm(commandOptions) {
     // Log loaded application config for debugging purposes.
     Cypress.log({
       displayName: 'task',
-      name: 'customApplicationConfig',
+      name: customEntityConfigCommand,
       message: appConfig
     });
     const userCredentials = commandOptions.login ?? {
@@ -83,28 +91,197 @@ function loginByForm(commandOptions) {
       password: Cypress.env('LOGIN_PASSWORD')
     };
     const sessionKey = ['loginByForm', userCredentials.email, commandOptions.entryPointUriPath];
-    // const mcUrl = new URL(appConfig.mcApiUrl);
-    // const mcFrontendHostname = mcUrl.hostname.replace('mc-api', 'mc');
 
+    /**
+     * The function is used by Cypress `session` command to store the
+     * browser state after executing the authentication flow.
+     */
     function authCallback() {
-      cy.visit(url, {
-        onBeforeLoad: commandOptions.onBeforeLoad
-      });
+      // Get the feature flags from the Merchant Center API so we can
+      // check whether Identity is enabled
+      cy.request({
+        method: 'POST',
+        url: `${appConfig.mcApiUrl}/graphql`,
+        body: {
+          operationName: 'AllFeatures',
+          query: `query AllFeatures { allFeatures { name value reason } }`
+        },
+        headers: {
+          'content-type': 'application/json',
+          'x-graphql-target': constants.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND,
+          'x-graphql-operation-name': 'AllFeatures',
+          'x-project-key': projectKey
+        }
+      }).then(res => {
+        var _context;
+        const enableIdentity = _findInstanceProperty__default["default"](_context = res.body.data.allFeatures).call(_context, feature => feature.name === 'enableGlobalIdentity');
+        const isGlobalIdentityEnabled = Boolean(enableIdentity?.value);
+        Cypress.log({
+          name: 'isGlobalIdentityEnabled',
+          message: isGlobalIdentityEnabled
+        });
+        const identityUrl = Cypress.env('IDENTITY_URL') || 'https://identity.commercetools.com';
+
+        // Visit the application URL, which triggers then the login flow.
+        cy.visit(url, {
+          onBeforeLoad: commandOptions.onBeforeLoad
+        });
+
+        /**
+         * There are different scenarios and variations on the flow depending
+         * on the environment (localhost, production) and if Identity is enabled.
+         *
+         * # When the application runs on localhost:3001.
+         *
+         * ## When Identity is enabled
+         * - The test visits the application at localhost:3001.
+         * - Cypress registers the default origin being localhost:3001.
+         * - The application is redirected to the Identity URL.
+         * - Cypress interacts with the Identity URL via `cy.origin`.
+         * - At the end of the flow, the test interacts with the application at localhost:3001.
+          * ## When Identity is disabled
+         * - The test visits the application at localhost:3001.
+         * - Cypress registers the default origin being localhost:3001.
+         * - The application is redirected to the Merchant Center login page.
+         * - Cypress interacts with the Merchant Center login page via `cy.origin`.
+         * - At the end of the flow, the test interacts with the application at localhost:3001.
+         *
+         * # When the application runs on a production URL.
+         *
+         * ## When Identity is enabled
+         * - The test visits the application at the production URL.
+         * - The MC Proxy performs a server-side redirect to the Identity URL.
+         * - Cypress registers the default origin being the Identity URL.
+         * - Cypress interacts with the Identity URL.
+         * - At the end of the flow, the test interacts with the application at the production URL via `cy.origin`.
+         *
+         * ## When Identity is disabled
+         * - The test visits the application at the production URL.
+         * - The MC Proxy renders the Merchant Center login page.
+         * - Cypress registers the default origin being the Merchant Center URL.
+         * - Cypress interacts with the Merchant Center login page.
+         * - At the end of the flow, the test interacts with the application at the production URL.
+         */
 
-      // NOTE: using `cy.origin` is currently disabled as it does not seem to properly work.
-      // Interestingly, starting an application locally using Vite works, however not when using Webpack.
-      // For now we keep it disabled until we find a solution.
+        if (isLocalhost) {
+          if (isGlobalIdentityEnabled) {
+            // Cypress gets confused when switching between origins, likely because
+            // the redirect to Identity doesn't happen immediately.
+            // If we don't wait, Cypress fails as it tries to interact with `cy.origin`
+            // but the test is still in the initial origin URL.
+            // This is a bit unexpected and to be considered a workaround.
+            // eslint-disable-next-line cypress/no-unnecessary-waiting
+            cy.wait(1000);
 
-      // // https://cypress.io/blog/2022/04/25/cypress-9-6-0-easily-test-multi-domain-workflows-with-cy-origin/
-      // cy.origin(
-      //   mcFrontendHostname,
-      //   { args: userCredentials },
-      //   fillLoginForm
-      // );
-      fillLoginForm(userCredentials);
+            // Use cy.origin to handle the identity domain
+            cy.origin(identityUrl, {
+              args: {
+                userCredentials,
+                identityUrl
+              }
+            }, _ref => {
+              let userCredentials = _ref.userCredentials,
+                identityUrl = _ref.identityUrl;
+              cy.url().should('include', `${identityUrl}/login`);
+              // Fill in the email and click Next
+              cy.get('input[name="identifier"]').type(userCredentials.email);
+              cy.get('button').contains('Next').click();
 
-      // Wait for the route to be loaded so that the session can be saved.
-      cy.url().should('include', url);
+              // Wait for the password form to appear
+              cy.get('input[name="password"]').should('be.visible');
+              // Fill in the password and submit
+              cy.get('input[name="password"]').type(userCredentials.password, {
+                log: false
+              });
+              cy.get('button').contains('Submit').click();
+            });
+
+            // Wait for the flow to redirect back to the application.
+            cy.get('[role="main"]').should('exist');
+            cy.url().should('include', url);
+          } else {
+            const mcUrl = appConfig.mcApiUrl.replace('mc-api', 'mc');
+            // See similar comment above regarding the usage of `cy.wait`.
+            // eslint-disable-next-line cypress/no-unnecessary-waiting
+            cy.wait(1000);
+            cy.origin(mcUrl, {
+              args: {
+                userCredentials,
+                mcUrl
+              }
+            }, _ref2 => {
+              let userCredentials = _ref2.userCredentials,
+                mcUrl = _ref2.mcUrl;
+              cy.url().should('include', `${mcUrl}/login`);
+
+              // Same as `fillLegacyLoginFormWithRetry`.
+              // eslint-disable-next-line cypress/unsafe-to-chain-command
+              cy.get('input[name=email]')
+              // We use `force` as the MC login UI (production) in tests renders the
+              // cookie banner overlapping the input fields.
+              // To allow Cypress to interact with the input fields, we use `force`.
+              .clear({
+                force: true
+              }).type(userCredentials.email, {
+                force: true
+              });
+              // eslint-disable-next-line cypress/unsafe-to-chain-command
+              cy.get('input[name=password]')
+              // We use `force` as the MC login UI (production) in tests renders the
+              // cookie banner overlapping the input fields.
+              // To allow Cypress to interact with the input fields, we use `force`.
+              .clear({
+                force: true
+              }).type(userCredentials.password, {
+                log: false,
+                force: true
+              });
+              cy.get('button').contains('Sign in').click({
+                force: true
+              });
+            });
+            // eslint-disable-next-line cypress/no-unnecessary-waiting
+            cy.wait(1000);
+
+            // Wait for the flow to redirect back to the application.
+            cy.get('[role="main"]').should('exist');
+            cy.url().should('include', url);
+          }
+        } else {
+          if (isGlobalIdentityEnabled) {
+            cy.url().should('include', `${identityUrl}/login`);
+            // Fill in the email and click Next
+            cy.get('input[name="identifier"]').type(userCredentials.email);
+            cy.get('button').contains('Next').click();
+
+            // Wait for the password form to appear
+            cy.get('input[name="password"]').should('be.visible');
+            // Fill in the password and submit
+            cy.get('input[name="password"]').type(userCredentials.password, {
+              log: false
+            });
+            cy.get('button').contains('Submit').click();
+
+            // Wait for the flow to redirect back to the application.
+            cy.origin(Cypress.config('baseUrl'), {
+              args: {
+                url
+              }
+            }, _ref3 => {
+              let url = _ref3.url;
+              cy.get('[role="main"]').should('exist');
+              cy.url().should('include', url);
+            });
+          } else {
+            // Legacy login flow.
+            fillLegacyLoginFormWithRetry(userCredentials);
+
+            // Wait for the flow to redirect back to the application.
+            cy.get('[role="main"]').should('exist');
+            cy.url().should('include', url);
+          }
+        }
+      });
     }
 
     // For backwards compatibility.
@@ -123,108 +300,11 @@ function loginByForm(commandOptions) {
     }
   });
 }
-const isCustomView = commandOptions => commandOptions.entryPointUriPath === constants$1.CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH;
-function loginByOidc(commandOptions) {
-  const isCustomViewConfigCommand = isCustomView(commandOptions);
-  if (!isLocalhost()) {
-    throw new Error(`The "loginByOidc" command only works when testing a Custom ${isCustomViewConfigCommand ? 'View' : 'Application'} running on localhost.`);
-  }
-  const sessionNonce = uuid.v4();
-  let projectKey = undefined;
-  if (commandOptions.entryPointUriPath !== 'account') {
-    projectKey = commandOptions.projectKey ?? Cypress.env('PROJECT_KEY');
-  }
-  const customEntityConfigCommand = isCustomViewConfigCommand ? 'customViewConfig' : 'customApplicationConfig';
-  const packageName = commandOptions.packageName ?? Cypress.env('PACKAGE_NAME');
-  if (isCustomViewConfigCommand && !packageName) {
-    throw new Error(`Missing required option "packageName" when using the "loginToMerchantCenterForCustomView" command.`);
-  }
-  cy.task(customEntityConfigCommand, _objectSpread$1({
-    entryPointUriPath: commandOptions.entryPointUriPath,
-    dotfiles: commandOptions.dotfiles
-  }, isCustomViewConfigCommand ? {
-    packageName
-  } : {}),
-  // Do not show log, as it may contain sensible information.
-  {
-    log: false
-  }).then(appConfig => {
-    // Log loaded application config for debugging purposes.
-    Cypress.log({
-      displayName: 'task',
-      name: customEntityConfigCommand,
-      message: appConfig
-    });
-    const applicationId = appConfig.applicationId;
-    const sessionScope = ssr.buildOidcScope({
-      projectKey,
-      oAuthScopes: appConfig.__DEVELOPMENT__?.oidc?.oAuthScopes,
-      additionalOAuthScopes: appConfig.__DEVELOPMENT__?.oidc?.additionalOAuthScopes,
-      teamId: appConfig.__DEVELOPMENT__?.oidc?.teamId,
-      applicationId: appConfig.__DEVELOPMENT__?.oidc?.applicationId
-    });
-    const userCredentials = commandOptions.login ?? {
-      email: Cypress.env('LOGIN_EMAIL') || Cypress.env('LOGIN_USER'),
-      password: Cypress.env('LOGIN_PASSWORD')
-    };
-    // Perform the login using the API, then store some required values into the browser storage
-    // and redirect to the auth callback route.
-    const requestOptions = {
-      method: 'POST',
-      url: `${appConfig.mcApiUrl}/tokens`,
-      body: _objectSpread$1(_objectSpread$1({}, userCredentials), {}, {
-        client_id: applicationId,
-        response_type: constants.OIDC_RESPONSE_TYPES.ID_TOKEN,
-        scope: sessionScope,
-        state: sessionNonce,
-        nonce: sessionNonce
-      }),
-      followRedirect: false
-    };
-    cy.request(requestOptions).then(res => {
-      const sessionKey = ['loginByOidc', userCredentials.email, commandOptions.entryPointUriPath];
-      function authCallback() {
-        cy.visit(res.body.redirectTo, {
-          onBeforeLoad(win) {
-            if (projectKey) {
-              win.localStorage.setItem(constants.STORAGE_KEYS.ACTIVE_PROJECT_KEY, projectKey);
-            }
-            win.sessionStorage.setItem(`${constants.STORAGE_KEYS.NONCE}_${sessionNonce}`, _JSON$stringify__default["default"]({
-              applicationId,
-              query: {}
-            }));
-            win.sessionStorage.setItem(constants.STORAGE_KEYS.SESSION_SCOPE, sessionScope);
-            if (commandOptions.onBeforeLoad) {
-              commandOptions.onBeforeLoad(win);
-            }
-          }
-        });
-        // Wait for the application to be loaded so that the session can be saved.
-        cy.get('#app-loader').should('not.exist');
-      }
-
-      // For backwards compatibility.
-      if (isFeatureSupported('12.0.0') || Cypress.config('experimentalSessionAndOrigin')) {
-        // https://www.cypress.io/blog/2021/08/04/authenticate-faster-in-tests-cy-session-command/
-        cy.session(sessionKey, authCallback, isFeatureSupported('10.9.0') ? {
-          cacheAcrossSpecs: typeof commandOptions.disableCacheAcrossSpecs === 'boolean' ? !commandOptions.disableCacheAcrossSpecs : true
-        } : undefined);
-      } else {
-        cy.log(`We recommend to use "cy.session" to reduce the time to log in between tests. Make sure to have at least Cypress v12 or enable it via "experimentalSessionAndOrigin" for older Cypress versions.`);
-        authCallback();
-      }
-      if (commandOptions.initialRoute) {
-        cy.visit(`${Cypress.config('baseUrl')}${commandOptions.initialRoute}`);
-        cy.url().should('include', commandOptions.initialRoute);
-      }
-    });
-  });
-}
 
 /* Utilities */
 
-const maxLoginAttempts = Cypress.config('maxLoginAttempts') ?? 3;
-function fillLoginForm(userCredentials) {
+const legacyMaxLoginAttempts = Cypress.config('maxLoginAttempts') ?? 3;
+function fillLegacyLoginFormWithRetry(userCredentials) {
   // Intercept the login request so we can retry it if we receive a TOO_MANY_REQUESTS status code
   cy.intercept('POST', '**/tokens').as('loginRequest');
   function getRandomDelayInSeconds() {
@@ -239,18 +319,27 @@ function fillLoginForm(userCredentials) {
     cy.log(`Attempts left: ${attemptsLeft}`);
 
     // eslint-disable-next-line cypress/unsafe-to-chain-command
-    cy.get('input[name=email]').clear().type(userCredentials.email);
+    cy.get('input[name=email]').clear({
+      force: true
+    }).type(userCredentials.email, {
+      force: true
+    });
     // eslint-disable-next-line cypress/unsafe-to-chain-command
-    cy.get('input[name=password]').clear().type(userCredentials.password, {
-      log: false
+    cy.get('input[name=password]').clear({
+      force: true
+    }).type(userCredentials.password, {
+      log: false,
+      force: true
+    });
+    cy.get('button').contains('Sign in').click({
+      force: true
     });
-    cy.get('button').contains('Sign in').click();
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     cy.wait('@loginRequest').then(interception => {
       const statusCode = interception.response.statusCode;
       cy.log('Login request status code:', statusCode);
-      if (statusCode === constants.HTTP_STATUS_CODES.TOO_MANY_REQUESTS) {
+      if (statusCode === constants$1.HTTP_STATUS_CODES.TOO_MANY_REQUESTS) {
         // We wait for something between 0.5 and 1.5 seconds before retrying
         cy.wait(getRandomDelayInSeconds());
         attemptLogin(attemptsLeft - 1);
@@ -259,11 +348,7 @@ function fillLoginForm(userCredentials) {
       }
     });
   }
-  attemptLogin(maxLoginAttempts);
-}
-function isLocalhost() {
-  const baseUrl = new _URL__default["default"](Cypress.config('baseUrl'));
-  return baseUrl.hostname === 'localhost';
+  attemptLogin(legacyMaxLoginAttempts);
 }
 
 /**
@@ -490,20 +575,16 @@ Cypress.Commands.add('loginToMerchantCenter', commandOptions => {
   Cypress.log({
     name: 'loginToMerchantCenter'
   });
-  if (isLocalhost()) {
-    loginByOidc(commandOptions);
-  } else {
-    loginByForm(commandOptions);
-  }
+  loginByForm(commandOptions);
 });
 Cypress.Commands.add('loginToMerchantCenterForCustomView', commandOptions => {
   Cypress.log({
     name: 'loginToMerchantCenterForCustomView'
   });
   const projectKey = Cypress.env('PROJECT_KEY');
-  loginByOidc(_objectSpread(_objectSpread({}, commandOptions), {}, {
-    entryPointUriPath: constants$1.CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH,
-    initialRoute: `/${projectKey}/${constants$1.CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH}`
+  loginByForm(_objectSpread(_objectSpread({}, commandOptions), {}, {
+    entryPointUriPath: constants.CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH,
+    initialRoute: `/${projectKey}/${constants.CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH}`
   }));
 });
 Cypress.Commands.add('loginByOidc', commandOptions => {
@@ -511,7 +592,7 @@ Cypress.Commands.add('loginByOidc', commandOptions => {
     name: 'loginByOidc'
   });
   cy.log('We recommend not to use the command "cy.loginByOidc" directly. Instead, use the more generic "cy.loginToMerchantCenter" command as it automatically detects which login mechanism to use.');
-  loginByOidc(commandOptions);
+  loginByForm(commandOptions);
 });
 Cypress.Commands.add('hover', {
   prevSubject: true