Merge pull request #1 from spryker/dynamic-fixtures

CC-32479: Cypress Enablement.

.env.example

@@ -1,8 +1,10 @@
 ENV_REPOSITORY_ID=suite
-ENV_BACKOFFICE_URL=http://backoffice.de.spryker.local
-ENV_MERCHANT_PORTAL_URL=http://mp.de.spryker.local
-ENV_MAIL_CATCHER_URL=http://mail.spryker.local
+ENV_PROTOCOL=http
+ENV_BACKOFFICE_HOST=backoffice.de.spryker.local
+ENV_MERCHANT_PORTAL_HOST=mp.de.spryker.local
+ENV_GLUE_BACKEND_HOST=glue-backend.de.spryker.local
+ENV_MAIL_CATCHER_HOST=mail.spryker.local
 
-E2E_BASE_URL=http://yves.de.spryker.local
+E2E_BASE_HOST=yves.de.spryker.local
 VIEWPORT_WIDGTH=1920
 VIEWPORT_HEIGHT=1080

.eslintrc

@@ -5,6 +5,16 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
-  ]
+    "plugin:@typescript-eslint/recommended",
+    "plugin:cypress/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "rules": {
+    "@typescript-eslint/no-inferrable-types": "error",
+    "@typescript-eslint/explicit-function-return-type": "error"
+  }
 }

.github/workflows/code-quality.yml

@@ -23,5 +23,8 @@ jobs:
       - name: Check Prettier Formatting
         run: npm run prettier:check
 
+      - name: Run Typescript Check
+        run: npm run typecheck
+
       - name: Run ESLint on TS Files
         run: npm run lint

Dockerfile

@@ -0,0 +1,18 @@
+# Start the final image
+FROM cypress/browsers:latest
+
+# Set and create the working directory
+ENV CYPRESS_TESTS_WORK_DIR /opt/cypress-tests
+RUN mkdir -p ${CYPRESS_TESTS_WORK_DIR}
+
+# Set the working directory
+WORKDIR ${CYPRESS_TESTS_WORK_DIR}
+
+# Copy the cypress tests to the working directory
+COPY . .
+
+# Install the dependencies
+RUN npm install
+
+# Starts a bash shell in the container that ignores termination signals and keeps the container running indefinitely.
+ENTRYPOINT ["/bin/bash", "-c", "trap : TERM INT; sleep infinity & wait"]

composer.json

@@ -0,0 +1,7 @@
+{
+  "name": "spryker/cypress-tests",
+  "description": "This repository is dedicated to housing an extensive collection of UI end-to-end tests, meticulously crafted using Cypress for Spryker applications. These tests are designed to thoroughly evaluate the user interface, ensuring that all interactions and visual elements function as intended in real-world scenarios. By leveraging Cypress's advanced browser automation capabilities, this suite provides an efficient and effective means of validating the user experience, confirming the seamless operation and aesthetic integrity of Spryker's front-end components. Our commitment to rigorous UI testing helps maintain the high standard of quality and reliability that Spryker users expect.",
+  "type": "library",
+  "license": "MIT",
+  "require": {}
+}

cypress.config.ts

@@ -1,22 +1,39 @@
 import { defineConfig } from 'cypress';
 import dotenv from 'dotenv';
+import { existsSync } from 'fs';
+
 dotenv.config();
 
