Merge pull request #174 from Arquisoft/develop - productPage testing

Develop - productPage testing

webapp/src/components/other/about_us.tsx

@@ -4,7 +4,7 @@ function AboutUs(): JSX.Element {
 
     return (
       <>
-          <h1><img style={{width: "40%"}} src="logo.png" alt="logo of the page"></img></h1>
+          <h1><img style={{width: "40%", marginTop:"40px"}} src="logo.png" alt="logo of the page"></img></h1>
 
           <h2>Decentralized Delivery</h2>
           <p>DeDe is an online retail system that preserves the privacy of the customers following the SOLID principles. This means that our Decentralized Delivery app will not store user data per se, but will acess, when permission is granted, the information located inside the user's SOLID pod. This information will be used by our app to know the user's address for delivery purposes.</p>

webapp/src/components/products/ProductPage.tsx

@@ -97,7 +97,7 @@ function ProductPage(prop: ProductPageProps): JSX.Element {
 
 
 
-          <ImageGallery items={JSON.parse(images as string)} />
+          <ImageGallery data-testid="imgs" items={JSON.parse(images as string)} />
 
 
           <Card>
@@ -117,7 +117,7 @@ function ProductPage(prop: ProductPageProps): JSX.Element {
             </CardContent>
             <CardActions>
               <DivBtonStyle>
-               <BuyBtton id="addToCartButton" startIcon={<AddShoppingCartIcon />} onClick={() => {
+               <BuyBtton id="addToCartButton" data-testid="addToCartBtn" startIcon={<AddShoppingCartIcon />} onClick={() => {
                   addProduct(product as Product);
                   prop.refreshCartList();
                 }} >

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

@@ -1,16 +1,100 @@
-import { render } from "@testing-library/react";
+import { screen, render, fireEvent, waitFor } from "@testing-library/react";
 import { BrowserRouter as Router } from "react-router-dom";
 import ProductPage from "../ProductPage";
+import * as api from '../../../api/api';
+import { Product } from '../../../shared/shareddtypes';
+const fakeProd: Product = {} as Product;
+const product =  {
+    "_id": "testnissan",
+    "name": "nissan",
+    "price": 49.99,
+    "description": "Widebody. Banana Split Yellow. A beast.",
+    "image": "nissan",
+    "reviews": [
+      {
+        "userId": "Usuario review",
+        "productId": "testnissan",
+        "rating": 4,
+        "comment": "Muy rápido",
+        "orderId":"orderId"
+      }
+    ],
+    "quantity": 2,
+    "product": fakeProd,
+    "id": "testnissan",
+    "color": "blue",
+    "category":""
+}
+const productNoReview=   {
+    "_id": "testnissan",
+    "name": "nissan",
+    "price": 49.99,
+    "description": "Widebody. Banana Split Yellow. A beast.",
+    "image": "nissan",
+    "reviews": [
+
+    ],
+    "quantity": 2,
+    "product": fakeProd,
+    "id": "testnissan",
+    "color": "blue",
+    "category":""
+}
+/**
+ * Test product page is able to render without errors
+ */
+ test("ProductPage is rendered correctly for product found", async() => {
+
+    const doNothing = () => {
+        //this is intentional
+    };
+    jest.spyOn(api, "getProductImages").mockImplementation((_id: string): Promise<string[]> => {
+        return Promise.resolve(["1"]);
+      });
+    const getProd = jest.spyOn(api, "getProductById").mockReturnValue(Promise.resolve(product)); 
+    const addToCart = jest.spyOn(api, "addToCart");
+    jest.mock('react-router-dom', () => ({
+        ...jest.requireActual('react-router-dom'),
+        useParams: () => ({
+          id: '12',
+        }),
+      }));
+    //const { getByText } =
+    render (
+        <Router>
+            <ProductPage
+                refreshCartList={doNothing}
+            />
+        </Router>
+    );
+    //waiting for images to be rendered!
+    await waitFor(() => expect(getProd).toHaveBeenCalledTimes(1));
+    expect(screen.getByText('nissan')).toBeInTheDocument();
+    expect(screen.getByText('49.99€')).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId('addToCartBtn'));
+    expect(addToCart).toHaveBeenCalled();
+    // Without access to the state, loading behaviour
+});
 
 /**
  * Test product page is able to render without errors
  */
- test("ProductPage is rendered correctly", async() => {
+ test("ProductPage is rendered correctly for product not found", async() => {
 
     const doNothing = () => {
         //this is intentional
     };
+    jest.spyOn(api, "getProductImages").mockImplementation((_id: string): Promise<string[]> => {
+        return Promise.resolve(["1"]);
+      });
+    const getProdEmpty = jest.spyOn(api, "getProductById").mockReturnValue(Promise.resolve(undefined)); 
 
+    jest.mock('react-router-dom', () => ({
+        ...jest.requireActual('react-router-dom'),
+        useParams: () => ({
+          id: '12',
+        }),
+      }));
     //const { getByText } =
     render (
         <Router>
@@ -19,6 +103,40 @@ import ProductPage from "../ProductPage";
             />
         </Router>
     );
+    //waiting for the component to call the api
+    await waitFor(() => expect(getProdEmpty).toHaveBeenCalledTimes(1));
+    //when resolved it must show that no product was found
+    expect(screen.getByText("No product found")).toBeInTheDocument();
+
+});
+
+test("ProductPage is rendered correctly for product with no reviews", async() => {
+
+    const doNothing = () => {
+        //this is intentional
+    };
+    jest.spyOn(api, "getProductImages").mockImplementation((_id: string): Promise<string[]> => {
+        return Promise.resolve(["1"]);
+      });
+    const getProdNoReview = jest.spyOn(api, "getProductById").mockReturnValue(Promise.resolve(productNoReview)); 
+
+    jest.mock('react-router-dom', () => ({
+        ...jest.requireActual('react-router-dom'),
+        useParams: () => ({
+          id: '12',
+        }),
+      }));
+    //const { getByText } =
+    render (
+        <Router>
+            <ProductPage
+                refreshCartList={doNothing}
+            />
+        </Router>
+    );
+    //waiting for the component to call the api
+    await waitFor(() => expect(getProdNoReview).toHaveBeenCalledTimes(1));
+    //when resolved it must show that no product was found
+    expect(screen.getByText("This product does not have any review yet.")).toBeInTheDocument();
 
-    // Without access to the state, loading behaviour
 });