Components and 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('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('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('Rows and squares have their CSS classes', () => {
  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(s) have the class board-row');
  assert.equal(squares, 9, squares + ' button(s) have the class square');
});

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

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('The heading shows the name from user', () => {
  render(<Profile />);
  const heading = screen.getByRole('heading', {level: 2}).textContent;
  assert.equal(heading, 'Hedy Lamarr', 'the heading reads ' + JSON.stringify(heading));
});

test('The role from user is shown', () => {
  render(<Profile />);
  assert.ok(screen.queryByText('Inventor and actor'), 'no element shows the text Inventor and actor');
});

test('The picture reads its address from user.imageUrl', () => {
  render(<Profile />);
  const src = screen.getByRole('img').getAttribute('src');
  assert.equal(src, 'hedy-lamarr.jpg', 'the picture has src=' + JSON.stringify(src));
});

test('The alt text is Photo of Hedy Lamarr', () => {
  render(<Profile />);
  const alt = screen.getByRole('img').getAttribute('alt');
  assert.equal(alt, 'Photo of Hedy Lamarr', 'the picture has alt=' + JSON.stringify(alt));
});

test('The picture has the CSS class avatar', () => {
  render(<Profile />);
  const className = screen.getByRole('img').className;
  assert.equal(className, 'avatar', 'the picture 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(<Profile />);
  } finally {
    console.error = original;
  }
  assert.deepEqual(warnings, [], 'console.error while rendering');
});

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

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