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>
289 lines
8.7 KiB
JavaScript
289 lines
8.7 KiB
JavaScript
import { expect } from 'chai';
|
|
import * as cheerio from 'cheerio';
|
|
import { loadFixture } from './test-utils.js';
|
|
import testAdapter from '../../../astro/test/test-adapter.js';
|
|
|
|
describe('SSR images - build', function () {
|
|
let fixture;
|
|
|
|
before(async () => {
|
|
fixture = await loadFixture({
|
|
root: './fixtures/basic-image/',
|
|
adapter: testAdapter({ streaming: false }),
|
|
output: 'server'
|
|
});
|
|
await fixture.build();
|
|
});
|
|
|
|
describe('Local images', () => {
|
|
it('includes src, width, and height attributes', async () => {
|
|
const app = await fixture.loadTestAdapterApp();
|
|
|
|
const request = new Request('http://example.com/');
|
|
const response = await app.render(request);
|
|
const html = await response.text();
|
|
const $ = cheerio.load(html);
|
|
|
|
const image = $('#social-jpg');
|
|
|
|
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('506');
|
|
expect(searchParams.get('h')).to.equal('253');
|
|
// TODO: possible to avoid encoding the full image path?
|
|
expect(searchParams.get('href')).to.equal('/assets/social.cece8c77.jpg');
|
|
});
|
|
});
|
|
|
|
describe('Inline imports', () => {
|
|
it('includes src, width, and height attributes', async () => {
|
|
const app = await fixture.loadTestAdapterApp();
|
|
|
|
const request = new Request('http://example.com/');
|
|
const response = await app.render(request);
|
|
const html = await response.text();
|
|
const $ = cheerio.load(html);
|
|
|
|
const image = $('#inline');
|
|
|
|
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('506');
|
|
expect(searchParams.get('h')).to.equal('253');
|
|
// TODO: possible to avoid encoding the full image path?
|
|
expect(searchParams.get('href')).to.equal('/assets/social.cece8c77.jpg');
|
|
});
|
|
});
|
|
|
|
describe('Remote images', () => {
|
|
it('includes src, width, and height attributes', async () => {
|
|
const app = await fixture.loadTestAdapterApp();
|
|
|
|
const request = new Request('http://example.com/');
|
|
const response = await app.render(request);
|
|
const html = await response.text();
|
|
const $ = cheerio.load(html);
|
|
|
|
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'
|
|
);
|
|
});
|
|
|
|
it('keeps remote image query params', async () => {
|
|
const app = await fixture.loadTestAdapterApp();
|
|
|
|
const request = new Request('http://example.com/');
|
|
const response = await app.render(request);
|
|
const html = await response.text();
|
|
const $ = cheerio.load(html);
|
|
|
|
const image = $('#query');
|
|
|
|
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?token=abc'
|
|
);
|
|
});
|
|
});
|
|
|
|
describe('/public images', () => {
|
|
it('includes src, width, and height attributes', async () => {
|
|
const app = await fixture.loadTestAdapterApp();
|
|
|
|
const request = new Request('http://example.com/');
|
|
const response = await app.render(request);
|
|
const html = await response.text();
|
|
const $ = cheerio.load(html);
|
|
|
|
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('f')).to.equal('webp');
|
|
expect(searchParams.get('w')).to.equal('768');
|
|
expect(searchParams.get('h')).to.equal('414');
|
|
// TODO: possible to avoid encoding the full image path?
|
|
expect(searchParams.get('href')).to.equal('/hero.jpg');
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('SSR images with subpath - build', function () {
|
|
let fixture;
|
|
|
|
before(async () => {
|
|
fixture = await loadFixture({
|
|
root: './fixtures/basic-image/',
|
|
adapter: testAdapter({ streaming: false }),
|
|
output: 'server',
|
|
base: '/docs'
|
|
});
|
|
await fixture.build();
|
|
});
|
|
|
|
describe('Local images', () => {
|
|
it('includes src, width, and height attributes', async () => {
|
|
const app = await fixture.loadTestAdapterApp();
|
|
|
|
const request = new Request('http://example.com/');
|
|
const response = await app.render(request);
|
|
const html = await response.text();
|
|
const $ = cheerio.load(html);
|
|
|
|
const image = $('#social-jpg');
|
|
|
|
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('506');
|
|
expect(searchParams.get('h')).to.equal('253');
|
|
// TODO: possible to avoid encoding the full image path?
|
|
expect(searchParams.get('href')).to.equal('/docs/assets/social.cece8c77.jpg');
|
|
});
|
|
});
|
|
|
|
describe('Inline imports', () => {
|
|
it('includes src, width, and height attributes', async () => {
|
|
const app = await fixture.loadTestAdapterApp();
|
|
|
|
const request = new Request('http://example.com/');
|
|
const response = await app.render(request);
|
|
const html = await response.text();
|
|
const $ = cheerio.load(html);
|
|
|
|
const image = $('#inline');
|
|
|
|
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('506');
|
|
expect(searchParams.get('h')).to.equal('253');
|
|
// TODO: possible to avoid encoding the full image path?
|
|
expect(searchParams.get('href')).to.equal('/docs/assets/social.cece8c77.jpg');
|
|
});
|
|
});
|
|
|
|
describe('Remote images', () => {
|
|
it('includes src, width, and height attributes', async () => {
|
|
const app = await fixture.loadTestAdapterApp();
|
|
|
|
const request = new Request('http://example.com/');
|
|
const response = await app.render(request);
|
|
const html = await response.text();
|
|
const $ = cheerio.load(html);
|
|
|
|
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');
|
|
});
|
|
|
|
it('keeps remote image query params', async () => {
|
|
const app = await fixture.loadTestAdapterApp();
|
|
|
|
const request = new Request('http://example.com/');
|
|
const response = await app.render(request);
|
|
const html = await response.text();
|
|
const $ = cheerio.load(html);
|
|
|
|
const image = $('#query');
|
|
|
|
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?token=abc'
|
|
);
|
|
});
|
|
});
|
|
|
|
describe('/public images', () => {
|
|
it('includes src, width, and height attributes', async () => {
|
|
const app = await fixture.loadTestAdapterApp();
|
|
|
|
const request = new Request('http://example.com/');
|
|
const response = await app.render(request);
|
|
const html = await response.text();
|
|
const $ = cheerio.load(html);
|
|
|
|
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('f')).to.equal('webp');
|
|
expect(searchParams.get('w')).to.equal('768');
|
|
expect(searchParams.get('h')).to.equal('414');
|
|
// TODO: possible to avoid encoding the full image path?
|
|
expect(searchParams.get('href')).to.equal('/hero.jpg');
|
|
});
|
|
});
|
|
});
|