Tests for Footer and AboutUs (+ skeleton ListProduct)

webapp/src/components/About/AboutUs.test.tsx

@@ -0,0 +1,12 @@
+import AboutUs from "./AboutUs";
+import { render, screen} from "@testing-library/react";
+
+
+test('Check that everything is properly rendered', async () => {
+    render(<AboutUs/>);
+    expect(screen.getByText("About us")).toBeInTheDocument();
+    expect(screen.getByText("Developer team")).toBeInTheDocument();
+    expect(screen.getByText("Diego Martín Fernández")).toBeInTheDocument();
+    expect(screen.getByText("Laura Pernía Blanco")).toBeInTheDocument();
+    expect(screen.getByText("Stelian Adrian Stanci")).toBeInTheDocument();
+});

webapp/src/components/Footer/Footer.test.tsx

@@ -0,0 +1,17 @@
+import {fireEvent, render, screen} from "@testing-library/react";
+import App from "../../App"
+
+test('Check that everything in the footer is rendered', async () => {
+    render(<App/>);
+    expect(screen.getByText("Code")).toBeInTheDocument();
+    expect(screen.getByText("Documentation")).toBeInTheDocument();
+    expect(screen.getByText("About Us")).toBeInTheDocument();
+    expect(screen.getByText("SOLID")).toBeInTheDocument();
+});
+
+test('Check that About Us link works at takes the user to About us page', async () => {
+    render(<App/>);
+    let aboutUs = screen.getByTestId("aboutUsLink");
+    fireEvent.click(aboutUs);
+    expect(screen.getByText("Developer team")).toBeInTheDocument();
+});

webapp/src/components/Footer/Footer.tsx

@@ -69,7 +69,7 @@ const Footer = () => {
                     </Column>
                     <Column>
                         <Link to="/about">
-                        <FooterLink>About Us</FooterLink>
+                        <FooterLink data-testid="aboutUsLink">About Us</FooterLink>
                         </Link>
                     </Column>
                     <Column>

webapp/src/components/ListProducts.test.tsx

@@ -0,0 +1,21 @@
+import {ProductType} from "../shared/shareddtypes";
+import ListProducts from "./ListProducts";
+import {render, screen, waitForElementToBeRemoved} from "@testing-library/react";
+
+const testProductList:ProductType[] = [{id:1, name:"Watermelon", category:"Fruit", price:3.45,
+    image:"https://images.unsplash.com/photo-1629084092232-b7b3fa74cd4b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80",
+    description: "Rica sandia" },
+    {id:2, name:"Salmon", category:"Fish", price:5.55,
+        image:"https://images.unsplash.com/photo-1499125562588-29fb8a56b5d5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80",
+        description: "Salmon description" }
+];
+
+test("Check that products are correctly rendered", async () => {
+    ///////// We need to change the implementation of ListProduct
+    //jest.spyOn(api, "useFetch").mockReturnValue(Promise.resolve(testProductList));
+    //render(<ListProducts/>)
+
+    //await waitForElementToBeRemoved(() => screen.getByTestId('loadingProduct'));
+    //expect(screen.getByText("Watermelon - 3.45€")).toBeInTheDocument();
+    //expect(screen.getByText("Rica sandia")).toBeInTheDocument();
+});

webapp/src/shared/shareddtypes.ts

@@ -50,11 +50,10 @@ export type OrderProduct = {
 }
 
 export type RatingType = {
-
     user: string
     comment: string
     rating: number
-    profileImage: string
+    profileImage?: string
     product: ProductType
 }