finish exercise 4 tests

Author: kentcdodds

exercises/04.image/02.problem.error/utils.tsx

@@ -38,12 +38,15 @@ function preloadImage(src: string) {
 	})
 }
 
+// added the version to prevent caching to make testing easier
+const version = Date.now()
+
 export function getImageUrlForShip(
 	shipName: string,
 	{ size }: { size: number },
 ) {
-	// return `/img/ships/${shipName.toLowerCase().replaceAll(' ', '-')}.webp?size=${size}`
+	// return `/img/ships/${shipName.toLowerCase().replaceAll(' ', '-')}.webp?size=${size}&version=${version}`
 	// 🧝‍♂️ This is just here for us to test what happens when the image fails to load
-	const intentionalTypoUrl = `/img/typo/${shipName.toLowerCase().replaceAll(' ', '-')}.webp?size=${size}`
+	const intentionalTypoUrl = `/img/typo/${shipName.toLowerCase().replaceAll(' ', '-')}.webp?size=${size}&version=${version}`
 	return intentionalTypoUrl
 }

exercises/04.image/02.solution.error/img-error.test.ts

@@ -0,0 +1,19 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { waitFor } = dtl
+
+import './index.tsx'
+
+await testStep('Error boundary fallback is used for image', async () => {
+	await waitFor(
+		() => {
+			const img = Array.from(document.querySelectorAll('img')).find((img) =>
+				img.getAttribute('src')?.includes('typo'),
+			)
+			expect(
+				img,
+				'🚨 Image with typo in src should be in the document',
+			).toBeTruthy()
+		},
+		{ timeout: 3000 },
+	)
+})

exercises/04.image/02.solution.error/utils.tsx

@@ -38,12 +38,15 @@ function preloadImage(src: string) {
 	})
 }
 
+// added the version to prevent caching to make testing easier
+const version = Date.now()
+
 export function getImageUrlForShip(
 	shipName: string,
 	{ size }: { size: number },
 ) {
-	// return `/img/ships/${shipName.toLowerCase().replaceAll(' ', '-')}.webp?size=${size}`
+	// return `/img/ships/${shipName.toLowerCase().replaceAll(' ', '-')}.webp?size=${size}&version=${version}`
 	// 🧝‍♂️ This is just here for us to test what happens when the image fails to load
-	const intentionalTypoUrl = `/img/typo/${shipName.toLowerCase().replaceAll(' ', '-')}.webp?size=${size}`
+	const intentionalTypoUrl = `/img/typo/${shipName.toLowerCase().replaceAll(' ', '-')}.webp?size=${size}&version=${version}`
 	return intentionalTypoUrl
 }

exercises/04.image/03.problem.key/utils.tsx

@@ -38,9 +38,12 @@ function preloadImage(src: string) {
 	})
 }
 
+// added the version to prevent caching to make testing easier
+const version = Date.now()
+
 export function getImageUrlForShip(
 	shipName: string,
 	{ size }: { size: number },
 ) {
-	return `/img/ships/${shipName.toLowerCase().replaceAll(' ', '-')}.webp?size=${size}`
+	return `/img/ships/${shipName.toLowerCase().replaceAll(' ', '-')}.webp?size=${size}&version=${version}`
 }

exercises/04.image/03.solution.key/suspense-key.test.ts

@@ -0,0 +1,35 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen, waitFor, fireEvent } = dtl
+
+import './index.tsx'
+
+await testStep('Initial ship details are loaded', async () => {
+	await screen.findByRole('heading', { name: /Dreadnought/i })
+	await waitFor(
+		() => expect(screen.queryAllByText('loading')).toHaveLength(0),
+		{ timeout: 3000 },
+	)
+	await new Promise((resolve) => {
+		screen
+			.getByAltText('Dreadnought')
+			.addEventListener('load', resolve, { once: true })
+	})
+	await new Promise((resolve) => setTimeout(resolve, 250))
+})
+
+await testStep('Click on a different ship', async () => {
+	fireEvent.click(screen.getByRole('button', { name: 'Interceptor' }))
+})
+
+await testStep('The suspense boundary should be shown', async () => {
+	await waitFor(
+		() => {
+			const fallbackImg = screen.getByAltText('Interceptor')
+			expect(
+				fallbackImg.getAttribute('src'),
+				'🚨 The fallback image is not shown. Make sure you add a key to the Suspense boundary.',
+			).toBe('/img/fallback-ship.png')
+		},
+		{ timeout: 3000 },
+	)
+})

exercises/04.image/03.solution.key/utils.tsx

@@ -38,9 +38,12 @@ function preloadImage(src: string) {
 	})
 }
 
+// added the version to prevent caching to make testing easier
+const version = Date.now()
+
 export function getImageUrlForShip(
 	shipName: string,
 	{ size }: { size: number },
 ) {
-	return `/img/ships/${shipName.toLowerCase().replaceAll(' ', '-')}.webp?size=${size}`
+	return `/img/ships/${shipName.toLowerCase().replaceAll(' ', '-')}.webp?size=${size}&version=${version}`
 }