← Wszystkie zadaniaReact · Middle

Zakładki

Napisz komponent Tabs, który dostaje tablicę tabs z obiektów { label, content }. Każda zakładka ma przycisk z role="tab" i tekstem label; pod przyciskami widać tylko content aktywnej zakładki.

Na początku aktywna jest pierwsza zakładka. Aktywny przycisk ma aria-selected="true", pozostałe "false". Pusta tablica - bez zakładek i bez błędów.

function Tabs({ tabs }) {
  // tabs: [{ label, content }]
  return null;
}

Ctrl+Enter uruchamia testy. Tab robi wcięcie; aby wyjść z edytora klawiaturą, naciśnij Esc, a potem Tab. Kod zapisuje się w tej przeglądarce.

Testy (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);