JSX und geschweifte Klammern

// Pasted from an HTML page. Make it warning-free JSX, and give the Add
// button a black background with an inline style object.
export default function TodoForm() {
  return (
    <form class="todo-form">
      <label for="task">New task</label>
      <input id="task" type="text" tabindex="1" />
      <button type="submit" aria-label="Add task">
        <svg width="16" height="16">
          <path d="M8 2v12M2 8h12" stroke="white" stroke-width="2" />
        </svg>
      </button>
    </form>
  );
}

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

test('Das Label New task gehört zum Textfeld', () => {
  render(<TodoForm />);
  const input = screen.getByLabelText('New task');
  assert.equal(input.id, 'task', 'das Label zeigt auf das Element mit der id ' + JSON.stringify(input.id));
});

test('Der Add-Button behält sein aria-label', () => {
  render(<TodoForm />);
  assert.ok(screen.queryByRole('button', {name: 'Add task'}), 'kein Button heißt Add task');
});

test('Der Add-Button hat einen schwarzen Hintergrund', () => {
  render(<TodoForm />);
  const background = screen.getByRole('button', {name: 'Add task'}).style.backgroundColor;
  assert.equal(background, 'black', 'der Button hat background-color ' + JSON.stringify(background));
});

test('Das Icon behält die Strichstärke 2', () => {
  const {container} = render(<TodoForm />);
  const width = container.querySelector('path').getAttribute('stroke-width');
  assert.equal(width, '2', 'der Pfad hat stroke-width=' + JSON.stringify(width));
});

test('Das Formular hat die CSS-Klasse todo-form', () => {
  const {container} = render(<TodoForm />);
  const className = container.querySelector('form').className;
  assert.equal(className, 'todo-form', 'das Formular hat die Klasse ' + JSON.stringify(className));
});

test('React gibt keine Warnungen aus', () => {
  const warnings = [];
  const original = console.error;
  console.error = (...args) => warnings.push(args.join(' '));
  try {
    render(<TodoForm />);
  } finally {
    console.error = original;
  }
  assert.deepEqual(warnings, [], 'console.error beim Rendern');
});

const person = {
  name: 'Gregorio Y. Zara',
  imageUrl: 'gregorio-zara.jpg',
  imageSize: 90,
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoHeader() {
  // TODO: read every value from person with curly braces, and add the styles.
  return (
    <header>
      <img className="avatar" src="person.imageUrl" alt="person.name" />
      <h1>person.name's Todos</h1>
    </header>
  );
}

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

test("Die Überschrift lautet Gregorio Y. Zara's Todos", () => {
  render(<TodoHeader />);
  const heading = screen.getByRole('heading', {level: 1}).textContent;
  assert.equal(heading, "Gregorio Y. Zara's Todos", 'die Überschrift lautet ' + JSON.stringify(heading));
});

test('Das Bild liest src und alt aus person', () => {
  render(<TodoHeader />);
  const img = screen.getByRole('img');
  assert.equal(img.getAttribute('src'), 'gregorio-zara.jpg', 'das Bild hat src=' + JSON.stringify(img.getAttribute('src')));
  assert.equal(img.getAttribute('alt'), 'Gregorio Y. Zara', 'das Bild hat alt=' + JSON.stringify(img.getAttribute('alt')));
});

test('Das Bild ist 90px breit und hoch, aus person.imageSize', () => {
  render(<TodoHeader />);
  const {width, height} = screen.getByRole('img').style;
  assert.equal(width, '90px', 'das Bild hat die Breite ' + JSON.stringify(width));
  assert.equal(height, '90px', 'das Bild hat die Höhe ' + JSON.stringify(height));
});

test('Der Header verwendet person.theme als Style', () => {
  render(<TodoHeader />);
  const {backgroundColor, color} = screen.getByRole('banner').style;
  assert.equal(backgroundColor, 'black', 'der Header hat background-color ' + JSON.stringify(backgroundColor));
  assert.equal(color, 'pink', 'der Header hat color ' + JSON.stringify(color));
});

test('React gibt keine Warnungen aus', () => {
  const warnings = [];
  const original = console.error;
  console.error = (...args) => warnings.push(args.join(' '));
  try {
    render(<TodoHeader />);
  } finally {
    console.error = original;
  }
  assert.deepEqual(warnings, [], 'console.error beim Rendern');
});