← Alle AufgabenReact · Junior

Liste filtern

Schreib eine Komponente FilterList, die ein Array von Strings items bekommt. Über der Liste steht ein Suchfeld mit dem Label Search.

Die Liste <ul> zeigt nur die Strings, die den getippten Text enthalten, ohne Rücksicht auf Groß- und Kleinschreibung und auf Leerzeichen an den Enden der Suche. Passt nichts, zeig statt der Liste einen Absatz No results.

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