← Alle AufgabenReact · Middle

Tabs

Schreib eine Komponente Tabs, die ein Array tabs von Objekten { label, content } bekommt. Jeder Tab bekommt einen Button mit role="tab" und dem Text label; unter den Buttons wird nur der content des aktiven Tabs gezeigt.

Zu Beginn ist der erste Tab aktiv. Der aktive Button hat aria-selected="true", die anderen "false". Ein leeres Array rendert keine Tabs und keine Fehler.

function Tabs({ tabs }) {
  // tabs: [{ label, 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 (3)

const tabs = [{ label: 'A', content: 'Content A' }, { label: 'B', content: 'Content B' }, { label: 'C', content: 'Content C' }];
render(<Tabs tabs={tabs} />);
expect(screen.getAllByRole('tab')).toHaveLength(3);
expect(screen.getByRole('tab', { name: 'A' }).getAttribute('aria-selected')).toBe('true');
expect(screen.getByText('Content A')).toBeTruthy();
expect(screen.queryByText('Content B')).toBe(null);

const tabs = [{ label: 'A', content: 'Content A' }, { label: 'B', content: 'Content B' }];
render(<Tabs tabs={tabs} />);
fireEvent.click(screen.getByRole('tab', { name: 'B' }));
expect(screen.getByText('Content B')).toBeTruthy();
expect(screen.queryByText('Content A')).toBe(null);
expect(screen.getByRole('tab', { name: 'B' }).getAttribute('aria-selected')).toBe('true');
expect(screen.getByRole('tab', { name: 'A' }).getAttribute('aria-selected')).toBe('false');

render(<Tabs tabs={[]} />);
expect(screen.queryAllByRole('tab')).toHaveLength(0);