feat(e2e): introduce cypress as automated UI framework for E2E testing

.github/workflows/e2e-cypress.yml

@@ -0,0 +1,44 @@
+name: Cypress E2E Tests
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        working-directory: src/EcommerceDDD.Spa
+        run: npm ci
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: src/EcommerceDDD.Spa
+          start: npm start -- --host 0.0.0.0
+          wait-on: 'http://localhost:4200'
+          wait-on-timeout: 180
+          # Because we're using mocks in the tests, we don't necessarily need the full backend running.
+          # But we still need the Angular app to be served.
+          browser: chrome
+        env:
+          CYPRESS_baseUrl: http://localhost:4200
+
+      - name: Upload Cypress screenshots
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: cypress-screenshots
+          path: src/EcommerceDDD.Spa/cypress/screenshots
+          if-no-files-found: ignore

.github/workflows/ecommerceddd-build.yml

@@ -38,7 +38,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - run: npm ci
       - run: npm run test

src/EcommerceDDD.Spa/README.md

@@ -6,3 +6,21 @@ Using a terminal, navigate to `EcommerceDDD.Spa` and run for the following comma
  $ npm install #first time only
  $ npm run start #or ng serve 
 ```
+
+### E2E Testing with Cypress
+
+Cypress runs full browser-based end-to-end tests against the SPA, validating real user flows (for example login, product selection, cart management, and checkout) across routing, UI behavior, and backend integration.
+
+Use the commands below from `src/EcommerceDDD.Spa`:
+
+```console
+ $ npm run e2e
+```
+
+Runs Cypress through Angular CLI (`ng e2e`), using the project e2e target from `angular.json`. In this project, that target starts the Angular dev server and launches Cypress in interactive watch mode, which is best for local development and debugging.
+
+```console
+ $ npm run cypress:run
+```
+
+Runs Cypress headlessly for automation/CI use cases.

src/EcommerceDDD.Spa/angular.json

@@ -29,7 +29,10 @@
             ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/assets/toastr.css",
@@ -65,7 +68,7 @@
                 }
               ],
               "outputHashing": "all",
-            "optimization": true
+              "optimization": true
             },
             "development": {
               "optimization": false,
@@ -96,8 +99,27 @@
         },
         "test": {
           "builder": "@angular-devkit/build-angular:jest"
+        },
+        "e2e": {
+          "builder": "@cypress/schematic:cypress",
+          "options": {
+            "devServerTarget": "ecommerceddd-spa:serve",
+            "watch": true,
+            "headless": false
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "ecommerceddd-spa:serve:production"
+            }
+          }
         }
       }
     }
+  },
+  "cli": {
+    "schematicCollections": [
+      "@cypress/schematic",
+      "@schematics/angular"
+    ]
   }
 }

src/EcommerceDDD.Spa/cypress.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  allowCypressEnv: false,
+  e2e: {
+    baseUrl: 'http://localhost:4200',
+    supportFile: 'cypress/support/e2e.ts',
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    video: false,
+    screenshotOnRunFailure: true
+  },
+})

src/EcommerceDDD.Spa/cypress/e2e/spec.cy.ts

@@ -0,0 +1,146 @@
+const USER_EMAIL = 'user@test.com';
+const USER_PASSWORD = 'Password123!';
+
+const QUOTE_ID = '00000000-0000-0000-0000-000000000001';
+const ORDER_ID = '00000000-0000-0000-0000-000000000002';
+const CUSTOMER_ID = '00000000-0000-0000-0000-000000000003';
+
+const PRODUCTS = [
+  { productId: '00000000-0000-0000-0000-000000000101', name: 'MacBook Pro', price: 1999.99, currencySymbol: '$', quantityInStock: 100 },
+  { productId: '00000000-0000-0000-0000-000000000102', name: 'iPhone 15', price: 999.99, currencySymbol: '$', quantityInStock: 50 }
+];
+
+function setupApiMocks(): void {
+  let quoteItems: Array<{
+    productId: string;
+    productName: string;
+    quantity: number;
+    unitPrice: number;
+    currencySymbol: string;
+  }> = [];
+
+  cy.intercept('POST', '**/api/v2/accounts/login*', {
+    statusCode: 200,
+    body: { accessToken: 'token' }
+  }).as('loginRequest');
+
+  cy.intercept('GET', '**/customerManagement/api/v2/customers/details*', {
+    statusCode: 200,
+    body: { customerId: CUSTOMER_ID, name: 'Test User', email: USER_EMAIL }
+  }).as('getCustomerDetails');
+
+  cy.intercept('GET', '**/quoteManagement/api/v2/quotes*', request => {
+    request.reply({
+      statusCode: 200,
+      body: {
+        quoteId: QUOTE_ID,
+        customerId: CUSTOMER_ID,
+        currencyCode: 'USD',
+        currencySymbol: '$',
+        totalPrice: quoteItems.reduce((total, item) => total + item.unitPrice * item.quantity, 0),
+        items: quoteItems
+      }
+    });
+  }).as('getOpenQuote');
+
+  cy.intercept('POST', '**/productCatalog/api/v2/products*', request => {
+    request.reply({
+      statusCode: 200,
+      body: PRODUCTS.map(product => ({
+        ...product,
+        quantityAddedToCart: quoteItems.find(item => item.productId === product.productId)?.quantity ?? 0
+      }))
+    });
+  }).as('getProducts');
+
+  cy.intercept('POST', '**/quoteManagement/api/v2/quotes*', {
+    statusCode: 201,
+    body: { quoteId: QUOTE_ID }
+  }).as('createQuote');
+
+  cy.intercept('PUT', '**/quoteManagement/api/v2/quotes/*/items*', request => {
+    const { productId, quantity } = request.body as { productId: string; quantity: number };
+    const product = PRODUCTS.find(item => item.productId === productId);
+
+    if (!product) {
+      request.reply({ statusCode: 400, body: { error: 'Unknown productId' } });
+      return;
+    }
+
+    quoteItems = quoteItems.filter(item => item.productId !== productId);
+    quoteItems.push({
+      productId,
+      productName: product.name,
+      quantity,
+      unitPrice: product.price,
+      currencySymbol: product.currencySymbol
+    });
+    request.reply({ statusCode: 204 });
+  }).as('upsertQuoteItem');
+
+  cy.intercept('DELETE', '**/quoteManagement/api/v2/quotes/*/items/*', request => {
+    const productId = request.url.split('/').pop() ?? '';
+    quoteItems = quoteItems.filter(item => item.productId !== productId);
+    request.reply({ statusCode: 204 });
+  }).as('removeQuoteItem');
+
+  cy.intercept('POST', '**/orderProcessing/api/v2/orders/quote/*', request => {
+    quoteItems = [];
+    request.reply({ statusCode: 201, body: { orderId: ORDER_ID } });
+  }).as('placeOrder');
+
+  cy.intercept('GET', '**/orderProcessing/api/v2/orders*', {
+    statusCode: 200,
+    body: []
+  }).as('getOrders');
+}
+
+describe('EcommerceDDD E2E Flow', () => {
+  beforeEach(() => {
+    setupApiMocks();
+  });
+
+  it('should login and navigate to home', () => {
+    cy.visit('/login');
+    cy.get('#email').type(USER_EMAIL);
+    cy.get('#password').type(USER_PASSWORD);
+    cy.get('input[type="submit"]').click();
+    cy.wait('@loginRequest');
+    cy.visit('/home');
+    cy.url().should('include', '/home');
+    cy.contains('h1', 'Welcome to Ecommerce DDD!').should('be.visible');
+  });
+
+  it('should add products to cart and place an order', () => {
+    cy.login(USER_EMAIL, USER_PASSWORD);
+    cy.visit('/products');
+    cy.wait('@getProducts');
+
+    cy.addProductToCart('MacBook Pro');
+    cy.wait('@upsertQuoteItem');
+    cy.contains('.cart-details-container', 'MacBook Pro').should('exist');
+
+    cy.addProductToCart('iPhone 15');
+    cy.wait('@upsertQuoteItem');
+    cy.contains('.cart-details-container', 'iPhone 15').should('exist');
+
+    cy.placeOrder();
+    cy.wait('@placeOrder');
+    cy.url().should('include', '/orders');
+  });
+
+  it('should remove items from the cart', () => {
+    cy.login(USER_EMAIL, USER_PASSWORD);
+    cy.visit('/products');
+    cy.wait('@getProducts');
+
+    cy.addProductToCart('MacBook Pro');
+    cy.wait('@upsertQuoteItem');
+    cy.contains('.cart-details-container', 'MacBook Pro').should('exist');
+
+    cy.removeFromCart('MacBook Pro');
+    cy.wait('@removeQuoteItem');
+    cy.contains('.cart-details-container', 'MacBook Pro').should('not.exist');
+    cy.contains('.empty-cart-message', 'Your cart is empty').should('exist');
+  });
+});

src/EcommerceDDD.Spa/cypress/fixtures/products.json

@@ -0,0 +1,24 @@
+[
+  {
+    "productId": "p1",
+    "name": "MacBook Pro",
+    "description": "Powerful laptop",
+    "price": 1999.99,
+    "currencySymbol": "$",
+    "category": "Electronics",
+    "imageUrl": "https://example.com/macbook.jpg",
+    "quantityInStock": 100,
+    "quantityAddedToCart": 0
+  },
+  {
+    "productId": "p2",
+    "name": "iPhone 15",
+    "description": "Latest smartphone",
+    "price": 999.99,
+    "currencySymbol": "$",
+    "category": "Electronics",
+    "imageUrl": "https://example.com/iphone.jpg",
+    "quantityInStock": 50,
+    "quantityAddedToCart": 0
+  }
+]

src/EcommerceDDD.Spa/cypress/support/commands.ts

@@ -0,0 +1,38 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable {
+    login(email?: string, password?: string): Chainable<void>;
+    addProductToCart(productName: string): Chainable<void>;
+    removeFromCart(productName: string): Chainable<void>;
+    placeOrder(): Chainable<void>;
+  }
+}
+
+Cypress.Commands.add('login', (email = 'user@test.com', password = 'Password123!') => {
+  cy.visit('/login');
+  cy.get('#email').type(email);
+  cy.get('#password').type(password);
+  cy.get('input[type="submit"]').click();
+  cy.wait('@loginRequest');
+  cy.visit('/home');
+  cy.url().should('include', '/home');
+});
+
+Cypress.Commands.add('addProductToCart', (productName: string) => {
+  cy.contains('.product-container', productName).within(() => {
+    cy.contains('button', 'Add to Cart').click();
+  });
+});
+
+Cypress.Commands.add('removeFromCart', (productName: string) => {
+  cy.contains('.cart-details-container', productName).within(() => {
+    cy.get('button.remove-item').click();
+  });
+  cy.contains('.modal-footer button', 'OK').click();
+});
+
+Cypress.Commands.add('placeOrder', () => {
+  cy.contains('button', 'Place Order').click();
+  cy.contains('.modal-footer button', 'OK').click();
+});

src/EcommerceDDD.Spa/cypress/support/e2e.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// When a command from ./commands is ready to use, import with `import './commands'` syntax
+import './commands';

src/EcommerceDDD.Spa/cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["**/*.ts"],
+  "compilerOptions": {
+    "sourceMap": false,
+    "types": ["cypress"]
+  }
+}