Komponenten und JSX

export default function Board() {
  // TODO: three rows of three squares, numbered 1 to 9.
  return <button className="square">1</button>;
}

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

test('Das Brett zeigt neun Felder mit den Zahlen 1 bis 9', () => {
  render(<Board />);
  const labels = screen.getAllByRole('button').map((button) => button.textContent);
  assert.deepEqual(labels, ['1', '2', '3', '4', '5', '6', '7', '8', '9'], 'die Felder zeigen ' + JSON.stringify(labels));
});

test('Die Felder stehen in drei Reihen zu je drei', () => {
  const {container} = render(<Board />);
  const rows = [...container.children];
  assert.equal(rows.length, 3, 'das Brett legt ' + rows.length + ' Element(e) in #root, nicht 3 Reihen');
  rows.forEach((row, i) => {
    const count = within(row).queryAllByRole('button').length;
    assert.equal(count, 3, 'Reihe ' + (i + 1) + ' enthält ' + count + ' Feld(er)');
  });
});

test('Reihen und Felder haben ihre CSS-Klassen', () => {
  const {container} = render(<Board />);
  const rows = container.querySelectorAll('div.board-row').length;
  const squares = container.querySelectorAll('button.square').length;
  assert.equal(rows, 3, rows + ' Element(e) haben die Klasse board-row');
  assert.equal(squares, 9, squares + ' Button(s) haben die Klasse square');
});

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

.board-row {
  display: flex;
}

.square {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 -1px -1px 0;
  border: 1px solid #999;
  background: #fff;
  font-size: 1.5rem;
  font-weight: bold;
}

const user = {
  name: 'Hedy Lamarr',
  role: 'Inventor and actor',
  imageUrl: 'hedy-lamarr.jpg'
};

function Avatar() {
  // TODO: use className, read the address from user.imageUrl, and build the alt text from user.name.
  return <img class="avatar" src="user.imageUrl" alt="Photo" />;
}

export default function Profile() {
  // TODO: show the name and the role from user.
  return (
    <article className="profile">
      <Avatar />
      <h2>Name</h2>
      <p>Role</p>
    </article>
  );
}

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

test('Die Überschrift zeigt den Namen aus user', () => {
  render(<Profile />);
  const heading = screen.getByRole('heading', {level: 2}).textContent;
  assert.equal(heading, 'Hedy Lamarr', 'die Überschrift lautet ' + JSON.stringify(heading));
});

test('Die Rolle aus user wird angezeigt', () => {
  render(<Profile />);
  assert.ok(screen.queryByText('Inventor and actor'), 'kein Element zeigt den Text Inventor and actor');
});

test('Das Bild liest seine Adresse aus user.imageUrl', () => {
  render(<Profile />);
  const src = screen.getByRole('img').getAttribute('src');
  assert.equal(src, 'hedy-lamarr.jpg', 'das Bild hat src=' + JSON.stringify(src));
});

test('Der Alt-Text lautet Photo of Hedy Lamarr', () => {
  render(<Profile />);
  const alt = screen.getByRole('img').getAttribute('alt');
  assert.equal(alt, 'Photo of Hedy Lamarr', 'das Bild hat alt=' + JSON.stringify(alt));
});

test('Das Bild hat die CSS-Klasse avatar', () => {
  render(<Profile />);
  const className = screen.getByRole('img').className;
  assert.equal(className, 'avatar', 'das Bild 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(<Profile />);
  } finally {
    console.error = original;
  }
  assert.deepEqual(warnings, [], 'console.error beim Rendern');
});

.profile {
  font-family: sans-serif;
}

.avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
}