Aufgabenliste

Schreib eine Komponente TodoList: ein Eingabefeld mit dem Label New task, einen Button Add und eine Liste <ul>.

Ein Klick auf Add hängt ein <li> mit dem getippten Text an (ohne Leerzeichen an den Enden) und leert das Feld. Leerer Text oder nur Leerzeichen werden nicht hinzugefügt. Das <li> enthält nur den Text der Aufgabe.

function TodoList() {
  // ...
  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(<TodoList />);
const input = screen.getByLabelText('New task');
fireEvent.change(input, { target: { value: 'Buy milk' } });
fireEvent.click(screen.getByRole('button', { name: 'Add' }));
fireEvent.change(input, { target: { value: 'Walk the dog' } });
fireEvent.click(screen.getByRole('button', { name: 'Add' }));
expect(screen.getAllByRole('listitem').map((li) => li.textContent)).toEqual(['Buy milk', 'Walk the dog']);

render(<TodoList />);
const input = screen.getByLabelText('New task');
fireEvent.change(input, { target: { value: 'Buy milk' } });
fireEvent.click(screen.getByRole('button', { name: 'Add' }));
expect(input.value).toBe('');

render(<TodoList />);
fireEvent.change(screen.getByLabelText('New task'), { target: { value: '   ' } });
fireEvent.click(screen.getByRole('button', { name: 'Add' }));
expect(screen.queryAllByRole('listitem')).toHaveLength(0);

render(<TodoList />);
fireEvent.change(screen.getByLabelText('New task'), { target: { value: '  Read  ' } });
fireEvent.click(screen.getByRole('button', { name: 'Add' }));
expect(screen.getByRole('listitem').textContent).toBe('Read');