Merge pull request #46 from RbAvci/Feature/orderType

NW6 | Fikret Ellek | React-Module-Project | Week-2 | orderType

src/components/Order/Order.jsx

@@ -1,15 +1,16 @@
 import RestaurantButton from "../RestaurantButton/RestaurantButton";
 import React, { useState } from "react";
+import "./Order.scss";
 
-export default function Order() {
+export default function Order({ orderType }) {
   const [orders, setOrders] = useState(0);
   const handleAddOrder = () => {
     setOrders(orders + 1);
   };
 
   return (
     <li className="restaurant__item">
-      Orders: {orders}
+      {orderType}: {orders}
       <RestaurantButton handleAddOrder={handleAddOrder} />
     </li>
   );

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;
+  }
+}

src/components/Restaurant/Restaurant.jsx

@@ -5,7 +5,9 @@ const Restaurant = () => {
     <section className="restaurant">
       <h3 className="restaurant__heading">Restaurant Orders</h3>
       <ul className="restaurant__list">
-        <Order />
+        <Order orderType="Pizzas" />
+        <Order orderType="Salads" />
+        <Order orderType="Chocolate cake" />
       </ul>
     </section>
   );

src/components/Restaurant/Restaurant.test.jsx

@@ -15,19 +15,23 @@ describe("Restaurant", () => {
 describe("Restaurant Component", () => {
   it("displays initial number of pizza 0", () => {
     render(<Restaurant />);
-    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(<Restaurant />);
 
-    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();
   });
 });

src/components/RestaurantButton/RestaurantButton.jsx

@@ -1,6 +1,6 @@
 export default function RestaurantButton({ handleAddOrder }) {
   return (
-    <button className="button restaurant__button" onClick={handleAddOrder}>
+    <button data-testid="addButton" className="button restaurant__button" onClick={handleAddOrder}>
       Add
     </button>
   );