Rezept-Browser

import {useState} from 'react';
import {recipes} from './recipes.js';
import {RecipeDetail} from './RecipeDetail.jsx';

// TODO: every tag once, sorted, without changing the recipes.
const TAGS = [];

// TODO: true when the title contains the query (trimmed, any case)
// and the recipe has the tag (null means any tag).
export function matches(recipe, query, tag) {
  return true;
}

export default function App() {
  const [query, setQuery] = useState('');
  // TODO: state for the chosen tag (null = All) and the selected recipe's id.
  const selected = recipes[0];

  return (
    <main>
      <h1>Recipe browser</h1>
      <label htmlFor="search">Search</label>
      <input id="search" type="search" value={query} onChange={(event) => setQuery(event.target.value)} />
      <div role="group" aria-label="Tags">
        <button type="button" aria-pressed={true}>
          All
        </button>
        {/* TODO: one button per tag in TAGS, with aria-pressed */}
      </div>
      <p>{recipes.length + ' recipes'}</p>
      {/* TODO: show only the matching recipes, "No recipes match." when none, and a stable key per item. */}
      <ul aria-label="Recipes">
        {recipes.map((recipe) => (
          <li>
            <button type="button">{recipe.title}</button>
          </li>
        ))}
      </ul>
      <RecipeDetail recipe={selected} />
    </main>
  );
}

// TODO: import useState and keep the chosen servings in state, starting at recipe.servings.

// TODO: at most two decimals, without trailing zeros: 83.333 -> "83.33", 0.5 -> "0.5".
export function formatAmount(amount) {
  return String(amount);
}

export function RecipeDetail({recipe}) {
  const servings = recipe.servings;

  return (
    <section aria-label={recipe.title}>
      <h2>{recipe.title}</h2>
      <p>{recipe.minutes} minutes</p>
      <p>
        <button type="button" aria-label="Fewer servings">
          -
        </button>{' '}
        <span>{servings + ' servings'}</span>{' '}
        <button type="button" aria-label="More servings">
          +
        </button>
      </p>
      {/* TODO: scale each amount by servings / recipe.servings. */}
      <ul aria-label="Ingredients">
        {recipe.ingredients.map((item) => (
          <li key={item.name}>{[formatAmount(item.amount), item.unit, item.name].filter(Boolean).join(' ')}</li>
        ))}
      </ul>
    </section>
  );
}

// The recipes the app shows. Amounts are for the recipe's own servings.
export const recipes = [
  {
    id: 'pancakes',
    title: 'Pancakes',
    tags: ['breakfast', 'sweet'],
    minutes: 25,
    servings: 4,
    ingredients: [
      {name: 'flour', amount: 200, unit: 'g'},
      {name: 'milk', amount: 300, unit: 'ml'},
      {name: 'eggs', amount: 2, unit: ''},
      {name: 'sugar', amount: 1, unit: 'tbsp'}
    ]
  },
  {
    id: 'tomato-soup',
    title: 'Tomato soup',
    tags: ['lunch', 'vegan'],
    minutes: 40,
    servings: 2,
    ingredients: [
      {name: 'tomatoes', amount: 800, unit: 'g'},
      {name: 'onion', amount: 1, unit: ''},
      {name: 'olive oil', amount: 2, unit: 'tbsp'}
    ]
  },
  {
    id: 'porridge',
    title: 'Porridge',
    tags: ['breakfast', 'vegan'],
    minutes: 10,
    servings: 1,
    ingredients: [
      {name: 'oats', amount: 50, unit: 'g'},
      {name: 'oat milk', amount: 250, unit: 'ml'}
    ]
  },
  {
    id: 'lentil-curry',
    title: 'Lentil curry',
    tags: ['dinner', 'vegan'],
    minutes: 35,
    servings: 3,
    ingredients: [
      {name: 'red lentils', amount: 250, unit: 'g'},
      {name: 'coconut milk', amount: 400, unit: 'ml'},
      {name: 'curry paste', amount: 2, unit: 'tbsp'}
    ]
  },
  {
    id: 'fruit-salad',
    title: 'Fruit salad',
    tags: ['sweet', 'vegan'],
    minutes: 15,
    servings: 6,
    ingredients: [
      {name: 'apples', amount: 2, unit: ''},
      {name: 'oranges', amount: 3, unit: ''},
      {name: 'grapes', amount: 300, unit: 'g'}
    ]
  }
];

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {render, screen, within, fireEvent} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import App from './main.jsx';
import {recipes} from './recipes.js';

