Props übergeben

export function Square() {
  // TODO: read the value prop and show it.
  return <button className="square">1</button>;
}

export default function Board() {
  // TODO: pass value="1" to value="9" to the nine squares.
  return (
    <>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
    </>
  );
}

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {render, screen, within} from '@testing-library/react';
import Board, {Square} 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('Square zeigt den Wert, den es bekommt', () => {
  render(<Square value="7" />);
  const label = screen.getByRole('button').textContent;
  assert.equal(label, '7', '<Square value="7" /> zeigt ' + JSON.stringify(label));
});

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('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;
}

export function Player({ player, score }) {
  // TODO: show the name, the mark in brackets and the score, e.g. Ada (X): 3 points
  return <p className="player">Player</p>;
}

export default function Scoreboard() {
  // TODO: give the second Player Grace, with the mark O and a score of 5.
  return (
    <section>
      <h2>Scores</h2>
      <Player player={{ name: 'Ada', mark: 'X' }} score={3} />
      <Player />
    </section>
  );
}

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

test('Die Anzeige zeigt Ada (X): 3 points', () => {
  render(<Scoreboard />);
  assert.ok(screen.queryByText('Ada (X): 3 points'), 'kein Element zeigt den Text Ada (X): 3 points');
});

test('Die Anzeige zeigt Grace (O): 5 points', () => {
  render(<Scoreboard />);
  assert.ok(screen.queryByText('Grace (O): 5 points'), 'kein Element zeigt den Text Grace (O): 5 points');
});

test('Player zeigt die Props, die es bekommt', () => {
  render(<Player player={{ name: 'Lin', mark: 'O' }} score={0} />);
  assert.ok(screen.queryByText('Lin (O): 0 points'), 'Player mit Lin, O und 0 zeigt nicht Lin (O): 0 points');
});

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