From 1047bc33533a11d6c4a85197856a595f5364b418 Mon Sep 17 00:00:00 2001 From: UO258220 Date: Thu, 28 Apr 2022 23:46:02 +0200 Subject: [PATCH 01/11] Shopping Cart Tests - 91% --- webapp/src/App.tsx | 6 +- webapp/src/components/cart/ShoppingCart.tsx | 14 +- .../src/components/cart/tests/Cart.test.tsx | 143 ++++++++++++++++++ 3 files changed, 145 insertions(+), 18 deletions(-) create mode 100644 webapp/src/components/cart/tests/Cart.test.tsx diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index ee410f3..fc92b5a 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -4,7 +4,7 @@ import Header from './components/fragments/NavBar'; import Footer from './components/fragments/Footer'; import { ItemCart } from './shared/shareddtypes'; import './css/App.css'; -import { BrowserRouter as Router, Routes, Route, useSearchParams } from 'react-router-dom'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import AboutUs from "./components/other/about_us" import SOLIDLogin from "./components/user/SOLIDLogin"; @@ -15,7 +15,6 @@ import Shipping from './components/checkout-shipping/Shipping'; import MainProducts from './components/products/MainProducts'; import ProductPage from './components/products/ProductPage'; - import ShoppingCart from './components/cart/ShoppingCart'; import Checkout from './components/checkout-shipping/Checkout'; import AdminView from './components/administrator/AdminView'; @@ -30,9 +29,6 @@ function App(): JSX.Element { const [cart, setCart] = useState([]); - - - const refreshCartList = () => { setCart(getCart()); } diff --git a/webapp/src/components/cart/ShoppingCart.tsx b/webapp/src/components/cart/ShoppingCart.tsx index 650b66b..1bcb847 100644 --- a/webapp/src/components/cart/ShoppingCart.tsx +++ b/webapp/src/components/cart/ShoppingCart.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react'; import { ItemCart, Product } from "../../shared/shareddtypes"; -import { addToCart, deleteFromCart, getCart } from '../../api/api'; +import { deleteFromCart, getCart } from '../../api/api'; import Typography from "@mui/material/Typography"; import Stack from "@mui/material/Stack"; @@ -19,10 +19,6 @@ const Img = display: "block" }); -function addProduct(product: Product): void { - addToCart({ product: product, quantity: 1 }); -} - function ShoppingCart(props: ShoppingCartProps): JSX.Element { const [total, setTotal] = useState(0); @@ -62,19 +58,13 @@ function ShoppingCart(props: ShoppingCartProps): JSX.Element { temp.forEach(item => { props.items.push(item); }); - } - - useEffect(() => { setTotal(props.items.reduce((acc, item) => acc + item.product.price * item.quantity, 0)); }, [props.items]); - - - function loadItems(): JSX.Element { if (props.items.length === 0) { @@ -132,8 +122,6 @@ function ShoppingCart(props: ShoppingCartProps): JSX.Element { - - diff --git a/webapp/src/components/cart/tests/Cart.test.tsx b/webapp/src/components/cart/tests/Cart.test.tsx new file mode 100644 index 0000000..2801cc3 --- /dev/null +++ b/webapp/src/components/cart/tests/Cart.test.tsx @@ -0,0 +1,143 @@ +import { fireEvent, render } from "@testing-library/react"; +import { BrowserRouter as Router } from "react-router-dom"; +import ShoppingCart from "../ShoppingCart"; +import { ItemCart, Product } from "../../../shared/shareddtypes"; +import { act } from "react-dom/test-utils"; + +/** + * Test that the shopping cart is rendered correctly + * when empty + */ +test("Cart empty is rendered correctly", async() => { + const itemCarts: ItemCart[] = []; + const doNothing = () => {}; + + const { getByText } = render ( + + + + ) + + // The expected messages + expect(getByText("Shopping cart")).toBeInTheDocument(); + expect(getByText("The shopping cart is empty")).toBeInTheDocument(); + // The total ammount must be 0 + expect(getByText("0.00 €")).toBeInTheDocument(); +}); + +/** + * Test that the shopping cart is rendered correctly + * when containing several products + */ + test("Cart with products is rendered correctly", async() => { + + const fakeProd: Product = {} as Product; + const itemCarts: ItemCart[] = [ + { + product: { + id: "1234", + name: "P1", + description: "P1 description", + price: 0.1, + image: "", + category: "Testing", + reviews: [], + product: fakeProd, + _id: "1234", + quantity: 2 + }, + quantity: 2 + }, + { + product: { + id: "4321", + name: "P2", + description: "P2 description", + price: 6.7, + image: "", + category: "Testing", + reviews: [], + product: fakeProd, + _id: "4321", + quantity: 1 + }, + quantity: 1 + } + ]; + const doNothing = () => {}; + + const { getByText } = render ( + + + + ) + + // The expected messages + expect(getByText("Shopping cart")).toBeInTheDocument(); + expect(getByText("P1 description")).toBeInTheDocument(); + expect(getByText("P2 description")).toBeInTheDocument(); + + // The total ammount must be 0.1 * 2 + 6.7 = 6.9 + expect(getByText("6.90 €")).toBeInTheDocument(); +}); + +/** + * Test that the shopping cart is rendered correctly + * after some or all of the items are deleted + */ + test("Cart can have its products deleted", async() => { + const fakeProd: Product = {} as Product; + const itemCarts: ItemCart[] = [ + { + product: { + id: "1234", + name: "P1", + description: "P1 description", + price: 0.5, + image: "", + category: "Testing", + reviews: [], + product: fakeProd, + _id: "1234", + quantity: 2 + }, + quantity: 2 + } + ]; + const doNothing = () => {}; + + const { getByText } = render ( + + + + ) + + // The initial total ammount must be 0.5 * 2 = 1.0 + expect(getByText("1.00 €")).toBeInTheDocument(); + + expect(getByText("P1 description")).toBeInTheDocument(); + fireEvent.click(getByText("-")); + + // The product should still be there, and ammount should update + expect(getByText("P1 description")).toBeInTheDocument(); + expect(getByText("0.5 €")).toBeInTheDocument(); + + // Reduce quantity should be disabled (quantity = 1) + expect(getByText("-")).toBeDisabled(); + + act(() => { + fireEvent.click(getByText("Delete")); + }); + + // The product should no longer be there + expect(getByText("1.00 €")).toBeInTheDocument(); +}); \ No newline at end of file From f1064bf2b0b957417a740c62d53be9e96ab6bc36 Mon Sep 17 00:00:00 2001 From: Daniel Date: Sat, 30 Apr 2022 19:10:46 +0200 Subject: [PATCH 02/11] Fix shopping cart product image not updating --- webapp/src/components/cart/CartItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/components/cart/CartItem.tsx b/webapp/src/components/cart/CartItem.tsx index 9d700e7..bf0e2ef 100644 --- a/webapp/src/components/cart/CartItem.tsx +++ b/webapp/src/components/cart/CartItem.tsx @@ -35,7 +35,7 @@ function CartItem(props: CartItemProps) { useEffect(() => { setQuantity(props.item.quantity); getImage(); - }, [props.item.quantity]); + }, [props.item]); From 4250d7f270e02515926191736159d90ee45ac534 Mon Sep 17 00:00:00 2001 From: Daniel Date: Sat, 30 Apr 2022 19:10:46 +0200 Subject: [PATCH 03/11] Revert "Fix shopping cart product image not updating" This reverts commit f1064bf2b0b957417a740c62d53be9e96ab6bc36. --- webapp/src/components/cart/CartItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/components/cart/CartItem.tsx b/webapp/src/components/cart/CartItem.tsx index bf0e2ef..9d700e7 100644 --- a/webapp/src/components/cart/CartItem.tsx +++ b/webapp/src/components/cart/CartItem.tsx @@ -35,7 +35,7 @@ function CartItem(props: CartItemProps) { useEffect(() => { setQuantity(props.item.quantity); getImage(); - }, [props.item]); + }, [props.item.quantity]); From 70dc435a0978b4bf62eeda721bdd6495b6ac7530 Mon Sep 17 00:00:00 2001 From: Daniel Date: Sun, 1 May 2022 20:19:27 +0200 Subject: [PATCH 04/11] Partial fix of shopping cart bug --- webapp/src/components/cart/CartItem.tsx | 4 +- webapp/src/components/cart/ShoppingCart.tsx | 49 +++++---------------- webapp/src/css/CartItem.css | 2 +- 3 files changed, 15 insertions(+), 40 deletions(-) diff --git a/webapp/src/components/cart/CartItem.tsx b/webapp/src/components/cart/CartItem.tsx index 9d700e7..c912544 100644 --- a/webapp/src/components/cart/CartItem.tsx +++ b/webapp/src/components/cart/CartItem.tsx @@ -35,14 +35,14 @@ function CartItem(props: CartItemProps) { useEffect(() => { setQuantity(props.item.quantity); getImage(); - }, [props.item.quantity]); + }, [props.item.product.image]); return ( //
- + {props.item.product.name}
diff --git a/webapp/src/components/cart/ShoppingCart.tsx b/webapp/src/components/cart/ShoppingCart.tsx index c6c0f50..85714d7 100644 --- a/webapp/src/components/cart/ShoppingCart.tsx +++ b/webapp/src/components/cart/ShoppingCart.tsx @@ -26,52 +26,25 @@ function addProduct(product: Product): void { function ShoppingCart(props: ShoppingCartProps): JSX.Element { const [total, setTotal] = useState(0); - + const updateTotal = async () => { - let cart = await getCart(); + let cart = getCart(); setTotal(cart.reduce((acc, item) => acc + item.product.price * item.quantity, 0)); }; + const deleteItem = async (product: Product) => { - await deleteFromCart(product.id); - updateTotal(); - //set props.items to the new items - let i = props.items.findIndex(item => item.product.id === product.id); - if (i >= 0) { - delete props.items[i]; - reorganizeProps(); - } - - props.refreshCartList(); - }; - - - function reorganizeProps(): void { - let temp: ItemCart[] = []; - - //copy all non empty elements - props.items.forEach(item => { - if (item != undefined) - temp.push(item); - }); - - //empty props.items - props.items.length = 0; - - //copy back to props.items - temp.forEach(item => { - props.items.push(item); + deleteFromCart(product.id).then(() => { + updateTotal(); + props.refreshCartList(); }); - - } - + }; + useEffect(() => { setTotal(props.items.reduce((acc, item) => acc + item.product.price * item.quantity, 0)); - }, [props.items]); - - + }, []); @@ -85,7 +58,9 @@ function ShoppingCart(props: ShoppingCartProps): JSX.Element { ); } else { - //console.log("Length: " + props.items.length) + + console.log("Length: " + props.items.length) + console.log(props.items); let res = props.items.map((item: ItemCart) => { if (item !== null && item.quantity > 0) { return diff --git a/webapp/src/css/CartItem.css b/webapp/src/css/CartItem.css index 8c6bb7a..7ead95a 100644 --- a/webapp/src/css/CartItem.css +++ b/webapp/src/css/CartItem.css @@ -1,5 +1,5 @@ @media(min-width: 601px) { - #card-item { + .card-item { display: grid; grid-template-columns: 1fr 2fr; align-items: left; From 16f1459a482cbb8707968e885d0eeeed9bb82dea Mon Sep 17 00:00:00 2001 From: UO258220 Date: Sun, 1 May 2022 23:01:41 +0200 Subject: [PATCH 05/11] merged local test branch with webapp-tests --- webapp/src/components/cart/CartItem.tsx | 3 +- .../src/components/cart/tests/Cart.test.tsx | 1 + .../components/cart/tests/CartItem.test.tsx | 101 ++++++++++++++++ .../products/tests/ProductCard.test.tsx | 111 ++++++++++++++++++ .../products/tests/ProductPage.test.tsx | 23 ++++ 5 files changed, 237 insertions(+), 2 deletions(-) create mode 100644 webapp/src/components/cart/tests/CartItem.test.tsx create mode 100644 webapp/src/components/products/tests/ProductCard.test.tsx create mode 100644 webapp/src/components/products/tests/ProductPage.test.tsx diff --git a/webapp/src/components/cart/CartItem.tsx b/webapp/src/components/cart/CartItem.tsx index 9d700e7..24a16b1 100644 --- a/webapp/src/components/cart/CartItem.tsx +++ b/webapp/src/components/cart/CartItem.tsx @@ -1,13 +1,12 @@ import { useState, useEffect } from 'react'; import { ItemCart, Product } from "../../shared/shareddtypes"; import { addToCart, baseApiEndPoint, getProductImages } from '../../api/api'; - import Typography from "@mui/material/Typography"; - import Button from "@mui/material/Button"; import { Card } from "@mui/material"; import DeleteIcon from '@mui/icons-material/Delete'; import './../../css/CartItem.css' + type CartItemProps = { item: ItemCart; updateTotal: () => void; diff --git a/webapp/src/components/cart/tests/Cart.test.tsx b/webapp/src/components/cart/tests/Cart.test.tsx index 2801cc3..eedd9f5 100644 --- a/webapp/src/components/cart/tests/Cart.test.tsx +++ b/webapp/src/components/cart/tests/Cart.test.tsx @@ -24,6 +24,7 @@ test("Cart empty is rendered correctly", async() => { // The expected messages expect(getByText("Shopping cart")).toBeInTheDocument(); expect(getByText("The shopping cart is empty")).toBeInTheDocument(); + // The total ammount must be 0 expect(getByText("0.00 €")).toBeInTheDocument(); }); diff --git a/webapp/src/components/cart/tests/CartItem.test.tsx b/webapp/src/components/cart/tests/CartItem.test.tsx new file mode 100644 index 0000000..7b2a53a --- /dev/null +++ b/webapp/src/components/cart/tests/CartItem.test.tsx @@ -0,0 +1,101 @@ +import { fireEvent, render } from "@testing-library/react"; +import { BrowserRouter as Router } from "react-router-dom"; +import { ItemCart, Product } from "../../../shared/shareddtypes"; +import CartItem from "../CartItem"; + +/** + * Test that the item cart is rendered correctly + * from a product + */ + test("CartItem is rendered correctly", async() => { + + const fakeProd: Product = {} as Product; + const item: ItemCart = { + product: { + id: "1111", + name: "P1", + description: "P1 description", + price: 0.1, + image: "", + category: "Testing", + reviews: [], + product: fakeProd, + _id: "1111", + quantity: 53 + }, + quantity: 53 // Intentionally high to check + }; + const doNothing = () => {}; + const dontDelete = (product: Product) => {}; + + const { getByText } = render ( + + + + ); + + expect(getByText("P1")).toBeInTheDocument(); + expect(getByText("P1 description")).toBeInTheDocument(); + expect(getByText("53")).toBeInTheDocument(); + expect(getByText("+")).toBeInTheDocument(); + expect(getByText("-")).toBeInTheDocument(); + expect(getByText("Delete")).toBeInTheDocument(); +}); + +/** + * Test that the item cart quantity updates correctly + */ + test("CartItem can have quantity modified", async() => { + + const fakeProd: Product = {} as Product; + const item: ItemCart = { + product: { + id: "1111", + name: "P1", + description: "P1 description", + price: 0.1, + image: "", + category: "Testing", + reviews: [], + product: fakeProd, + _id: "1234", + quantity: 53 + }, + quantity: 53 // Intentionally high to check + }; + const doNothing = () => {}; + const dontDelete = (product: Product) => {}; + + const { getByText } = render ( + + + + ) + + expect(getByText("53")).toBeInTheDocument(); + + // Decrease quantity by 3 + fireEvent.click(getByText("-")); + fireEvent.click(getByText("-")); + fireEvent.click(getByText("-")); + + // Should be 50 units now + expect(getByText("50")).toBeInTheDocument(); + + // Increase quantity by 2 + fireEvent.click(getByText("+")); + fireEvent.click(getByText("+")); + + // Should be 52 units now + expect(getByText("52")).toBeInTheDocument(); +}); \ No newline at end of file diff --git a/webapp/src/components/products/tests/ProductCard.test.tsx b/webapp/src/components/products/tests/ProductCard.test.tsx new file mode 100644 index 0000000..ee22e87 --- /dev/null +++ b/webapp/src/components/products/tests/ProductCard.test.tsx @@ -0,0 +1,111 @@ +import { fireEvent, render } from "@testing-library/react"; +import { BrowserRouter as Router } from "react-router-dom"; +import { ItemCart, Product } from "../../../shared/shareddtypes"; +import { act } from "react-dom/test-utils"; +import ProductCard from "../ProductCard"; + +/** + * Test that the product card can be rendered without errors + */ + test("ProductCard is rendered correctly", async() => { + + const fakeProd: Product = {} as Product; + const prod: Product = { + id: "5555", + name: "Realistically long name", + description: "P1 description", + price: 88.8, + image: "", + category: "Testing", + reviews: [], + product: fakeProd, + _id: "5555", + quantity: 0 + }; + const doNothing = () => {}; + + const { getByText } = render ( + + + + ); + + // ALL the expected elements appear in the card + expect(getByText("Realistically long name")).toBeInTheDocument(); + expect(getByText("88.8€")).toBeInTheDocument(); + expect(getByText("Add to cart")).toBeInTheDocument(); +}); + +/** + * Test that the product card can be rendered without errors + */ + test("ProductCard is rendered correctly", async() => { + + const fakeProd: Product = {} as Product; + const prod: Product = { + id: "5555", + name: "Realistically long name", + description: "My description", + price: 88.8, + image: "", + category: "Testing", + reviews: [], + product: fakeProd, + _id: "5555", + quantity: 0 + }; + const doNothing = () => {}; + + const { getByText } = render ( + + + + ); + + // ALL the expected elements appear in the card + expect(getByText("Realistically long name")).toBeInTheDocument(); + expect(getByText("88.8€")).toBeInTheDocument(); + expect(getByText("Add to cart")).toBeInTheDocument(); +}); + +/** + * Test that the product's actions don't crash + */ + test("ProductCard handles adding", async() => { + + const fakeProd: Product = {} as Product; + const prod: Product = { + id: "5555", + name: "P0", + description: "P0 description", + price: 88.8, + image: "", + category: "Testing", + reviews: [], + product: fakeProd, + _id: "5555", + quantity: 0 + }; + const spyable = jest.fn(); + + const { getByText } = render ( + + + + ); + + // Should call the provided funtion and stay in page + fireEvent.click(getByText("Add to cart")); + expect(spyable).toHaveBeenCalled(); + // Should change page (mockup doesn't) + fireEvent.click(getByText("P0")); +}); \ No newline at end of file diff --git a/webapp/src/components/products/tests/ProductPage.test.tsx b/webapp/src/components/products/tests/ProductPage.test.tsx new file mode 100644 index 0000000..005334a --- /dev/null +++ b/webapp/src/components/products/tests/ProductPage.test.tsx @@ -0,0 +1,23 @@ +import { render } from "@testing-library/react"; +import { BrowserRouter as Router } from "react-router-dom"; +import { ItemCart, Product } from "../../../shared/shareddtypes"; +import ProductPage from "../ProductPage"; + +/** + * Test product page is able to render without errors + */ + test("ProductPage is rendered correctly", async() => { + + const doNothing = () => {}; + + //const { getByText } = + render ( + + + + ); + + // Without access to the state, loading behaviour +}); \ No newline at end of file From 13c715e86f70f54225ab8a81ce9a5864fd82a87c Mon Sep 17 00:00:00 2001 From: UO258220 Date: Sun, 1 May 2022 23:11:38 +0200 Subject: [PATCH 06/11] Refactor donothing for sonarcloud --- webapp/src/components/cart/tests/Cart.test.tsx | 7 +++---- webapp/src/components/cart/tests/CartItem.test.tsx | 7 +++---- webapp/src/components/products/tests/ProductCard.test.tsx | 7 +++---- webapp/src/components/products/tests/ProductPage.test.tsx | 1 - 4 files changed, 9 insertions(+), 13 deletions(-) diff --git a/webapp/src/components/cart/tests/Cart.test.tsx b/webapp/src/components/cart/tests/Cart.test.tsx index eedd9f5..41f793a 100644 --- a/webapp/src/components/cart/tests/Cart.test.tsx +++ b/webapp/src/components/cart/tests/Cart.test.tsx @@ -4,13 +4,14 @@ import ShoppingCart from "../ShoppingCart"; import { ItemCart, Product } from "../../../shared/shareddtypes"; import { act } from "react-dom/test-utils"; +const doNothing = () => {}; + /** * Test that the shopping cart is rendered correctly * when empty */ test("Cart empty is rendered correctly", async() => { const itemCarts: ItemCart[] = []; - const doNothing = () => {}; const { getByText } = render ( @@ -24,7 +25,7 @@ test("Cart empty is rendered correctly", async() => { // The expected messages expect(getByText("Shopping cart")).toBeInTheDocument(); expect(getByText("The shopping cart is empty")).toBeInTheDocument(); - + // The total ammount must be 0 expect(getByText("0.00 €")).toBeInTheDocument(); }); @@ -68,7 +69,6 @@ test("Cart empty is rendered correctly", async() => { quantity: 1 } ]; - const doNothing = () => {}; const { getByText } = render ( @@ -111,7 +111,6 @@ test("Cart empty is rendered correctly", async() => { quantity: 2 } ]; - const doNothing = () => {}; const { getByText } = render ( diff --git a/webapp/src/components/cart/tests/CartItem.test.tsx b/webapp/src/components/cart/tests/CartItem.test.tsx index 7b2a53a..0692280 100644 --- a/webapp/src/components/cart/tests/CartItem.test.tsx +++ b/webapp/src/components/cart/tests/CartItem.test.tsx @@ -3,6 +3,9 @@ import { BrowserRouter as Router } from "react-router-dom"; import { ItemCart, Product } from "../../../shared/shareddtypes"; import CartItem from "../CartItem"; +const doNothing = () => {}; +const dontDelete = (product: Product) => {}; + /** * Test that the item cart is rendered correctly * from a product @@ -25,8 +28,6 @@ import CartItem from "../CartItem"; }, quantity: 53 // Intentionally high to check }; - const doNothing = () => {}; - const dontDelete = (product: Product) => {}; const { getByText } = render ( @@ -68,8 +69,6 @@ import CartItem from "../CartItem"; }, quantity: 53 // Intentionally high to check }; - const doNothing = () => {}; - const dontDelete = (product: Product) => {}; const { getByText } = render ( diff --git a/webapp/src/components/products/tests/ProductCard.test.tsx b/webapp/src/components/products/tests/ProductCard.test.tsx index ee22e87..5d707a2 100644 --- a/webapp/src/components/products/tests/ProductCard.test.tsx +++ b/webapp/src/components/products/tests/ProductCard.test.tsx @@ -1,9 +1,10 @@ import { fireEvent, render } from "@testing-library/react"; import { BrowserRouter as Router } from "react-router-dom"; -import { ItemCart, Product } from "../../../shared/shareddtypes"; -import { act } from "react-dom/test-utils"; +import { Product } from "../../../shared/shareddtypes"; import ProductCard from "../ProductCard"; +const doNothing = () => {}; + /** * Test that the product card can be rendered without errors */ @@ -22,7 +23,6 @@ import ProductCard from "../ProductCard"; _id: "5555", quantity: 0 }; - const doNothing = () => {}; const { getByText } = render ( @@ -57,7 +57,6 @@ import ProductCard from "../ProductCard"; _id: "5555", quantity: 0 }; - const doNothing = () => {}; const { getByText } = render ( diff --git a/webapp/src/components/products/tests/ProductPage.test.tsx b/webapp/src/components/products/tests/ProductPage.test.tsx index 005334a..a45cfc1 100644 --- a/webapp/src/components/products/tests/ProductPage.test.tsx +++ b/webapp/src/components/products/tests/ProductPage.test.tsx @@ -1,6 +1,5 @@ import { render } from "@testing-library/react"; import { BrowserRouter as Router } from "react-router-dom"; -import { ItemCart, Product } from "../../../shared/shareddtypes"; import ProductPage from "../ProductPage"; /** From bd522e60f4e332a2faa98e649755bf2af44ec60e Mon Sep 17 00:00:00 2001 From: UO258220 Date: Sun, 1 May 2022 23:22:42 +0200 Subject: [PATCH 07/11] more refactoring... --- .../src/components/cart/tests/Cart.test.tsx | 16 +++--- .../components/cart/tests/CartItem.test.tsx | 27 +++++----- .../products/tests/ProductCard.test.tsx | 49 +++---------------- 3 files changed, 27 insertions(+), 65 deletions(-) diff --git a/webapp/src/components/cart/tests/Cart.test.tsx b/webapp/src/components/cart/tests/Cart.test.tsx index 41f793a..039fc08 100644 --- a/webapp/src/components/cart/tests/Cart.test.tsx +++ b/webapp/src/components/cart/tests/Cart.test.tsx @@ -5,14 +5,15 @@ import { ItemCart, Product } from "../../../shared/shareddtypes"; import { act } from "react-dom/test-utils"; const doNothing = () => {}; +const fakeProd: Product = {} as Product; /** * Test that the shopping cart is rendered correctly * when empty */ test("Cart empty is rendered correctly", async() => { + const itemCarts: ItemCart[] = []; - const { getByText } = render ( { */ test("Cart with products is rendered correctly", async() => { - const fakeProd: Product = {} as Product; const itemCarts: ItemCart[] = [ { product: { @@ -93,19 +93,18 @@ test("Cart empty is rendered correctly", async() => { * after some or all of the items are deleted */ test("Cart can have its products deleted", async() => { - const fakeProd: Product = {} as Product; const itemCarts: ItemCart[] = [ { product: { - id: "1234", - name: "P1", - description: "P1 description", + id: "9999", + name: "P0", + description: "P0 description", price: 0.5, image: "", category: "Testing", reviews: [], product: fakeProd, - _id: "1234", + _id: "9999", quantity: 2 }, quantity: 2 @@ -124,11 +123,10 @@ test("Cart empty is rendered correctly", async() => { // The initial total ammount must be 0.5 * 2 = 1.0 expect(getByText("1.00 €")).toBeInTheDocument(); - expect(getByText("P1 description")).toBeInTheDocument(); fireEvent.click(getByText("-")); // The product should still be there, and ammount should update - expect(getByText("P1 description")).toBeInTheDocument(); + expect(getByText("P0 description")).toBeInTheDocument(); expect(getByText("0.5 €")).toBeInTheDocument(); // Reduce quantity should be disabled (quantity = 1) diff --git a/webapp/src/components/cart/tests/CartItem.test.tsx b/webapp/src/components/cart/tests/CartItem.test.tsx index 0692280..832f989 100644 --- a/webapp/src/components/cart/tests/CartItem.test.tsx +++ b/webapp/src/components/cart/tests/CartItem.test.tsx @@ -3,6 +3,7 @@ import { BrowserRouter as Router } from "react-router-dom"; import { ItemCart, Product } from "../../../shared/shareddtypes"; import CartItem from "../CartItem"; +const fakeProd: Product = {} as Product; const doNothing = () => {}; const dontDelete = (product: Product) => {}; @@ -12,21 +13,20 @@ const dontDelete = (product: Product) => {}; */ test("CartItem is rendered correctly", async() => { - const fakeProd: Product = {} as Product; const item: ItemCart = { product: { - id: "1111", - name: "P1", - description: "P1 description", - price: 0.1, + id: "2222", + name: "ProductName", + description: "Productdescription", + price: 0.3, image: "", category: "Testing", reviews: [], product: fakeProd, - _id: "1111", - quantity: 53 + _id: "2222", + quantity: 9 }, - quantity: 53 // Intentionally high to check + quantity: 9 }; const { getByText } = render ( @@ -40,9 +40,9 @@ const dontDelete = (product: Product) => {}; ); - expect(getByText("P1")).toBeInTheDocument(); - expect(getByText("P1 description")).toBeInTheDocument(); - expect(getByText("53")).toBeInTheDocument(); + expect(getByText("ProductName")).toBeInTheDocument(); + expect(getByText("Productdescription")).toBeInTheDocument(); + expect(getByText("9")).toBeInTheDocument(); expect(getByText("+")).toBeInTheDocument(); expect(getByText("-")).toBeInTheDocument(); expect(getByText("Delete")).toBeInTheDocument(); @@ -53,10 +53,9 @@ const dontDelete = (product: Product) => {}; */ test("CartItem can have quantity modified", async() => { - const fakeProd: Product = {} as Product; const item: ItemCart = { product: { - id: "1111", + id: "3333", name: "P1", description: "P1 description", price: 0.1, @@ -64,7 +63,7 @@ const dontDelete = (product: Product) => {}; category: "Testing", reviews: [], product: fakeProd, - _id: "1234", + _id: "3333", quantity: 53 }, quantity: 53 // Intentionally high to check diff --git a/webapp/src/components/products/tests/ProductCard.test.tsx b/webapp/src/components/products/tests/ProductCard.test.tsx index 5d707a2..5af7af0 100644 --- a/webapp/src/components/products/tests/ProductCard.test.tsx +++ b/webapp/src/components/products/tests/ProductCard.test.tsx @@ -3,6 +3,7 @@ import { BrowserRouter as Router } from "react-router-dom"; import { Product } from "../../../shared/shareddtypes"; import ProductCard from "../ProductCard"; +const fakeProd: Product = {} as Product; const doNothing = () => {}; /** @@ -10,45 +11,10 @@ const doNothing = () => {}; */ test("ProductCard is rendered correctly", async() => { - const fakeProd: Product = {} as Product; const prod: Product = { id: "5555", name: "Realistically long name", - description: "P1 description", - price: 88.8, - image: "", - category: "Testing", - reviews: [], - product: fakeProd, - _id: "5555", - quantity: 0 - }; - - const { getByText } = render ( - - - - ); - - // ALL the expected elements appear in the card - expect(getByText("Realistically long name")).toBeInTheDocument(); - expect(getByText("88.8€")).toBeInTheDocument(); - expect(getByText("Add to cart")).toBeInTheDocument(); -}); - -/** - * Test that the product card can be rendered without errors - */ - test("ProductCard is rendered correctly", async() => { - - const fakeProd: Product = {} as Product; - const prod: Product = { - id: "5555", - name: "Realistically long name", - description: "My description", + description: "Any description", price: 88.8, image: "", category: "Testing", @@ -78,9 +44,8 @@ const doNothing = () => {}; */ test("ProductCard handles adding", async() => { - const fakeProd: Product = {} as Product; - const prod: Product = { - id: "5555", + const prd: Product = { + id: "7777", name: "P0", description: "P0 description", price: 88.8, @@ -88,15 +53,15 @@ const doNothing = () => {}; category: "Testing", reviews: [], product: fakeProd, - _id: "5555", - quantity: 0 + _id: "7777", + quantity: 1 }; const spyable = jest.fn(); const { getByText } = render ( From a12a8b5f4b093864db4d054b8fa251ba862091a1 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Sun, 1 May 2022 23:57:21 +0200 Subject: [PATCH 08/11] Removing code smell on doNothing cart test --- webapp/src/components/cart/tests/Cart.test.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/webapp/src/components/cart/tests/Cart.test.tsx b/webapp/src/components/cart/tests/Cart.test.tsx index 039fc08..26ef45f 100644 --- a/webapp/src/components/cart/tests/Cart.test.tsx +++ b/webapp/src/components/cart/tests/Cart.test.tsx @@ -4,7 +4,9 @@ import ShoppingCart from "../ShoppingCart"; import { ItemCart, Product } from "../../../shared/shareddtypes"; import { act } from "react-dom/test-utils"; -const doNothing = () => {}; +const doNothing = () => { + //this is intentional for testing purposes. We won't be using a proper refreshCarList so we'll pass this empty function. to the component +}; const fakeProd: Product = {} as Product; /** From 6de21ff88de862eefad5ce48b9259c68398c7948 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Mon, 2 May 2022 00:12:42 +0200 Subject: [PATCH 09/11] Removing code smells 'empty arrow function' --- webapp/src/components/cart/tests/CartItem.test.tsx | 8 ++++++-- webapp/src/components/products/tests/ProductCard.test.tsx | 4 +++- webapp/src/components/products/tests/ProductPage.test.tsx | 4 +++- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/webapp/src/components/cart/tests/CartItem.test.tsx b/webapp/src/components/cart/tests/CartItem.test.tsx index 832f989..d7e6e4e 100644 --- a/webapp/src/components/cart/tests/CartItem.test.tsx +++ b/webapp/src/components/cart/tests/CartItem.test.tsx @@ -4,8 +4,12 @@ import { ItemCart, Product } from "../../../shared/shareddtypes"; import CartItem from "../CartItem"; const fakeProd: Product = {} as Product; -const doNothing = () => {}; -const dontDelete = (product: Product) => {}; +const doNothing = () => { + //this is intentional. For testing purposes we pass an empty function +}; +const dontDelete = (_product: Product) => { + //this is intentional. For testing purposes we pass an empty function +}; /** * Test that the item cart is rendered correctly diff --git a/webapp/src/components/products/tests/ProductCard.test.tsx b/webapp/src/components/products/tests/ProductCard.test.tsx index 5af7af0..ffb9a35 100644 --- a/webapp/src/components/products/tests/ProductCard.test.tsx +++ b/webapp/src/components/products/tests/ProductCard.test.tsx @@ -4,7 +4,9 @@ import { Product } from "../../../shared/shareddtypes"; import ProductCard from "../ProductCard"; const fakeProd: Product = {} as Product; -const doNothing = () => {}; +const doNothing = () => { + //this is intentional +}; /** * Test that the product card can be rendered without errors diff --git a/webapp/src/components/products/tests/ProductPage.test.tsx b/webapp/src/components/products/tests/ProductPage.test.tsx index a45cfc1..1b86efb 100644 --- a/webapp/src/components/products/tests/ProductPage.test.tsx +++ b/webapp/src/components/products/tests/ProductPage.test.tsx @@ -7,7 +7,9 @@ import ProductPage from "../ProductPage"; */ test("ProductPage is rendered correctly", async() => { - const doNothing = () => {}; + const doNothing = () => { + //this is intentional + }; //const { getByText } = render ( From d68c3cf8e8be22e107ebfef70815cb8f71d1fb3f Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Mon, 2 May 2022 01:08:16 +0200 Subject: [PATCH 10/11] Fixing Cart Test when deleting+renaming of variables in order to try avoid duplicated code --- webapp/src/components/cart/CartItem.tsx | 4 +- .../src/components/cart/tests/Cart.test.tsx | 50 +++++++++---------- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/webapp/src/components/cart/CartItem.tsx b/webapp/src/components/cart/CartItem.tsx index caeb1de..18cc12d 100644 --- a/webapp/src/components/cart/CartItem.tsx +++ b/webapp/src/components/cart/CartItem.tsx @@ -41,7 +41,7 @@ function CartItem(props: CartItemProps) { return ( //
- + {props.item.product.name}
@@ -73,7 +73,7 @@ function CartItem(props: CartItemProps) { + -