Preserving and resetting state

import { useState } from 'react';

const contacts = [
  { id: 0, name: 'Mia', email: 'mia@mail.com' },
  { id: 1, name: 'Leo', email: 'leo@mail.com' },
  { id: 2, name: 'Noor', email: 'noor@mail.com' }
];

export default function Messenger() {
  const [to, setTo] = useState(contacts[0]);
  return (
    <div>
      <ContactList
        contacts={contacts}
        selectedContact={to}
        onSelect={contact => setTo(contact)}
      />
      <Chat contact={to} />
    </div>
  );
}

function ContactList({ contacts, selectedContact, onSelect }) {
  return (
    <ul>
      {contacts.map(contact => (
        <li key={contact.id}>
          <button
            aria-pressed={contact.id === selectedContact.id}
            onClick={() => onSelect(contact)}
          >
            {contact.name}
          </button>
        </li>
      ))}
    </ul>
  );
}

function Chat({ contact }) {
  const [text, setText] = useState('');
  return (
    <section>
      <textarea
        aria-label={'Message to ' + contact.name}
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <button>Send to {contact.email}</button>
    </section>
  );
}

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

const message = (name) => screen.getByRole('textbox', {name: 'Message to ' + name});
const contact = (name) => screen.getByRole('button', {name});

test('A typed message stays while the contact stays', () => {
  render(<Messenger />);
  fireEvent.change(message('Mia'), {target: {value: 'Hi Mia'}});
  assert.equal(message('Mia').value, 'Hi Mia', 'the message to Mia holds ' + JSON.stringify(message('Mia').value));
});

test('Choosing another contact clears the draft', () => {
  render(<Messenger />);
  fireEvent.change(message('Mia'), {target: {value: 'Hi Mia'}});
  fireEvent.click(contact('Leo'));
  assert.equal(message('Leo').value, '', 'after choosing Leo the message holds ' + JSON.stringify(message('Leo').value));
});

test('Every switch starts with an empty message', () => {
  render(<Messenger />);
  fireEvent.click(contact('Noor'));
  fireEvent.change(message('Noor'), {target: {value: 'Lunch?'}});
  fireEvent.click(contact('Mia'));
  assert.equal(message('Mia').value, '', 'after switching from Noor to Mia the message holds ' + JSON.stringify(message('Mia').value));
  assert.equal(screen.getByRole('button', {name: /^Send to/}).textContent, 'Send to mia@mail.com', 'the send button reads ' + JSON.stringify(screen.getByRole('button', {name: /^Send to/}).textContent));
});

import { useState } from 'react';

export default function Scoreboard() {
  const [reversed, setReversed] = useState(false);
  return (
    <>
      {reversed ? (
        <>
          <Counter person="Leo" />
          <Counter person="Mia" />
        </>
      ) : (
        <>
          <Counter person="Mia" />
          <Counter person="Leo" />
        </>
      )}
      <button onClick={() => setReversed(!reversed)}>Swap</button>
    </>
  );
}

function Counter({ person }) {
  const [score, setScore] = useState(0);
  return (
    <section>
      <h2>{person}: {score}</h2>
      <button aria-label={'Add one for ' + person} onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </section>
  );
}

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

const scores = () => screen.getAllByRole('heading').map((h) => h.textContent).join(', ');
const add = (person) => fireEvent.click(screen.getByRole('button', {name: 'Add one for ' + person}));
const swap = () => fireEvent.click(screen.getByRole('button', {name: 'Swap'}));

test('Each counter adds to its own score', () => {
  render(<Scoreboard />);
  add('Mia');
  add('Mia');
  add('Leo');
  assert.equal(scores(), 'Mia: 2, Leo: 1', 'after two points for Mia and one for Leo the scores read ' + JSON.stringify(scores()));
});

test('After a swap, the scores stay with their players', () => {
  render(<Scoreboard />);
  add('Mia');
  add('Mia');
  swap();
  assert.equal(scores(), 'Leo: 0, Mia: 2', 'after two points for Mia and a swap the scores read ' + JSON.stringify(scores()));
});

test('Scores survive two swaps and more clicks', () => {
  render(<Scoreboard />);
  add('Mia');
  add('Mia');
  swap();
  add('Leo');
  assert.equal(scores(), 'Leo: 1, Mia: 2', 'after a swap and one point for Leo the scores read ' + JSON.stringify(scores()));
  swap();
  assert.equal(scores(), 'Mia: 2, Leo: 1', 'after swapping back the scores read ' + JSON.stringify(scores()));
});