finish exercise 3

Author: kentcdodds

exercises/03.optimistic/03.solution.message/message.test.ts

@@ -3,73 +3,85 @@ const { screen, waitFor, fireEvent } = dtl
 
 import './index.tsx'
 
-await testStep(
-	'Create button shows correct messages during form submission',
+await testStep('Initial ship details are loaded', async () => {
+	await screen.findByRole('heading', { name: /Dreadnought/i })
+	await waitFor(
+		() => expect(screen.queryAllByText('loading')).toHaveLength(0),
+		{ timeout: 5000 },
+	)
+})
+
+const createButton = await testStep(
+	'Create form renders correctly',
 	async () => {
+		expect(screen.getByLabelText('Ship Name')).toBeInTheDocument()
+		expect(screen.getByLabelText('Top Speed')).toBeInTheDocument()
+		expect(screen.getByLabelText('Image')).toBeInTheDocument()
 		const createButton = screen.getByRole('button', { name: /Create/i })
 		expect(createButton).toBeInTheDocument()
+		return createButton
+	},
+)
 
-		// Mock form submission
-		fireEvent.click(createButton)
+const shipName = 'New Test Ship'
+const topSpeed = '9999'
+await testStep('Form submission functions', async () => {
+	fireEvent.change(screen.getByLabelText(/Ship Name/i), {
+		target: { value: shipName },
+	})
+	fireEvent.change(screen.getByLabelText(/Top Speed/i), {
+		target: { value: topSpeed },
+	})
 
-		// Check for "Creating..." message
+	// We can't actually select files via JavaScript, so we need to remove the required attribute
+	const imageInput = screen.getByLabelText(/Image/i)
+	imageInput.removeAttribute('required')
+
+	fireEvent.click(createButton)
+})
+
+await testStep(
+	'Create button shows "Creating..." during submission',
+	async () => {
 		await waitFor(() => {
 			expect(
-				screen.getByRole('button', { name: /Creating.../i }),
-			).toBeInTheDocument()
+				createButton,
+				'🚨 The create button should show "Creating..." when the form is submitted',
+			).toHaveTextContent('Creating...')
 		})
+	},
+)
 
-		// Check for "Created! Loading..." message
+await testStep(
+	'Create button shows "Created! Loading..." after creation',
+	async () => {
 		await waitFor(
 			() => {
 				expect(
-					screen.getByRole('button', { name: /Created! Loading.../i }),
-				).toBeInTheDocument()
+					createButton,
+					'🚨 The create button should show "Created! Loading..." after the ship is created',
+				).toHaveTextContent('Created! Loading...')
 			},
 			{ timeout: 5000 },
 		)
-
-		// Wait for submission to complete and button to return to initial state
-		await screen.findByRole('button', { name: /Create/i }, { timeout: 5000 })
 	},
 )
 
-await testStep('Optimistic UI updates with correct messages', async () => {
-	const shipName = 'Message Test Ship'
-	const topSpeed = '8888'
-
-	fireEvent.change(screen.getByLabelText('Ship Name'), {
-		target: { value: shipName },
-	})
-	fireEvent.change(screen.getByLabelText('Top Speed'), {
-		target: { value: topSpeed },
-	})
-
-	// Mock file input
-	const file = new File(['dummy content'], 'test.png', { type: 'image/png' })
-	fireEvent.change(screen.getByLabelText('Image'), {
-		target: { files: [file] },
-	})
-
-	fireEvent.click(screen.getByRole('button', { name: /Create/i }))
+await testStep(
+	'Create button shows "Create" after full submission',
+	async () => {
+		await waitFor(
+			() => {
+				expect(
+					createButton,
+					'🚨 The create button should show "Create" when the request is complete',
+				).toHaveTextContent('Create')
+			},
+			{ timeout: 5000 },
+		)
+	},
+)
 
-	// Check for optimistic update with "Creating..." message
+await testStep('New ship is displayed', async () => {
 	await screen.findByRole('heading', { name: new RegExp(shipName, 'i') })
-	await screen.findByText(new RegExp(topSpeed, 'i'))
-	expect(
-		screen.getByRole('button', { name: /Creating.../i }),
-	).toBeInTheDocument()
-
-	// Check for "Created! Loading..." message
-	await waitFor(
-		() => {
-			expect(
-				screen.getByRole('button', { name: /Created! Loading.../i }),
-			).toBeInTheDocument()
-		},
-		{ timeout: 5000 },
-	)
-
-	// Wait for the actual data to load and button to return to initial state
-	await screen.findByRole('button', { name: /Create/i }, { timeout: 5000 })
 })