Привітання з полем введення

Напишіть компонент Greeting з полем введення з підписом Name (через <label> або aria-label) і абзацом під ним.

Абзац показує Hello, <ім'я>!, де ім'я - введений текст без пробілів по краях. Якщо поле порожнє або в ньому лише пробіли, абзац показує Hello, stranger!.

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

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

Тести (4)

render(<Greeting />);
expect(screen.getByText('Hello, stranger!')).toBeTruthy();

render(<Greeting />);
fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Anna' } });
expect(screen.getByText('Hello, Anna!')).toBeTruthy();

render(<Greeting />);
fireEvent.change(screen.getByLabelText('Name'), { target: { value: '  Bob  ' } });
expect(screen.getByText('Hello, Bob!')).toBeTruthy();

render(<Greeting />);
const input = screen.getByLabelText('Name');
fireEvent.change(input, { target: { value: 'Anna' } });
fireEvent.change(input, { target: { value: '' } });
expect(screen.getByText('Hello, stranger!')).toBeTruthy();
expect(input.value).toBe('');