← Alle AufgabenReact · Middle

Akkordeon

Schreib eine Komponente Accordion, die ein Array items von Objekten { title, content } bekommt. Jeder Eintrag bekommt einen Button mit dem Text title und darunter content, wenn der Eintrag offen ist.

Alle Einträge sind zu Beginn geschlossen. Nur einer kann gleichzeitig offen sein: ein Eintrag zu öffnen schließt den anderen, und ein erneuter Klick auf den offenen schließt ihn. Der Button hat aria-expanded, das den Zustand des Eintrags widerspiegelt.

function Accordion({ items }) {
  // items: [{ title, content }]
  return null;
}

Strg+Enter führt die Tests aus. Tab rückt ein; um den Editor per Tastatur zu verlassen, drücke Esc und dann Tab. Der Code wird in diesem Browser gespeichert.

Tests (4)

const items = [{ title: 'Q1', content: 'A1' }, { title: 'Q2', content: 'A2' }];
render(<Accordion items={items} />);
expect(screen.queryByText('A1')).toBe(null);
expect(screen.queryByText('A2')).toBe(null);
expect(screen.getByRole('button', { name: 'Q1' }).getAttribute('aria-expanded')).toBe('false');

const items = [{ title: 'Q1', content: 'A1' }, { title: 'Q2', content: 'A2' }];
render(<Accordion items={items} />);
fireEvent.click(screen.getByRole('button', { name: 'Q1' }));
expect(screen.getByText('A1')).toBeTruthy();
expect(screen.getByRole('button', { name: 'Q1' }).getAttribute('aria-expanded')).toBe('true');

const items = [{ title: 'Q1', content: 'A1' }, { title: 'Q2', content: 'A2' }];
render(<Accordion items={items} />);
fireEvent.click(screen.getByRole('button', { name: 'Q1' }));
fireEvent.click(screen.getByRole('button', { name: 'Q2' }));
expect(screen.getByText('A2')).toBeTruthy();
expect(screen.queryByText('A1')).toBe(null);

const items = [{ title: 'Q1', content: 'A1' }];
render(<Accordion items={items} />);
fireEvent.click(screen.getByRole('button', { name: 'Q1' }));
fireEvent.click(screen.getByRole('button', { name: 'Q1' }));
expect(screen.queryByText('A1')).toBe(null);