Conditional rendering

// 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('A packed item shows its name with a check mark', () => {
  render(<Item name="Tent" isPacked={true} />);
  const item = screen.getByRole('listitem').textContent;
  assert.equal(item, 'Tent ✅', 'the item reads ' + JSON.stringify(item));
});

test('A packed item is struck out with <del>', () => {
  render(<Item name="Tent" isPacked={true} />);
  const del = screen.getByRole('listitem').querySelector('del');
  assert.ok(del, 'there is no <del> in the packed item');
  assert.equal(del.textContent, 'Tent ✅', 'the <del> reads ' + JSON.stringify(del.textContent));
});

test('An item that is not packed shows only its name', () => {
  render(<Item name="Map" isPacked={false} />);
  const item = screen.getByRole('listitem');
  assert.equal(item.textContent, 'Map', 'the item reads ' + JSON.stringify(item.textContent));
  assert.equal(item.querySelector('del'), null, 'the item that is not packed is struck out');
});

test('The list strikes out two of its three items', () => {
  render(<PackingList />);
  const struck = screen.getAllByRole('listitem').filter((li) => li.querySelector('del')).length;
  assert.equal(struck, 2, 'struck-out 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 messages: You have 3 new messages', () => {
  render(<Inbox count={3} />);
  const line = screen.getByText(/^You have/).textContent;
  assert.equal(line, 'You have 3 new messages', 'the line reads ' + JSON.stringify(line));
});

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

test('0 messages: only the heading, no stray 0', () => {
  const {container} = render(<Inbox count={0} />);
  assert.equal(container.textContent, 'Inbox', 'the inbox reads ' + JSON.stringify(container.textContent));
});