Merge pull request #45 from RbAvci/Feature/Order

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

src/components/Order/Order.jsx

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

src/components/Order/Order.test.jsx

@@ -0,0 +1,23 @@
+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(<Order />);
+
+    const ordersText = screen.getByText("Orders: 0");
+
+    expect(ordersText).toBeInTheDocument();
+  });
+
+  it("button still increases the number of orders", () => {
+    render(<Order />);
+
+    const addButton = screen.getByText("Add");
+    fireEvent.click(addButton);
+    const updatedPizzaText = screen.getByText("Orders: 1");
+
+    expect(updatedPizzaText).toBeInTheDocument();
+  });
+});

src/components/Restaurant/Restaurant.jsx

@@ -1,21 +1,11 @@
-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 />
       </ul>
     </section>
   );

src/components/RestaurantButton/RestaurantButton.jsx

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