const titles = () => {
  const list = screen.queryByRole('list', {name: 'Recipes'});
  return list ? within(list).getAllByRole('button').map((button) => button.textContent) : [];
};
const tagButton = (name) => within(screen.getByRole('group', {name: 'Tags'})).getByRole('button', {name});
const recipeButton = (title) => within(screen.getByRole('list', {name: 'Recipes'})).getByRole('button', {name: title});
const ingredients = () => {
  const list = screen.queryByRole('list', {name: 'Ingredients'});
  return list ? within(list).getAllByRole('listitem').map((item) => item.textContent) : [];
};
const shows = (text) => screen.queryByText(text) !== null;

test('Listet jedes Rezept in der Reihenfolge der Daten, mit Anzahl', () => {
  render(<App />);
  assert.deepEqual(titles(), ['Pancakes', 'Tomato soup', 'Porridge', 'Lentil curry', 'Fruit salad'], 'die Liste zeigt ' + JSON.stringify(titles()));
  assert.ok(shows('5 recipes'), 'keine Zeile "5 recipes"');
});

test('Die Suche findet Titel ohne Rücksicht auf Groß- und Kleinschreibung und Leerzeichen am Rand', async () => {
  const user = userEvent.setup();
  render(<App />);
  await user.type(screen.getByRole('searchbox', {name: 'Search'}), '  SOUP ');
  assert.deepEqual(titles(), ['Tomato soup'], 'die Suche nach "  SOUP " zeigt ' + JSON.stringify(titles()));
  assert.ok(shows('1 recipe'), 'keine Zeile "1 recipe" bei einem Treffer');
});

test('Eine Suche ohne Treffer sagt das', async () => {
  const user = userEvent.setup();
  render(<App />);
  await user.type(screen.getByRole('searchbox', {name: 'Search'}), 'pizza');
  assert.deepEqual(titles(), [], 'die Suche nach "pizza" zeigt ' + JSON.stringify(titles()));
  assert.ok(shows('No recipes match.'), 'keine Meldung "No recipes match."');
  assert.ok(shows('0 recipes'), 'keine Zeile "0 recipes"');
});

test('Die Tag-Schaltflächen sind All plus jeder Tag einmal, sortiert', () => {
  render(<App />);
  const names = within(screen.getByRole('group', {name: 'Tags'})).getAllByRole('button').map((button) => button.textContent);
  assert.deepEqual(names, ['All', 'breakfast', 'dinner', 'lunch', 'sweet', 'vegan'], 'die Tag-Schaltflächen sind ' + JSON.stringify(names));
});

test('Ein Tag filtert die Liste, ein zweiter Klick zeigt wieder alle', async () => {
  const user = userEvent.setup();
  render(<App />);
  await user.click(tagButton('vegan'));
  assert.deepEqual(titles(), ['Tomato soup', 'Porridge', 'Lentil curry', 'Fruit salad'], 'der Tag vegan zeigt ' + JSON.stringify(titles()));
  assert.equal(tagButton('vegan').getAttribute('aria-pressed'), 'true', 'die Schaltfläche vegan ist nicht gedrückt');
  assert.equal(tagButton('All').getAttribute('aria-pressed'), 'false', 'All ist noch gedrückt, obwohl vegan gewählt ist');
  await user.click(tagButton('vegan'));
  assert.equal(titles().length, 5, 'ein zweiter Klick auf vegan zeigt ' + titles().length + ' Rezepte');
  assert.equal(tagButton('All').getAttribute('aria-pressed'), 'true', 'All ist nach dem zweiten Klick nicht gedrückt');
});

test('Suche und Tag wirken zusammen', async () => {
  const user = userEvent.setup();
  render(<App />);
  await user.click(tagButton('breakfast'));
  await user.type(screen.getByRole('searchbox', {name: 'Search'}), 'pan');
  assert.deepEqual(titles(), ['Pancakes'], 'breakfast plus "pan" zeigt ' + JSON.stringify(titles()));
  await user.click(tagButton('dinner'));
  assert.deepEqual(titles(), [], 'dinner plus "pan" zeigt ' + JSON.stringify(titles()));
});

test('Ein Klick auf ein Rezept zeigt seine Details', async () => {
  const user = userEvent.setup();
  render(<App />);
  assert.ok(screen.queryByRole('heading', {level: 2}) === null, 'vor jedem Klick wird schon ein Rezept gezeigt');
  await user.click(recipeButton('Lentil curry'));
  const heading = screen.queryByRole('heading', {level: 2});
  assert.equal(heading?.textContent, 'Lentil curry', 'die Detailüberschrift ist ' + JSON.stringify(heading?.textContent));
  assert.ok(shows('3 servings'), 'keine Zeile "3 servings"');
  assert.deepEqual(ingredients(), ['250 g red lentils', '400 ml coconut milk', '2 tbsp curry paste'], 'die Zutaten sind ' + JSON.stringify(ingredients()));
});

