← Усі задачіReact · Middle

Вкладки

Напишіть компонент Tabs, який отримує масив tabs з об'єктів { label, content }. Для кожної вкладки - кнопка з role="tab" і текстом label; під кнопками показується content лише активної вкладки.

Спочатку активна перша вкладка. В активної кнопки aria-selected="true", в інших - "false". Порожній масив - без вкладок і без помилок.

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

Ctrl+Enter - запустити тести. Tab - відступ; щоб вийти з редактора клавіатурою, натисніть Esc, а потім Tab. Код зберігається в цьому браузері.

Тести (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);