From f5e94a5a1f6aa550dd190229f2a49d3a838318d0 Mon Sep 17 00:00:00 2001 From: Nick Taylor Date: Thu, 27 Oct 2022 14:06:25 -0400 Subject: [PATCH 1/8] chore: removed unused import --- demos/static-root/pages/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/demos/static-root/pages/index.js b/demos/static-root/pages/index.js index 0b134605f7..e860ce871b 100644 --- a/demos/static-root/pages/index.js +++ b/demos/static-root/pages/index.js @@ -1,5 +1,4 @@ import Head from 'next/head' -import Image from 'next/legacy/image' import { useRouter } from 'next/router' import styles from '../styles/Home.module.css' From 1de22f8e9811ebe7259f168b26f8124132d259d3 Mon Sep 17 00:00:00 2001 From: Nick Taylor Date: Thu, 27 Oct 2022 14:19:15 -0400 Subject: [PATCH 2/8] chore: removed broken image that was no longer broken from main images demo page --- cypress/integration/default/images.spec.ts | 38 +++++++--------------- demos/default/next.config.js | 2 +- demos/default/pages/image.js | 10 ------ 3 files changed, 13 insertions(+), 37 deletions(-) diff --git a/cypress/integration/default/images.spec.ts b/cypress/integration/default/images.spec.ts index 9031467260..968e86fced 100644 --- a/cypress/integration/default/images.spec.ts +++ b/cypress/integration/default/images.spec.ts @@ -4,13 +4,12 @@ describe('next/images', () => { it('should show static image from /public', () => { cy.visit('/') - cy.findByRole('img').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) - }) + cy.findByRole('img') + .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 image using next/image', () => { @@ -20,24 +19,11 @@ describe('next/images', () => { 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') - }) + 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) + }) }) }) diff --git a/demos/default/next.config.js b/demos/default/next.config.js index f91db4024b..33ae770631 100644 --- a/demos/default/next.config.js +++ b/demos/default/next.config.js @@ -71,7 +71,7 @@ module.exports = { }, // https://nextjs.org/docs/basic-features/image-optimization#domains images: { - domains: ['raw.githubusercontent.com', 'upload.wikimedia.org'], + domains: ['raw.githubusercontent.com'], remotePatterns: [ { hostname: '*.imgur.com', diff --git a/demos/default/pages/image.js b/demos/default/pages/image.js index 71e89de35b..2210129518 100644 --- a/demos/default/pages/image.js +++ b/demos/default/pages/image.js @@ -22,16 +22,6 @@ const Images = () => ( /> Tawny Frogmouth

- -

- The following image should be broken as the domain is not added to domains or remotePatterns in next.config.js: -