+const protocolMap: { [key: string]: 'http' | 'https' } = {
+  '1': 'https',
+  '0': 'http',
+  http: 'http',
+  https: 'https',
+};
+const protocol = protocolMap[getEnvVar('ENV_PROTOCOL', 'SPRYKER_SSL_ENABLE')];
+const backofficeHost = getEnvVar('ENV_BACKOFFICE_HOST', 'SPRYKER_BE_HOST');
+const merchantPortalHost = getEnvVar('ENV_MERCHANT_PORTAL_HOST', 'SPRYKER_MP_HOST');
+const glueBackendHost = getEnvVar('ENV_GLUE_BACKEND_HOST', 'SPRYKER_GLUE_BACKEND_HOST');
+const mailCatcherHost = getEnvVar('ENV_MAIL_CATCHER_HOST', 'SPRYKER_SMTP_HOST');
+const baseHost = getEnvVar('E2E_BASE_HOST', 'SPRYKER_FE_HOST');
+
 export default defineConfig({
   env: {
     repositoryId: process.env.ENV_REPOSITORY_ID,
-    backofficeUrl: process.env.ENV_BACKOFFICE_URL,
-    merchantPortalUrl: process.env.ENV_MERCHANT_PORTAL_URL,
-    mailCatcherUrl: process.env.ENV_MAIL_CATCHER_URL,
-    cli: {
-      // TODO: TEMPORARILY SOLUTION: rework + move to .env
-      store: 'DE',
-      containerPath: '../suite-nonsplit',
-      containerName: 'spryker_cli_1',
-    },
+    backofficeUrl: `${protocol}://${backofficeHost}`,
+    merchantPortalUrl: `${protocol}://${merchantPortalHost}`,
+    glueBackendUrl: `${protocol}://${glueBackendHost}`,
+    mailCatcherUrl: `${protocol}://${mailCatcherHost}`,
   },
   e2e: {
-    baseUrl: process.env.E2E_BASE_URL,
+    baseUrl: `${protocol}://${baseHost}`,
+    setupNodeEvents(on) {
+      on('task', {
+        isFileExists(filename: string): boolean {
+          return existsSync(filename);
+        },
+      });
+    },
     retries: {
       runMode: 2,
       openMode: 0,
@@ -25,3 +42,10 @@ export default defineConfig({
   viewportWidth: parseInt(process.env.VIEWPORT_WIDGTH ?? '1000', 10),
   viewportHeight: parseInt(process.env.VIEWPORT_HEIGHT ?? '660', 10),
 });
+
+function getEnvVar(primary: string, fallback: string): string {
+  const primaryValue = process.env[primary];
+  const fallbackValue = process.env[fallback];
+
+  return primaryValue !== undefined ? primaryValue : fallbackValue !== undefined ? fallbackValue : '';
+}

cypress/e2e/backoffice/order-management/order-creation.cy.ts

@@ -0,0 +1,56 @@
+import { OrderCreationDynamicFixtures, OrderManagementStaticFixtures } from '@interfaces/backoffice';
+import { SalesIndexPage } from '@pages/backoffice';
+import { CartPage } from '@pages/yves';
+import { UserLoginScenario } from '@scenarios/backoffice';
+import { CheckoutScenario, CustomerLoginScenario } from '@scenarios/yves';
+import { container } from '@utils';
+
+describe('order creation', { tags: ['@order-management'] }, (): void => {
+  const cartPage = container.get(CartPage);
+  const salesIndexPage = container.get(SalesIndexPage);
+  const loginCustomerScenario = container.get(CustomerLoginScenario);
+  const checkoutScenario = container.get(CheckoutScenario);
+  const userLoginScenario = container.get(UserLoginScenario);
+
+  let staticFixtures: OrderManagementStaticFixtures;
+  let dynamicFixtures: OrderCreationDynamicFixtures;
+
+  before((): void => {
+    ({ staticFixtures, dynamicFixtures } = Cypress.env());
+  });
+
+  it('should be able to create an order by existing customer', (): void => {
+    loginCustomerScenario.execute({ email: dynamicFixtures.customer.email, password: staticFixtures.defaultPassword });
+
+    checkoutScenario.execute({
+      isGuest: false,
+      isMultiShipment: false,
+      idCustomerAddress: dynamicFixtures.address.id_customer_address,
+    });
+    cy.contains('Your order has been placed successfully!');
+
+    userLoginScenario.execute({
+      username: dynamicFixtures.rootUser.username,
+      password: staticFixtures.defaultPassword,
+    });
+    salesIndexPage.viewLastPlacedOrder();
+
+    cy.get('body').contains(dynamicFixtures.product.name);
+  });
+
+  it('should be able to create an order by guest', (): void => {
+    cartPage.visit();
+    cartPage.quickAddToCart(dynamicFixtures.product.sku, 1);
+
+    checkoutScenario.execute({ isGuest: true });
+    cy.contains('Your order has been placed successfully!');
+
+    userLoginScenario.execute({
+      username: dynamicFixtures.rootUser.username,
+      password: staticFixtures.defaultPassword,
+    });
+    salesIndexPage.viewLastPlacedOrder();
+
+    cy.get('body').contains(dynamicFixtures.product.name);
+  });
+});

cypress/e2e/backoffice/return-management/return-creation.cy.ts

@@ -0,0 +1,77 @@
+import { ReturnCreationDynamicFixtures, ReturnManagementStaticFixtures } from '@interfaces/backoffice';
+import { SalesDetailPage, SalesIndexPage, SalesReturnGuiCreatePage } from '@pages/backoffice';
+import { UserLoginScenario } from '@scenarios/backoffice';
+import { CheckoutScenario, CustomerLoginScenario } from '@scenarios/yves';
+import { container } from '@utils';
+
+describe('return creation', { tags: ['@return-management'] }, (): void => {
+  const salesIndexPage = container.get(SalesIndexPage);
+  const salesDetailPage = container.get(SalesDetailPage);
+  const salesReturnGuiCreatePage = container.get(SalesReturnGuiCreatePage);
+  const customerLoginScenario = container.get(CustomerLoginScenario);
+  const userLoginScenario = container.get(UserLoginScenario);
+  const checkoutScenario = container.get(CheckoutScenario);
+
+  let dynamicFixtures: ReturnCreationDynamicFixtures;
+  let staticFixtures: ReturnManagementStaticFixtures;
+
+  before((): void => {
+    ({ staticFixtures, dynamicFixtures } = Cypress.env());
+  });
+
+  beforeEach((): void => {
+    customerLoginScenario.execute({
+      email: dynamicFixtures.customer.email,
+      password: staticFixtures.defaultPassword,
+    });
+  });
+
+  it('should be able to create return from (from shipped order state)', (): void => {
+    checkoutScenario.execute({
+      isGuest: false,
+      isMultiShipment: false,
+      idCustomerAddress: dynamicFixtures.address.id_customer_address,
+    });
+    userLoginScenario.execute({
+      username: dynamicFixtures.rootUser.username,
+      password: staticFixtures.defaultPassword,
+    });
+
+    salesIndexPage.visit();
+    salesIndexPage.viewLastPlacedOrder();
+    salesDetailPage.triggerOms('Pay', true);
+    salesDetailPage.triggerOms('Skip timeout');
+    salesDetailPage.triggerOms('skip picking');
+    salesDetailPage.triggerOms('Ship');
+
+    salesDetailPage.createReturn();
+    salesReturnGuiCreatePage.createReturnForAllOrderItems();
+
+    cy.contains('Return was successfully created.');
+  });
+
+  it('should be able to create return from (from delivery order state)', (): void => {
+    checkoutScenario.execute({
+      isGuest: false,
+      isMultiShipment: false,
+      idCustomerAddress: dynamicFixtures.address.id_customer_address,
+    });
+    userLoginScenario.execute({
+      username: dynamicFixtures.rootUser.username,
+      password: staticFixtures.defaultPassword,
+    });
+
+    salesIndexPage.visit();
+    salesIndexPage.viewLastPlacedOrder();
+    salesDetailPage.triggerOms('Pay', true);
+    salesDetailPage.triggerOms('Skip timeout');
+    salesDetailPage.triggerOms('skip picking');
+    salesDetailPage.triggerOms('Ship');
+    salesDetailPage.triggerOms('Stock update');
+
+    salesDetailPage.createReturn();
+    salesReturnGuiCreatePage.createReturnForAllOrderItems();
+
+    cy.contains('Return was successfully created.');
+  });
+});