renderComponentsHTMLChecks() — astro Function Reference

Architecture documentation for the renderComponentsHTMLChecks() function in render-html.test.js from the astro codebase.

Function javascript CoreAstro RenderingEngine calls 1

Entity Profile

CoreAstro→ RenderingEngine→ renderComponentsHTMLChecks() — astro Function Reference

Dependency Diagram

graph TD
  446652c0_82d8_59c3_da58_e88040dd7ce6["renderComponentsHTMLChecks()"]
  fd390267_3583_702c_81b1_1b4c55b1ead2["render-html.test.js"]
  446652c0_82d8_59c3_da58_e88040dd7ce6 -->|defined in| fd390267_3583_702c_81b1_1b4c55b1ead2
  425cde27_e4f5_014e_4937_4478c54edb56["assertInlineMark()"]
  446652c0_82d8_59c3_da58_e88040dd7ce6 -->|calls| 425cde27_e4f5_014e_4937_4478c54edb56
  style 446652c0_82d8_59c3_da58_e88040dd7ce6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/integrations/markdoc/test/render-html.test.js lines 221–306

function renderComponentsHTMLChecks(html) {
	const { document } = parseHTML(html);

	const naturalP1 = document.querySelector('article > p:nth-of-type(1)');
	assert.equal(naturalP1.textContent, 'This is a inline mark in regular Markdown markup.');
	assert.equal(naturalP1.children.length, 1);

	const p1 = document.querySelector('article > p:nth-of-type(2)');
	assert.equal(p1.id, 'p1');
	assert.equal(p1.textContent, 'This is a inline mark under some HTML');
	assert.equal(p1.children.length, 1);
	assertInlineMark(p1.children[0]);

	const div1p1 = document.querySelector('article > #div1 > p:nth-of-type(1)');
	assert.equal(div1p1.id, 'div1-p1');
	assert.equal(div1p1.textContent, 'This is a inline mark under some HTML');
	assert.equal(div1p1.children.length, 1);
	assertInlineMark(div1p1.children[0]);

	const div1p2 = document.querySelector('article > #div1 > p:nth-of-type(2)');
	assert.equal(div1p2.id, 'div1-p2');
	assert.equal(div1p2.textContent, 'This is a inline mark under some HTML');
	assert.equal(div1p2.children.length, 1);

	const div1p2span1 = div1p2.querySelector('span');
	assert.equal(div1p2span1.id, 'div1-p2-span1');
	assert.equal(div1p2span1.textContent, 'inline mark');
	assert.equal(div1p2span1.children.length, 1);
	assertInlineMark(div1p2span1.children[0]);

	const aside1 = document.querySelector('article > aside:nth-of-type(1)');
	const aside1Title = aside1.querySelector('p.title');
	assert.equal(aside1Title.textContent.trim(), 'Aside One');
	const aside1Section = aside1.querySelector('section');
	const aside1SectionP1 = aside1Section.querySelector('p:nth-of-type(1)');
	assert.equal(
		aside1SectionP1.textContent,
		"I'm a Markdown paragraph inside an top-level aside tag",
	);
	const aside1H2_1 = aside1Section.querySelector('h2:nth-of-type(1)');
	assert.equal(aside1H2_1.id, 'im-an-h2-via-markdown-markup'); // automatic slug
	assert.equal(aside1H2_1.textContent, "I'm an H2 via Markdown markup");
	const aside1H2_2 = aside1Section.querySelector('h2:nth-of-type(2)');
	assert.equal(aside1H2_2.id, 'h-two');
	assert.equal(aside1H2_2.textContent, "I'm an H2 via HTML markup");
	const aside1SectionP2 = aside1Section.querySelector('p:nth-of-type(2)');
	assert.equal(aside1SectionP2.textContent, 'Markdown bold vs HTML bold');
	assert.equal(aside1SectionP2.children.length, 2);
	const aside1SectionP2Strong1 = aside1SectionP2.querySelector('strong:nth-of-type(1)');
	assert.equal(aside1SectionP2Strong1.textContent, 'Markdown bold');
	const aside1SectionP2Strong2 = aside1SectionP2.querySelector('strong:nth-of-type(2)');
	assert.equal(aside1SectionP2Strong2.textContent, 'HTML bold');

	const article = document.querySelector('article');
	assert.equal(article.textContent.includes('RENDERED'), true);
	assert.notEqual(article.textContent.includes('NOT RENDERED'), true);

	const section1 = document.querySelector('article > #section1');
	const section1div1 = section1.querySelector('#div1');
	const section1Aside1 = section1div1.querySelector('aside:nth-of-type(1)');
	const section1Aside1Title = section1Aside1.querySelector('p.title');
	assert.equal(section1Aside1Title.textContent.trim(), 'Nested un-indented Aside');
	const section1Aside1Section = section1Aside1.querySelector('section');
	const section1Aside1SectionP1 = section1Aside1Section.querySelector('p:nth-of-type(1)');
	assert.equal(section1Aside1SectionP1.textContent, 'regular Markdown markup');
	const section1Aside1SectionP4 = section1Aside1Section.querySelector('p:nth-of-type(2)');
	assert.equal(section1Aside1SectionP4.textContent, 'nested inline mark content');
	assert.equal(section1Aside1SectionP4.children.length, 1);
	assertInlineMark(section1Aside1SectionP4.children[0]);

	const section1div2 = section1.querySelector('#div2');
	const section1Aside2 = section1div2.querySelector('aside:nth-of-type(1)');
	const section1Aside2Title = section1Aside2.querySelector('p.title');
	assert.equal(section1Aside2Title.textContent.trim(), 'Nested indented Aside 💀');
	const section1Aside2Section = section1Aside2.querySelector('section');
	const section1Aside2SectionP1 = section1Aside2Section.querySelector('p:nth-of-type(1)');
	assert.equal(section1Aside2SectionP1.textContent, 'regular Markdown markup');
	const section1Aside1SectionP5 = section1Aside2Section.querySelector('p:nth-of-type(2)');
	assert.equal(section1Aside1SectionP5.id, 'p5');
	assert.equal(section1Aside1SectionP5.children.length, 1);
	const section1Aside1SectionP5Span1 = section1Aside1SectionP5.children[0];