diff --git a/src/Home/Home.test.tsx b/src/Home/Home.test.tsx new file mode 100644 index 0000000..5cbb12a --- /dev/null +++ b/src/Home/Home.test.tsx @@ -0,0 +1,17 @@ +import { fireEvent, render, screen } from "@testing-library/react"; +import Home from "./Home"; +import "@testing-library/jest-dom"; + +test("user's name is displayed on form submission", () => { + render(); + + const name = "Luigi"; + const textArea = screen.getByLabelText(/Enter name:/); + fireEvent.change(textArea, { target: { value: name }}); + + const submitButton = screen.getByRole("button"); + fireEvent.click(submitButton); + + const welcomeMessage = screen.getByText(/Welcome Luigi!/i); + expect(welcomeMessage).toBeInTheDocument(); +}) \ No newline at end of file diff --git a/src/Home/Home.tsx b/src/Home/Home.tsx index 93a8126..9549374 100644 --- a/src/Home/Home.tsx +++ b/src/Home/Home.tsx @@ -1,6 +1,27 @@ +import { useState } from "react"; + function Home() { + + const [username, setUsername] = useState(""); + const [submitStatus, setSubmitStatus] = useState(false); + + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault(); + setSubmitStatus(true); + } + return ( <> +
+ + + {submitStatus ?

Welcome {username}!

: null } +
) }