Mit State auf Eingaben reagieren

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 ist deaktiviert, bis etwas getippt wurde', async () => {
  const user = userEvent.setup();
  render(<CapitalQuiz />);
  assert.equal(submit().disabled, true, 'bei leerer Antwort ist Submit deaktiviert: ' + submit().disabled);
  await user.type(screen.getByRole('textbox'), 'Sydney');
  assert.equal(submit().disabled, false, 'nach dem Tippen ist Submit deaktiviert: ' + submit().disabled);
});

test('Während der Prüfung ist das Formular deaktiviert; eine falsche Antwort zeigt den Fehler', 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, 'direkt nach Submit ist die Textarea deaktiviert: ' + screen.getByRole('textbox').disabled);
  assert.equal(submit().disabled, true, 'direkt nach Submit ist der Button deaktiviert: ' + submit().disabled);
  const message = await screen.findByText('Not quite. Try again!');
  assert.ok(message, 'nach einer falschen Antwort erscheint die Fehlermeldung');
  assert.equal(screen.getByRole('textbox').disabled, false, 'nach einer falschen Antwort ist die Textarea deaktiviert: ' + screen.getByRole('textbox').disabled);
});

test('Eine richtige Antwort ersetzt das Formular durch 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, 'nach der richtigen Antwort erscheint eine Überschrift Correct!');
  assert.equal(screen.queryAllByRole('textbox').length, 0, 'nach der richtigen Antwort verbleibende Textfelder: ' + 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('Das Profil beginnt als Text, mit einem Button Edit Profile', () => {
  render(<EditProfile />);
  assert.equal(boxes().length, 0, 'vor dem Bearbeiten angezeigte Textfelder: ' + boxes().length);
  assert.ok(screen.getByRole('button', {name: 'Edit Profile'}), 'es gibt einen Button Edit Profile');
  assert.equal(screen.getByText('Jane').tagName, 'B', 'Jane steht in einem <b>, nicht in einem ' + screen.getByText('Jane').tagName);
});

test('Edit Profile zeigt beide Felder und einen Button Save Profile', 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'], 'nach Edit Profile enthalten die Felder ' + JSON.stringify(boxes().map((box) => box.value)));
  assert.ok(screen.getByRole('button', {name: 'Save Profile'}), 'nach Edit Profile gibt es einen Button Save Profile');
});

test('Save Profile zeigt den bearbeiteten Namen als 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, 'nach Save Profile angezeigte Textfelder: ' + boxes().length);
  assert.equal(screen.getByText('Ada').tagName, 'B', 'Ada steht in einem <b>');
  assert.equal(greeting(), 'Hello, Ada Jacobs!', 'nach dem Speichern lautet die Begrüßung ' + JSON.stringify(greeting()));
});