mirror of
https://github.com/withastro/astro.git
synced 2024-12-23 21:53:55 -05:00
00c605ce35
* WIP: simplifying the use of `fs` vs. the vite plugin * removing a few node deps (etag and node:path) * adding ts defs for sharp * using the same mime package as astro's core App * fixing file URL support in windows * using file URLs when loading local image metadata * fixing a bug in the etag helper * Windows compat * splitting out dev & build tests * why do these suites fail in parallel? * one last windows compat case * Adding tests for treating /public images the same as remote URLs * a couple fixes for Astro's `base` config * adding base path tests for SSR * fixing a bad merge, lost the kleur dependency * adding a test suite for images + MDX * chore: add changeset * simplifying the with-mdx tests * bugfix: don't duplicate the period when using existing file extensions * let Vite cache the image loader service * adding some docs for using /public images * fixing changeset * Update packages/integrations/image/README.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Update packages/integrations/image/README.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * nit: minor README syntax tweaks Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
584 lines
17 KiB
JavaScript
584 lines
17 KiB
JavaScript
import { expect } from 'chai';
|
|
import * as cheerio from 'cheerio';
|
|
import fs from 'fs';
|
|
import sizeOf from 'image-size';
|
|
import { fileURLToPath } from 'url';
|
|
import { loadFixture } from './test-utils.js';
|
|
|
|
describe('SSG pictures - dev', function () {
|
|
let fixture;
|
|
let devServer;
|
|
let $;
|
|
|
|
before(async () => {
|
|
fixture = await loadFixture({ root: './fixtures/basic-picture/' });
|
|
devServer = await fixture.startDevServer();
|
|
const html = await fixture.fetch('/').then((res) => res.text());
|
|
$ = cheerio.load(html);
|
|
});
|
|
|
|
after(async () => {
|
|
await devServer.stop();
|
|
});
|
|
|
|
describe('Local images', () => {
|
|
it('includes sources', () => {
|
|
const sources = $('#social-jpg source');
|
|
|
|
expect(sources.length).to.equal(3);
|
|
|
|
// TODO: better coverage to verify source props
|
|
});
|
|
|
|
it('includes <img> attributes', () => {
|
|
const image = $('#social-jpg img');
|
|
|
|
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');
|
|
expect(image.attr('alt')).to.equal('Social image');
|
|
});
|
|
});
|
|
|
|
describe('Local images with inline imports', () => {
|
|
it('includes sources', () => {
|
|
const sources = $('#inline source');
|
|
|
|
expect(sources.length).to.equal(3);
|
|
|
|
// TODO: better coverage to verify source props
|
|
});
|
|
|
|
it('includes <img> attributes', () => {
|
|
const image = $('#inline img');
|
|
|
|
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');
|
|
expect(image.attr('alt')).to.equal('Inline social image');
|
|
});
|
|
});
|
|
|
|
describe('Remote images', () => {
|
|
it('includes sources', () => {
|
|
const sources = $('#google source');
|
|
|
|
expect(sources.length).to.equal(3);
|
|
|
|
// TODO: better coverage to verify source props
|
|
});
|
|
|
|
it('includes <img> attributes', () => {
|
|
const image = $('#google img');
|
|
|
|
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('png');
|
|
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');
|
|
expect(image.attr('alt')).to.equal('Google logo');
|
|
});
|
|
});
|
|
|
|
describe('/public images', () => {
|
|
it('includes sources', () => {
|
|
const sources = $('#hero source');
|
|
|
|
expect(sources.length).to.equal(3);
|
|
|
|
// TODO: better coverage to verify source props
|
|
});
|
|
|
|
it('includes <img> attributes', () => {
|
|
const image = $('#hero img');
|
|
|
|
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('jpg');
|
|
expect(searchParams.get('w')).to.equal('768');
|
|
expect(searchParams.get('h')).to.equal('414');
|
|
expect(image.attr('alt')).to.equal('Hero image');
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('SSG pictures with subpath - dev', function () {
|
|
let fixture;
|
|
let devServer;
|
|
let $;
|
|
|
|
before(async () => {
|
|
fixture = await loadFixture({ root: './fixtures/basic-picture/', base: '/docs' });
|
|
devServer = await fixture.startDevServer();
|
|
const html = await fixture.fetch('/docs/').then((res) => res.text());
|
|
$ = cheerio.load(html);
|
|
});
|
|
|
|
after(async () => {
|
|
await devServer.stop();
|
|
});
|
|
|
|
describe('Local images', () => {
|
|
it('includes sources', () => {
|
|
const sources = $('#social-jpg source');
|
|
|
|
expect(sources.length).to.equal(3);
|
|
|
|
// TODO: better coverage to verify source props
|
|
});
|
|
|
|
it('includes <img> attributes', () => {
|
|
const image = $('#social-jpg img');
|
|
|
|
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');
|
|
expect(image.attr('alt')).to.equal('Social image');
|
|
});
|
|
});
|
|
|
|
describe('Local images with inline imports', () => {
|
|
it('includes sources', () => {
|
|
const sources = $('#inline source');
|
|
|
|
expect(sources.length).to.equal(3);
|
|
|
|
// TODO: better coverage to verify source props
|
|
});
|
|
|
|
it('includes <img> attributes', () => {
|
|
const image = $('#inline img');
|
|
|
|
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');
|
|
expect(image.attr('alt')).to.equal('Inline social image');
|
|
});
|
|
});
|
|
|
|
describe('Remote images', () => {
|
|
it('includes sources', () => {
|
|
const sources = $('#google source');
|
|
|
|
expect(sources.length).to.equal(3);
|
|
|
|
// TODO: better coverage to verify source props
|
|
});
|
|
|
|
it('includes <img> attributes', () => {
|
|
const image = $('#google img');
|
|
|
|
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('png');
|
|
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');
|
|
expect(image.attr('alt')).to.equal('Google logo');
|
|
});
|
|
});
|
|
|
|
describe('/public images', () => {
|
|
it('includes sources', () => {
|
|
const sources = $('#hero source');
|
|
|
|
expect(sources.length).to.equal(3);
|
|
|
|
// TODO: better coverage to verify source props
|
|
});
|
|
|
|
it('includes <img> attributes', () => {
|
|
const image = $('#hero img');
|
|
|
|
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('jpg');
|
|
expect(searchParams.get('w')).to.equal('768');
|
|
expect(searchParams.get('h')).to.equal('414');
|
|
expect(image.attr('alt')).to.equal('Hero image');
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('SSG pictures - build', function () {
|
|
let fixture;
|
|
let $;
|
|
let html;
|
|
|
|
before(async () => {
|
|
fixture = await loadFixture({ root: './fixtures/basic-picture/' });
|
|
await fixture.build();
|
|
|
|
html = await fixture.readFile('/index.html');
|
|
$ = cheerio.load(html);
|
|
});
|
|
|
|
function verifyImage(pathname, expected) {
|
|
const url = new URL('./fixtures/basic-picture/dist/' + pathname, import.meta.url);
|
|
const dist = fileURLToPath(url);
|
|
|
|
// image-size doesn't support AVIF files
|
|
if (expected.type !== 'avif') {
|
|
const result = sizeOf(dist);
|
|
expect(result).to.deep.equal(expected);
|
|
} else {
|
|
expect(fs.statSync(dist)).not.to.be.undefined;
|
|
}
|
|
}
|
|
|
|
describe('Local images', () => {
|
|
it('includes sources', () => {
|
|
const sources = $('#social-jpg source');
|
|
|
|
expect(sources.length).to.equal(3);
|
|
|
|
// TODO: better coverage to verify source props
|
|
});
|
|
|
|
it('includes <img> attributes', () => {
|
|
const image = $('#social-jpg img');
|
|
|
|
expect(image.attr('src')).to.equal('/social.cece8c77_isw36.jpg');
|
|
expect(image.attr('width')).to.equal('506');
|
|
expect(image.attr('height')).to.equal('253');
|
|
expect(image.attr('alt')).to.equal('Social image');
|
|
});
|
|
|
|
it('built the optimized image', () => {
|
|
verifyImage('social.cece8c77_Z1qCkLW.avif', { width: 253, height: 127, type: 'avif' });
|
|
verifyImage('social.cece8c77_ZHhvOb.webp', { width: 253, height: 127, type: 'webp' });
|
|
verifyImage('social.cece8c77_ZwfMjf.jpg', { width: 253, height: 127, type: 'jpg' });
|
|
verifyImage('social.cece8c77_6t5Xo.avif', { width: 506, height: 253, type: 'avif' });
|
|
verifyImage('social.cece8c77_ONTVa.webp', { width: 506, height: 253, type: 'webp' });
|
|
verifyImage('social.cece8c77_isw36.jpg', { width: 506, height: 253, type: 'jpg' });
|
|
});
|
|
});
|
|
|
|
describe('Inline imports', () => {
|
|
it('includes sources', () => {
|
|
const sources = $('#inline source');
|
|
|
|
expect(sources.length).to.equal(3);
|
|
|
|
// TODO: better coverage to verify source props
|
|
});
|
|
|
|
it('includes <img> attributes', () => {
|
|
const image = $('#inline img');
|
|
|
|
expect(image.attr('src')).to.equal('/social.cece8c77_isw36.jpg');
|
|
expect(image.attr('width')).to.equal('506');
|
|
expect(image.attr('height')).to.equal('253');
|
|
expect(image.attr('alt')).to.equal('Inline social image');
|
|
});
|
|
|
|
it('built the optimized image', () => {
|
|
verifyImage('social.cece8c77_Z1qCkLW.avif', { width: 253, height: 127, type: 'avif' });
|
|
verifyImage('social.cece8c77_ZHhvOb.webp', { width: 253, height: 127, type: 'webp' });
|
|
verifyImage('social.cece8c77_ZwfMjf.jpg', { width: 253, height: 127, type: 'jpg' });
|
|
verifyImage('social.cece8c77_6t5Xo.avif', { width: 506, height: 253, type: 'avif' });
|
|
verifyImage('social.cece8c77_ONTVa.webp', { width: 506, height: 253, type: 'webp' });
|
|
verifyImage('social.cece8c77_isw36.jpg', { width: 506, height: 253, type: 'jpg' });
|
|
});
|
|
});
|
|
|
|
describe('Remote images', () => {
|
|
// Hard-coding in the test! This should never change since the hash is based
|
|
// on the static `src` string
|
|
const HASH = 'ZWW1pg';
|
|
|
|
it('includes sources', () => {
|
|
const sources = $('#google source');
|
|
|
|
expect(sources.length).to.equal(3);
|
|
|
|
// TODO: better coverage to verify source props
|
|
});
|
|
|
|
it('includes <img> attributes', () => {
|
|
const image = $('#google img');
|
|
|
|
expect(image.attr('src')).to.equal(`/googlelogo_color_272x92dp_${HASH}.png`);
|
|
expect(image.attr('width')).to.equal('544');
|
|
expect(image.attr('height')).to.equal('184');
|
|
expect(image.attr('alt')).to.equal('Google logo');
|
|
});
|
|
|
|
it('built the optimized image', () => {
|
|
verifyImage(`googlelogo_color_272x92dp_1YsbPJ.avif`, {
|
|
width: 272,
|
|
height: 92,
|
|
type: 'avif',
|
|
});
|
|
verifyImage(`googlelogo_color_272x92dp_1OJIxd.webp`, {
|
|
width: 272,
|
|
height: 92,
|
|
type: 'webp',
|
|
});
|
|
verifyImage(`googlelogo_color_272x92dp_ZaELrV.png`, {
|
|
width: 272,
|
|
height: 92,
|
|
type: 'png',
|
|
});
|
|
verifyImage(`googlelogo_color_272x92dp_I7OBe.avif`, {
|
|
width: 544,
|
|
height: 184,
|
|
type: 'avif',
|
|
});
|
|
verifyImage(`googlelogo_color_272x92dp_ReA0T.webp`, {
|
|
width: 544,
|
|
height: 184,
|
|
type: 'webp',
|
|
});
|
|
verifyImage(`googlelogo_color_272x92dp_ZWW1pg.png`, {
|
|
width: 544,
|
|
height: 184,
|
|
type: 'png',
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('/public images', () => {
|
|
it('includes sources', () => {
|
|
const sources = $('#hero source');
|
|
|
|
expect(sources.length).to.equal(3);
|
|
|
|
// TODO: better coverage to verify source props
|
|
});
|
|
|
|
it('includes <img> attributes', () => {
|
|
const image = $('#hero img');
|
|
|
|
expect(image.attr('src')).to.equal('/hero_1ql1f0.jpg');
|
|
expect(image.attr('width')).to.equal('768');
|
|
expect(image.attr('height')).to.equal('414');
|
|
expect(image.attr('alt')).to.equal('Hero image');
|
|
});
|
|
|
|
it('built the optimized image', () => {
|
|
verifyImage('hero_ZOXU0F.avif', { width: 384, height: 207, type: 'avif' });
|
|
verifyImage('hero_ZFR9B0.webp', { width: 384, height: 207, type: 'webp' });
|
|
verifyImage('hero_Z1rYjFx.jpg', { width: 384, height: 207, type: 'jpg' });
|
|
verifyImage('hero_Z1kkIMd.avif', { width: 768, height: 414, type: 'avif' });
|
|
verifyImage('hero_Z1bdXnx.webp', { width: 768, height: 414, type: 'webp' });
|
|
verifyImage('hero_Z1Wl8s5.jpg', { width: 768, height: 414, type: 'jpg' });
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('SSG pictures with subpath - build', function () {
|
|
let fixture;
|
|
let $;
|
|
let html;
|
|
|
|
before(async () => {
|
|
fixture = await loadFixture({ root: './fixtures/basic-picture/', base: '/docs' });
|
|
await fixture.build();
|
|
|
|
html = await fixture.readFile('/index.html');
|
|
$ = cheerio.load(html);
|
|
});
|
|
|
|
function verifyImage(pathname, expected) {
|
|
const url = new URL('./fixtures/basic-picture/dist/' + pathname, import.meta.url);
|
|
const dist = fileURLToPath(url);
|
|
|
|
// image-size doesn't support AVIF files
|
|
if (expected.type !== 'avif') {
|
|
const result = sizeOf(dist);
|
|
expect(result).to.deep.equal(expected);
|
|
} else {
|
|
expect(fs.statSync(dist)).not.to.be.undefined;
|
|
}
|
|
}
|
|
|
|
describe('Local images', () => {
|
|
it('includes sources', () => {
|
|
const sources = $('#social-jpg source');
|
|
|
|
expect(sources.length).to.equal(3);
|
|
|
|
// TODO: better coverage to verify source props
|
|
});
|
|
|
|
it('includes <img> attributes', () => {
|
|
const image = $('#social-jpg img');
|
|
|
|
expect(image.attr('src')).to.equal('/docs/social.cece8c77_VWX3S.jpg');
|
|
expect(image.attr('width')).to.equal('506');
|
|
expect(image.attr('height')).to.equal('253');
|
|
expect(image.attr('alt')).to.equal('Social image');
|
|
});
|
|
|
|
it('built the optimized image', () => {
|
|
verifyImage('social.cece8c77_2wbTqo.avif', { width: 253, height: 127, type: 'avif' });
|
|
verifyImage('social.cece8c77_Z1OEppL.webp', { width: 253, height: 127, type: 'webp' });
|
|
verifyImage('social.cece8c77_Z1xuFVD.jpg', { width: 253, height: 127, type: 'jpg' });
|
|
verifyImage('social.cece8c77_Z10SMCc.avif', { width: 506, height: 253, type: 'avif' });
|
|
verifyImage('social.cece8c77_ZhxXEq.webp', { width: 506, height: 253, type: 'webp' });
|
|
verifyImage('social.cece8c77_Z1ks7l5.jpg', { width: 506, height: 253, type: 'jpg' });
|
|
});
|
|
});
|
|
|
|
describe('Inline imports', () => {
|
|
it('includes sources', () => {
|
|
const sources = $('#inline source');
|
|
|
|
expect(sources.length).to.equal(3);
|
|
|
|
// TODO: better coverage to verify source props
|
|
});
|
|
|
|
it('includes <img> attributes', () => {
|
|
const image = $('#inline img');
|
|
|
|
expect(image.attr('src')).to.equal('/docs/social.cece8c77_VWX3S.jpg');
|
|
expect(image.attr('width')).to.equal('506');
|
|
expect(image.attr('height')).to.equal('253');
|
|
expect(image.attr('alt')).to.equal('Inline social image');
|
|
});
|
|
|
|
it('built the optimized image', () => {
|
|
verifyImage('social.cece8c77_2wbTqo.avif', { width: 253, height: 127, type: 'avif' });
|
|
verifyImage('social.cece8c77_Z1OEppL.webp', { width: 253, height: 127, type: 'webp' });
|
|
verifyImage('social.cece8c77_Z1xuFVD.jpg', { width: 253, height: 127, type: 'jpg' });
|
|
verifyImage('social.cece8c77_Z10SMCc.avif', { width: 506, height: 253, type: 'avif' });
|
|
verifyImage('social.cece8c77_ZhxXEq.webp', { width: 506, height: 253, type: 'webp' });
|
|
verifyImage('social.cece8c77_Z1ks7l5.jpg', { width: 506, height: 253, type: 'jpg' });
|
|
});
|
|
});
|
|
|
|
describe('Remote images', () => {
|
|
// Hard-coding in the test! This should never change since the hash is based
|
|
// on the static `src` string
|
|
const HASH = 'ZWW1pg';
|
|
|
|
it('includes sources', () => {
|
|
const sources = $('#google source');
|
|
|
|
expect(sources.length).to.equal(3);
|
|
|
|
// TODO: better coverage to verify source props
|
|
});
|
|
|
|
it('includes <img> attributes', () => {
|
|
const image = $('#google img');
|
|
|
|
expect(image.attr('src')).to.equal(`/docs/googlelogo_color_272x92dp_${HASH}.png`);
|
|
expect(image.attr('width')).to.equal('544');
|
|
expect(image.attr('height')).to.equal('184');
|
|
expect(image.attr('alt')).to.equal('Google logo');
|
|
});
|
|
|
|
it('built the optimized image', () => {
|
|
verifyImage(`googlelogo_color_272x92dp_1YsbPJ.avif`, {
|
|
width: 272,
|
|
height: 92,
|
|
type: 'avif',
|
|
});
|
|
verifyImage(`googlelogo_color_272x92dp_1OJIxd.webp`, {
|
|
width: 272,
|
|
height: 92,
|
|
type: 'webp',
|
|
});
|
|
verifyImage(`googlelogo_color_272x92dp_ZaELrV.png`, {
|
|
width: 272,
|
|
height: 92,
|
|
type: 'png',
|
|
});
|
|
verifyImage(`googlelogo_color_272x92dp_I7OBe.avif`, {
|
|
width: 544,
|
|
height: 184,
|
|
type: 'avif',
|
|
});
|
|
verifyImage(`googlelogo_color_272x92dp_ReA0T.webp`, {
|
|
width: 544,
|
|
height: 184,
|
|
type: 'webp',
|
|
});
|
|
verifyImage(`googlelogo_color_272x92dp_ZWW1pg.png`, {
|
|
width: 544,
|
|
height: 184,
|
|
type: 'png',
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('/public images', () => {
|
|
it('includes sources', () => {
|
|
const sources = $('#hero source');
|
|
|
|
expect(sources.length).to.equal(3);
|
|
|
|
// TODO: better coverage to verify source props
|
|
});
|
|
|
|
it('includes <img> attributes', () => {
|
|
const image = $('#hero img');
|
|
|
|
expect(image.attr('src')).to.equal('/docs/hero_1ql1f0.jpg');
|
|
expect(image.attr('width')).to.equal('768');
|
|
expect(image.attr('height')).to.equal('414');
|
|
expect(image.attr('alt')).to.equal('Hero image');
|
|
});
|
|
|
|
it('built the optimized image', () => {
|
|
verifyImage('hero_ZOXU0F.avif', { width: 384, height: 207, type: 'avif' });
|
|
verifyImage('hero_ZFR9B0.webp', { width: 384, height: 207, type: 'webp' });
|
|
verifyImage('hero_Z1rYjFx.jpg', { width: 384, height: 207, type: 'jpg' });
|
|
verifyImage('hero_Z1kkIMd.avif', { width: 768, height: 414, type: 'avif' });
|
|
verifyImage('hero_Z1bdXnx.webp', { width: 768, height: 414, type: 'webp' });
|
|
verifyImage('hero_Z1Wl8s5.jpg', { width: 768, height: 414, type: 'jpg' });
|
|
});
|
|
});
|
|
});
|