- Jellybeans ) From ab989a5934ff8af648cd11ad9560621f88dba0b5 Mon Sep 17 00:00:00 2001 From: Nick Taylor Date: Thu, 27 Oct 2022 14:20:36 -0400 Subject: [PATCH 3/8] test: add e2e test to test broken image error --- cypress/integration/default/images.spec.ts | 9 +++++++++ demos/default/pages/broken-image.tsx | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/cypress/integration/default/images.spec.ts b/cypress/integration/default/images.spec.ts index 968e86fced..72d917980d 100644 --- a/cypress/integration/default/images.spec.ts +++ b/cypress/integration/default/images.spec.ts @@ -26,4 +26,13 @@ describe('next/images', () => { expect($img[0].naturalWidth, 'image has natural width').to.be.greaterThan(0) }) }) + + it('should show throw if an image is not on the domains or remotePatterns allowlist', () => { + cy.request('/broken-image').then((response) => { + expect(response.status).to.eq(500) + expect(response.body).to.include( + 'hostname "broken-domain" is not configured under images in your `next.config.js`', + ) + }) + }) }) diff --git a/demos/default/pages/broken-image.tsx b/demos/default/pages/broken-image.tsx index 02cfe5443f..8e26b8f56a 100644 --- a/demos/default/pages/broken-image.tsx +++ b/demos/default/pages/broken-image.tsx @@ -1,4 +1,4 @@ -import Image from 'next/legacy/image' +import Image from 'next/image' // This should cause an error, because broken-domain is not part of the configured next.config.js image domains const Images = () => ( From 262f0c6903cc1a60fa6d5670f1a0c7d662f4feeb Mon Sep 17 00:00:00 2001 From: Nick Taylor Date: Thu, 27 Oct 2022 15:29:57 -0400 Subject: [PATCH 4/8] chore: fixed image import --- demos/default/pages/image.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demos/default/pages/image.js b/demos/default/pages/image.js index 2210129518..e6f56fc080 100644 --- a/demos/default/pages/image.js +++ b/demos/default/pages/image.js @@ -1,4 +1,4 @@ -import Image from 'next/legacy/image' +import Image from 'next/image' import img from './unsplash.jpg' import logo from './logomark.svg' From 6da578a2b00734ae1d54565e67ab28cfd34ec605 Mon Sep 17 00:00:00 2001 From: Nick Taylor Date: Thu, 27 Oct 2022 15:39:14 -0400 Subject: [PATCH 5/8] test: updated test validating image config --- test/index.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/test/index.js b/test/index.js index f5b83597fd..6ad8755065 100644 --- a/test/index.js +++ b/test/index.js @@ -255,11 +255,11 @@ describe('onBuild()', () => { expect(config.config.env.NEXTAUTH_URL).toEqual(mockUserDefinedSiteUrl) }) - test('sets the NEXTAUTH_URL to the DEPLOY_PRIME_URL when CONTEXT env variable is not \'production\'', async () => { + test("sets the NEXTAUTH_URL to the DEPLOY_PRIME_URL when CONTEXT env variable is not 'production'", async () => { const mockUserDefinedSiteUrl = chance.url() process.env.DEPLOY_PRIME_URL = mockUserDefinedSiteUrl process.env.URL = chance.url() - + // See https://docs.netlify.com/configure-builds/environment-variables/#build-metadata for all possible values process.env.CONTEXT = 'deploy-preview' @@ -277,8 +277,8 @@ describe('onBuild()', () => { expect(config.config.env.NEXTAUTH_URL).toEqual(mockUserDefinedSiteUrl) }) - - test('sets the NEXTAUTH_URL to the user defined site URL when CONTEXT env variable is \'production\'', async () => { + + test("sets the NEXTAUTH_URL to the user defined site URL when CONTEXT env variable is 'production'", async () => { const mockUserDefinedSiteUrl = chance.url() process.env.DEPLOY_PRIME_URL = chance.url() process.env.URL = mockUserDefinedSiteUrl @@ -300,7 +300,6 @@ describe('onBuild()', () => { expect(config.config.env.NEXTAUTH_URL).toEqual(mockUserDefinedSiteUrl) }) - test('sets the NEXTAUTH_URL specified in the netlify.toml or in the Netlify UI', async () => { const mockSiteUrl = chance.url() @@ -615,7 +614,7 @@ describe('onBuild()', () => { const imageConfigPath = path.join(constants.INTERNAL_FUNCTIONS_SRC, IMAGE_FUNCTION_NAME, 'imageconfig.json') const imageConfigJson = await readJson(imageConfigPath) - expect(imageConfigJson.domains.length).toBe(2) + expect(imageConfigJson.domains.length).toBe(1) expect(imageConfigJson.remotePatterns.length).toBe(1) expect(imageConfigJson.responseHeaders).toStrictEqual({ 'X-Foo': mockHeaderValue, From 3d516e492cd4655b270835db85db779077b24f1c Mon Sep 17 00:00:00 2001 From: Nick Taylor Date: Thu, 27 Oct 2022 17:17:24 -0400 Subject: [PATCH 6/8] test: fixed broken image test --- cypress/integration/default/images.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/cypress/integration/default/images.spec.ts b/cypress/integration/default/images.spec.ts index 72d917980d..d548364a62 100644 --- a/cypress/integration/default/images.spec.ts +++ b/cypress/integration/default/images.spec.ts @@ -28,10 +28,10 @@ describe('next/images', () => { }) it('should show throw if an image is not on the domains or remotePatterns allowlist', () => { - cy.request('/broken-image').then((response) => { - expect(response.status).to.eq(500) + cy.request({ url: '/broken-image', failOnStatusCode: false }).then((response) => { + expect(response.status).to.be.eq(500) expect(response.body).to.include( - 'hostname "broken-domain" is not configured under images in your `next.config.js`', + `Invalid src prop (https://broken-domain/netlify/next-runtime/main/next-on-netlify.png)`, ) }) }) From dbd855898e9ee7814bf9cba9c082ec8d820aed71 Mon Sep 17 00:00:00 2001 From: Nick Taylor Date: Thu, 27 Oct 2022 18:40:30 -0400 Subject: [PATCH 7/8] test: fixed broken image test as it's different when deployed --- cypress/integration/default/images.spec.ts | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/cypress/integration/default/images.spec.ts b/cypress/integration/default/images.spec.ts index d548364a62..aaa80d2781 100644 --- a/cypress/integration/default/images.spec.ts +++ b/cypress/integration/default/images.spec.ts @@ -19,7 +19,7 @@ describe('next/images', () => { it('should show image allow-listed with remotePatterns', () => { cy.visit('/image') - cy.findByRole('img', { name: /tawny frogmouth/i }) + cy.findByRole('img', { name: /shiba inu dog looks through a window/i }) .should('be.visible') .and(($img) => { // "naturalWidth" and "naturalHeight" are set when the image loads @@ -28,11 +28,18 @@ describe('next/images', () => { }) it('should show throw if an image is not on the domains or remotePatterns allowlist', () => { - cy.request({ url: '/broken-image', failOnStatusCode: false }).then((response) => { - expect(response.status).to.be.eq(500) - expect(response.body).to.include( - `Invalid src prop (https://broken-domain/netlify/next-runtime/main/next-on-netlify.png)`, - ) + cy.visit('/broken-image') + + // The image renders broken on the site + cy.findByRole('img', { name: /picture of the author/i }).then(($img) => { + // eslint-disable-next-line promise/no-nesting + cy.request({ url: $img[0].src, failOnStatusCode: false }).then((response) => { + // Navigating to the image itself give a forbidden error with a message explaining why. + expect(response.status).to.eq(403) + expect(response.body).to.include( + 'URL not on allowlist: https://broken-domain/netlify/next-runtime/main/next-on-netlify.png', + ) + }) }) }) }) From 5cf563dc34ffb1da0d44d11906d72c5141dba376 Mon Sep 17 00:00:00 2001 From: Nick Taylor Date: Fri, 28 Oct 2022 10:42:06 -0400 Subject: [PATCH 8/8] test: used a real image to test an image not on the Next.js allow list --- cypress/integration/default/images.spec.ts | 2 +- demos/default/pages/broken-image.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/integration/default/images.spec.ts b/cypress/integration/default/images.spec.ts index aaa80d2781..9b170e2de6 100644 --- a/cypress/integration/default/images.spec.ts +++ b/cypress/integration/default/images.spec.ts @@ -37,7 +37,7 @@ describe('next/images', () => { // Navigating to the image itself give a forbidden error with a message explaining why. expect(response.status).to.eq(403) expect(response.body).to.include( - 'URL not on allowlist: https://broken-domain/netlify/next-runtime/main/next-on-netlify.png', + 'URL not on allowlist: https://netlify-plugin-nextjs-demo.netlify.app/next-on-netlify.png', ) }) }) diff --git a/demos/default/pages/broken-image.tsx b/demos/default/pages/broken-image.tsx index 8e26b8f56a..656fd52ca6 100644 --- a/demos/default/pages/broken-image.tsx +++ b/demos/default/pages/broken-image.tsx @@ -3,7 +3,7 @@ import Image from 'next/image' // This should cause an error, because broken-domain is not part of the configured next.config.js image domains const Images = () => (