test: add tests

packages/astro/package.json

@@ -213,6 +213,7 @@
     "mocha": "^10.2.0",
     "network-information-types": "^0.1.1",
     "node-mocks-http": "^1.13.0",
+    "parse-srcset": "^1.0.2",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
     "rehype-toc": "^3.0.2",

packages/astro/test/core-image.test.js

@@ -2,6 +2,7 @@ import { expect } from 'chai';
 import * as cheerio from 'cheerio';
 import { basename } from 'node:path';
 import { Writable } from 'node:stream';
+import parseSrcset from 'parse-srcset';
 import { removeDir } from '../dist/core/fs/index.js';
 import { Logger } from '../dist/core/logger/core.js';
 import testAdapter from './test-adapter.js';
@@ -180,8 +181,6 @@ describe('astro:image', () => {
 				let html = await res.text();
 				$ = cheerio.load(html);
 
-				console.log(html);
-
 				let $img = $('img');
 				expect($img).to.have.a.lengthOf(1);
 
@@ -190,6 +189,36 @@ describe('astro:image', () => {
 				expect(res.status).to.equal(200);
 				expect(res.headers.get('content-type')).to.equal('image/avif');
 			});
+
+			it('has a working Picture component', async () => {
+				let res = await fixture.fetch('/picturecomponent');
+				let html = await res.text();
+				$ = cheerio.load(html);
+
+				// Densities
+				let $img = $('#picture-density-2-format img');
+				let $picture = $('#picture-density-2-format picture');
+				let $source = $('#picture-density-2-format source');
+				expect($img).to.have.a.lengthOf(1);
+				expect($picture).to.have.a.lengthOf(1);
+				expect($source).to.have.a.lengthOf(2);
+
+				const srcset = parseSrcset($source.attr('srcset'));
+				expect(srcset.every((src) => src.url.startsWith('/_image'))).to.equal(true);
+				expect(srcset.map((src) => src.d)).to.deep.equal([undefined, 2]);
+
+				// Widths
+				$img = $('#picture-widths img');
+				$picture = $('#picture-widths picture');
+				$source = $('#picture-widths source');
+				expect($img).to.have.a.lengthOf(1);
+				expect($picture).to.have.a.lengthOf(1);
+				expect($source).to.have.a.lengthOf(1);
+
+				const srcset2 = parseSrcset($source.attr('srcset'));
+				expect(srcset2.every((src) => src.url.startsWith('/_image'))).to.equal(true);
+				expect(srcset2.map((src) => src.w)).to.deep.equal([undefined, 207]);
+			});
 		});
 
 		describe('vite-isms', () => {
@@ -704,6 +733,26 @@ describe('astro:image', () => {
 			expect(data).to.be.an.instanceOf(Buffer);
 		});
 
+		it('Picture component images are written', async () => {
+			const html = await fixture.readFile('/picturecomponent/index.html');
+			const $ = cheerio.load(html);
+			let $img = $('img');
+			let $source = $('source');
+
+			expect($img).to.have.a.lengthOf(1);
+			expect($source).to.have.a.lengthOf(2);
+
+			const srcset = parseSrcset($source.attr('srcset'));
+			let hasExistingSrc = await Promise.all(
+				srcset.map(async (src) => {
+					const data = await fixture.readFile(src.url, null);
+					return data instanceof Buffer;
+				})
+			);
+
+			expect(hasExistingSrc.every((src) => src === true)).to.deep.equal(true);
+		});
+
 		it('markdown images are written', async () => {
 			const html = await fixture.readFile('/post/index.html');
 			const $ = cheerio.load(html);

packages/astro/test/fixtures/core-image-ssg/src/pages/picturecomponent.astro

@@ -0,0 +1,6 @@
+---
+import { Picture } from "astro:assets";
+import myImage from "../assets/penguin1.jpg";
+---
+
+<Picture src={myImage} width={Math.round(myImage.width / 2)} alt="A penguin" densities={[2]} formats={['avif', 'webp']} />

packages/astro/test/fixtures/core-image/src/pages/picturecomponent.astro

@@ -0,0 +1,12 @@
+---
+import { Picture } from "astro:assets";
+import myImage from "../assets/penguin1.jpg";
+---
+
+<div id="picture-density-2-format">
+<Picture src={myImage} width={Math.round(myImage.width / 2)} alt="A penguin" densities={[2]} formats={['avif', 'webp']} />
+</div>
+
+<div id="picture-widths">
+<Picture src={myImage} width={Math.round(myImage.width / 2)} alt="A penguin" widths={[myImage.width]} />
+</div>

pnpm-lock.yaml

@@ -754,6 +754,9 @@ importers:
       node-mocks-http:
         specifier: ^1.13.0
         version: 1.13.0
+      parse-srcset:
+        specifier: ^1.0.2
+        version: 1.0.2
       rehype-autolink-headings:
         specifier: ^6.1.1
         version: 6.1.1
@@ -14862,6 +14865,10 @@ packages:
     resolution: {integrity: sha512-kBeTUtcj+SkyfaW4+KBe0HtsloBJ/mKTPoxpVdA57GZiPerREsUWJOhVj9anXweFiJkm5y8FG1sxFZkZ0SN6wg==}
     dev: false
 
+  /parse-srcset@1.0.2:
+    resolution: {integrity: sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==}
+    dev: true
+
   /parse5-htmlparser2-tree-adapter@7.0.0:
     resolution: {integrity: sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==}
     dependencies: