Lists and keys

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

// TODO: list only the engineers, each as <li>Name: role</li>,
// with a key that comes from the data.
export default function Engineers() {
  const listItems = people.map(person => <li>{person.name}: {person.role}</li>);
  return (
    <section>
      <h1>Engineers</h1>
      <ul>{listItems}</ul>
    </section>
  );
}

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

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

test('Only the three engineers are listed, in order', () => {
  render(<Engineers />);
  const items = screen.getAllByRole('listitem').map((li) => li.textContent);
  assert.deepEqual(items, ['Mira Okafor: Engineer', 'Lena Wolf: Engineer', 'Ines Duarte: Engineer'], 'the list reads ' + JSON.stringify(items));
});

export const people = [
  { id: 'u1', name: 'Mira Okafor', role: 'Engineer' },
  { id: 'u2', name: 'Tom Becker', role: 'Designer' },
  { id: 'u3', name: 'Lena Wolf', role: 'Engineer' },
  { id: 'u4', name: 'Sam Park', role: 'Manager' },
  { id: 'u5', name: 'Ines Duarte', role: 'Engineer' }
];

import { useState } from 'react';

function Guest({ name }) {
  const [starred, setStarred] = useState(false);
  return (
    <li>
      {name}{' '}
      <button aria-pressed={starred} onClick={() => setStarred(!starred)}>
        Star {name}
      </button>
    </li>
  );
}

let nextNumber = 1;

export default function GuestList() {
  const [guests, setGuests] = useState([
    { id: 'g1', name: 'Ada' },
    { id: 'g2', name: 'Grace' }
  ]);

  function handleAdd() {
    // TODO: give the new guest an id here, where it is created.
    const guest = { name: 'Guest ' + nextNumber };
    nextNumber++;
    setGuests([guest, ...guests]);
  }

  return (
    <>
      <button onClick={handleAdd}>Add a guest at the top</button>
      <ul>
        {guests.map((guest, index) => (
          <Guest key={index} name={guest.name} />
        ))}
      </ul>
    </>
  );
}

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

test('React prints no warnings while two guests are added', async () => {
  const user = userEvent.setup();
  const warnings = [];
  const original = console.error;
  console.error = (...args) => warnings.push(args.join(' '));
  try {
    render(<GuestList />);
    await user.click(screen.getByRole('button', {name: 'Add a guest at the top'}));
    await user.click(screen.getByRole('button', {name: 'Add a guest at the top'}));
  } finally {
    console.error = original;
  }
  assert.deepEqual(warnings, [], 'console.error while adding guests');
});

test('A new guest appears at the top', async () => {
  const user = userEvent.setup();
  render(<GuestList />);
  await user.click(screen.getByRole('button', {name: 'Add a guest at the top'}));
  const first = screen.getAllByRole('listitem')[0].textContent;
  assert.match(first, /^Guest/, 'the first item reads ' + JSON.stringify(first));
});

test('Ada keeps her star when a guest is added at the top', async () => {
  const user = userEvent.setup();
  render(<GuestList />);
  await user.click(screen.getByRole('button', {name: 'Star Ada'}));
  await user.click(screen.getByRole('button', {name: 'Add a guest at the top'}));
  const ada = screen.getByRole('button', {name: 'Star Ada'}).getAttribute('aria-pressed');
  assert.equal(ada, 'true', 'Ada is no longer starred');
  const starred = screen.getAllByRole('button', {pressed: true}).map((button) => button.textContent);
  assert.deepEqual(starred, ['Star Ada'], 'starred buttons: ' + JSON.stringify(starred));
});