test('Ein vom Filter verborgenes Rezept wird nicht im Detail gezeigt', async () => {
  const user = userEvent.setup();
  render(<App />);
  await user.click(recipeButton('Pancakes'));
  await user.click(tagButton('vegan'));
  assert.ok(screen.queryByRole('heading', {level: 2}) === null, 'Pancakes wird nach der Wahl von vegan noch gezeigt');
  assert.ok(shows('Pick a recipe to see its ingredients.'), 'kein Hinweis "Pick a recipe to see its ingredients."');
});

test('Weniger und mehr Portionen rechnen die Mengen um', async () => {
  const user = userEvent.setup();
  render(<App />);
  await user.click(recipeButton('Pancakes'));
  for (let i = 0; i < 3; i++) await user.click(screen.getByRole('button', {name: 'Fewer servings'}));
  assert.ok(shows('1 serving'), 'keine Zeile "1 serving" nach drei Klicks auf Fewer servings');
  assert.deepEqual(ingredients(), ['50 g flour', '75 ml milk', '0.5 eggs', '0.25 tbsp sugar'], 'Pancakes für 1 sind ' + JSON.stringify(ingredients()));
  await user.click(recipeButton('Porridge'));
  await user.click(screen.getByRole('button', {name: 'More servings'}));
  await user.click(screen.getByRole('button', {name: 'More servings'}));
  assert.deepEqual(ingredients(), ['150 g oats', '750 ml oat milk'], 'Porridge für 3 ist ' + JSON.stringify(ingredients()));
});

test('Mengen haben höchstens zwei Nachkommastellen', async () => {
  const user = userEvent.setup();
  render(<App />);
  await user.click(recipeButton('Lentil curry'));
  await user.click(screen.getByRole('button', {name: 'Fewer servings'}));
  await user.click(screen.getByRole('button', {name: 'Fewer servings'}));
  assert.deepEqual(ingredients(), ['83.33 g red lentils', '133.33 ml coconut milk', '0.67 tbsp curry paste'], 'Lentil curry für 1 ist ' + JSON.stringify(ingredients()));
});

test('Die Portionen fallen nie unter 1', () => {
  render(<App />);
  fireEvent.click(recipeButton('Porridge'));
  fireEvent.click(screen.getByRole('button', {name: 'Fewer servings'}));
  assert.ok(shows('1 serving'), 'Porridge fiel unter 1 Portion');
  assert.deepEqual(ingredients(), ['50 g oats', '250 ml oat milk'], 'Porridge für 1 ist ' + JSON.stringify(ingredients()));
});

test('Ein anderes Rezept beginnt mit seinen eigenen Portionen', async () => {
  const user = userEvent.setup();
  render(<App />);
  await user.click(recipeButton('Pancakes'));
  await user.click(screen.getByRole('button', {name: 'More servings'}));
  await user.click(screen.getByRole('button', {name: 'More servings'}));
  await user.click(recipeButton('Tomato soup'));
  assert.ok(shows('2 servings'), 'Tomato soup beginnt nicht mit 2 Portionen');
  assert.deepEqual(ingredients(), ['800 g tomatoes', '1 onion', '2 tbsp olive oil'], 'Tomato soup ist ' + JSON.stringify(ingredients()));
});

test('Die Rezeptdaten werden nie verändert', async () => {
  const before = JSON.stringify(recipes);
  const user = userEvent.setup();
  render(<App />);
  await user.click(tagButton('sweet'));
  await user.click(recipeButton('Fruit salad'));
  await user.click(screen.getByRole('button', {name: 'Fewer servings'}));
  await user.type(screen.getByRole('searchbox', {name: 'Search'}), 'a');
  assert.equal(JSON.stringify(recipes), before, 'die Rezepte in recipes.js wurden verändert');
});

test('React gibt keine Warnungen aus', async () => {
  const warnings = [];
  const original = console.error;
  console.error = (...args) => warnings.push(args.join(' '));
  try {
    const user = userEvent.setup();
    render(<App />);
    await user.click(tagButton('vegan'));
    await user.click(recipeButton('Porridge'));
    await user.click(screen.getByRole('button', {name: 'More servings'}));
  } finally {
    console.error = original;
  }
  assert.deepEqual(warnings, [], 'console.error während der Bedienung der App');
});