diff --git a/cypress/integration/default/images.spec.ts b/cypress/integration/default/images.spec.ts index 9031467260..9b170e2de6 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,27 @@ 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) - }) + 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 + 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') + it('should show throw if an image is not on the domains or remotePatterns allowlist', () => { + 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://netlify-plugin-nextjs-demo.netlify.app/next-on-netlify.png', + ) + }) }) }) }) 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/broken-image.tsx b/demos/default/pages/broken-image.tsx index 02cfe5443f..656fd52ca6 100644 --- a/demos/default/pages/broken-image.tsx +++ b/demos/default/pages/broken-image.tsx @@ -1,9 +1,9 @@ -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 = () => ( Picture of the author ( /> Tawny Frogmouth

- -

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

- Jellybeans ) 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' 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,