NW6| Rabia Avci | React Module Project | Feature Restaurant-State - Week2

src/components/App/App.jsx

@@ -3,14 +3,14 @@ import "./App.scss";
 import AppHeader from "../AppHeader/AppHeader.jsx";
 import Card from "../Card/Card";
 import Footer from "../Footer/Footer";
-
-
+import Restaurant from "../Restaurant/Restaurant.jsx";
 
 const App = () => (
   <div className="app">
-    <AppHeader/>
+    <AppHeader />
     <Card title="Welcome to CYF Hotel" url="https://cyf-hotel.com" image="https://cyf-hotel.com/images/banner.jpg" />
     <Bookings />
+    <Restaurant />
     <Footer />
   </div>
 );

src/components/Restaurant/Restaurant.jsx

@@ -1,12 +1,20 @@
+import React, { useState } from "react";
+
 const Restaurant = () => {
-  const pizzas = 0;
+  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">
-          Pizzas: {pizzas}{" "}
-          <button className="button restaurant__button">Add</button>
+          Orders: {orders}
+          <button className="button restaurant__button" onClick={handleAddOrder}>
+            Add
+          </button>
         </li>
       </ul>
     </section>

src/components/Restaurant/Restaurant.test.jsx

@@ -1,6 +1,6 @@
 import Restaurant from "./Restaurant.jsx";
 import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 
 describe("Restaurant", () => {
   it("renders an Orders heading", () => {
@@ -11,3 +11,23 @@ describe("Restaurant", () => {
     expect(titleElement).toBeInTheDocument();
   });
 });
+
+describe("Restaurant Component", () => {
+  it("displays initial number of pizza 0", () => {
+    render(<Restaurant />);
+    const pizzaText = screen.getByText("Orders: 0");
+    expect(pizzaText).toBeInTheDocument();
+  });
+
+  it("increase number of pizzas when 'Add' button is clicked", () => {
+    render(<Restaurant />);
+
+    const addButton = screen.getByText("Add");
+
+    fireEvent.click(addButton);
+
+    const updatedPizzaText = screen.getByText("Orders: 1");
+
+    expect(updatedPizzaText).toBeInTheDocument();
+  });
+});