Sync from a8e1c0a7402940e0fc5beef669522b315052df1blatest

1 files changed, 89 insertions, 0 deletions

diff --git a/packages/integrations/vercel/test/image.test.js b/packages/integrations/vercel/test/image.test.js
new file mode 100644
index 000000000..f5dac6d86
--- /dev/null
+++ b/packages/integrations/vercel/test/image.test.js
@@ -0,0 +1,89 @@
+import assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('Image', () => {
+	/** @type {import('./test-utils.js').Fixture} */
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/image/',
+		});
+		await fixture.build();
+	});
+
+	it('build successful', async () => {
+		assert.ok(await fixture.readFile('../.vercel/output/static/index.html'));
+	});
+
+	it('has link to vercel in build with proper attributes', async () => {
+		const html = await fixture.readFile('../.vercel/output/static/index.html');
+		const $ = cheerio.load(html);
+		const img = $('#basic-image img');
+
+		assert.equal(img.attr('src').startsWith('/_vercel/image?url=_astr'), true);
+		assert.equal(img.attr('loading'), 'lazy');
+		assert.equal(img.attr('width'), '225');
+	});
+
+	it('has proper vercel config', async () => {
+		const vercelConfig = JSON.parse(await fixture.readFile('../.vercel/output/config.json'));
+
+		assert.deepEqual(vercelConfig.images, {
+			sizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+			domains: ['astro.build'],
+			remotePatterns: [
+				{
+					protocol: 'https',
+					hostname: '**.amazonaws.com',
+				},
+			],
+		});
+	});
+
+	describe('dev', () => {
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('has link to local image in dev with proper attributes', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			const $ = cheerio.load(html);
+			const img = $('#basic-image img');
+
+			assert.equal(img.attr('src').startsWith('/_image?href='), true);
+			assert.equal(img.attr('loading'), 'lazy');
+			assert.equal(img.attr('width'), '225');
+		});
+
+		it('supports SVGs', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			const $ = cheerio.load(html);
+			const img = $('#svg img');
+			const src = img.attr('src');
+
+			const res = await fixture.fetch(src);
+			assert.equal(res.status, 200);
+			assert.equal(res.headers.get('content-type'), 'image/svg+xml');
+		});
+
+		it('generates valid srcset for responsive images', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			const $ = cheerio.load(html);
+			const img = $('#responsive img');
+			const widths = img
+				.attr('srcset')
+				.split(', ')
+				.map((entry) => entry.split(' ')[1]);
+			assert.deepEqual(widths, ['640w', '750w', '828w', '1080w', '1200w', '1920w']);
+		});
+	});
+});