Lista zadań

Napisz komponent TodoList: pole tekstowe z etykietą New task, przycisk Add i listę <ul>.

Kliknięcie Add dodaje na końcu listy <li> z wpisanym tekstem bez spacji na końcach i czyści pole. Pusty tekst lub same spacje nie są dodawane. W <li> jest tylko tekst zadania.

function TodoList() {
  // ...
  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(<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');