Props und 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 zeigt das darin verschachtelte JSX', () => {
  render(<Panel title="Tools"><button>Inside</button></Panel>);
  assert.ok(screen.queryByRole('button', {name: 'Inside'}), 'der in <Panel> verschachtelte Button ist nicht auf der Seite');
});

test('Ein Panel ohne title zeigt den Titel Notes', () => {
  render(<Panel><p>Hello</p></Panel>);
  const heading = screen.getByRole('heading', {level: 2}).textContent;
  assert.equal(heading, 'Notes', 'die Überschrift lautet ' + JSON.stringify(heading));
});

test('Ein übergebener title wird gezeigt', () => {
  render(<Panel title="Packing"><p>Hello</p></Panel>);
  const heading = screen.getByRole('heading', {level: 2}).textContent;
  assert.equal(heading, 'Packing', 'die Überschrift lautet ' + JSON.stringify(heading));
});

test('App zeigt beide Panels mit ihrem Inhalt', () => {
  render(<App />);
  const headings = screen.getAllByRole('heading', {level: 2}).map((h) => h.textContent);
  assert.deepEqual(headings, ['Packing', 'Notes'], 'die Überschriften sind ' + JSON.stringify(headings));
  assert.ok(screen.queryByText('Water the plants'), 'der Text Water the plants ist nicht auf der Seite');
});

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 ist 80 Pixel breit, wie Gallery es übergibt', () => {
  render(<Gallery />);
  const width = screen.getByRole('img', {name: 'Lin Lanying'}).getAttribute('width');
  assert.equal(width, '80', 'das Bild hat width=' + JSON.stringify(width));
});

test('Aklilu Lemma bekommt die Standardgröße 60', () => {
  render(<Gallery />);
  const img = screen.getByRole('img', {name: 'Aklilu Lemma'});
  assert.equal(img.getAttribute('width'), '60', 'das Bild hat width=' + JSON.stringify(img.getAttribute('width')));
  assert.equal(img.getAttribute('height'), '60', 'das Bild hat height=' + JSON.stringify(img.getAttribute('height')));
});

test('Profile gibt jede Größe und das Bild weiter', () => {
  render(<Profile person={{ name: 'Ada', imageUrl: 'ada.jpg' }} size={40} />);
  const img = screen.getByRole('img', {name: 'Ada'});
  assert.equal(img.getAttribute('width'), '40', 'das Bild hat width=' + JSON.stringify(img.getAttribute('width')));
  assert.equal(img.getAttribute('src'), 'ada.jpg', 'das Bild hat src=' + JSON.stringify(img.getAttribute('src')));
});

test('size={0} wird weitergegeben, nicht durch den Standardwert ersetzt', () => {
  render(<Profile person={{ name: 'Ada', imageUrl: 'ada.jpg' }} size={0} />);
  const width = screen.getByRole('img', {name: 'Ada'}).getAttribute('width');
  assert.equal(width, '0', 'das Bild hat width=' + JSON.stringify(width));
});