From 58eef00b58aef0218e6e134de3d82e054dcd95dc Mon Sep 17 00:00:00 2001 From: xoscar Date: Fri, 12 Aug 2022 15:59:19 -0500 Subject: [PATCH 1/5] 284 adding cypress e2e tests --- .gitignore | 3 +- docker-compose.yml | 43 + src/frontend/components/Ad/Ad.tsx | 2 +- .../components/CartDropdown/CartDropdown.tsx | 12 +- src/frontend/components/CartIcon/CartIcon.tsx | 4 +- .../components/CheckoutForm/CheckoutForm.tsx | 2 +- .../components/CheckoutItem/CheckoutItem.tsx | 2 +- .../CurrencySwitcher/CurrencySwitcher.tsx | 1 + src/frontend/components/Footer/Footer.tsx | 2 +- .../components/ProductCard/ProductCard.tsx | 2 +- .../components/ProductList/ProductList.tsx | 2 +- .../components/ProductPrice/ProductPrice.tsx | 2 +- .../Recommendations/Recommendations.tsx | 2 +- src/frontend/cypress.config.ts | 23 + src/frontend/cypress/e2e/Checkout.cy.ts | 32 + src/frontend/cypress/e2e/Home.cy.ts | 24 + src/frontend/cypress/e2e/ProductDetail.cy.ts | 30 + ...age -- should change currency (failed).png | Bin 0 -> 267914 bytes ...should validate the home page (failed).png | Bin 0 -> 231301 bytes src/frontend/cypress/support/commands.ts | 39 + src/frontend/cypress/support/e2e.ts | 20 + src/frontend/package-lock.json | 4049 +++++++++++------ src/frontend/package.json | 2 + src/frontend/pages/index.tsx | 4 +- .../pages/product/[productId]/index.tsx | 12 +- test/Dockerfile | 35 + test/package-lock.json | 16 +- test/package.json | 1 + test/test.js | 413 +- 29 files changed, 3077 insertions(+), 1702 deletions(-) create mode 100644 src/frontend/cypress.config.ts create mode 100644 src/frontend/cypress/e2e/Checkout.cy.ts create mode 100644 src/frontend/cypress/e2e/Home.cy.ts create mode 100644 src/frontend/cypress/e2e/ProductDetail.cy.ts create mode 100644 src/frontend/cypress/screenshots/Home.cy.ts/Home Page -- should change currency (failed).png create mode 100644 src/frontend/cypress/screenshots/Home.cy.ts/Home Page -- should validate the home page (failed).png create mode 100644 src/frontend/cypress/support/commands.ts create mode 100644 src/frontend/cypress/support/e2e.ts create mode 100644 test/Dockerfile diff --git a/.gitignore b/.gitignore index b5514fd00e..202b06db96 100644 --- a/.gitignore +++ b/.gitignore @@ -29,4 +29,5 @@ coverage out/ build src/frontend/protos -next-env.d.ts \ No newline at end of file +next-env.d.ts +src/frontend/cypress/videos \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index 07cca94df4..49ac8e6434 100644 --- a/docker-compose.yml +++ b/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 diff --git a/src/frontend/components/Ad/Ad.tsx b/src/frontend/components/Ad/Ad.tsx index 578aaa1851..b432b6c78b 100644 --- a/src/frontend/components/Ad/Ad.tsx +++ b/src/frontend/components/Ad/Ad.tsx @@ -7,7 +7,7 @@ const Ad = () => { } = useAd(); return ( - +

{text}

 diff --git a/src/frontend/components/CartDropdown/CartDropdown.tsx b/src/frontend/components/CartDropdown/CartDropdown.tsx index c96a528046..efaa3c1759 100644 --- a/src/frontend/components/CartDropdown/CartDropdown.tsx +++ b/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 ? ( - +
Shopping Cart Close - {!productList.length && ( - Your shopping cart is empty - )} + {!productList.length && Your shopping cart is empty} {productList.map( ({ quantity, product: { name, picture, id, priceUsd = { nanos: 0, currencyCode: 'USD', units: 0 } } }) => ( - + {name} @@ -54,7 +52,7 @@ const CartDropdown = ({ productList, isOpen, onClose }: IProps) => {
- Go to Shipping Cart + Go to Shipping Cart ) : null; diff --git a/src/frontend/components/CartIcon/CartIcon.tsx b/src/frontend/components/CartIcon/CartIcon.tsx index c502138cd8..a241c0774a 100644 --- a/src/frontend/components/CartIcon/CartIcon.tsx +++ b/src/frontend/components/CartIcon/CartIcon.tsx @@ -11,9 +11,9 @@ const CartIcon = () => { return ( <> - setIsOpen(true)}> + setIsOpen(true)}> - {!!items.length && {items.length}} + {!!items.length && {items.length}} setIsOpen(false)} /> diff --git a/src/frontend/components/CheckoutForm/CheckoutForm.tsx b/src/frontend/components/CheckoutForm/CheckoutForm.tsx index 2bcf2dcd25..5a8c808448 100644 --- a/src/frontend/components/CheckoutForm/CheckoutForm.tsx +++ b/src/frontend/components/CheckoutForm/CheckoutForm.tsx @@ -190,7 +190,7 @@ const CheckoutForm = ({ onSubmit }: IProps) => { Continue Shopping - Place Order + Place Order ); diff --git a/src/frontend/components/CheckoutItem/CheckoutItem.tsx b/src/frontend/components/CheckoutItem/CheckoutItem.tsx index 79919c5dee..5806ebd08c 100644 --- a/src/frontend/components/CheckoutItem/CheckoutItem.tsx +++ b/src/frontend/components/CheckoutItem/CheckoutItem.tsx @@ -23,7 +23,7 @@ const CheckoutItem = ({ const [isCollapsed, setIsCollapsed] = useState(false); return ( - + diff --git a/src/frontend/components/CurrencySwitcher/CurrencySwitcher.tsx b/src/frontend/components/CurrencySwitcher/CurrencySwitcher.tsx index 979749f98e..3de451d676 100644 --- a/src/frontend/components/CurrencySwitcher/CurrencySwitcher.tsx +++ b/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 => (