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

src/components/Order/Order.jsx

@@ -0,0 +1,17 @@
+import RestaurantButton from "../RestaurantButton/RestaurantButton";
+import React, { useState } from "react";
+import "./Order.scss";
+
+export default function Order({ orderType }) {
+  const [orders, setOrders] = useState(0);
+  const handleAddOrder = () => {
+    setOrders(orders + 1);
+  };
+
+  return (
+    <li className="restaurant__item">
+      {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

@@ -1,21 +1,13 @@
-import React, { useState } from "react";
+import Order from "../Order/Order";
 
 const Restaurant = () => {
-  const [orders, setOrders] = useState(0);
-  const handleAddOrder = () => {
-    setOrders(orders + 1);
-  };
-
   return (
     <section className="restaurant">
       <h3 className="restaurant__heading">Restaurant Orders</h3>
       <ul className="restaurant__list">
-        <li className="restaurant__item">
-          Orders: {orders}
-          <button className="button restaurant__button" onClick={handleAddOrder}>
-            Add
-          </button>
-        </li>
+        <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

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