← Wszystkie zadaniaReact · Junior

Filtrowanie listy

Napisz komponent FilterList, który dostaje tablicę napisów items. Nad listą jest pole wyszukiwania z etykietą Search.

Lista <ul> pokazuje tylko napisy zawierające wpisany tekst, bez względu na wielkość liter i spacje na końcach zapytania. Jeśli nic nie pasuje, zamiast listy pokaż akapit No results.

function FilterList({ items }) {
  // ...
  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 (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);