Event-Handler und Propagation

import { useState } from 'react';

function Button({ onClick, children }) {
  // TODO: stop the click from reaching the toolbar, then call onClick.
  return <button onClick={onClick}>{children}</button>;
}

export default function Toolbar() {
  const [message, setMessage] = useState('Nothing clicked yet');

  return (
    <div
      role="toolbar"
      aria-label="Player"
      className="toolbar"
      onClick={() => setMessage('You clicked the toolbar')}
    >
      <Button onClick={() => setMessage('Playing!')}>Play Movie</Button>
      <Button onClick={() => setMessage('Uploading!')}>Upload Image</Button>
      <p role="status">{message}</p>
    </div>
  );
}

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

const status = () => screen.getByRole('status').textContent;

test('Play Movie zeigt Playing!', async () => {
  const user = userEvent.setup();
  render(<Toolbar />);
  await user.click(screen.getByRole('button', {name: 'Play Movie'}));
  assert.equal(status(), 'Playing!', 'nach einem Klick auf Play Movie lautet der Status ' + JSON.stringify(status()));
});

test('Upload Image zeigt Uploading!', async () => {
  const user = userEvent.setup();
  render(<Toolbar />);
  await user.click(screen.getByRole('button', {name: 'Upload Image'}));
  assert.equal(status(), 'Uploading!', 'nach einem Klick auf Upload Image lautet der Status ' + JSON.stringify(status()));
});

test('Ein Klick auf die Toolbar selbst erreicht die Toolbar weiterhin', async () => {
  const user = userEvent.setup();
  render(<Toolbar />);
  await user.click(screen.getByRole('status'));
  assert.equal(status(), 'You clicked the toolbar', 'nach einem Klick auf die Statuszeile lautet sie ' + JSON.stringify(status()));
});

.toolbar {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: #eef;
  border-radius: 8px;
}

import { useState } from 'react';

export default function Signup() {
  const [name, setName] = useState('');
  const [sent, setSent] = useState('');

  function handleSubmit(e) {
    // TODO: stop the browser from loading a new page,
    // then remember the name that was sent.
  }

  return (
    <form aria-label="Sign up" onSubmit={handleSubmit}>
      <label>
        Name <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <button>Send</button>
      <p role="status">{sent ? 'Submitted: ' + sent : 'Nothing sent yet'}</p>
    </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 Signup from './main.jsx';

const status = () => screen.getByRole('status').textContent;

test('Vor dem Senden lautet der Status Nothing sent yet', () => {
  render(<Signup />);
  assert.equal(status(), 'Nothing sent yet', 'der Status lautet ' + JSON.stringify(status()));
});

test('Senden zeigt den eingegebenen Namen', async () => {
  const user = userEvent.setup();
  render(<Signup />);
  await user.type(screen.getByRole('textbox', {name: 'Name'}), 'Ada');
  await user.click(screen.getByRole('button', {name: 'Send'}));
  assert.equal(status(), 'Submitted: Ada', 'nach Eingabe von Ada und Senden lautet der Status ' + JSON.stringify(status()));
});

test('Der Submit-Handler verhindert das Standardverhalten', () => {
  render(<Signup />);
  const notPrevented = fireEvent.submit(screen.getByRole('form', {name: 'Sign up'}));
  assert.equal(notPrevented, false, 'das Submit-Event wurde nicht verhindert, der Browser würde also eine neue Seite laden');
});