[Markdoc] Fix: Support `render: null` (#6723)

* fix: handle array of tree nodes

* test: render null in document node

* chore: lock

* refactor: consolidate render test logic

* chore: changeset

1 files changed, 80 insertions, 54 deletions

diff --git a/packages/integrations/markdoc/test/render.test.js b/packages/integrations/markdoc/test/render.test.js
index acb17577b..48d13a759 100644
--- a/packages/integrations/markdoc/test/render.test.js
+++ b/packages/integrations/markdoc/test/render.test.js
@@ -16,11 +16,8 @@ describe('Markdoc - render', () => {
 
 			const res = await fixture.fetch('/');
 			const html = await res.text();
-			const { document } = parseHTML(html);
-			const h2 = document.querySelector('h2');
-			expect(h2.textContent).to.equal('Simple post');
-			const p = document.querySelector('p');
-			expect(p.textContent).to.equal('This is a simple Markdoc post.');
+
+			renderSimpleChecks(html);
 
 			await server.stop();
 		});
@@ -31,17 +28,8 @@ describe('Markdoc - render', () => {
 
 			const res = await fixture.fetch('/');
 			const html = await res.text();
-			const { document } = parseHTML(html);
-			const h2 = document.querySelector('h2');
-			expect(h2.textContent).to.equal('Post with config');
-			const textContent = html;
-
-			expect(textContent).to.not.include('Hello');
-			expect(textContent).to.include('Hola');
-			expect(textContent).to.include(`Konnichiwa`);
 
-			const runtimeVariable = document.querySelector('#runtime-variable');
-			expect(runtimeVariable?.textContent?.trim()).to.equal('working!');
+			renderConfigChecks(html);
 
 			await server.stop();
 		});
@@ -52,19 +40,20 @@ describe('Markdoc - render', () => {
 
 			const res = await fixture.fetch('/');
 			const html = await res.text();
-			const { document } = parseHTML(html);
-			const h2 = document.querySelector('h2');
-			expect(h2.textContent).to.equal('Post with components');
 
-			// Renders custom shortcode component
-			const marquee = document.querySelector('marquee');
-			expect(marquee).to.not.be.null;
-			expect(marquee.hasAttribute('data-custom-marquee')).to.equal(true);
+			renderComponentsChecks(html);
+
+			await server.stop();
+		});
 
-			// Renders Astro Code component
-			const pre = document.querySelector('pre');
-			expect(pre).to.not.be.null;
-			expect(pre.className).to.equal('astro-code');
+		it('renders content - with `render: null` in document', async () => {
+			const fixture = await getFixture('render-null');
+			const server = await fixture.startDevServer();
+
+			const res = await fixture.fetch('/');
+			const html = await res.text();
+
+			renderNullChecks(html);
 
 			await server.stop();
 		});
@@ -76,11 +65,8 @@ describe('Markdoc - render', () => {
 			await fixture.build();
 
 			const html = await fixture.readFile('/index.html');
-			const { document } = parseHTML(html);
-			const h2 = document.querySelector('h2');
-			expect(h2.textContent).to.equal('Simple post');
-			const p = document.querySelector('p');
-			expect(p.textContent).to.equal('This is a simple Markdoc post.');
+
+			renderSimpleChecks(html);
 		});
 
 		it('renders content - with config', async () => {
@@ -88,17 +74,8 @@ describe('Markdoc - render', () => {
 			await fixture.build();
 
 			const html = await fixture.readFile('/index.html');
-			const { document } = parseHTML(html);
-			const h2 = document.querySelector('h2');
-			expect(h2.textContent).to.equal('Post with config');
-			const textContent = html;
-
-			expect(textContent).to.not.include('Hello');
-			expect(textContent).to.include('Hola');
-			expect(textContent).to.include(`Konnichiwa`);
 
-			const runtimeVariable = document.querySelector('#runtime-variable');
-			expect(runtimeVariable?.textContent?.trim()).to.equal('working!');
+			renderConfigChecks(html);
 		});
 
 		it('renders content - with components', async () => {
@@ -106,19 +83,68 @@ describe('Markdoc - render', () => {
 			await fixture.build();
 
 			const html = await fixture.readFile('/index.html');
-			const { document } = parseHTML(html);
-			const h2 = document.querySelector('h2');
-			expect(h2.textContent).to.equal('Post with components');
-
-			// Renders custom shortcode component
-			const marquee = document.querySelector('marquee');
-			expect(marquee).to.not.be.null;
-			expect(marquee.hasAttribute('data-custom-marquee')).to.equal(true);
-
-			// Renders Astro Code component
-			const pre = document.querySelector('pre');
-			expect(pre).to.not.be.null;
-			expect(pre.className).to.equal('astro-code');
+
+			renderComponentsChecks(html);
+		});
+
+		it('renders content - with `render: null` in document', async () => {
+			const fixture = await getFixture('render-null');
+			await fixture.build();
+
+			const html = await fixture.readFile('/index.html');
+
+			renderNullChecks(html);
 		});
 	});
 });
+
+/**
+ * @param {string} html
+ */
+function renderNullChecks(html) {
+	const { document } = parseHTML(html);
+	const h2 = document.querySelector('h2');
+	expect(h2.textContent).to.equal('Post with render null');
+	expect(h2.parentElement?.tagName).to.equal('BODY');
+}
+
+/** @param {string} html */
+function renderComponentsChecks(html) {
+	const { document } = parseHTML(html);
+	const h2 = document.querySelector('h2');
+	expect(h2.textContent).to.equal('Post with components');
+
+	// Renders custom shortcode component
+	const marquee = document.querySelector('marquee');
+	expect(marquee).to.not.be.null;
+	expect(marquee.hasAttribute('data-custom-marquee')).to.equal(true);
+
+	// Renders Astro Code component
+	const pre = document.querySelector('pre');
+	expect(pre).to.not.be.null;
+	expect(pre.className).to.equal('astro-code');
+}
+
+/** @param {string} html */
+function renderConfigChecks(html) {
+	const { document } = parseHTML(html);
+	const h2 = document.querySelector('h2');
+	expect(h2.textContent).to.equal('Post with config');
+	const textContent = html;
+
+	expect(textContent).to.not.include('Hello');
+	expect(textContent).to.include('Hola');
+	expect(textContent).to.include(`Konnichiwa`);
+
+	const runtimeVariable = document.querySelector('#runtime-variable');
+	expect(runtimeVariable?.textContent?.trim()).to.equal('working!');
+}
+
+/** @param {string} html */
+function renderSimpleChecks(html) {
+	const { document } = parseHTML(html);
+	const h2 = document.querySelector('h2');
+	expect(h2.textContent).to.equal('Simple post');
+	const p = document.querySelector('p');
+	expect(p.textContent).to.equal('This is a simple Markdoc post.');
+}