Ihre erste Komponente, Import und Export

// The components now live in Avatar.jsx and Labels.jsx. Finish the split:
// delete these old copies and import the new ones instead.
function Title() {
  return <h1>Team</h1>;
}

function Avatar() {
  return <img className="avatar" src="ada.jpg" alt="Ada" />;
}

function Footer() {
  return <p>Made by us</p>;
}

export default function TeamPage() {
  return (
    <main>
      <Title />
      <Avatar />
      <Footer />
    </main>
  );
}

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

test('Die Überschrift kommt von Title aus Labels.jsx', () => {
  render(<TeamPage />);
  const heading = screen.getByRole('heading', {level: 1}).textContent;
  assert.equal(heading, 'Our team', 'die Überschrift lautet ' + JSON.stringify(heading));
});

test('Das Bild kommt von Avatar aus Avatar.jsx', () => {
  render(<TeamPage />);
  const alt = screen.getByRole('img').getAttribute('alt');
  assert.equal(alt, 'Ada Lovelace', 'das Bild hat alt=' + JSON.stringify(alt));
});

test('Die Fußzeile kommt von Footer aus Labels.jsx', () => {
  render(<TeamPage />);
  assert.ok(screen.queryByText('Made with React'), 'kein Element zeigt den Text Made with React');
});

test('Title, Avatar und Footer stehen in dieser Reihenfolge in <main>', () => {
  render(<TeamPage />);
  const tags = [...screen.getByRole('main').children].map((child) => child.tagName.toLowerCase());
  assert.deepEqual(tags, ['h1', 'img', 'p'], '<main> enthält ' + JSON.stringify(tags));
});

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

export default function Avatar() {
  return <img className="avatar" src="ada-lovelace.jpg" alt="Ada Lovelace" />;
}

export function Title() {
  return <h1>Our team</h1>;
}

export function Footer() {
  return <p>Made with React</p>;
}

import {useState} from 'react';

export default function Gallery() {
  const [dark, setDark] = useState(false);

  // TODO: move LikeButton out of Gallery, to the top level of the file.
  function LikeButton() {
    const [likes, setLikes] = useState(0);
    return <button onClick={() => setLikes(likes + 1)}>Like ({likes})</button>;
  }

  // TODO: show three photos, each with its own LikeButton.
  return (
    <section className={dark ? 'dark' : 'light'}>
      <button onClick={() => setDark(!dark)}>Dark mode</button>
      <figure>
        <img src="sunrise.jpg" alt="Sunrise" />
        <LikeButton />
      </figure>
    </section>
  );
}

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

const likes = () => screen.getAllByRole('button', {name: /^Like/}).map((button) => button.textContent);

test('Drei Fotos, jedes mit einem Like-Button', () => {
  render(<Gallery />);
  const photos = screen.getAllByRole('img').length;
  assert.equal(photos, 3, 'die Galerie zeigt ' + photos + ' Foto(s)');
  assert.deepEqual(likes(), ['Like (0)', 'Like (0)', 'Like (0)'], 'die Like-Buttons zeigen ' + JSON.stringify(likes()));
});

test('Jeder Like-Button zählt für sich', async () => {
  const user = userEvent.setup();
  render(<Gallery />);
  const first = screen.getAllByRole('button', {name: /^Like/})[0];
  await user.click(first);
  await user.click(first);
  assert.deepEqual(likes(), ['Like (2)', 'Like (0)', 'Like (0)'], 'nach zwei Klicks auf den ersten: ' + JSON.stringify(likes()));
});

test('Die Likes überstehen einen Klick auf Dark mode', async () => {
  const user = userEvent.setup();
  render(<Gallery />);
  await user.click(screen.getAllByRole('button', {name: /^Like/})[0]);
  await user.click(screen.getByRole('button', {name: 'Dark mode'}));
  assert.equal(likes()[0], 'Like (1)', 'nach einem Like und Dark mode zeigt der erste Button ' + JSON.stringify(likes()[0]));
});

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