Final commit

src/App.test.jsx

@@ -1,10 +1,10 @@
-import { render, screen } from "@testing-library/react"
+import { render, screen, fireEvent } from "@testing-library/react"
 import { BookingForm } from "./components/BookingForm"
 import "@testing-library/jest-dom"
-import { initializeTimes, updateTimes } from "./components/Main"
+import { initializeTimes } from "./components/Main"
+const availableTimes = ["17:00", "18:00"]
 
 test("Renders the BookingForm heading", () => {
-	const availableTimes = ["17:00"]
 	render(<BookingForm availableTimes={availableTimes} />)
 	const headingElement = screen.getByText("Choose date")
 	expect(headingElement).toBeInTheDocument()
@@ -15,7 +15,98 @@ test("Returns a correct array of times", () => {
 	expect(initializeTimes()[0]).toMatch(/\d{2}:\d{2}/)
 })
 
-test("Returns the same value provided in the state", () => {
-	const times = initializeTimes()
-	expect(updateTimes(times, "2022-02-04")).toBe(times)
+test("Guests input is required.", () => {
+	render(<BookingForm availableTimes={availableTimes} />)
+	const guestsInput = screen.getByLabelText("Number of guests")
+	expect(guestsInput).toHaveAttribute("required")
+})
+
+test("Time input is required.", () => {
+	render(<BookingForm availableTimes={availableTimes} />)
+	const timeInput = screen.getByLabelText("Choose time")
+	expect(timeInput).toHaveAttribute("required")
+})
+
+test("Occasion input is not required.", () => {
+	render(<BookingForm availableTimes={availableTimes} />)
+	const occasionInput = screen.getByLabelText("Occasion")
+	expect(occasionInput).not.toHaveAttribute("required")
+})
+
+test("Date input is required.", () => {
+	render(<BookingForm availableTimes={availableTimes} />)
+	const dateInput = screen.getByLabelText("Choose date")
+	expect(dateInput).toHaveAttribute("required")
+})
+
+test("Guests input errors correctly.", () => {
+	render(<BookingForm availableTimes={availableTimes} />)
+
+	const guestsInput = screen.getByLabelText("Number of guests")
+	fireEvent.change(guestsInput, { target: { value: "23" } })
+	const error = screen.getByText("Guests must be between 1 and 10.")
+	expect(error).toBeInTheDocument()
+})
+
+test("Guests input does not error incorrectly.", () => {
+	render(<BookingForm availableTimes={availableTimes} />)
+
+	const guestsInput = screen.getByLabelText("Number of guests")
+	fireEvent.change(guestsInput, { target: { value: "2" } })
+	const error = screen.queryByText("Guests must be between 1 and 10.")
+	expect(error).not.toBeInTheDocument()
+})
+
+test("Time input errors correctly.", () => {
+	render(<BookingForm availableTimes={availableTimes} />)
+
+	const timeInput = screen.getByLabelText("Choose time")
+	fireEvent.change(timeInput, { target: { value: "" } })
+	const error = screen.getByText("Field is required.")
+	expect(error).toBeInTheDocument()
+})
+
+test("Time input does not error incorrectly.", () => {
+	render(<BookingForm availableTimes={availableTimes} />)
+
+	const timeInput = screen.getByLabelText("Choose time")
+	fireEvent.change(timeInput, { target: { value: "17:00" } })
+	const error = screen.queryByText("Field is required.")
+	expect(error).not.toBeInTheDocument()
+})
+
+test("Date input errors correctly.", () => {
+	render(<BookingForm availableTimes={availableTimes} />)
+
+	const dateInput = screen.getByLabelText("Choose date")
+	fireEvent.change(dateInput, { target: { value: "" } })
+	const error = screen.getByText("Field is required.")
+	expect(error).toBeInTheDocument()
+})
+
+test("Date input does not error incorrectly.", () => {
+	render(<BookingForm availableTimes={availableTimes} />)
+
+	const dateInput = screen.getByLabelText("Choose date")
+	fireEvent.change(dateInput, { target: { value: "2023-03-02" } })
+	const error = screen.queryByText("Field is required.")
+	expect(error).not.toBeInTheDocument()
+})
+
+test("Occasion input errors correctly.", () => {
+	render(<BookingForm availableTimes={availableTimes} />)
+
+	const occasionInput = screen.getByLabelText("Occasion")
+	fireEvent.change(occasionInput, { target: { value: "23" } })
+	const error = screen.getByText("Invalid occasion.")
+	expect(error).toBeInTheDocument()
+})
+
+test("Occasion input does not error incorrectly.", () => {
+	render(<BookingForm availableTimes={availableTimes} />)
+
+	const occasionInput = screen.getByLabelText("Occasion")
+	fireEvent.change(occasionInput, { target: { value: "Other" } })
+	const error = screen.queryByText("Invalid occasion.")
+	expect(error).not.toBeInTheDocument()
 })

src/components/BookingForm.jsx

@@ -25,22 +25,22 @@ export const BookingForm = ({
 
 	const onDateChange = ({ target }) => {
 		let error = ""
-		if (target.value === "") error = "Field is required"
+		if (target.value === "") error = "Field is required."
 		setDateError(error)
 		setDate(target.value)
-		if (!error) dispatch(target.valueAsDate)
+		if (!error && dispatch) dispatch(target.valueAsDate)
 	}
 
 	const onTimeChange = ({ target }) => {
 		let error = ""
-		if (target.value === "") error = "Field is required"
+		if (target.value === "") error = "Field is required."
 		setTimeError(error)
 		setTime(target.value)
 	}
 
 	const onGuestChange = ({ target }) => {
 		let error = ""
-		if (target.value === "") error = "Field is required"
+		if (target.value === "") error = "Field is required."
 		else if (target.value < 1 || target.value > 10)
 			error = "Guests must be between 1 and 10."
 		setGuestsError(error)
@@ -49,8 +49,7 @@ export const BookingForm = ({
 
 	const onOccasionChange = ({ target }) => {
 		let error = ""
-		if (target.value === "") error = "Field is required"
-		else if (
+		if (
 			target.value !== "Other" &&
 			target.value !== "Birthday" &&
 			target.value !== "Anniversary"

src/styles/About.css

@@ -4,7 +4,7 @@
 	align-items: center;
 	color: black;
 	position: relative;
-	height: 18rem;
+	min-height: 18rem;
 }
 
 .about h2 {