JSX and curly braces

// 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('The label New task belongs to the text field', () => {
  render(<TodoForm />);
  const input = screen.getByLabelText('New task');
  assert.equal(input.id, 'task', 'the label points at the element with id ' + JSON.stringify(input.id));
});

test('The Add button keeps its aria-label', () => {
  render(<TodoForm />);
  assert.ok(screen.queryByRole('button', {name: 'Add task'}), 'no button is named Add task');
});

test('The Add button has a black background', () => {
  render(<TodoForm />);
  const background = screen.getByRole('button', {name: 'Add task'}).style.backgroundColor;
  assert.equal(background, 'black', 'the button has background-color ' + JSON.stringify(background));
});

test('The icon keeps a stroke width of 2', () => {
  const {container} = render(<TodoForm />);
  const width = container.querySelector('path').getAttribute('stroke-width');
  assert.equal(width, '2', 'the path has stroke-width=' + JSON.stringify(width));
});

test('The form has the CSS class todo-form', () => {
  const {container} = render(<TodoForm />);
  const className = container.querySelector('form').className;
  assert.equal(className, 'todo-form', 'the form has the class ' + JSON.stringify(className));
});

test('React prints no warnings', () => {
  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 while rendering');
});

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("The heading reads Gregorio Y. Zara's Todos", () => {
  render(<TodoHeader />);
  const heading = screen.getByRole('heading', {level: 1}).textContent;
  assert.equal(heading, "Gregorio Y. Zara's Todos", 'the heading reads ' + JSON.stringify(heading));
});

test('The picture reads src and alt from person', () => {
  render(<TodoHeader />);
  const img = screen.getByRole('img');
  assert.equal(img.getAttribute('src'), 'gregorio-zara.jpg', 'the picture has src=' + JSON.stringify(img.getAttribute('src')));
  assert.equal(img.getAttribute('alt'), 'Gregorio Y. Zara', 'the picture has alt=' + JSON.stringify(img.getAttribute('alt')));
});

test('The picture is 90px wide and high, from person.imageSize', () => {
  render(<TodoHeader />);
  const {width, height} = screen.getByRole('img').style;
  assert.equal(width, '90px', 'the picture has width ' + JSON.stringify(width));
  assert.equal(height, '90px', 'the picture has height ' + JSON.stringify(height));
});

test('The header uses person.theme as its style', () => {
  render(<TodoHeader />);
  const {backgroundColor, color} = screen.getByRole('banner').style;
  assert.equal(backgroundColor, 'black', 'the header has background-color ' + JSON.stringify(backgroundColor));
  assert.equal(color, 'pink', 'the header has color ' + JSON.stringify(color));
});

test('React prints no warnings', () => {
  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 while rendering');
});