Updating objects and arrays in state

import { useState } from 'react';

export const initialPerson = {
  name: 'Ada Lovelace',
  email: 'ada@example.com',
  address: {
    street: '1 Main Street',
    city: 'London'
  }
};

export default function ProfileForm() {
  const [person, setPerson] = useState(initialPerson);

  // TODO: typing changes nothing. Copy the objects instead of changing them.
  function handleChange(e) {
    person[e.target.name] = e.target.value;
  }

  function handleAddressChange(e) {
    person.address[e.target.name] = e.target.value;
  }

  return (
    <>
      <label>
        Name:
        <input name="name" value={person.name} onChange={handleChange} />
      </label>
      <label>
        Email:
        <input name="email" value={person.email} onChange={handleChange} />
      </label>
      <label>
        Street:
        <input name="street" value={person.address.street} onChange={handleAddressChange} />
      </label>
      <label>
        City:
        <input name="city" value={person.address.city} onChange={handleAddressChange} />
      </label>
      <p>
        {person.name} ({person.email}) lives at {person.address.street}, {person.address.city}.
      </p>
    </>
  );
}

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 ProfileForm, {initialPerson} from './main.jsx';

const field = (name) => screen.getByRole('textbox', {name});
const summary = () => screen.getByText(/lives at/).textContent;

test('Typing a new name shows it', async () => {
  const user = userEvent.setup();
  render(<ProfileForm />);
  await user.clear(field('Name:'));
  await user.type(field('Name:'), 'Grace Hopper');
  assert.equal(field('Name:').value, 'Grace Hopper', 'after typing, the Name field holds ' + JSON.stringify(field('Name:').value));
  assert.equal(summary(), 'Grace Hopper (ada@example.com) lives at 1 Main Street, London.', 'after typing a name, the summary reads ' + JSON.stringify(summary()));
});

test('Typing a new city keeps the name and the street', async () => {
  const user = userEvent.setup();
  render(<ProfileForm />);
  await user.clear(field('City:'));
  await user.type(field('City:'), 'Paris');
  assert.equal(summary(), 'Ada Lovelace (ada@example.com) lives at 1 Main Street, Paris.', 'after typing a city, the summary reads ' + JSON.stringify(summary()));
});

test('The initial object is not changed', async () => {
  const user = userEvent.setup();
  render(<ProfileForm />);
  await user.type(field('Email:'), '.uk');
  await user.type(field('Street:'), ' West');
  assert.equal(initialPerson.email, 'ada@example.com', 'after typing, initialPerson.email is ' + JSON.stringify(initialPerson.email));
  assert.equal(initialPerson.address.street, '1 Main Street', 'after typing, initialPerson.address.street is ' + JSON.stringify(initialPerson.address.street));
});

import { useState } from 'react';

let nextId = 3;
export const initialTodos = [
  { id: 0, title: 'Buy milk', done: true },
  { id: 1, title: 'Water plants', done: false },
  { id: 2, title: 'Call Grandma', done: false }
];

export default function TodoList() {
  const [title, setTitle] = useState('');
  const [todos, setTodos] = useState(initialTodos);

  // TODO: Add, the checkboxes and Delete do not work yet.
  function handleAdd() {
    todos.push({ id: nextId++, title: title, done: false });
  }

  function handleToggle(todoId) {
    const todo = todos.find(t => t.id === todoId);
    todo.done = !todo.done;
  }

  function handleDelete(todoId) {
  }

  return (
    <>
      <label>
        New todo:
        <input value={title} onChange={e => setTitle(e.target.value)} />
      </label>
      <button onClick={handleAdd}>Add</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <label>
              <input
                type="checkbox"
                checked={todo.done}
                onChange={() => handleToggle(todo.id)}
              />
              {todo.title}
            </label>
            <button onClick={() => handleDelete(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </>
  );
}

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

const titles = () => screen.queryAllByRole('listitem').map((li) => li.textContent.replace('Delete', ''));
const box = (name) => screen.getByRole('checkbox', {name});
const deleteButton = (title) => within(screen.getByText(title).closest('li')).getByRole('button', {name: 'Delete'});

test('Add puts the new todo at the end and clears the field', async () => {
  const user = userEvent.setup();
  render(<TodoList />);
  await user.type(screen.getByRole('textbox', {name: 'New todo:'}), 'Walk the dog');
  await user.click(screen.getByRole('button', {name: 'Add'}));
  assert.deepEqual(titles(), ['Buy milk', 'Water plants', 'Call Grandma', 'Walk the dog'], 'after Add the list is ' + JSON.stringify(titles()));
  assert.equal(screen.getByRole('textbox', {name: 'New todo:'}).value, '', 'after Add the field holds ' + JSON.stringify(screen.getByRole('textbox', {name: 'New todo:'}).value));
});

test('A checkbox toggles only its own todo', async () => {
  const user = userEvent.setup();
  render(<TodoList />);
  await user.click(box('Water plants'));
  assert.equal(box('Water plants').checked, true, 'after one click Water plants is checked: ' + box('Water plants').checked);
  assert.equal(box('Call Grandma').checked, false, 'Call Grandma is checked: ' + box('Call Grandma').checked);
  await user.click(box('Buy milk'));
  assert.equal(box('Buy milk').checked, false, 'after one click Buy milk is checked: ' + box('Buy milk').checked);
});

test('Delete removes only its own todo', async () => {
  const user = userEvent.setup();
  render(<TodoList />);
  await user.click(deleteButton('Water plants'));
  assert.deepEqual(titles(), ['Buy milk', 'Call Grandma'], 'after deleting Water plants the list is ' + JSON.stringify(titles()));
});

test('The initial array and its objects are not changed', async () => {
  const user = userEvent.setup();
  render(<TodoList />);
  await user.click(box('Call Grandma'));
  await user.type(screen.getByRole('textbox', {name: 'New todo:'}), 'Read');
  await user.click(screen.getByRole('button', {name: 'Add'}));
  assert.equal(initialTodos.length, 3, 'after Add initialTodos has ' + initialTodos.length + ' items');
  assert.equal(initialTodos[2].done, false, 'after the click initialTodos[2].done is ' + initialTodos[2].done);
});