test: mobile viewport

Author: wtchnm

src/App.test.tsx

@@ -3,18 +3,22 @@ import {App} from './App'
 import {server} from './mocks/server'
 import {queryClient, render, screen} from './test-utils'
 
-it('renders apple', async () => {
-	const {user} = render(<App />)
+const widths = [360, 1280]
 
-	expect(screen.getByText('Loading...')).toBeInTheDocument()
+it.each(widths)(
+	'should show a list of fruits and then select one with %o viewport',
+	async width => {
+		window.happyDOM?.setViewport({width, height: 720})
+		const {user} = render(<App />, {route: '/'})
 
-	await expect(screen.findAllByRole('link')).resolves.toHaveLength(6)
+		await expect(screen.findAllByRole('link')).resolves.toHaveLength(6)
 
-	const button = await screen.findByRole('link', {name: /Apple/})
-	await user.click(button)
+		const button = await screen.findByRole('link', {name: /Apple/})
+		await user.click(button)
 
-	await expect(screen.findByText('Vitamin K')).resolves.toBeInTheDocument()
-})
+		await expect(screen.findByText('Vitamin K')).resolves.toBeInTheDocument()
+	}
+)
 
 it('redirects home page when trying to access an invalid fruit', async () => {
 	render(<App />, {route: '/invalid-fruit'})