test(custom views): custom view templates e2e tests - follow up (#3346)

* test(cypress): add loginToMerchantCenterForCustomView custom command * chore: changeset chore: changeset
commercetools · Dec 14, 2023 · bc0ece9 · bc0ece9 · github-actions · Dec 14, 2023
1 parent 3296632
commit bc0ece9
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 34 deletions.
diff --git a/.changeset/short-trainers-play.md b/.changeset/short-trainers-play.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/cypress': patch
+---
+
+Add `loginToMerchantCenterForCustomView` Cypress command to streamline end-to-end testing of Custom Views.
diff --git a/cypress/e2e/custom-view-template-starter/channels.cy.ts b/cypress/e2e/custom-view-template-starter/channels.cy.ts
@@ -1,14 +1,6 @@
-import {
-  ENTRY_POINT_CUSTOM_VIEW_TEMPLATE_STARTER,
-  URL_CUSTOM_VIEW_TEMPLATE_STARTER,
-} from '../../support/urls';
-
 describe('Channels', () => {
   beforeEach(() => {
-    cy.loginToMerchantCenter({
-      entryPointUriPath: ENTRY_POINT_CUSTOM_VIEW_TEMPLATE_STARTER,
-      initialRoute: URL_CUSTOM_VIEW_TEMPLATE_STARTER,
-    });
+    cy.loginToMerchantCenterForCustomView();
   });
   it('should render page', () => {
     cy.findByText('Open the Custom View').click();

diff --git a/cypress/e2e/custom-view-template-starter/welcome.cy.ts b/cypress/e2e/custom-view-template-starter/welcome.cy.ts
@@ -1,14 +1,6 @@
-import {
-  ENTRY_POINT_CUSTOM_VIEW_TEMPLATE_STARTER,
-  URL_CUSTOM_VIEW_TEMPLATE_STARTER,
-} from '../../support/urls';
-
 describe('Welcome', () => {
   beforeEach(() => {
-    cy.loginToMerchantCenter({
-      entryPointUriPath: ENTRY_POINT_CUSTOM_VIEW_TEMPLATE_STARTER,
-      initialRoute: URL_CUSTOM_VIEW_TEMPLATE_STARTER,
-    });
+    cy.loginToMerchantCenterForCustomView();
   });
   it('should render page', () => {
     cy.findByText('Custom View loader').should('exist');

diff --git a/cypress/support/urls.ts b/cypress/support/urls.ts
@@ -1,5 +1,3 @@
-import { CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH } from '@commercetools-frontend/constants';
-
 export const projectKey = Cypress.env('PROJECT_KEY');
 
 export const URL_BASE = `/${projectKey}`;
@@ -13,7 +11,3 @@ export const URL_APP_KIT_PLAYGROUND_DATE_FORMATTERS = `${URL_APP_KIT_PLAYGROUND}
 export const ENTRY_POINT_TEMPLATE_STARTER = 'template-starter';
 export const URL_TEMPLATE_STARTER = `${URL_BASE}/${ENTRY_POINT_TEMPLATE_STARTER}`;
 export const URL_TEMPLATE_STARTER_CHANNELS = `${URL_TEMPLATE_STARTER}/channels`;
-
-export const ENTRY_POINT_CUSTOM_VIEW_TEMPLATE_STARTER =
-  CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH;
-export const URL_CUSTOM_VIEW_TEMPLATE_STARTER = `${URL_BASE}/${CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH}`;
diff --git a/packages/cypress/add-commands/index.d.ts b/packages/cypress/add-commands/index.d.ts
@@ -12,6 +12,20 @@ declare namespace Cypress {
       // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#import-types
       options?: import('./dist/commercetools-frontend-cypress-add-commands.cjs').CommandLoginOptions
     ): Chainable<Subject>;
+    /**
+     * Log into the Custom View.
+     * Custom Views are assumed to be tested on localhost and `loginByOidc` mechanism is used
+     *
+     * @example
+     *    cy.loginToMerchantCenterForCustomView()
+     */
+    loginToMerchantCenterForCustomView(
+      // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#import-types
+      options?: Omit<
+        import('./dist/commercetools-frontend-cypress-add-commands.cjs').CommandLoginOptions,
+        'entryPointUriPath' | 'initialRoute'
+      >
+    ): Chainable<Subject>;
     /**
      * Log into the Custom Application using the OIDC workflow.
      * The command only works for testing an application running on localhost.

diff --git a/packages/cypress/package.json b/packages/cypress/package.json
@@ -39,6 +39,7 @@
     "@babel/runtime-corejs3": "^7.22.15",
     "@commercetools-frontend/application-config": "22.14.3",
     "@commercetools-frontend/application-shell": "22.14.3",
+    "@commercetools-frontend/constants": "22.14.3",
     "@manypkg/get-packages": "1.1.3",
     "@types/semver": "^7.5.1",
     "semver": "7.5.2",

diff --git a/packages/cypress/src/add-commands/index.ts b/packages/cypress/src/add-commands/index.ts
@@ -1,4 +1,5 @@
 import { Matcher as TMatcher } from '@testing-library/dom';
+import { CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH } from '@commercetools-frontend/constants';
 import {
   loginByForm,
   loginByOidc,
@@ -28,6 +29,26 @@ Cypress.Commands.add(
   }
 );
 
+Cypress.Commands.add(
+  'loginToMerchantCenterForCustomView',
+  (
+    commandOptions: Omit<
+      CommandLoginOptions,
+      'entryPointUriPath' | 'initialRoute'
+    >
+  ) => {
+    Cypress.log({ name: 'loginToMerchantCenterForCustomView' });
+
+    const projectKey = Cypress.env('PROJECT_KEY');
+
+    loginByOidc({
+      ...commandOptions,
+      entryPointUriPath: CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH,
+      initialRoute: `/${projectKey}/${CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH}`,
+    });
+  }
+);
+
 Cypress.Commands.add('loginByOidc', (commandOptions: CommandLoginOptions) => {
   Cypress.log({ name: 'loginByOidc' });
   cy.log(

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml