Props and children

// Panel should show what is nested inside it, and the title Notes
// when no title is given.
export function Panel({ title }) {
  return (
    <section className="panel">
      <h2>{title}</h2>
    </section>
  );
}

export default function App() {
  return (
    <>
      <Panel title="Packing">
        <p>Bring a helmet</p>
      </Panel>
      <Panel>
        <p>Water the plants</p>
      </Panel>
    </>
  );
}

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

test('Panel shows the JSX nested inside it', () => {
  render(<Panel title="Tools"><button>Inside</button></Panel>);
  assert.ok(screen.queryByRole('button', {name: 'Inside'}), 'the button nested in <Panel> is not on the page');
});

test('A Panel without a title shows the title Notes', () => {
  render(<Panel><p>Hello</p></Panel>);
  const heading = screen.getByRole('heading', {level: 2}).textContent;
  assert.equal(heading, 'Notes', 'the heading reads ' + JSON.stringify(heading));
});

test('A title that is given is shown', () => {
  render(<Panel title="Packing"><p>Hello</p></Panel>);
  const heading = screen.getByRole('heading', {level: 2}).textContent;
  assert.equal(heading, 'Packing', 'the heading reads ' + JSON.stringify(heading));
});

test('App shows both panels with their content', () => {
  render(<App />);
  const headings = screen.getAllByRole('heading', {level: 2}).map((h) => h.textContent);
  assert.deepEqual(headings, ['Packing', 'Notes'], 'the headings are ' + JSON.stringify(headings));
  assert.ok(screen.queryByText('Water the plants'), 'the text Water the plants is not on the page');
});

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={person.imageUrl}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

// TODO: Avatar's size is 60 when none is given, and Profile passes
// every prop it gets on to Avatar.
export function Profile({ person }) {
  return (
    <div className="card">
      <Avatar person={person} />
    </div>
  );
}

export default function Gallery() {
  return (
    <>
      <Profile person={{ name: 'Lin Lanying', imageUrl: 'lin.jpg' }} size={80} />
      <Profile person={{ name: 'Aklilu Lemma', imageUrl: 'aklilu.jpg' }} />
    </>
  );
}

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

test('Lin Lanying is 80 pixels wide, as Gallery passes', () => {
  render(<Gallery />);
  const width = screen.getByRole('img', {name: 'Lin Lanying'}).getAttribute('width');
  assert.equal(width, '80', 'the picture has width=' + JSON.stringify(width));
});

test('Aklilu Lemma gets the default size 60', () => {
  render(<Gallery />);
  const img = screen.getByRole('img', {name: 'Aklilu Lemma'});
  assert.equal(img.getAttribute('width'), '60', 'the picture has width=' + JSON.stringify(img.getAttribute('width')));
  assert.equal(img.getAttribute('height'), '60', 'the picture has height=' + JSON.stringify(img.getAttribute('height')));
});

test('Profile forwards any size and the picture', () => {
  render(<Profile person={{ name: 'Ada', imageUrl: 'ada.jpg' }} size={40} />);
  const img = screen.getByRole('img', {name: 'Ada'});
  assert.equal(img.getAttribute('width'), '40', 'the picture has width=' + JSON.stringify(img.getAttribute('width')));
  assert.equal(img.getAttribute('src'), 'ada.jpg', 'the picture has src=' + JSON.stringify(img.getAttribute('src')));
});

test('size={0} is passed on, not replaced by the default', () => {
  render(<Profile person={{ name: 'Ada', imageUrl: 'ada.jpg' }} size={0} />);
  const width = screen.getByRole('img', {name: 'Ada'}).getAttribute('width');
  assert.equal(width, '0', 'the picture has width=' + JSON.stringify(width));
});