Purity and the UI tree

const cups = [
  { id: 'c1', size: 200 },
  { id: 'c2', size: 250 },
  { id: 'c3', size: 300 }
];

let poured = 0;

// TODO: make Cup pure: it may only use its props.
// Work out the running total in TeaRound instead.
export function Cup({ size }) {
  poured = poured + size;
  return <li>{size} ml, {poured} ml so far</li>;
}

export default function TeaRound() {
  return (
    <ul>
      {cups.map(cup => <Cup key={cup.id} size={cup.size} />)}
    </ul>
  );
}

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

test('The cups show running totals of 200, 450 and 750 ml', () => {
  render(<TeaRound />);
  const items = screen.getAllByRole('listitem').map((li) => li.textContent);
  assert.deepEqual(items, ['200 ml, 200 ml so far', '250 ml, 450 ml so far', '300 ml, 750 ml so far'], 'the list reads ' + JSON.stringify(items));
});

test('Cup shows what its props say', () => {
  render(<ul><Cup size={100} soFar={300} /></ul>);
  const item = screen.getByRole('listitem').textContent;
  assert.equal(item, '100 ml, 300 ml so far', 'the cup reads ' + JSON.stringify(item));
});

test('Rendering TeaRound twice gives the same HTML', () => {
  const first = render(<TeaRound />).container.innerHTML;
  const second = render(<TeaRound />).container.innerHTML;
  assert.equal(second, first, 'the second render differs from the first');
});

import Profile from './Profile.jsx';
import { people } from './data.js';

let position = 0;

// TODO: sort by name without changing people, number the profiles
// from 1 without the outside variable, and give each Profile a key.
export default function Gallery() {
  people.sort((a, b) => a.name.localeCompare(b.name));
  return (
    <section>
      <h1>Scientist gallery</h1>
      <p>{people.length} profiles</p>
      {people.map(person => {
        position = position + 1;
        return <Profile person={person} position={position} />;
      })}
    </section>
  );
}

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

test('React prints no warnings', () => {
  const warnings = [];
  const original = console.error;
  console.error = (...args) => warnings.push(args.join(' '));
  try {
    render(<Gallery />);
  } finally {
    console.error = original;
  }
  assert.deepEqual(warnings, [], 'console.error while rendering');
});

test('Four profiles, sorted by name and numbered from 1', () => {
  render(<Gallery />);
  const names = screen.getAllByRole('heading', {level: 2}).map((h) => h.textContent);
  assert.deepEqual(names, ['1. Alan Turing', '2. C. V. Raman', '3. Marie Skłodowska-Curie', '4. Rosalind Franklin'], 'the profiles read ' + JSON.stringify(names));
  assert.equal(screen.getByText(/profiles$/).textContent, '4 profiles', 'the count line');
});

test('Each profile shows an avatar named after the person', () => {
  render(<Gallery />);
  const avatars = screen.getAllByRole('img').map((img) => img.getAttribute('aria-label'));
  assert.equal(avatars.length, 4, 'avatars: ' + avatars.length);
  assert.ok(avatars.includes('Alan Turing'), 'no avatar is named Alan Turing');
});

test('Rendering does not change the array in data.js', () => {
  render(<Gallery />);
  const ids = people.map((person) => person.id);
  assert.deepEqual(ids, ['msc', 'atu', 'rfr', 'cvr'], 'data.js now holds ' + JSON.stringify(ids));
});

test('Rendering twice gives the same HTML', () => {
  const first = render(<Gallery />).container.innerHTML;
  const second = render(<Gallery />).container.innerHTML;
  assert.equal(second, first, 'the second render differs from the first');
});

export function Avatar({ person }) {
  const initials = person.name
    .split(' ')
    .map(part => part[0])
    .join('');
  return (
    <span className="avatar" role="img" aria-label={person.name}>
      {initials}
    </span>
  );
}

export default function Profile({ person, position }) {
  return (
    <article className="profile">
      <h2>
        {position}. {person.name}
      </h2>
      <Avatar person={person} />
      <p>
        {person.profession}, known for {person.discovery}
      </p>
    </article>
  );
}

export const people = [
  { id: 'msc', name: 'Marie Skłodowska-Curie', profession: 'physicist and chemist', discovery: 'polonium and radium' },
  { id: 'atu', name: 'Alan Turing', profession: 'mathematician', discovery: 'the Turing machine' },
  { id: 'rfr', name: 'Rosalind Franklin', profession: 'chemist', discovery: 'X-ray images of DNA' },
  { id: 'cvr', name: 'C. V. Raman', profession: 'physicist', discovery: 'Raman scattering' }
];

.profile {
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: 8px 0;
  padding: 8px 12px;
}

.avatar {
  display: inline-block;
  width: 48px;
  height: 48px;
  line-height: 48px;
  border-radius: 50%;
  background: #446;
  color: white;
  text-align: center;
}