Фільтр списку

Напишіть компонент FilterList, який отримує масив рядків items. Над списком - поле пошуку з підписом Search.

Список <ul> показує лише ті рядки, що містять введений текст, без урахування регістру й пробілів по краях запиту. Якщо нічого не знайдено, замість списку показуйте абзац No results.

function FilterList({ items }) {
  // ...
  return null;
}

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

Тести (4)

render(<FilterList items={['Apple', 'Banana', 'Cherry']} />);
expect(screen.getAllByRole('listitem').map((li) => li.textContent)).toEqual(['Apple', 'Banana', 'Cherry']);

render(<FilterList items={['Apple', 'Banana', 'Cherry']} />);
fireEvent.change(screen.getByLabelText('Search'), { target: { value: 'an' } });
expect(screen.getAllByRole('listitem').map((li) => li.textContent)).toEqual(['Banana']);

render(<FilterList items={['Apple', 'Banana', 'Cherry']} />);
fireEvent.change(screen.getByLabelText('Search'), { target: { value: ' AP ' } });
expect(screen.getAllByRole('listitem').map((li) => li.textContent)).toEqual(['Apple']);

render(<FilterList items={['Apple', 'Banana', 'Cherry']} />);
fireEvent.change(screen.getByLabelText('Search'), { target: { value: 'xyz' } });
expect(screen.getByText('No results')).toBeTruthy();
expect(screen.queryAllByRole('listitem')).toHaveLength(0);