Список справ

Напишіть компонент TodoList: поле введення з підписом New task, кнопка Add і список <ul>.

Натискання Add додає в кінець списку <li> із введеним текстом без пробілів по краях і очищає поле. Порожній текст або самі пробіли не додаються. У <li> - лише текст справи.

function TodoList() {
  // ...
  return null;
}

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

Тести (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');