Reacting to input with state

import { useState } from 'react';

export function checkAnswer(answer) {
  // Pretend it's asking a server: 50 ms, then a verdict.
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (answer.trim().toLowerCase() === 'canberra') {
        resolve();
      } else {
        reject(new Error('Not quite. Try again!'));
      }
    }, 50);
  });
}

export default function CapitalQuiz() {
  const [answer, setAnswer] = useState('');
  // TODO: add error and status state, and use them below.

  async function handleSubmit(e) {
    e.preventDefault();
    // TODO: submitting, then success, or typing with an error.
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        What is the capital of Australia?
        <textarea value={answer} onChange={e => setAnswer(e.target.value)} />
      </label>
      <button>Submit</button>
    </form>
  );
}

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

const submit = () => screen.getByRole('button', {name: 'Submit'});

test('Submit is disabled until something is typed', async () => {
  const user = userEvent.setup();
  render(<CapitalQuiz />);
  assert.equal(submit().disabled, true, 'with an empty answer, Submit is disabled: ' + submit().disabled);
  await user.type(screen.getByRole('textbox'), 'Sydney');
  assert.equal(submit().disabled, false, 'after typing, Submit is disabled: ' + submit().disabled);
});

test('While checking, the form is disabled; a wrong answer shows the error', async () => {
  const user = userEvent.setup();
  render(<CapitalQuiz />);
  await user.type(screen.getByRole('textbox'), 'Sydney');
  // fireEvent clicks synchronously, so the 50 ms check cannot have finished yet.
  fireEvent.click(submit());
  assert.equal(screen.getByRole('textbox').disabled, true, 'right after Submit, the textarea is disabled: ' + screen.getByRole('textbox').disabled);
  assert.equal(submit().disabled, true, 'right after Submit, the button is disabled: ' + submit().disabled);
  const message = await screen.findByText('Not quite. Try again!');
  assert.ok(message, 'the error message appears after a wrong answer');
  assert.equal(screen.getByRole('textbox').disabled, false, 'after a wrong answer, the textarea is disabled: ' + screen.getByRole('textbox').disabled);
});

test('A right answer replaces the form with Correct!', async () => {
  const user = userEvent.setup();
  render(<CapitalQuiz />);
  await user.type(screen.getByRole('textbox'), 'Canberra');
  await user.click(submit());
  const heading = await screen.findByRole('heading', {name: 'Correct!'});
  assert.ok(heading, 'a heading Correct! appears after the right answer');
  assert.equal(screen.queryAllByRole('textbox').length, 0, 'after the right answer, textboxes left: ' + screen.queryAllByRole('textbox').length);
});

import { useState } from 'react';

export default function EditProfile() {
  const [firstName, setFirstName] = useState('Jane');
  const [lastName, setLastName] = useState('Jacobs');
  // TODO: the fields are always shown, and the button does nothing.

  function handleSubmit(e) {
    e.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        First name:{' '}
        <input value={firstName} onChange={e => setFirstName(e.target.value)} />
      </label>
      <label>
        Last name:{' '}
        <input value={lastName} onChange={e => setLastName(e.target.value)} />
      </label>
      <button type="submit">Edit Profile</button>
      <p><i>Hello, {firstName} {lastName}!</i></p>
    </form>
  );
}

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 EditProfile from './main.jsx';

const boxes = () => screen.queryAllByRole('textbox');
const greeting = () => screen.getByText(/^Hello,/).textContent;

test('The profile starts as text, with an Edit Profile button', () => {
  render(<EditProfile />);
  assert.equal(boxes().length, 0, 'before editing, textboxes shown: ' + boxes().length);
  assert.ok(screen.getByRole('button', {name: 'Edit Profile'}), 'there is an Edit Profile button');
  assert.equal(screen.getByText('Jane').tagName, 'B', 'Jane is shown in a <b>, not in a ' + screen.getByText('Jane').tagName);
});

test('Edit Profile shows both fields and a Save Profile button', async () => {
  const user = userEvent.setup();
  render(<EditProfile />);
  await user.click(screen.getByRole('button', {name: 'Edit Profile'}));
  assert.deepEqual(boxes().map((box) => box.value), ['Jane', 'Jacobs'], 'after Edit Profile, the fields hold ' + JSON.stringify(boxes().map((box) => box.value)));
  assert.ok(screen.getByRole('button', {name: 'Save Profile'}), 'after Edit Profile, there is a Save Profile button');
});

test('Save Profile shows the edited name as text', async () => {
  const user = userEvent.setup();
  render(<EditProfile />);
  await user.click(screen.getByRole('button', {name: 'Edit Profile'}));
  await user.clear(boxes()[0]);
  await user.type(boxes()[0], 'Ada');
  await user.click(screen.getByRole('button', {name: 'Save Profile'}));
  assert.equal(boxes().length, 0, 'after Save Profile, textboxes shown: ' + boxes().length);
  assert.equal(screen.getByText('Ada').tagName, 'B', 'Ada is shown in a <b>');
  assert.equal(greeting(), 'Hello, Ada Jacobs!', 'after saving, the greeting reads ' + JSON.stringify(greeting()));
});