🧪 [Frontend] 284 adding cypress e2e tests

.gitignore

@@ -29,4 +29,5 @@ coverage
 out/
 build
 src/frontend/protos
-next-env.d.ts
+next-env.d.ts
+src/frontend/cypress/videos

docker-compose.yml

@@ -183,6 +183,49 @@ services:
       - shippingservice
     logging: *logging
 
+  # Frotend Tests
+  frontendtests:
+    image: cypress/included:10.3.1-typescript
+    depends_on:
+      - frontend
+    profiles:
+      - tests
+    environment:
+      - CYPRESS_baseUrl=http://${FRONTEND_ADDR}
+    working_dir: /cypress
+    volumes:
+    - ./src/frontend:/cypress
+
+  # Integration Tests
+  integrationTests:
+    image: ${IMAGE_NAME}:${IMAGE_VERSION}-integrationTests
+    container_name: integrationTests
+    profiles:
+      - tests
+    build:
+      context: ./
+      dockerfile: ./test/Dockerfile
+    environment:
+      - AD_SERVICE_ADDR
+      - CART_SERVICE_ADDR
+      - CHECKOUT_SERVICE_ADDR
+      - CURRENCY_SERVICE_ADDR
+      - PAYMENT_SERVICE_ADDR
+      - PRODUCT_CATALOG_SERVICE_ADDR
+      - RECOMMENDATION_SERVICE_ADDR
+      - SHIPPING_SERVICE_ADDR
+      - EMAIL_SERVICE_ADDR
+    depends_on:
+      - adservice
+      - cartservice
+      - checkoutservice
+      - currencyservice
+      - paymentservice
+      - productcatalogservice
+      - recommendationservice
+      - shippingservice
+      - emailservice
+
   # PaymentService
   paymentservice:
     image: ${IMAGE_NAME}:${IMAGE_VERSION}-paymentservice

src/frontend/components/Ad/Ad.tsx

@@ -7,7 +7,7 @@ const Ad = () => {
   } = useAd();
 
   return (
-    <S.Ad>
+    <S.Ad data-cy="ad">
       <S.Link href={redirectUrl}>
         <p>{text}</p>
       </S.Link>

src/frontend/components/CartDropdown/CartDropdown.tsx

@@ -18,7 +18,7 @@ const CartDropdown = ({ productList, isOpen, onClose }: IProps) => {
       if (ref.current && !ref.current.contains(event.target as Node)) {
         onClose();
       }
-    }
+    };
     // Bind the event listener
     document.addEventListener('mousedown', handleClickOutside);
 
