Merge pull request #161 from Arquisoft/develop

Develop - Integrate checkout testing - address form test

webapp/src/App.tsx

@@ -52,7 +52,7 @@ function App(): JSX.Element {
               <Route path='/login' element={<SOLIDLogin/>} />
               <Route path='/profile' element={<UserProfile/>} />
               <Route path='/shipping' element={<Shipping refreshCartList={refreshCartList}/> } />
-              <Route path='/checkout' element={<Checkout items={cart} refreshCartList={refreshCartList}/>}/>
+              <Route path='/checkout' element={<Checkout items={cart} />}/>
               <Route path='/cart' element={<ShoppingCart items={cart} refreshCartList={refreshCartList} />} />
               <Route path='/admin' element={<AdminView/>}/>
               <Route path='/admin/login' element={<AdminLogin/>}/>

webapp/src/components/checkout-shipping/Checkout.test.tsx

@@ -0,0 +1,83 @@
+import {  screen, render } from "@testing-library/react";
+import { ItemCart, Product } from "../../shared/shareddtypes";
+import Checkout from "./Checkout";
+
+
+let itemcart1:ItemCart = {
+    product: {
+        id: "1",
+        name: "Product 1",
+        description: "Product 1 description",
+        price: 10,
+        image: "",
+        category: "Test",
+        reviews: [],
+        product: {} as Product,
+        _id: "1",
+        quantity: 2
+    },
+    quantity: 2
+}
+
+/**
+ * Test that the checkout component can be rendered without any error using one productOrdered in the cart.
+ */
+
+test('checkout component can be rendered', async () => {
+    const cart:ItemCart[] = [itemcart1];
+    const { getByText } = render(<Checkout items={cart} />);
+    expect(screen.getByText("Checkout")).toBeInTheDocument();
+    expect(screen.getByText("Cart Totals:")).toBeInTheDocument();
+    expect(getByText("Price: 10 €")).toBeInTheDocument();
+    expect(getByText("Product 1")).toBeInTheDocument();
+    expect(getByText("2 Unit(s)")).toBeInTheDocument();
+    expect(getByText("20.00 €")).toBeInTheDocument();
+    expect(screen.getByText("Shipping")).toBeInTheDocument();
+
+});
+
+/**
+ * Test that the checkout component can be rendered without any error using multiple productsOrdered in the cart.
+ */
+
+    test('checkout component can be rendered with multiple products', async () => {
+        const fakeProd: Product = {} as Product;
+        const cart:ItemCart[] = [itemcart1,{
+            product: {
+                id: "2",
+                name: "Product 2",
+                description: "Product 2 description",
+                price: 20,
+                image: "",
+                category: "Test",
+                reviews: [],
+                product: fakeProd,
+                _id: "2",
+                quantity: 1
+            },
+            quantity: 1
+        }];
+        const { getByText } = render(<Checkout items={cart}  />);
+        //total price
+        expect(getByText("40.00 €")).toBeInTheDocument();
+        //product 1
+        expect(getByText("Product 1")).toBeInTheDocument();
+        expect(getByText("2 Unit(s)")).toBeInTheDocument();
+        expect(getByText("Price: 10 €")).toBeInTheDocument();
+        //product 2
+        expect(getByText("Product 2")).toBeInTheDocument();
+        expect(getByText("1 Unit(s)")).toBeInTheDocument();
+        expect(getByText("Price: 20 €")).toBeInTheDocument();
+
+    });
+
+    test('checkout component is rendered without letting user go to shipping if the cart is empty', async () => {
+
+        const { getByText } = render(<Checkout items={[]} />);
+        expect(screen.getByText("Checkout")).toBeInTheDocument();
+        expect(screen.getByText("Cart Totals:")).toBeInTheDocument();
+
+        expect(getByText("0.00 €")).toBeInTheDocument();
+        expect(screen.queryByText("Shipping")).toBeNull();
+
+    });

webapp/src/components/checkout-shipping/Checkout.tsx

@@ -1,31 +1,25 @@
 import { useState, useEffect } from 'react';
 import { ItemCart } from "../../shared/shareddtypes";
-import { getCart, getOrderByUserId } from '../../api/api';
+
 
 import Typography from "@mui/material/Typography";
 import Stack from "@mui/material/Stack";
 import Button from "@mui/material/Button";
 
-import { styled } from "@mui/material/styles";
 
 import { Card, Box, Divider, Grid } from "@mui/material";
 
 import CheckoutItem from "./CheckoutItem";
 
 type CheckoutProps = {
     items: ItemCart[];
-    refreshCartList: () => void;
 };
 
 function Checkout(props: CheckoutProps): JSX.Element {
 
     const [total, setTotal] = useState<number>(0);
 
 
-    const updateTotal = async () => {
-        let cart = getCart();
-        setTotal(cart.reduce((acc, item) => acc + item.product.price * item.quantity, 0));
-    };
 
     useEffect(() => {
         setTotal(props.items.reduce((acc, item) => acc + item.product.price * item.quantity, 0));
@@ -39,7 +33,7 @@ function Checkout(props: CheckoutProps): JSX.Element {
 
         let res = props.items.map((item: ItemCart) => {
             if (item !== null && item.quantity > 0) {
-                return <CheckoutItem updateTotal={updateTotal} item={item} />
+                return <CheckoutItem item={item} />
             }
         }
         )

webapp/src/components/checkout-shipping/CheckoutItem.test.tsx

@@ -0,0 +1,32 @@
+import {  render } from "@testing-library/react";
+import { ItemCart, Product } from "../../shared/shareddtypes";
+import CheckoutItem from "./CheckoutItem";
+
+
+/**
+ * Chek that the CheckoutItem component is working as expected with a product.
+ */
+
+
+    test('checkout item component can be rendered with a product', async () => {
+        const fakeProd: Product = {} as Product;
+        const cart:ItemCart[] = [{
+            product: {
+                id: "1",
+                name: "Product 1",
+                description: "Product 1 description",
+                price: 69.99,
+                image: "",
+                category: "Test",
+                reviews: [],
+                product: fakeProd,
+                _id: "1",
+                quantity: 1
+            },
+            quantity: 1
+        }];
+        const { getByText } = render(<CheckoutItem item={cart[0]} />);
+        expect(getByText("Product 1")).toBeInTheDocument();
+        expect(getByText("1 Unit(s)")).toBeInTheDocument();
+        expect(getByText("Price: 69.99 €")).toBeInTheDocument();
+    })

webapp/src/components/checkout-shipping/CheckoutItem.tsx

@@ -5,7 +5,6 @@ import { useState, useEffect } from 'react';
 import './../../css/CheckoutItem.css'
 type CheckoutItemProps = {
     item: ItemCart;
-    updateTotal: () => void;
 };
 
 function CheckoutItem(props: CheckoutItemProps) {

webapp/src/components/products/tests/MainProducts.test.tsx

@@ -91,3 +91,52 @@ test("When listing products the proper function is called", async () => {
 
 
 
+test("When listing products, use filter by color works as expected", async () => {
+  //We need to mock this function as the ProductCard calls it in order to render the img of each product.
+  jest.spyOn(api, "getProductImages").mockImplementation((id: string): Promise<string[]> => {
+    return Promise.resolve(["1"]);
+  });
+  //The products are retrieved from the getProducts method of the API. 
+  const mockAPI = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve(productsList));
+
+  const {container}=render(<MemoryRouter><MainProducts refreshCartList={() => { }} /> </MemoryRouter>);
+
+  //We neeed to wait for the loader to be removed!!!!
+  await waitForElementToBeRemoved(() => screen.getByTestId('loader'));
+  //We make sure getProducts is called
+  await waitFor(() => expect(mockAPI).toHaveBeenCalledTimes(1));
+
+  //We check that we can see both products info
+  expect(screen.getByText('bmw')).toBeInTheDocument();
+  expect(screen.getByAltText('bmw')).toBeInTheDocument();
+  let filter = screen.getByTestId("openFilterBtn");
+  expect(filter).toBeInTheDocument();
+  fireEvent.click(filter);
+  fireEvent.click(filter);
+
+  await waitFor(() => expect(screen.getByTestId("drawer-filter")).toBeInTheDocument());
+
+  expect(screen.getByText('Color')).toBeInTheDocument();
+  let colorChooser =  screen.getByTestId("colorPanel");
+  expect(colorChooser).toBeInTheDocument();
+  fireEvent.click(colorChooser);
+ /* let yellowOpt = screen.getByTestId("yellow");
+  await waitFor(() =>  expect(screen.getByTestId("yellow")).toBeInTheDocument());
+  fireEvent.click(yellowOpt);
+  /*
+  let yellowOpt = screen.getByTestId("yellow");
+  expect(yellowOpt).toBeInTheDocument();
+  fireEvent.click(yellowOpt);
+ *//*
+  expect(mockAPI).toHaveBeenCalledWith("&color[eq]=yellow");
+  
+   
+    expect(colorChooser).toBeInTheDocument();
+    fireEvent.click(colorChooser);
+    let yellowOpt = screen.getByTestId("yellow");
+    expect(yellowOpt).toBeInTheDocument();
+    fireEvent.click(yellowOpt);
+    //
+    expect(mockAPI).toHaveBeenCalledWith("&color[eq]=yellow");
+    */
+});        

webapp/src/components/user/AddressForm.test.tsx

@@ -0,0 +1,29 @@
+import { screen, render, queryByText, waitForElementToBeRemoved } from "@testing-library/react";
+
+import AddressForm from './AddressForm';
+
+import userEvent from "@testing-library/user-event";
+
+import { ReactNotifications } from "react-notifications-component";
+/**
+ * Chek that the CheckoutItem component is working as expected with a product.
+ */
+
+
+    test('Check alert is shown when an address field is missing', async () => {
+
+        render(<div><ReactNotifications/><div><AddressForm/></div></div>);
+        expect(screen.getByTestId("street-input")).toBeInTheDocument();
+        expect(screen.getByTestId("locality-input")).toBeInTheDocument();
+        expect(screen.getByTestId("zipcode-input")).toBeInTheDocument();
+        expect(screen.getByTestId("country-input")).toBeInTheDocument();
+        expect(screen.getByText("Example: Valdés Salas.")).toBeInTheDocument();
+        expect(screen.getByText("Example: Oviedo.")).toBeInTheDocument();
+        expect(screen.getByText("Example: 33007.")).toBeInTheDocument();
+        expect(screen.getByText("Example: Spain.")).toBeInTheDocument();
+        expect(screen.getByText('Set Address')).toBeInTheDocument();
+        userEvent.click(screen.getByText('Set Address'));
+        expect(screen.getByText('Attention!')).toBeInTheDocument();
+        expect(screen.getByText('Please, fill all form fields.')).toBeInTheDocument();
+
+    })

webapp/src/components/user/AddressForm.tsx

@@ -107,19 +107,19 @@ export default function AddressForm() {
             <Typography id="addressTitle" variant='h4'>Create / Update DedEx Address</Typography>
             <br></br>
             <form id="myform">
-                <TextField sx={{ width: '85%' }} label="Street" id="Street" aria-describedby="Street-helper-text" required={true} />
+                <TextField data-testid="street-input" sx={{ width: '85%' }} label="Street" id="Street" aria-describedby="Street-helper-text" required={true} />
                 <FormHelperText id="Street-helper-text">Example: Valdés Salas.</FormHelperText>
                 <br></br>
-                <TextField sx={{ width: '85%' }} label="City" id="City" aria-describedby="City-helper-text" required={true} />
+                <TextField data-testid="city-input" sx={{ width: '85%' }} label="City" id="City" aria-describedby="City-helper-text" required={true} />
                 <FormHelperText id="City-helper-text">Example: Oviedo.</FormHelperText>
                 <br></br>
-                <TextField sx={{ width: '85%' }} label="Locality" id="Locality" aria-describedby="Locality-helper-text" required={true} />
+                <TextField data-testid="locality-input" sx={{ width: '85%' }} label="Locality" id="Locality" aria-describedby="Locality-helper-text" required={true} />
                 <FormHelperText id="Locality-helper-text">Example: Asturias.</FormHelperText>
                 <br></br>
-                <TextField sx={{ width: '85%' }} label="ZIP Code" id="ZIPCode" aria-describedby="ZIPCode-helper-text" required={true} />
+                <TextField data-testid="zipcode-input" sx={{ width: '85%' }} label="ZIP Code" id="ZIPCode" aria-describedby="ZIPCode-helper-text" required={true} />
                 <FormHelperText id="ZIPCode-helper-text">Example: 33007.</FormHelperText>
                 <br></br>
-                <TextField sx={{ width: '85%' }} label="Country" id="Country" aria-describedby="Country-helper-text" required={true} />
+                <TextField data-testid="country-input" sx={{ width: '85%' }} label="Country" id="Country" aria-describedby="Country-helper-text" required={true} />
                 <FormHelperText id="Country-helper-text">Example: Spain.</FormHelperText>
                 <Alert sx={{ width: '82%' }} severity="info">Attention! By clicking "Set Address" you are giving us persmission to write on your VCARD, a public place.</Alert>
                 <Button type="button" onClick={addAddress} id="addAddress" variant="contained">Set Address</Button>