use file.text() instead of arraybuffer

Author: kettanaito

exercises/01.sunsetting-jsdom/01.problem.write-a-test/src/file-preview.test.tsx

@@ -5,8 +5,9 @@ import { FilePreview } from './file-preview.tsx'
 
 userEvent.setup()
 
-it('renders a preview card for the given file', async () => {
+it('displays the preview card', async () => {
 	render(<FilePreview file={new File(['hello world'], 'message.txt')} />)
 
-	expect(screen.getByText('message.txt')).toBeTruthy() /** @todo */
+	expect(screen.getByText('message.txt')).toBeTruthy()
+	expect(screen.getByText('hello world')).toBeTruthy()
 })

exercises/01.sunsetting-jsdom/01.problem.write-a-test/src/file-preview.tsx

@@ -1,24 +1,17 @@
 import { useEffect, useState } from 'react'
 
-const decoder = new TextDecoder()
-
 export function FilePreview({ file }: { file: File }) {
 	const [previewText, setPreviewText] = useState<string>()
 
 	useEffect(() => {
-		const getFilePreview = async () => {
-			const buffer = await file.arrayBuffer()
-			const previewText = decoder.decode(buffer)
-			setPreviewText(previewText)
-		}
-		getFilePreview()
+		file.text().then(setPreviewText)
 	}, [file])
 
 	return (
 		<div>
 			<div className="w-full max-w-2xl overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg shadow-slate-200">
 				<p className="border-b border-slate-200 bg-slate-50 px-4 py-2 font-bold text-slate-600">
-					📄 {file.name}
+					{file.name}
 				</p>
 				<pre className="max-h-[28ch] overflow-scroll p-4">{previewText}</pre>
 			</div>