@@ -29,19 +29,17 @@ const CartDropdown = ({ productList, isOpen, onClose }: IProps) => {
   }, [ref]);
 
   return isOpen ? (
-    <S.CartDropdown ref={ref}>
+    <S.CartDropdown ref={ref} data-cy="cart-dropdown">
       <div>
         <S.Header>
           <S.Title>Shopping Cart</S.Title>
           <span onClick={onClose}>Close</span>
         </S.Header>
         <S.ItemList>
-          {!productList.length && (
-            <S.EmptyCart>Your shopping cart is empty</S.EmptyCart>
-          )}
+          {!productList.length && <S.EmptyCart>Your shopping cart is empty</S.EmptyCart>}
           {productList.map(
             ({ quantity, product: { name, picture, id, priceUsd = { nanos: 0, currencyCode: 'USD', units: 0 } } }) => (
-              <S.Item key={id}>
+              <S.Item key={id} data-cy="cart-dropdown-item">
                 <S.ItemImage src={picture} alt={name} />
                 <S.ItemDetails>
                   <S.ItemName>{name}</S.ItemName>
@@ -54,7 +52,7 @@ const CartDropdown = ({ productList, isOpen, onClose }: IProps) => {
         </S.ItemList>
       </div>
       <Link href="/cart">
-        <S.CartButton>Go to Shipping Cart</S.CartButton>
+        <S.CartButton data-cy="cart-go-to-shopping">Go to Shipping Cart</S.CartButton>
       </Link>
     </S.CartDropdown>
   ) : null;

src/frontend/components/CartIcon/CartIcon.tsx

@@ -11,9 +11,9 @@ const CartIcon = () => {
 
   return (
     <>
-      <S.CartIcon onClick={() => setIsOpen(true)}>
+      <S.CartIcon data-cy="cart-icon" onClick={() => setIsOpen(true)}>
         <S.Icon src="/icons/Hipster_CartIcon.svg" alt="Cart icon" title="Cart" />
-        {!!items.length && <S.ItemsCount>{items.length}</S.ItemsCount>}
+        {!!items.length && <S.ItemsCount data-cy="cart-item-count">{items.length}</S.ItemsCount>}
       </S.CartIcon>
       <CartDropdown productList={items} isOpen={isOpen} onClose={() => setIsOpen(false)} />
     </>

src/frontend/components/CheckoutForm/CheckoutForm.tsx

@@ -190,7 +190,7 @@ const CheckoutForm = ({ onSubmit }: IProps) => {
         <Link href="/">
           <S.CartButton $type="secondary">Continue Shopping</S.CartButton>
         </Link>
-        <S.CartButton type="submit">Place Order</S.CartButton>
+        <S.CartButton data-cy="checkout-place-order" type="submit">Place Order</S.CartButton>
       </S.SubmitContainer>
     </S.CheckoutForm>
   );

src/frontend/components/CheckoutItem/CheckoutItem.tsx

@@ -23,7 +23,7 @@ const CheckoutItem = ({
   const [isCollapsed, setIsCollapsed] = useState(false);
 
   return (
-    <S.CheckoutItem>
+    <S.CheckoutItem data-cy="checkout-item">
       <S.ItemDetails>
         <S.ItemImage src={picture} alt={name} />
         <S.Details>

src/frontend/components/CurrencySwitcher/CurrencySwitcher.tsx

@@ -16,6 +16,7 @@ const CurrencySwitcher = () => {
           name="currency_code"
           onChange={event => setSelectedCurrency(event.target.value)}
           value={selectedCurrency}
+          data-cy="currency-switcher"
         >
           {currencyCodeList.map(currencyCode => (
             <option key={currencyCode} value={currencyCode}>

src/frontend/components/Footer/Footer.tsx

@@ -18,7 +18,7 @@ const Footer = () => {
       <div>
         <p>This website is hosted for demo purpose only. It is not an actual shop.</p>
         <p>
-          <span>session-id: {sessionId}</span>
+          <span data-cy="session-id">session-id: {sessionId}</span>
         </p>
       </div>
       <p>

src/frontend/components/ProductCard/ProductCard.tsx

@@ -20,7 +20,7 @@ const ProductCard = ({
 }: IProps) => {
   return (
     <S.Link href={`/product/${id}`}>
-      <S.ProductCard>
+      <S.ProductCard data-cy="product-card">
         <S.Image $src={picture} />
         <div>
           <S.ProductName>{name}</S.ProductName>

src/frontend/components/ProductList/ProductList.tsx

@@ -8,7 +8,7 @@ interface IProps {
 
 const ProductList = ({ productList }: IProps) => {
   return (
-    <S.ProductList>
+    <S.ProductList data-cy="product-list">
       {productList.map(product => (
         <ProductCard key={product.id} product={product} />
       ))}

src/frontend/components/ProductPrice/ProductPrice.tsx

@@ -27,7 +27,7 @@ const ProductPrice = ({ price }: IProps) => {
   }, [selectedCurrency, price]);
 
   return (
-    <span>
+    <span data-cy="product-price">
       {currencySymbol} {units}.{nanos.toString().slice(0, 2)}
     </span>
   );

src/frontend/components/Recommendations/Recommendations.tsx

@@ -6,7 +6,7 @@ const Recommendations = () => {
   const { recommendedProductList } = useAd();
 
   return (
-    <S.Recommendations>
+    <S.Recommendations data-cy="recommendation-list">
       <S.TitleContainer>
         <S.Title>You May Also Like</S.Title>
       </S.TitleContainer>

src/frontend/cypress.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'cypress';
+import dotEnv from 'dotenv';
+import dotenvExpand from 'dotenv-expand';
+import { resolve } from 'path';
+
+const myEnv = dotEnv.config({
+  path: resolve(__dirname, '../../.env'),
+});
+dotenvExpand.expand(myEnv);
+
+const { FRONTEND_ADDR = '' } = process.env;
+
+export default defineConfig({
+  env: {
+    baseUrl: FRONTEND_ADDR,
+  },
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

src/frontend/cypress/e2e/Checkout.cy.ts

@@ -0,0 +1,32 @@
+describe('Checkout Flow', () => {
+  beforeEach(() => {
+    cy.visit(Cypress.env('baseUrl'));
+  });
+
+  it('should create an order with two items', () => {
+    cy.get('[data-cy="product-card"]').first().click();
+    cy.get('[data-cy="add-to-cart"]').click();
+
+    cy.get('[data-cy="cart-item-count"]').should('contain', '1');
+
+    cy.visit(Cypress.env('baseUrl'));
+
+    cy.get('[data-cy="product-card"]').last().click();
+    cy.get('[data-cy="add-to-cart"]').click();
+
+    cy.get('[data-cy="cart-item-count"]').should('contain', '2');
+
+    cy.get('[data-cy="cart-icon"]').click();
+    cy.get('[data-cy="cart-go-to-shopping"]').click();
+
+    cy.location('href').should('match', /\/cart$/);
+
+    cy.get('[data-cy="checkout-place-order"]').click();
+
+    cy.wait(5000);
+    cy.location('href').should('match', /\/checkout/);
+    cy.get('[data-cy="checkout-item"]').should('have.length', 2);
+  });
+});
+
+export {};

src/frontend/cypress/e2e/Home.cy.ts

@@ -0,0 +1,24 @@
+import getSymbolFromCurrency from 'currency-symbol-map';
+import SessionGateway from '../../gateways/Session.gateway';
+
+describe('Home Page', () => {
+  beforeEach(() => {
+    cy.visit(Cypress.env('baseUrl'));
+  });
+
+  it('should validate the home page', () => {
+    cy.get('[data-cy="home-page"]').should('exist');
+    cy.get('[data-cy="product-list"] [data-cy="product-card"]').should('have.length', 9);
+
+    cy.get('[data-cy="session-id"]').should('contain', SessionGateway.getSession().userId);
+  });
+
+  it('should change currency', () => {
+    cy.get('[data-cy="currency-switcher"]').select('EUR');
+    cy.get('[data-cy="product-list"] [data-cy="product-card"]').should('have.length', 9);
+
+    cy.get('[data-cy="currency-switcher"]').should('have.value', 'EUR');
+
+    cy.get('[data-cy="product-card"]').should('contain', getSymbolFromCurrency('EUR'));
+  });
+});

src/frontend/cypress/e2e/ProductDetail.cy.ts

@@ -0,0 +1,30 @@
+describe('Product Detail Page', () => {
+  beforeEach(() => {
+    cy.visit(Cypress.env('baseUrl'));
+  });
+
+  it('should validate the product detail page', () => {
+    cy.get('[data-cy="product-card"]').first().click();
+
+    cy.get('[data-cy="product-detail"]').should('exist');
+    cy.get('[data-cy="product-picture"]').should('exist');
+    cy.get('[data-cy="product-name"]').should('exist');
+    cy.get('[data-cy="product-description"]').should('exist');
+    cy.get('[data-cy="add-to-cart"]').should('exist');
+
+    cy.get('[data-cy="recommendation-list"] [data-cy="product-card"]').should('have.length', 4);
+    cy.get('[data-cy="ad"]').should('exist');
+  });
+
+  it('should add item to cart', () => {
+    cy.get('[data-cy="product-card"]').first().click();
+    cy.get('[data-cy="add-to-cart"]').click();
+
+    cy.get('[data-cy="cart-item-count"]').should('contain', '1');
+    cy.get('[data-cy="cart-icon"]').click();
+
+    cy.get('[data-cy="cart-dropdown-item"]').should('have.length', 1);
+  });
+});
+
+export {};

src/frontend/cypress/support/commands.ts

@@ -0,0 +1,39 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+export {};

src/frontend/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// 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
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')