From bc0ece9cbbc4fd650da9de33348f2a02fa669be5 Mon Sep 17 00:00:00 2001 From: Kacper Krzywiec <49066275+kark@users.noreply.github.com> Date: Thu, 14 Dec 2023 13:33:45 +0100 Subject: [PATCH] test(custom views): custom view templates e2e tests - follow up (#3346) * test(cypress): add loginToMerchantCenterForCustomView custom command * chore: changeset chore: changeset --- .changeset/short-trainers-play.md | 5 ++++ .../channels.cy.ts | 10 +------- .../welcome.cy.ts | 10 +------- cypress/support/urls.ts | 6 ----- packages/cypress/add-commands/index.d.ts | 14 +++++++++++ packages/cypress/package.json | 1 + packages/cypress/src/add-commands/index.ts | 21 +++++++++++++++++ pnpm-lock.yaml | 23 +++++++++++-------- 8 files changed, 56 insertions(+), 34 deletions(-) create mode 100644 .changeset/short-trainers-play.md diff --git a/.changeset/short-trainers-play.md b/.changeset/short-trainers-play.md new file mode 100644 index 0000000000..365acd2a45 --- /dev/null +++ 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 index 2c17862988..0df98e172d 100644 --- 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 index 2e9ae24026..36b6c7c19b 100644 --- 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 index 51ec55fa67..ac38c8e7f2 100644 --- 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 index e339fe88e8..3215de0dda 100644 --- 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; + /** + * 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; /** * 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 index db3806d0b4..ad4db671b6 100644 --- 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 index 2d9bf447a0..4dfbe78f46 100644 --- 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 index 4cf77e93eb..4e129be9ea 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2148,6 +2148,9 @@ importers: '@commercetools-frontend/application-shell': specifier: 22.14.3 version: link:../application-shell + '@commercetools-frontend/constants': + specifier: 22.14.3 + version: link:../constants '@manypkg/get-packages': specifier: 1.1.3 version: 1.1.3 @@ -7065,16 +7068,16 @@ packages: shelljs: 0.8.5 dev: false - /@commercetools-frontend/application-config@22.14.1: - resolution: {integrity: sha512-seHfEdoLfR0U0O8OoNtbCnqmWlMnxNyPq63ea8rwdIvhFhvUK33dJ1b6sVbIuixy3i+pYYVTZhkRii9GSo3a7w==} + /@commercetools-frontend/application-config@22.14.3: + resolution: {integrity: sha512-7wINNTZ0YclcqtXzxEQQCo0uZyaJ1KwEXIXwvHjP3A6ikn6Cw2LCzCNM8vY7Zb6T4FPALu06/iZSjgTz+XXH5A==} engines: {node: 16.x || >=18.0.0} dependencies: '@babel/core': 7.23.0 '@babel/register': 7.22.15(@babel/core@7.23.0) '@babel/runtime': 7.23.2 '@babel/runtime-corejs3': 7.22.15 - '@commercetools-frontend/babel-preset-mc-app': 22.14.1 - '@commercetools-frontend/constants': 22.14.1 + '@commercetools-frontend/babel-preset-mc-app': 22.14.3 + '@commercetools-frontend/constants': 22.14.3 '@types/dompurify': 2.4.0 '@types/lodash': 4.14.198 '@types/react': 17.0.56 @@ -7092,8 +7095,8 @@ packages: - utf-8-validate dev: true - /@commercetools-frontend/babel-preset-mc-app@22.14.1: - resolution: {integrity: sha512-wi8rYEU7utc+FHFQ9sEDCEfhhN89qixd74Of0oAGdIRen3vXaFcSgg1LWylhMiXehU99IB0Uz9Qfqqv2opqYDg==} + /@commercetools-frontend/babel-preset-mc-app@22.14.3: + resolution: {integrity: sha512-Xx27DZ9E1ePw0JFqoYmfdZ8WWEMioNzhdwT8sPNUGN7IR44cD+TJ7UVrYblq+Cp8yhEUNPHPR5Ozl+Q+BKEkYg==} engines: {node: 16.x || >=18.0.0} dependencies: '@babel/core': 7.23.0 @@ -7125,8 +7128,8 @@ packages: - supports-color dev: true - /@commercetools-frontend/constants@22.14.1: - resolution: {integrity: sha512-dY7Wd2hP6KyJH728UWHJ6HYOrnfJzeXK/GjA8nC6q+0HjMsfPEGUobV0Tr+1lRfY2skYq3qucNyFGHsS9zRSJw==} + /@commercetools-frontend/constants@22.14.3: + resolution: {integrity: sha512-5dEqIZwIYRKWi3kS6G4UxMUo1/3thwAwkSlxWStSGg0Pw7vouAFLJ4jkpsdLWkwv0ZuWlYFLjRvP2fSZlUHTTw==} dependencies: '@babel/runtime': 7.23.2 '@babel/runtime-corejs3': 7.22.15 @@ -7225,8 +7228,8 @@ packages: dependencies: '@babel/runtime': 7.23.2 '@babel/runtime-corejs3': 7.22.15 - '@commercetools-frontend/application-config': 22.14.1 - '@commercetools-frontend/constants': 22.14.1 + '@commercetools-frontend/application-config': 22.14.3 + '@commercetools-frontend/constants': 22.14.3 '@commercetools-test-data/commons': 6.4.1 '@commercetools-test-data/core': 6.4.1 '@commercetools-test-data/utils': 6.4.1