Bedingtes Rendern

// TODO: a packed item shows its name and a check mark, struck out with
// <del>: <del>Tent ✅</del>. An item that is not packed shows only its name.
export function Item({ name, isPacked }) {
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Alex's Packing List</h1>
      <ul>
        <Item name="Tent" isPacked={true} />
        <Item name="Sleeping bag" isPacked={true} />
        <Item name="Map" isPacked={false} />
      </ul>
    </section>
  );
}

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {render, screen} from '@testing-library/react';
import PackingList, {Item} from './main.jsx';

test('Ein gepacktes Item zeigt seinen Namen mit Häkchen', () => {
  render(<Item name="Tent" isPacked={true} />);
  const item = screen.getByRole('listitem').textContent;
  assert.equal(item, 'Tent ✅', 'das Item lautet ' + JSON.stringify(item));
});

test('Ein gepacktes Item ist mit <del> durchgestrichen', () => {
  render(<Item name="Tent" isPacked={true} />);
  const del = screen.getByRole('listitem').querySelector('del');
  assert.ok(del, 'im gepackten Item steht kein <del>');
  assert.equal(del.textContent, 'Tent ✅', 'das <del> lautet ' + JSON.stringify(del.textContent));
});

test('Ein nicht gepacktes Item zeigt nur seinen Namen', () => {
  render(<Item name="Map" isPacked={false} />);
  const item = screen.getByRole('listitem');
  assert.equal(item.textContent, 'Map', 'das Item lautet ' + JSON.stringify(item.textContent));
  assert.equal(item.querySelector('del'), null, 'das nicht gepackte Item ist durchgestrichen');
});

test('Die Liste streicht zwei ihrer drei Items durch', () => {
  render(<PackingList />);
  const struck = screen.getAllByRole('listitem').filter((li) => li.querySelector('del')).length;
  assert.equal(struck, 2, 'durchgestrichene Items: ' + struck);
});

// TODO: with 0 messages, show nothing below the heading (no stray 0).
// With 1 message, say "message"; otherwise "messages".
export function Inbox({ count }) {
  return (
    <div>
      <h2>Inbox</h2>
      {count && <p>You have {count} new messages</p>}
    </div>
  );
}

export default function App() {
  return (
    <>
      <Inbox count={3} />
      <Inbox count={1} />
      <Inbox count={0} />
    </>
  );
}

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {render, screen} from '@testing-library/react';
import {Inbox} from './main.jsx';

test('3 Nachrichten: You have 3 new messages', () => {
  render(<Inbox count={3} />);
  const line = screen.getByText(/^You have/).textContent;
  assert.equal(line, 'You have 3 new messages', 'die Zeile lautet ' + JSON.stringify(line));
});

test('1 Nachricht: You have 1 new message', () => {
  render(<Inbox count={1} />);
  const line = screen.getByText(/^You have/).textContent;
  assert.equal(line, 'You have 1 new message', 'die Zeile lautet ' + JSON.stringify(line));
});

test('0 Nachrichten: nur die Überschrift, keine verirrte 0', () => {
  const {container} = render(<Inbox count={0} />);
  assert.equal(container.textContent, 'Inbox', 'die Inbox lautet ' + JSON.stringify(container.textContent));
});