summaryrefslogtreecommitdiff
path: root/packages/integrations/image/test/image-ssg.test.js
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--packages/integrations/image/test/image-ssg.test.js412
1 files changed, 145 insertions, 267 deletions
diff --git a/packages/integrations/image/test/image-ssg.test.js b/packages/integrations/image/test/image-ssg.test.js
index 3d3fc66e4..52daf8f5d 100644
--- a/packages/integrations/image/test/image-ssg.test.js
+++ b/packages/integrations/image/test/image-ssg.test.js
@@ -20,75 +20,50 @@ describe('SSG images - dev', function () {
await devServer.stop();
});
- describe('Local images', () => {
- it('includes <img> attributes', () => {
- const image = $('#social-jpg');
+ [
+ {
+ title: 'Local images',
+ id: '#social-jpg',
+ url: '/@astroimage/assets/social.jpg',
+ query: { f: 'jpg', w: '506', h: '253' }
+ },
+ {
+ title: 'Inline imports',
+ id: '#inline',
+ url: '/@astroimage/assets/social.jpg',
+ query: { f: 'jpg', w: '506', h: '253' }
+ },
+ {
+ title: 'Remote images',
+ id: '#google',
+ url: '/_image',
+ query: {
+ f: 'webp',
+ w: '544',
+ h: '184',
+ href: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
+ }
+ },
+ {
+ title: 'Public images',
+ id: '#hero',
+ url: '/_image',
+ query: { f: 'webp', w: '768', h: '414', href: '/hero.jpg' }
+ }
+ ].forEach(({ title, id, url, query }) => {
+ it(title, () => {
+ const image = $(id);
const src = image.attr('src');
const [route, params] = src.split('?');
- expect(route).to.equal('/@astroimage/assets/social.jpg');
+ expect(route).to.equal(url);
const searchParams = new URLSearchParams(params);
- expect(searchParams.get('f')).to.equal('jpg');
- expect(searchParams.get('w')).to.equal('506');
- expect(searchParams.get('h')).to.equal('253');
- });
- });
-
- describe('Local images with inline imports', () => {
- it('includes <img> attributes', () => {
- const image = $('#inline');
-
- const src = image.attr('src');
- const [route, params] = src.split('?');
-
- expect(route).to.equal('/@astroimage/assets/social.jpg');
-
- const searchParams = new URLSearchParams(params);
-
- expect(searchParams.get('f')).to.equal('jpg');
- expect(searchParams.get('w')).to.equal('506');
- expect(searchParams.get('h')).to.equal('253');
- });
- });
-
- describe('Remote images', () => {
- it('includes <img> attributes', () => {
- const image = $('#google');
-
- const src = image.attr('src');
- const [route, params] = src.split('?');
-
- expect(route).to.equal('/_image');
-
- const searchParams = new URLSearchParams(params);
-
- expect(searchParams.get('f')).to.equal('webp');
- expect(searchParams.get('w')).to.equal('544');
- expect(searchParams.get('h')).to.equal('184');
- expect(searchParams.get('href')).to.equal(
- 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
- );
- });
- });
-
- describe('/public images', () => {
- it('includes <img> attributes', () => {
- const image = $('#hero');
-
- const src = image.attr('src');
- const [route, params] = src.split('?');
-
- expect(route).to.equal('/_image');
-
- const searchParams = new URLSearchParams(params);
-
- expect(searchParams.get('href')).to.equal('/hero.jpg');
- expect(searchParams.get('f')).to.equal('webp');
- expect(searchParams.get('w')).to.equal('768');
- expect(searchParams.get('h')).to.equal('414');
+ for (const [key, value] of Object.entries(query)) {
+ expect(searchParams.get(key)).to.equal(value);
+ }
});
});
});
@@ -109,75 +84,50 @@ describe('SSG images with subpath - dev', function () {
await devServer.stop();
});
- describe('Local images', () => {
- it('includes <img> attributes', () => {
- const image = $('#social-jpg');
-
- const src = image.attr('src');
- const [route, params] = src.split('?');
-
- expect(route).to.equal('/@astroimage/assets/social.jpg');
-
- const searchParams = new URLSearchParams(params);
-
- expect(searchParams.get('f')).to.equal('jpg');
- expect(searchParams.get('w')).to.equal('506');
- expect(searchParams.get('h')).to.equal('253');
- });
- });
-
- describe('Local images with inline imports', () => {
- it('includes <img> attributes', () => {
- const image = $('#inline');
-
- const src = image.attr('src');
- const [route, params] = src.split('?');
-
- expect(route).to.equal('/@astroimage/assets/social.jpg');
-
- const searchParams = new URLSearchParams(params);
-
- expect(searchParams.get('f')).to.equal('jpg');
- expect(searchParams.get('w')).to.equal('506');
- expect(searchParams.get('h')).to.equal('253');
- });
- });
-
- describe('Remote images', () => {
- it('includes <img> attributes', () => {
- const image = $('#google');
+ [
+ {
+ title: 'Local images',
+ id: '#social-jpg',
+ url: '/@astroimage/assets/social.jpg',
+ query: { f: 'jpg', w: '506', h: '253' }
+ },
+ {
+ title: 'Inline imports',
+ id: '#inline',
+ url: '/@astroimage/assets/social.jpg',
+ query: { f: 'jpg', w: '506', h: '253' }
+ },
+ {
+ title: 'Remote images',
+ id: '#google',
+ url: '/_image',
+ query: {
+ f: 'webp',
+ w: '544',
+ h: '184',
+ href: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
+ }
+ },
+ {
+ title: 'Public images',
+ id: '#hero',
+ url: '/_image',
+ query: { f: 'webp', w: '768', h: '414', href: '/hero.jpg' }
+ }
+ ].forEach(({ title, id, url, query }) => {
+ it(title, () => {
+ const image = $(id);
const src = image.attr('src');
const [route, params] = src.split('?');
- expect(route).to.equal('/_image');
+ expect(route).to.equal(url);
const searchParams = new URLSearchParams(params);
- expect(searchParams.get('f')).to.equal('webp');
- expect(searchParams.get('w')).to.equal('544');
- expect(searchParams.get('h')).to.equal('184');
- expect(searchParams.get('href')).to.equal(
- 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
- );
- });
- });
-
- describe('/public images', () => {
- it('includes <img> attributes', () => {
- const image = $('#hero');
-
- const src = image.attr('src');
- const [route, params] = src.split('?');
-
- expect(route).to.equal('/_image');
-
- const searchParams = new URLSearchParams(params);
-
- expect(searchParams.get('href')).to.equal('/hero.jpg');
- expect(searchParams.get('f')).to.equal('webp');
- expect(searchParams.get('w')).to.equal('768');
- expect(searchParams.get('h')).to.equal('414');
+ for (const [key, value] of Object.entries(query)) {
+ expect(searchParams.get(key)).to.equal(value);
+ }
});
});
});
@@ -202,78 +152,42 @@ describe('SSG images - build', function () {
expect(result).to.deep.equal(expected);
}
- describe('Local images', () => {
- it('includes <img> attributes', () => {
- const image = $('#social-jpg');
-
- expect(image.attr('src')).to.equal('/social.cece8c77_1zwatP.jpg');
- expect(image.attr('width')).to.equal('506');
- expect(image.attr('height')).to.equal('253');
- });
-
- it('built the optimized image', () => {
- verifyImage('social.cece8c77_1zwatP.jpg', { width: 506, height: 253, type: 'jpg' });
- });
- });
-
- describe('Inline imports', () => {
- it('includes <img> attributes', () => {
- const image = $('#inline');
-
- expect(image.attr('src')).to.equal('/social.cece8c77_Z2tF99.jpg');
- expect(image.attr('width')).to.equal('506');
- expect(image.attr('height')).to.equal('253');
- });
-
- it('built the optimized image', () => {
- verifyImage('social.cece8c77_Z2tF99.jpg', { width: 506, height: 253, type: 'jpg' });
- });
- });
-
- describe('Remote images', () => {
- // Hard-coding in the test! These should never change since the hash is based
- // on the static `src` string
- const HASH = 'Z1RBHqs';
- const HASH_WITH_QUERY = 'Z17oujH';
-
- it('includes <img> attributes', () => {
- const image = $('#google');
-
- expect(image.attr('src')).to.equal(`/googlelogo_color_272x92dp_${HASH}.webp`);
- expect(image.attr('width')).to.equal('544');
- expect(image.attr('height')).to.equal('184');
- });
-
- it('built the optimized image', () => {
- verifyImage(`/googlelogo_color_272x92dp_${HASH}.webp`, {
- width: 544,
- height: 184,
- type: 'webp',
- });
- });
-
- it('removes query strings', () => {
- verifyImage(`/googlelogo_color_272x92dp_${HASH_WITH_QUERY}.webp`, {
- width: 544,
- height: 184,
- type: 'webp',
- });
- });
- });
-
- describe('/public images', () => {
- it('includes <img> attributes', () => {
- const image = $('#hero');
-
- expect(image.attr('src')).to.equal('/hero_Z2k1JGN.webp');
- expect(image.attr('width')).to.equal('768');
- expect(image.attr('height')).to.equal('414');
- });
-
- it('built the optimized image', () => {
- verifyImage('hero_Z2k1JGN.webp', { width: 768, height: 414, type: 'webp' });
- });
- });
+ [
+ {
+ title: 'Local images',
+ id: '#social-jpg',
+ regex: /^\/social.\w{8}_\w{4,10}.jpg/,
+ size: { width: 506, height: 253, type: 'jpg' }
+ },
+ {
+ title: 'Inline imports',
+ id: '#inline',
+ regex: /^\/social.\w{8}_\w{4,10}.jpg/,
+ size: { width: 506, height: 253, type: 'jpg' }
+ },
+ {
+ title: 'Remote images',
+ id: '#google',
+ regex: /^\/googlelogo_color_272x92dp_\w{4,10}.webp/,
+ size: { width: 544, height: 184, type: 'webp' }
+ },
+ {
+ title: 'Public images',
+ id: '#hero',
+ regex: /^\/hero_\w{4,10}.webp/,
+ size: { width: 768, height: 414, type: 'webp' }
+ }
+ ].forEach(({ title, id, regex, size }) => {
+ it(title, () => {
+ const image = $(id);
+
+ expect(image.attr('src')).to.match(regex);
+ expect(image.attr('width')).to.equal(size.width.toString());
+ expect(image.attr('height')).to.equal(size.height.toString());
+
+ verifyImage(image.attr('src'), size);
+ })
+ })
});
describe('SSG images with subpath - build', function () {
@@ -296,76 +210,40 @@ describe('SSG images with subpath - build', function () {
expect(result).to.deep.equal(expected);
}
- describe('Local images', () => {
- it('includes <img> attributes', () => {
- const image = $('#social-jpg');
-
- expect(image.attr('src')).to.equal('/docs/social.cece8c77_iK4oy.jpg');
- expect(image.attr('width')).to.equal('506');
- expect(image.attr('height')).to.equal('253');
- });
-
- it('built the optimized image', () => {
- verifyImage('social.cece8c77_iK4oy.jpg', { width: 506, height: 253, type: 'jpg' });
- });
- });
-
- describe('Inline imports', () => {
- it('includes <img> attributes', () => {
- const image = $('#inline');
-
- expect(image.attr('src')).to.equal('/docs/social.cece8c77_1YIUw1.jpg');
- expect(image.attr('width')).to.equal('506');
- expect(image.attr('height')).to.equal('253');
- });
-
- it('built the optimized image', () => {
- verifyImage('social.cece8c77_1YIUw1.jpg', { width: 506, height: 253, type: 'jpg' });
- });
- });
-
- describe('Remote images', () => {
- // Hard-coding in the test! These should never change since the hash is based
- // on the static `src` string
- const HASH = 'Z1RBHqs';
- const HASH_WITH_QUERY = 'Z17oujH';
-
- it('includes <img> attributes', () => {
- const image = $('#google');
-
- expect(image.attr('src')).to.equal(`/docs/googlelogo_color_272x92dp_${HASH}.webp`);
- expect(image.attr('width')).to.equal('544');
- expect(image.attr('height')).to.equal('184');
- });
-
- it('built the optimized image', () => {
- verifyImage(`/googlelogo_color_272x92dp_${HASH}.webp`, {
- width: 544,
- height: 184,
- type: 'webp',
- });
- });
-
- it('removes query strings', () => {
- verifyImage(`/googlelogo_color_272x92dp_${HASH_WITH_QUERY}.webp`, {
- width: 544,
- height: 184,
- type: 'webp',
- });
- });
- });
-
- describe('/public images', () => {
- it('includes <img> attributes', () => {
- const image = $('#hero');
-
- expect(image.attr('src')).to.equal('/docs/hero_Z2k1JGN.webp');
- expect(image.attr('width')).to.equal('768');
- expect(image.attr('height')).to.equal('414');
- });
-
- it('built the optimized image', () => {
- verifyImage('hero_Z2k1JGN.webp', { width: 768, height: 414, type: 'webp' });
- });
+ [
+ {
+ title: 'Local images',
+ id: '#social-jpg',
+ regex: /^\/docs\/social.\w{8}_\w{4,10}.jpg/,
+ size: { width: 506, height: 253, type: 'jpg' }
+ },
+ {
+ title: 'Inline imports',
+ id: '#inline',
+ regex: /^\/docs\/social.\w{8}_\w{4,10}.jpg/,
+ size: { width: 506, height: 253, type: 'jpg' }
+ },
+ {
+ title: 'Remote images',
+ id: '#google',
+ regex: /^\/docs\/googlelogo_color_272x92dp_\w{4,10}.webp/,
+ size: { width: 544, height: 184, type: 'webp' }
+ },
+ {
+ title: 'Public images',
+ id: '#hero',
+ regex: /^\/docs\/hero_\w{4,10}.webp/,
+ size: { width: 768, height: 414, type: 'webp' }
+ }
+ ].forEach(({ title, id, regex, size }) => {
+ it(title, () => {
+ const image = $(id);
+
+ expect(image.attr('src')).to.match(regex);
+ expect(image.attr('width')).to.equal(size.width.toString());
+ expect(image.attr('height')).to.equal(size.height.toString());
+
+ verifyImage(image.attr('src').replace('/docs', ''), size);
+ })
});
});
generated by cgit v1.2.3 (git 2.46.0) at 2025-08-19 11:28:33 +0000