From 299b4afcab090bbe014d4eaf2a5ea439e8436bcc Mon Sep 17 00:00:00 2001 From: Tony Sullivan Date: Tue, 19 Jul 2022 04:48:22 +0000 Subject: Feat/image url hash (#3965) * Including a hash of the full remote URL when building for SSG * chore: add changeset --- packages/integrations/image/test/image-ssg.test.js | 8 ++++++-- packages/integrations/image/test/picture-ssg.test.js | 18 +++++++++++------- 2 files changed, 17 insertions(+), 9 deletions(-) (limited to 'packages/integrations/image/test') diff --git a/packages/integrations/image/test/image-ssg.test.js b/packages/integrations/image/test/image-ssg.test.js index b0d12908c..3c5d4802e 100644 --- a/packages/integrations/image/test/image-ssg.test.js +++ b/packages/integrations/image/test/image-ssg.test.js @@ -58,16 +58,20 @@ describe('SSG images', function () { }); describe('Remote images', () => { + // Hard-coding in the test! This should never change since the hash is based + // on the static `src` string + const HASH = 'Z1iI4xW'; + it('includes src, width, and height attributes', () => { const image = $('#google'); - expect(image.attr('src')).to.equal('/_image/googlelogo_color_272x92dp_544x184.webp'); + expect(image.attr('src')).to.equal(`/_image/googlelogo_color_272x92dp-${HASH}_544x184.webp`); expect(image.attr('width')).to.equal('544'); expect(image.attr('height')).to.equal('184'); }); it('built the optimized image', () => { - verifyImage('_image/googlelogo_color_272x92dp_544x184.webp', { + verifyImage(`_image/googlelogo_color_272x92dp-${HASH}_544x184.webp`, { width: 544, height: 184, type: 'webp', diff --git a/packages/integrations/image/test/picture-ssg.test.js b/packages/integrations/image/test/picture-ssg.test.js index 7740ad055..0da1daa1c 100644 --- a/packages/integrations/image/test/picture-ssg.test.js +++ b/packages/integrations/image/test/picture-ssg.test.js @@ -91,6 +91,10 @@ describe('SSG pictures', function () { }); describe('Remote images', () => { + // Hard-coding in the test! This should never change since the hash is based + // on the static `src` string + const HASH = 'Z1iI4xW'; + it('includes sources', () => { const sources = $('#google source'); @@ -102,38 +106,38 @@ describe('SSG pictures', function () { it('includes src, width, and height attributes', () => { const image = $('#google img'); - expect(image.attr('src')).to.equal('/_image/googlelogo_color_272x92dp_544x184.png'); + expect(image.attr('src')).to.equal(`/_image/googlelogo_color_272x92dp-${HASH}_544x184.png`); expect(image.attr('width')).to.equal('544'); expect(image.attr('height')).to.equal('184'); }); it('built the optimized image', () => { - verifyImage('_image/googlelogo_color_272x92dp_272x92.avif', { + verifyImage(`_image/googlelogo_color_272x92dp-${HASH}_272x92.avif`, { width: 272, height: 92, type: 'avif', }); - verifyImage('_image/googlelogo_color_272x92dp_272x92.webp', { + verifyImage(`_image/googlelogo_color_272x92dp-${HASH}_272x92.webp`, { width: 272, height: 92, type: 'webp', }); - verifyImage('_image/googlelogo_color_272x92dp_272x92.png', { + verifyImage(`_image/googlelogo_color_272x92dp-${HASH}_272x92.png`, { width: 272, height: 92, type: 'png', }); - verifyImage('_image/googlelogo_color_272x92dp_544x184.avif', { + verifyImage(`_image/googlelogo_color_272x92dp-${HASH}_544x184.avif`, { width: 544, height: 184, type: 'avif', }); - verifyImage('_image/googlelogo_color_272x92dp_544x184.webp', { + verifyImage(`_image/googlelogo_color_272x92dp-${HASH}_544x184.webp`, { width: 544, height: 184, type: 'webp', }); - verifyImage('_image/googlelogo_color_272x92dp_544x184.png', { + verifyImage(`_image/googlelogo_color_272x92dp-${HASH}_544x184.png`, { width: 544, height: 184, type: 'png', -- cgit v1.2.3