Powitanie z polem tekstowym

Napisz komponent Greeting z polem tekstowym z etykietą Name (przez <label> lub aria-label) i akapitem pod nim.

Akapit pokazuje Hello, <imię>!, gdzie imię to wpisany tekst bez spacji na końcach. Jeśli pole jest puste lub zawiera tylko spacje, akapit pokazuje Hello, stranger!.

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