get a good test for 04.01

Author: kentcdodds

exercises/04.image/01.problem.img/README.mdx

@@ -8,7 +8,9 @@
 - Set the playground to this exercise
 - <LinkToApp to="/">Open the playground</LinkToApp> (in a separate tab)
 - Open the dev tools
-- Right-click the refresh button and select ["Empty Cache and Hard Reload"](https://stackoverflow.com/questions/14969315/whats-the-difference-between-normal-reload-hard-reload-and-empty-cache-a)
+- Notice that we've added a version query parameter to the images to simulate
+  initial loading. This is why you see a different versions in the URL for
+  each image.
 - [Throttle your network](https://developer.chrome.com/docs/devtools/network/reference#throttling) speed in the dev tools to "Slow 3G"
 - Click a separate ship
 
@@ -24,3 +26,9 @@ Suspense, the `use` hook, and a `preloadImage` utility.
 The emoji will guide you through this one.
 Best to start in <InlineFile file="utils.tsx" />. Lots of this will feel similar
 to what we were doing with the `getShip` regarding the caching stuff!
+
+<callout-warning>
+	🚨 Note, this is extremely difficult to test, so the test may be unreliable.
+	However, if you do throttle the network, then the test will be much more
+	reliable.
+</callout-warning>

exercises/04.image/01.problem.img/utils.tsx

@@ -38,9 +38,12 @@ async function getShipImpl(name: string, delay?: number) {
 // 	})
 // }
 
+// 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}&v=${version}`
 }

exercises/04.image/01.solution.img/suspense-img.test.ts

@@ -0,0 +1,92 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen, waitFor, fireEvent } = dtl
+
+import './index.tsx'
+
+function onLoad(img: HTMLElement, cb?: () => void) {
+	return new Promise<void>((resolve) => {
+		img.addEventListener(
+			'load',
+			() => {
+				cb?.()
+				resolve()
+			},
+			{ once: true },
+		)
+	})
+}
+
+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 },
+	)
+	await onLoad(screen.getByAltText('Dreadnought'))
+	await new Promise((resolve) => setTimeout(resolve, 250))
+})
+
+const img = await testStep('Initial image is loaded', async () => {
+	const img = await screen.findByAltText('Dreadnought')
+	expect(img, '🚨 Initial image should be present').toBeInTheDocument()
+	return img
+})
+
+const initialSrc = img.getAttribute('src')
+
+let loadTime = 0,
+	srcChangeTime = 0
+
+const loadAndSrcChange = Promise.all([
+	onLoad(img).then(() => {
+		loadTime = Date.now()
+	}),
+	waitFor(
+		() => {
+			expect(img.getAttribute('src')).not.toBe(initialSrc)
+			srcChangeTime = Date.now()
+		},
+		{ timeout: 4000 },
+	),
+])
+
+await testStep('Click on a different ship', async () => {
+	fireEvent.click(screen.getByRole('button', { name: 'Interceptor' }))
+})
+
+await testStep('New ship details are loaded', async () => {
+	await screen.findByRole(
+		'heading',
+		{ name: /Interceptor/i },
+		{ timeout: 4000 },
+	)
+})
+
+const newImg = await testStep('New image element is present', async () => {
+	const img = await screen.findByAltText('Interceptor')
+	expect(img, '🚨 New image element should be present').toBeInTheDocument()
+	return img
+})
+
+await testStep('Verify image src has changed', async () => {
+	await waitFor(() => {
+		expect(
+			newImg.getAttribute('src'),
+			'🚨 Image src should change after load event',
+		).not.toBe(initialSrc)
+		expect(
+			newImg.getAttribute('src'),
+			'🚨 New image src should contain "interceptor"',
+		).toMatch(/interceptor/)
+	})
+})
+
+// put this last so it doesn't affect the other steps
+await testStep('img was loaded before the src changed.', async () => {
+	await loadAndSrcChange
+	console.log(loadTime - srcChangeTime)
+	expect(
+		loadTime - srcChangeTime,
+		'🚨 the img should be loaded before the src changes. Make sure to suspend until the img is loaded.',
+	).toBeLessThan(4)
+})

exercises/04.image/01.solution.img/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}&v=${version}`
 }