fix(next/image): add missing svg test refactor missing types (vercel#…

…65345)

The tests added in vercel#46219 were
never correctly testing the headers because `detectContentType()` is
called first and only when we can't detect the type from the response
body do we fallback to the `Content-Type` header.

I also refactored some of the tests because the `ctx: any` type was
causing some tests to not run when testing different configuration
options.

Closes NEXT-3321

packages/next/src/server/image-optimizer.ts

@@ -138,6 +138,9 @@ export function detectContentType(buffer: Buffer) {
   if ([0x3c, 0x3f, 0x78, 0x6d, 0x6c].every((b, i) => buffer[i] === b)) {
     return SVG
   }
+  if ([0x3c, 0x73, 0x76, 0x67].every((b, i) => buffer[i] === b)) {
+    return SVG
+  }
   if (
     [0, 0, 0, 0, 0x66, 0x74, 0x79, 0x70, 0x61, 0x76, 0x69, 0x66].every(
       (b, i) => !b || buffer[i] === b

test/integration/image-optimizer/app/pages/api/application.svg.js

@@ -1,6 +1,4 @@
 export default function handler(_req, res) {
   res.setHeader('Content-Type', 'application/svg+xml')
-  res.end(
-    `<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="60" height="60"><text x="20" y="30">hi</text></svg>`
-  )
+  res.end('body is not svg to force fallback to Content-Type header')
 }

test/integration/image-optimizer/app/pages/api/comma.svg.js

@@ -1,6 +1,4 @@
 export default function handler(_req, res) {
   res.setHeader('Content-Type', 'image/foo, text/html')
-  res.end(
-    `<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="60" height="60"><text x="20" y="30">hi</text></svg>`
-  )
+  res.end('body is not svg to force fallback to Content-Type header')
 }

test/integration/image-optimizer/app/pages/api/stateful/test.png.js

@@ -0,0 +1,19 @@
+const images = [
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==',
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg==',
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPj/HwADBwIAMCbHYQAAAABJRU5ErkJggg==',
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5/hPwAIAgL/4d1j8wAAAABJRU5ErkJggg==',
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P//PwAGBAL/VJiKjgAAAABJRU5ErkJggg==',
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=',
+]
+
+let state = 0
+
+export default function handler(_req, res) {
+  state++
+  const index = state % images.length
+  const buffer = Buffer.from(images[index], 'base64')
+  res.setHeader('Content-Type', 'image/png')
+  return res.end(buffer)
+}

test/integration/image-optimizer/app/pages/api/uppercase.svg.js

@@ -1,6 +1,4 @@
 export default function handler(_req, res) {
   res.setHeader('Content-Type', 'image/SVG+XML')
-  res.end(
-    `<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="60" height="60"><text x="20" y="30">hi</text></svg>`
-  )
+  res.end('body is not svg to force fallback to Content-Type header')
 }

test/integration/image-optimizer/app/pages/api/wrong-header.svg.js

@@ -0,0 +1,6 @@
+export default function handler(_req, res) {
+  res.setHeader('Content-Type', 'image/png')
+  res.end(
+    `<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="60" height="60"><text x="20" y="30">hi</text></svg>`
+  )
+}

test/integration/image-optimizer/test/dangerously-allow-svg.test.ts

@@ -0,0 +1,13 @@
+import { join } from 'path'
+import { setupTests } from './util'
+
+const appDir = join(__dirname, '../app')
+const imagesDir = join(appDir, '.next', 'cache', 'images')
+
+describe('with dangerouslyAllowSVG config', () => {
+  setupTests({
+    nextConfigImages: { dangerouslyAllowSVG: true },
+    appDir,
+    imagesDir,
+  })
+})