Merge pull request #157 from Arquisoft/develop

Develop - addition of testing

webapp/package.json

@@ -14,7 +14,7 @@
     "@mui/icons-material": "^5.2.5",
     "@mui/material": "^5.2.5",
     "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^13.5.0",
     "@types/node": "^16.11.14",
     "@types/react": "^17.0.37",

webapp/src/components/fragments/NavBar.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react';
+import NavBar from './NavBar';
+import { MemoryRouter } from 'react-router-dom';
+
+test("Review view is rendered properly", async () => {
+
+    render(<MemoryRouter><NavBar cart={[]}></NavBar></MemoryRouter>);
+    expect(screen.getByAltText('DeDe logo.')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Search Items...')).toBeInTheDocument();
+    expect(screen.getByTestId('submitButton')).toBeInTheDocument();
+    expect(screen.getByTestId('account-icon')).toBeInTheDocument();
+    expect(screen.getByTestId('cart-icon')).toBeInTheDocument();
+});

webapp/src/components/fragments/NavBar.tsx

@@ -43,12 +43,13 @@ const SearchBar = () => (
                 style={{ width: "100%" }}
                 sx={{ input: { color: 'white' } }}
                 onChange={(e) => q=e.target.value}
-               
+
                 />
 
             <Button
                 id="submitButton"
                 type="submit"
+                data-testid="submitButton"
                 >
                 <SearchIcon />
             </Button>
@@ -78,6 +79,7 @@ const SearchBar = () => (
                 <SearchBar />
 
                 <IconButton
+                    data-testid="cart-icon"
                     style={{ marginRight: "2%" }}
                     size="large"
                     aria-label="shopping cart"
@@ -92,6 +94,7 @@ const SearchBar = () => (
                 </IconButton>
 
                 <IconButton
+                    data-testid="account-icon"
                     size="large"
                     edge="end"
                     aria-label="account of current user"

webapp/src/components/other/DeveloperCards.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import {render, screen } from '@testing-library/react';
+import DeveloperCards from './DeveloperCards';
+
+test("DevelopersCard is rendered properly", async () =>{
+
+        render(<DeveloperCards></DeveloperCards>);
+        expect(screen.getByText('Luis Miguel Alonso Ferreiro')).toBeInTheDocument();
+        expect(screen.getByText('Sebastián López Hernández')).toBeInTheDocument();
+        expect(screen.getByText('Jesús González Méndez')).toBeInTheDocument();
+        expect(screen.getByText('Miguel Cuesta Martínez')).toBeInTheDocument();
+        expect(screen.getByText('Daniel Álvarez Díaz')).toBeInTheDocument();
+
+});
+
+
+
+

webapp/src/components/products/MainProducts.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
-
+import LinearProgress from '@mui/material/LinearProgress';
 import { getProducts } from '../../api/api';
 import { Product } from '../../shared/shareddtypes';
 import ProductCard from './ProductCard';
@@ -159,6 +159,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
       <div className='main-products'>
         <div className='main-filter'>
           <IconButton
+            data-testid="openFilterBtn"
             id="openFilterButton"
             color="inherit"
             aria-label="open drawer"
@@ -173,14 +174,18 @@ function MainProducts(props: MainProductsProps): JSX.Element {
         <div className="products-container">
 
 
-          {products.map((p, i) => (
-
-            <ProductCard key={p.id} product={p} refreshCartList={props.refreshCartList} />
-
-          ))}
+          {products.length > 0 ? products.map((p, _i) => (
+            <div data-testid="products-retrieved">
+              <ProductCard key={p.id} product={p} refreshCartList={props.refreshCartList} />
+            </div>
+          )) : <Typography data-testid="loader">Loading products!!
+            <LinearProgress color="success" />
+          </Typography>
+          }
         </div>
       </div>
       <Drawer
+        data-testid="drawer-filter"
         sx={{
           width: drawerWidth,
           flexShrink: 0,
@@ -207,9 +212,11 @@ function MainProducts(props: MainProductsProps): JSX.Element {
 
           <br />
           <Select
+            data-testid="colorPanel"
             id="colorChooser"
             sx={{ width: 200 }}
             defaultValue="all"
+            label="color-filter"
           >
             <MenuItem>
               <ListItem button key="all" onClick={() => { filterColor("All") }}>
@@ -220,7 +227,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
             </MenuItem>
             <br></br>
             <MenuItem>
-              <ListItem button key="yellow" onClick={() => { filterColor("yellow") }}>
+              <ListItem button data-testid="yellow" key="yellow" onClick={() => { filterColor("yellow") }}>
                 <ListItemIcon>
                   <Brightness1Icon sx={{ color: yellow[500] }}></Brightness1Icon>
                 </ListItemIcon>

webapp/src/components/products/ProductCard.tsx

@@ -91,7 +91,10 @@ const ProductCard = (prod: ProductCardProps): JSX.Element => {
       </div>
       <div className="product-actions">
         <DivBtonStyle>
-          <BuyBtton id="addToCartButton" startIcon={<AddShoppingCartIcon />} onClick={() => {
+
+
+          <BuyBtton data-testid='add-cart-button' id="addToCartButton" startIcon={<AddShoppingCartIcon />} onClick={() => {
+
             addProduct(prod.product)
             prod.refreshCartList();
           }}>

webapp/src/components/products/ReviewView.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react';
+import { Review } from '../../shared/shareddtypes';
+import ReviewView from './ReviewView';
+const reviewTest: Review = {
+    userId: "dummy",
+    productId: "prod1",
+    rating: 5,
+    comment: "testing1",
+    orderId: "order1"
+}
+test("Review view is rendered properly", async () => {
+
+    render(<ReviewView review={reviewTest}></ReviewView>);
+    expect(screen.getByText('dummy')).toBeInTheDocument();
+    expect(screen.getByText('"testing1"')).toBeInTheDocument();
+
+
+});

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

@@ -0,0 +1,93 @@
+
+import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
+import MainProducts from '../MainProducts';
+import * as api from '../../../api/api';
+import { Product } from '../../../shared/shareddtypes';
+import { MemoryRouter } from 'react-router-dom';
+
+
+const fakeProd: Product = {} as Product;
+const productsList = [
+  {
+    "id": "prod1",
+    "name": "bmw",
+    "description": "best car ever",
+    "price": 30,
+    "image": "",
+    "category": "",
+    "reviews": [],
+    "quantity": 2,
+    "product": fakeProd,
+    "_id": "prod1"
+
+  }, {
+    "id": "prod2",
+    "name": "nissan",
+    "description": "nissan good",
+    "price": 20,
+    "image": "",
+    "category": "",
+    "reviews": [],
+    "quantity": 2,
+    "product": fakeProd,
+    "_id": "prod2",
+    "color": "yellow"
+  },
+];
+
+test("Filter is rendered properly", async () => {
+  jest.spyOn(api, "getProductImages").mockImplementation((_id: string): Promise<string[]> => {
+    return Promise.resolve(["1"]);
+  });
+  //The products are retrieved from the getProducts method of the API. 
+  jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve([]));
+  render(<MemoryRouter><MainProducts refreshCartList={() => {
+    //intentional for testing purposes
+  }} /> </MemoryRouter>);
+
+  expect(screen.getByText('Loading products!!')).toBeInTheDocument();
+  let filter = screen.getByTestId("openFilterBtn");
+  expect(filter).toBeInTheDocument();
+  fireEvent.click(filter);
+  // eslint-disable-next-line testing-library/prefer-find-by
+  await waitFor(() => expect(screen.getByTestId("drawer-filter")).toBeInTheDocument());
+  //wait time to load drawer
+  await new Promise((r) => setTimeout(r, 2000));
+  expect(screen.getByText('Color')).toBeInTheDocument();
+  expect(screen.getByText('Brand')).toBeInTheDocument();
+  expect(screen.getByText('Min Price')).toBeInTheDocument();
+  expect(screen.getByText('Max Price')).toBeInTheDocument();
+  expect(screen.getByText('Rating')).toBeInTheDocument();
+});
+
+test("When listing products the proper function is called", 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));
+
+  render(<MemoryRouter><MainProducts refreshCartList={() => {
+    //intentional for testing purposes
+   }} /> </MemoryRouter>);
+  //When we first render the component, it will make an API call to getProducts.
+  expect(screen.getByText('Loading products!!')).toBeInTheDocument();
+  //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();
+  expect(screen.getByText('nissan')).toBeInTheDocument();
+  expect(screen.getByAltText('nissan')).toBeInTheDocument();
+
+  expect(api.getProductImages).toHaveBeenCalledWith(productsList[0].id);
+  expect(api.getProductImages).toHaveBeenCalledWith(productsList[1].id);
+  expect(mockAPI).toHaveBeenCalledWith("");
+});
+
+
+

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

@@ -0,0 +1,19 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react';
+import { Review } from '../../../shared/shareddtypes';
+import ReviewView from '../ReviewView';
+const reviewTest: Review = {
+    userId: "dummy",
+    productId: "prod1",
+    rating: 5,
+    comment: "testing1",
+    orderId: "order1"
+}
+test("Review view is rendered properly", async () => {
+
+    render(<ReviewView review={reviewTest}></ReviewView>);
+    expect(screen.getByText('dummy')).toBeInTheDocument();
+    expect(screen.getByText('"testing1"')).toBeInTheDocument();
+
+
+});