chore: Remote patterns tests (#1434)

* feat: add image for remotePatterns example

* test: add test for image config

* test: add cypress test for remotePattern in default project

* chore: fix import

* test: add test for broken image

* test: trying non netlify image

* chore: removing image because everything else isnt loading now?

* chore: add back image and fix test brackets

* chore: stringify and scroll

* chore: missed git add on a file

* chore: just first img

* chore: remove log and extra param

* chore: test for height and width as next adds these

* chore: add px

Co-authored-by: Matt Kane <[email protected]>

Author: sarahetter

cypress/integration/default/images.spec.ts

@@ -17,4 +17,27 @@ describe('next/images', () => {
     cy.visit('/image')
     cy.findByRole('img', { name: /shiba inu dog looks through a window/i })
   })
-})
+
+  it('should show image allow-listed with remotePatterns', () => {
+    cy.visit('/image')
+    cy.findByRole('img',{ name: /tawny frogmouth/i }).should('be.visible').and(($img) => {
+      // "naturalWidth" and "naturalHeight" are set when the image loads
+      expect(
+        $img[0].naturalWidth,
+        'image has natural width'
+      ).to.be.greaterThan(0)
+    })
+  })
+
+  it('should show a broken image if it is not on domains or remotePatterns allowlist', () => {
+    cy.visit('/image')
+    cy.findByRole('img',{ name: /jellybeans/i }).should('be.visible').and(($img) => {
+      expect(
+        $img[0].style.height
+      ).to.equal('0px')
+      expect(
+        $img[0].style.width
+      ).to.equal('0px')
+    })
+  })
+})

demos/default/next.config.js

@@ -77,4 +77,13 @@ module.exports = {
   sassOptions: {
     includePaths: [path.join(__dirname, 'styles-sass-test')],
   },
+  experimental: {
+    images: {
+      remotePatterns: [
+        {
+          hostname: '*.imgur.com',
+        },
+      ],
+    },
+  },
 }

demos/default/pages/image.js

@@ -14,14 +14,24 @@ const Images = () => (
     </p>
     <p>
       <Image src={logo} alt="netlify logomark" />
-
       <Image
         src="https://raw.githubusercontent.com/netlify/netlify-plugin-nextjs/main/next-on-netlify.png"
         alt="Picture of the author"
         width={500}
         height={500}
       />
+      <Image src="https://i.imgur.com/bxSRS3Jb.png" alt="Tawny Frogmouth" width={160} height={160} />
+    </p>
+
+    <p>
+      The following image should be broken as the domain is not added to domains or remotePatterns in next.config.js:
     </p>
+    <Image
+      src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg"
+      alt="Jellybeans"
+      width={146}
+      height={32}
+    />
   </div>
 )
 

test/index.js

@@ -16,7 +16,7 @@ const { downloadFile } = require('../plugin/src/templates/handlerUtils')
 
 const plugin = require('../plugin/src')
 
-const { HANDLER_FUNCTION_NAME, ODB_FUNCTION_NAME } = require('../plugin/src/constants')
+const { HANDLER_FUNCTION_NAME, ODB_FUNCTION_NAME, IMAGE_FUNCTION_NAME } = require('../plugin/src/constants')
 const { join } = require('pathe')
 const {
   matchMiddleware,
@@ -527,6 +527,15 @@ describe('onBuild()', () => {
     // The function is supposed to return undefined, but we want to check if it throws
     expect(await plugin.onBuild(defaultArgs)).toBeUndefined()
   })
+
+  test('generates imageconfig file with entries for domains and remotePatterns', async () => {
+    await moveNextDist()
+    await plugin.onBuild(defaultArgs)
+    const imageConfigPath = path.join(constants.INTERNAL_FUNCTIONS_SRC, IMAGE_FUNCTION_NAME, 'imageconfig.json')
+    const imageConfigJson = await readJson(imageConfigPath)
+    expect(imageConfigJson.domains.length).toBe(1)
+    expect(imageConfigJson.remotePatterns.length).toBe(1)
+  })
 })
 
 describe('onPostBuild', () => {