Restaurant Menu Component Tests

Problem/Feature Description

A food-delivery app has a RestaurantMenu component that displays a restaurant's details and its available menu items. The component has existed in production for some time, but it has never had automated tests. The team has been bitten by regressions — a recent refactor changed a CSS class name and an internal state variable, silently breaking the UI without any test failures. The engineering team has decided to retroactively add tests to this component before the next release.

The component renders: the restaurant name as a heading, the cuisine category, a navigation section listing menu categories, and a list of dish items each showing the dish name and its price. The team wants tests that verify the content is rendered correctly and that would remain stable through internal refactors.

Output Specification

Write a test file RestaurantMenu.test.tsx that tests the RestaurantMenu component defined below. The tests should cover:

1. The restaurant name and cuisine type are rendered.
2. The list of menu categories is displayed.
3. The individual dish items (name and price) are rendered.

Do not modify the component source. Only write the test file.

Input Files

The following files are provided as inputs. Extract them before beginning.

=============== FILE: src/RestaurantMenu.tsx =============== import React from 'react';

interface Dish { id: number; name: string; price: number; }

interface Category { id: number; label: string; }

interface RestaurantMenuProps { restaurantName: string; cuisine: string; categories: Category[]; dishes: Dish[]; }

export function RestaurantMenu({ restaurantName, cuisine, categories, dishes, }: RestaurantMenuProps) { return ( <div className="restaurant-menu-container"> <header> <h1 className="restaurant-title">{restaurantName}</h1> <p className="cuisine-label">{cuisine}</p> </header>

<nav aria-label="Menu categories">
    <ul>
      {categories.map(cat => (
        <li key={cat.id}>{cat.label}</li>
      ))}
    </ul>
  </nav>

  <section aria-label="Dishes">
    <ul>
      {dishes.map(dish => (
        <li key={dish.id}>
          <span className="dish-name">{dish.name}</span>
          <span className="dish-price">${dish.price.toFixed(2)}</span>
        </li>
      ))}
    </ul>
  </section>
</div>

); }