Passing props

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('The board shows nine squares numbered 1 to 9', () => {
  render(<Board />);
  const labels = screen.getAllByRole('button').map((button) => button.textContent);
  assert.deepEqual(labels, ['1', '2', '3', '4', '5', '6', '7', '8', '9'], 'the squares read ' + JSON.stringify(labels));
});

test('Square shows the value it is given', () => {
  render(<Square value="7" />);
  const label = screen.getByRole('button').textContent;
  assert.equal(label, '7', '<Square value="7" /> shows ' + JSON.stringify(label));
});

test('The squares sit in three rows of three', () => {
  const {container} = render(<Board />);
  const rows = [...container.children];
  assert.equal(rows.length, 3, 'the board puts ' + rows.length + ' element(s) into #root, not 3 rows');
  rows.forEach((row, i) => {
    const count = within(row).queryAllByRole('button').length;
    assert.equal(count, 3, 'row ' + (i + 1) + ' holds ' + count + ' square(s)');
  });
});

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

.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('The scoreboard shows Ada (X): 3 points', () => {
  render(<Scoreboard />);
  assert.ok(screen.queryByText('Ada (X): 3 points'), 'no element shows the text Ada (X): 3 points');
});

test('The scoreboard shows Grace (O): 5 points', () => {
  render(<Scoreboard />);
  assert.ok(screen.queryByText('Grace (O): 5 points'), 'no element shows the text Grace (O): 5 points');
});

test('Player shows the props it is given', () => {
  render(<Player player={{ name: 'Lin', mark: 'O' }} score={0} />);
  assert.ok(screen.queryByText('Lin (O): 0 points'), 'Player with Lin, O and 0 does not show Lin (O): 0 points');
});

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