From 921fb86c681a1e789b5c81d9b742eefa0ea69271 Mon Sep 17 00:00:00 2001 From: fikretellek Date: Sat, 9 Mar 2024 01:30:26 +0000 Subject: [PATCH 1/5] New order components added, ordertype props passed to each order components --- src/components/Restaurant/Restaurant.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Restaurant/Restaurant.jsx b/src/components/Restaurant/Restaurant.jsx index 2a3a41a..5e24031 100644 --- a/src/components/Restaurant/Restaurant.jsx +++ b/src/components/Restaurant/Restaurant.jsx @@ -5,7 +5,9 @@ const Restaurant = () => {

Restaurant Orders

); From 10a654f8f5bfe1df8b509ed32d97128097dbe931 Mon Sep 17 00:00:00 2001 From: fikretellek Date: Sat, 9 Mar 2024 01:31:00 +0000 Subject: [PATCH 2/5] ordertype props passed to li element --- src/components/Order/Order.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Order/Order.jsx b/src/components/Order/Order.jsx index 19e409a..6ca7af2 100644 --- a/src/components/Order/Order.jsx +++ b/src/components/Order/Order.jsx @@ -1,7 +1,7 @@ import RestaurantButton from "../RestaurantButton/RestaurantButton"; import React, { useState } from "react"; -export default function Order() { +export default function Order({ orderType }) { const [orders, setOrders] = useState(0); const handleAddOrder = () => { setOrders(orders + 1); @@ -9,7 +9,7 @@ export default function Order() { return (
  • - Orders: {orders} + {orderType}: {orders}
    • ); From 1c231cf02b15fb666354fcfbddbdece74fcb84f0 Mon Sep 17 00:00:00 2001 From: fikretellek Date: Sat, 9 Mar 2024 01:44:17 +0000 Subject: [PATCH 3/5] tests updated, test id attribute added to component --- src/components/Restaurant/Restaurant.test.jsx | 18 +++++++++++------- .../RestaurantButton/RestaurantButton.jsx | 2 +- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/Restaurant/Restaurant.test.jsx b/src/components/Restaurant/Restaurant.test.jsx index dec0ad0..91ac341 100644 --- a/src/components/Restaurant/Restaurant.test.jsx +++ b/src/components/Restaurant/Restaurant.test.jsx @@ -15,19 +15,23 @@ describe("Restaurant", () => { describe("Restaurant Component", () => { it("displays initial number of pizza 0", () => { render(); - const pizzaText = screen.getByText("Orders: 0"); - expect(pizzaText).toBeInTheDocument(); + const text1 = screen.getByText("Pizzas: 0"); + const text2 = screen.getByText("Salads: 0"); + const text3 = screen.getByText("Chocolate cake: 0"); + + expect(text1, text2, text3).toBeInTheDocument(); }); it("increase number of pizzas when 'Add' button is clicked", () => { render(); - const addButton = screen.getByText("Add"); - - fireEvent.click(addButton); + const addButtons = screen.getAllByTestId("addButton"); + addButtons.map((addButton) => fireEvent.click(addButton)); - const updatedPizzaText = screen.getByText("Orders: 1"); + const updatedText1 = screen.getByText("Pizzas: 1"); + const updatedText2 = screen.getByText("Salads: 1"); + const updatedText3 = screen.getByText("Chocolate cake: 1"); - expect(updatedPizzaText).toBeInTheDocument(); + expect(updatedText1, updatedText2, updatedText3).toBeInTheDocument(); }); }); diff --git a/src/components/RestaurantButton/RestaurantButton.jsx b/src/components/RestaurantButton/RestaurantButton.jsx index 663a53d..29ad4a0 100644 --- a/src/components/RestaurantButton/RestaurantButton.jsx +++ b/src/components/RestaurantButton/RestaurantButton.jsx @@ -1,6 +1,6 @@ export default function RestaurantButton({ handleAddOrder }) { return ( - ); From 767ca951f7f8d0846e5144754b0a20b742f44c9c Mon Sep 17 00:00:00 2001 From: fikretellek Date: Sat, 9 Mar 2024 01:47:52 +0000 Subject: [PATCH 4/5] because of props order test is not useful anymore --- src/components/Order/Order.test.jsx | 23 ----------------------- 1 file changed, 23 deletions(-) delete mode 100644 src/components/Order/Order.test.jsx diff --git a/src/components/Order/Order.test.jsx b/src/components/Order/Order.test.jsx deleted file mode 100644 index 17c17a1..0000000 --- a/src/components/Order/Order.test.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import { describe, expect, it } from "vitest"; -import Order from "./Order"; -import { render, screen, fireEvent } from "@testing-library/react"; - -describe("Order", () => { - it("is still rendered on the page", () => { - render(); - - const ordersText = screen.getByText("Orders: 0"); - - expect(ordersText).toBeInTheDocument(); - }); - - it("button still increases the number of orders", () => { - render(); - - const addButton = screen.getByText("Add"); - fireEvent.click(addButton); - const updatedPizzaText = screen.getByText("Orders: 1"); - - expect(updatedPizzaText).toBeInTheDocument(); - }); -}); From d34c97ecf26e48868fe8d23bbd7ede24ba6c24e5 Mon Sep 17 00:00:00 2001 From: fikretellek Date: Sat, 9 Mar 2024 01:55:18 +0000 Subject: [PATCH 5/5] styling added to order component --- src/components/Order/Order.jsx | 1 + src/components/Order/Order.scss | 11 +++++++++++ 2 files changed, 12 insertions(+) create mode 100644 src/components/Order/Order.scss diff --git a/src/components/Order/Order.jsx b/src/components/Order/Order.jsx index 6ca7af2..9c38248 100644 --- a/src/components/Order/Order.jsx +++ b/src/components/Order/Order.jsx @@ -1,5 +1,6 @@ import RestaurantButton from "../RestaurantButton/RestaurantButton"; import React, { useState } from "react"; +import "./Order.scss"; export default function Order({ orderType }) { const [orders, setOrders] = useState(0); diff --git a/src/components/Order/Order.scss b/src/components/Order/Order.scss new file mode 100644 index 0000000..2b4bc3a --- /dev/null +++ b/src/components/Order/Order.scss @@ -0,0 +1,11 @@ +.restaurant__item { + width: 300px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + button { + margin-bottom: 5px; + } +}