diff options
Diffstat (limited to 'packages/integrations/markdoc/test')
11 files changed, 580 insertions, 0 deletions
diff --git a/packages/integrations/markdoc/test/fixtures/render-html/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-html/astro.config.mjs new file mode 100644 index 000000000..a230fe631 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/astro.config.mjs @@ -0,0 +1,7 @@ +import { defineConfig } from 'astro/config'; +import markdoc from '@astrojs/markdoc'; + +// https://astro.build/config +export default defineConfig({ + integrations: [markdoc({ allowHTML: true })], +}); diff --git a/packages/integrations/markdoc/test/fixtures/render-html/markdoc.config.ts b/packages/integrations/markdoc/test/fixtures/render-html/markdoc.config.ts new file mode 100644 index 000000000..190f271ce --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/markdoc.config.ts @@ -0,0 +1,19 @@ +import { defineMarkdocConfig, component } from '@astrojs/markdoc/config'; + +export default defineMarkdocConfig({ + tags: { + aside: { + render: component('./src/components/Aside.astro'), + attributes: { + type: { type: String }, + title: { type: String }, + }, + }, + mark: { + render: component('./src/components/Mark.astro'), + attributes: { + color: { type: String }, + }, + }, + }, +}) diff --git a/packages/integrations/markdoc/test/fixtures/render-html/package.json b/packages/integrations/markdoc/test/fixtures/render-html/package.json new file mode 100644 index 000000000..4a0c67bfe --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/markdoc-render-html", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/components/Aside.astro b/packages/integrations/markdoc/test/fixtures/render-html/src/components/Aside.astro new file mode 100644 index 000000000..5d92a0993 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/components/Aside.astro @@ -0,0 +1,116 @@ +--- +// Inspired by the `Aside` component from docs.astro.build +// https://github.com/withastro/docs/blob/main/src/components/Aside.astro + +export interface Props { + type?: 'note' | 'tip' | 'caution' | 'danger'; + title?: string; +} + +const labelByType = { + note: 'Note', + tip: 'Tip', + caution: 'Caution', + danger: 'Danger', +}; +const { type = 'note' } = Astro.props as Props; +const title = Astro.props.title ?? labelByType[type] ?? ''; + +// SVG icon paths based on GitHub Octicons +const icons: Record<NonNullable<Props['type']>, { viewBox: string; d: string }> = { + note: { + viewBox: '0 0 18 18', + d: 'M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0114.25 14H1.75A1.75 1.75 0 010 12.25v-8.5zm1.75-.25a.25.25 0 00-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-8.5a.25.25 0 00-.25-.25H1.75zM3.5 6.25a.75.75 0 01.75-.75h7a.75.75 0 010 1.5h-7a.75.75 0 01-.75-.75zm.75 2.25a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z', + }, + tip: { + viewBox: '0 0 18 18', + d: 'M14 0a8.8 8.8 0 0 0-6 2.6l-.5.4-.9 1H3.3a1.8 1.8 0 0 0-1.5.8L.1 7.6a.8.8 0 0 0 .4 1.1l3.1 1 .2.1 2.4 2.4.1.2 1 3a.8.8 0 0 0 1 .5l2.9-1.7a1.8 1.8 0 0 0 .8-1.5V9.5l1-1 .4-.4A8.8 8.8 0 0 0 16 2v-.1A1.8 1.8 0 0 0 14.2 0h-.1zm-3.5 10.6-.3.2L8 12.3l.5 1.8 2-1.2a.3.3 0 0 0 .1-.2v-2zM3.7 8.1l1.5-2.3.2-.3h-2a.3.3 0 0 0-.3.1l-1.2 2 1.8.5zm5.2-4.5a7.3 7.3 0 0 1 5.2-2.1h.1a.3.3 0 0 1 .3.3v.1a7.3 7.3 0 0 1-2.1 5.2l-.5.4a15.2 15.2 0 0 1-2.5 2L7.1 11 5 9l1.5-2.3a15.3 15.3 0 0 1 2-2.5l.4-.5zM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-8.4 9.6a1.5 1.5 0 1 0-2.2-2.2 7 7 0 0 0-1.1 3 .2.2 0 0 0 .3.3c.6 0 2.2-.4 3-1.1z', + }, + caution: { + viewBox: '-1 1 18 18', + d: 'M8.9 1.5C8.7 1.2 8.4 1 8 1s-.7.2-.9.5l-7 12a1 1 0 0 0 0 1c.2.3.6.5 1 .5H15c.4 0 .7-.2.9-.5a1 1 0 0 0 0-1l-7-12zM9 13H7v-2h2v2zm0-3H7V6h2v4z', + }, + danger: { + viewBox: '0 1 14 17', + d: 'M5 .3c.9 2.2.5 3.4-.5 4.3C3.5 5.6 2 6.5 1 8c-1.5 2-1.7 6.5 3.5 7.7-2.2-1.2-2.6-4.5-.3-6.6-.6 2 .6 3.3 2 2.8 1.4-.4 2.3.6 2.2 1.7 0 .8-.3 1.4-1 1.8A5.6 5.6 0 0 0 12 10c0-2.9-2.5-3.3-1.3-5.7-1.5.2-2 1.2-1.8 2.8 0 1-1 1.8-2 1.3-.6-.4-.6-1.2 0-1.8C8.2 5.3 8.7 2.5 5 .3z', + }, +}; +const { viewBox, d } = icons[type]; +--- + +<aside class={`content ${type}`} aria-label={title}> + <p class="title" aria-hidden="true"> + <span class="icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox={viewBox} width={16} height={16}> + <path fill-rule="evenodd" d={d}></path> + </svg> + </span> + {title} + </p> + <section> + <slot /> + </section> +</aside> + +<style> + aside { + --color-base-purple: 269, 79%; + --color-base-teal: 180, 80%; + --color-base-red: 351, 100%; + --color-base-yellow: 41, 100%; + + --aside-color-base: var(--color-base-purple); + --aside-color-lightness: 54%; + --aside-accent-color: hsl(var(--aside-color-base), var(--aside-color-lightness)); + --aside-text-lightness: 20%; + --aside-text-accent-color: hsl(var(--aside-color-base), var(--aside-text-lightness)); + + border-inline-start: 4px solid var(--aside-accent-color); + padding: 1rem; + background-color: hsla(var(--aside-color-base), var(--aside-color-lightness), 0.1); + /* Indicates the aside boundaries for forced colors users, transparent is changed to a solid color */ + outline: 1px solid transparent; + } + + .title { + line-height: 1; + margin-bottom: 0.5rem; + font-size: 0.9rem; + letter-spacing: 0.05em; + font-weight: bold; + text-transform: uppercase; + color: var(--aside-text-accent-color); + } + + .icon svg { + width: 1.5em; + height: 1.5em; + vertical-align: middle; + fill: currentcolor; + } + + aside :global(a), + aside :global(a > code:not([class*='language'])) { + color: var(--aside-text-accent-color); + } + + aside :global(pre) { + margin-left: 0; + margin-right: 0; + } + + .tip { + --aside-color-lightness: 42%; + --aside-color-base: var(--color-base-teal); + } + + .caution { + --aside-color-lightness: 59%; + --aside-color-base: var(--color-base-yellow); + } + + .danger { + --aside-color-lightness: 54%; + --aside-color-base: var(--color-base-red); + } +</style> diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/components/Mark.astro b/packages/integrations/markdoc/test/fixtures/render-html/src/components/Mark.astro new file mode 100644 index 000000000..7d0b6c9fb --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/components/Mark.astro @@ -0,0 +1,11 @@ +--- + +export interface Props { + color?: 'hotpink' | 'blue'; +} + +const { color } = Astro.props; + +--- + +<span style={`color: ${color}`} class="mark"><slot /></span> diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/components.mdoc b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/components.mdoc new file mode 100644 index 000000000..55890ce09 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/components.mdoc @@ -0,0 +1,47 @@ +--- +title: Welcome to Markdoc 👋 +--- + +This is a {% mark color="hotpink" %}inline mark{% /mark %} in regular Markdown markup. + +<p id="p1">This is a {% mark color="hotpink" %}inline mark{% /mark %} under some HTML</p> + +<div id="div1"> + <p id="div1-p1">This is a {% mark color="hotpink" %}inline mark{% /mark %} under some HTML</p> + <p id="div1-p2">This is a <span id="div1-p2-span1">{% mark color="hotpink" %}inline mark{% /mark %}</span> under some HTML</p> +</div> + +{% aside title="Aside One" type="tip" %} + +I'm a Markdown paragraph inside an top-level aside tag + +## I'm an H2 via Markdown markup + +<h2 id="h-two">I'm an H2 via HTML markup</h2> + +**Markdown bold** vs <strong>HTML bold</strong> + +RENDERED + +{% if $revealSecret %} +NOT RENDERED +{% /if %} + +{% if $revealSecret %}NOT RENDERED{% /if %} + +{% /aside %} + +<section id="section1"> + <div id="div1"> +{% aside title="Nested un-indented Aside" type="tip" %} +regular Markdown markup +<p id="p4">nested {% mark color="hotpink" %}inline mark{% /mark %} content</p> +{% /aside %} + </div> + <div id="div2"> + {% aside title="Nested indented Aside 💀" type="tip" %} + regular Markdown markup + <p id="p5">nested {% mark color="hotpink" %}inline<span id="inception-span"> mark</span>{% /mark %} content</p> + {% /aside %} + </div> +</section> diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/nested-html.mdoc b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/nested-html.mdoc new file mode 100644 index 000000000..161d128bf --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/nested-html.mdoc @@ -0,0 +1,18 @@ +--- +title: Simple post +--- +<p id="p1">before <span class="inner-class" id="inner1" style="color: hotpink;">inner</span> after</p> +<p id="p2"> + before + <span class="inner-class" id="inner1" style="color: hotpink;">inner</span> + after +</p> +<div id="div-l1"> + <div id="div-l2-1"> + <p id="p3">before <span class="inner-class" id="inner1" style="color: hotpink;">inner</span> after</p> + </div> + <div id="div-l2-2"> + <p id="p4">before <span class="inner-class" id="inner1" style="color: hotpink;">inner</span> after</p> + <p id="p5">before <span class="inner-class" id="inner1" style="color: hotpink;">inner</span> after</p> + </div> +</div>
\ No newline at end of file diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/randomly-cased-html-attributes.mdoc b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/randomly-cased-html-attributes.mdoc new file mode 100644 index 000000000..18c62bd59 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/randomly-cased-html-attributes.mdoc @@ -0,0 +1,20 @@ +--- +title: Simple post +--- + +<table> + <thead> + <tr> + <th>one</th> + <th>two</th> + <th>three</th> + </tr> + </thead> + <tbody> + <tr><td id="td1" rowspan="2" colspan="3">three wide and two tall</td></tr> + <tr><td id="td2" ROWSPAN="2" COLSPAN="3">three wide and two tall</td></tr> + <tr><td id="td3" rowSpan="2" colSpan="3">three wide and two tall</td></tr> + <tr><td id="td4" RowSpan="2" ColSpan="3">three wide and two tall</td></tr> + </tr> + </tbody> +</table> diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/simple.mdoc b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/simple.mdoc new file mode 100644 index 000000000..eaea6646a --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/simple.mdoc @@ -0,0 +1,11 @@ +--- +title: Simple post +--- + +## Simple <span class="inside-h2" style="color: fuscia">post</span> header + +This is a simple Markdoc <span class="post-class" style="color: hotpink;">post</span>. + +<p>This is a paragraph!</p> + +<p>This is a <span class="inside-p">span</span> inside a paragraph!</p> diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/pages/[slug].astro b/packages/integrations/markdoc/test/fixtures/render-html/src/pages/[slug].astro new file mode 100644 index 000000000..1f60f6589 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/pages/[slug].astro @@ -0,0 +1,29 @@ +--- +import { getEntryBySlug, getCollection } from "astro:content"; + +const { slug } = Astro.params; + +const post = await getEntryBySlug('blog', slug); +const { Content } = await post.render(); + +export async function getStaticPaths() { + const blogEntries = await getCollection('blog'); + return blogEntries.map(entry => ({ + params: { slug: entry.slug }, props: { entry }, + })); +} + +--- + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Content</title> +</head> +<body> + <Content /> +</body> +</html> diff --git a/packages/integrations/markdoc/test/render-html.test.js b/packages/integrations/markdoc/test/render-html.test.js new file mode 100644 index 000000000..8780734b6 --- /dev/null +++ b/packages/integrations/markdoc/test/render-html.test.js @@ -0,0 +1,293 @@ +import { parseHTML } from 'linkedom'; +import { expect } from 'chai'; +import { loadFixture } from '../../../astro/test/test-utils.js'; + +async function getFixture(name) { + return await loadFixture({ + root: new URL(`./fixtures/${name}/`, import.meta.url), + }); +} + +describe('Markdoc - render html', () => { + + let fixture; + + before(async () => { + fixture = await getFixture('render-html'); + }); + + describe('dev', () => { + + let devServer; + + before(async () => { + devServer = await fixture.startDevServer(); + }); + + after(async () => { + await devServer.stop(); + }); + + it('renders content - simple', async () => { + const res = await fixture.fetch('/simple'); + const html = await res.text(); + + renderSimpleChecks(html); + }); + + it('renders content - nested-html', async () => { + const res = await fixture.fetch('/nested-html'); + const html = await res.text(); + + renderNestedHTMLChecks(html); + }); + + it('renders content - components interleaved with html', async () => { + const res = await fixture.fetch('/components'); + const html = await res.text(); + + renderComponentsHTMLChecks(html); + }); + + it('renders content - randomly cased html attributes', async () => { + const res = await fixture.fetch('/randomly-cased-html-attributes'); + const html = await res.text(); + + renderRandomlyCasedHTMLAttributesChecks(html); + }); + + }); + + describe('build', () => { + + before(async () => { + await fixture.build(); + }); + + + it('renders content - simple', async () => { + const html = await fixture.readFile('/simple/index.html'); + + renderSimpleChecks(html); + }); + + it('renders content - nested-html', async () => { + const html = await fixture.readFile('/nested-html/index.html'); + + renderNestedHTMLChecks(html); + }); + + it('renders content - components interleaved with html', async () => { + const html = await fixture.readFile('/components/index.html'); + + renderComponentsHTMLChecks(html); + }); + + it('renders content - randomly cased html attributes', async () => { + const html = await fixture.readFile('/randomly-cased-html-attributes/index.html'); + + renderRandomlyCasedHTMLAttributesChecks(html); + }); + + }); +}); + +/** @param {string} html */ +function renderSimpleChecks(html) { + const { document } = parseHTML(html); + + const h2 = document.querySelector('h2'); + expect(h2.textContent).to.equal('Simple post header'); + + const spanInsideH2 = document.querySelector('h2 > span'); + expect(spanInsideH2.textContent).to.equal('post'); + expect(spanInsideH2.className).to.equal('inside-h2'); + expect(spanInsideH2.style.color).to.equal('fuscia'); + + const p1 = document.querySelector('article > p:nth-of-type(1)'); + expect(p1.children.length).to.equal(1); + expect(p1.textContent).to.equal('This is a simple Markdoc post.'); + + const p2 = document.querySelector('article > p:nth-of-type(2)'); + expect(p2.children.length).to.equal(0); + expect(p2.textContent).to.equal('This is a paragraph!'); + + const p3 = document.querySelector('article > p:nth-of-type(3)'); + expect(p3.children.length).to.equal(1); + expect(p3.textContent).to.equal('This is a span inside a paragraph!'); + +} + +/** @param {string} html */ +function renderNestedHTMLChecks(html) { + const { document } = parseHTML(html); + + const p1 = document.querySelector('p:nth-of-type(1)'); + expect(p1.id).to.equal('p1'); + expect(p1.textContent).to.equal('before inner after'); + expect(p1.children.length).to.equal(1); + + const p1Span1 = p1.querySelector('span'); + expect(p1Span1.textContent).to.equal('inner'); + expect(p1Span1.id).to.equal('inner1'); + expect(p1Span1.className).to.equal('inner-class'); + expect(p1Span1.style.color).to.equal('hotpink'); + + const p2 = document.querySelector('p:nth-of-type(2)'); + expect(p2.id).to.equal('p2'); + expect(p2.textContent).to.equal('\n before\n inner\n after\n'); + expect(p2.children.length).to.equal(1); + + const divL1 = document.querySelector('div:nth-of-type(1)'); + expect(divL1.id).to.equal('div-l1'); + expect(divL1.children.length).to.equal(2); + + const divL2_1 = divL1.querySelector('div:nth-of-type(1)'); + expect(divL2_1.id).to.equal('div-l2-1'); + expect(divL2_1.children.length).to.equal(1); + + const p3 = divL2_1.querySelector('p:nth-of-type(1)'); + expect(p3.id).to.equal('p3'); + expect(p3.textContent).to.equal('before inner after'); + expect(p3.children.length).to.equal(1); + + const divL2_2 = divL1.querySelector('div:nth-of-type(2)'); + expect(divL2_2.id).to.equal('div-l2-2'); + expect(divL2_2.children.length).to.equal(2); + + const p4 = divL2_2.querySelector('p:nth-of-type(1)'); + expect(p4.id).to.equal('p4'); + expect(p4.textContent).to.equal('before inner after'); + expect(p4.children.length).to.equal(1); + + const p5 = divL2_2.querySelector('p:nth-of-type(2)'); + expect(p5.id).to.equal('p5'); + expect(p5.textContent).to.equal('before inner after'); + expect(p5.children.length).to.equal(1); + +} + +/** + * + * @param {string} html */ +function renderRandomlyCasedHTMLAttributesChecks(html) { + const { document } = parseHTML(html); + + const td1 = document.querySelector('#td1'); + const td2 = document.querySelector('#td1'); + const td3 = document.querySelector('#td1'); + const td4 = document.querySelector('#td1'); + + // all four <td>'s which had randomly cased variants of colspan/rowspan should all be rendered lowercased at this point + + expect(td1.getAttribute("colspan")).to.equal("3"); + expect(td1.getAttribute("rowspan")).to.equal("2"); + + expect(td2.getAttribute("colspan")).to.equal("3"); + expect(td2.getAttribute("rowspan")).to.equal("2"); + + expect(td3.getAttribute("colspan")).to.equal("3"); + expect(td3.getAttribute("rowspan")).to.equal("2"); + + expect(td4.getAttribute("colspan")).to.equal("3"); + expect(td4.getAttribute("rowspan")).to.equal("2"); +} + +/** + * Asserts that the rendered HTML tags with interleaved Markdoc tags (both block and inline) rendered in the expected nested graph of elemements + * + * @param {string} html */ +function renderComponentsHTMLChecks(html) { + const { document } = parseHTML(html); + + const naturalP1 = document.querySelector('article > p:nth-of-type(1)'); + expect(naturalP1.textContent).to.equal('This is a inline mark in regular Markdown markup.'); + expect(naturalP1.children.length).to.equal(1); + + const p1 = document.querySelector('article > p:nth-of-type(2)'); + expect(p1.id).to.equal('p1'); + expect(p1.textContent).to.equal('This is a inline mark under some HTML'); + expect(p1.children.length).to.equal(1); + assertInlineMark(p1.children[0]); + + const div1p1 = document.querySelector('article > #div1 > p:nth-of-type(1)'); + expect(div1p1.id).to.equal('div1-p1'); + expect(div1p1.textContent).to.equal('This is a inline mark under some HTML'); + expect(div1p1.children.length).to.equal(1); + assertInlineMark(div1p1.children[0]); + + const div1p2 = document.querySelector('article > #div1 > p:nth-of-type(2)'); + expect(div1p2.id).to.equal('div1-p2'); + expect(div1p2.textContent).to.equal('This is a inline mark under some HTML'); + expect(div1p2.children.length).to.equal(1); + + const div1p2span1 = div1p2.querySelector('span'); + expect(div1p2span1.id).to.equal('div1-p2-span1'); + expect(div1p2span1.textContent).to.equal('inline mark'); + expect(div1p2span1.children.length).to.equal(1); + assertInlineMark(div1p2span1.children[0]); + + const aside1 = document.querySelector('article > aside:nth-of-type(1)'); + const aside1Title = aside1.querySelector('p.title'); + expect(aside1Title.textContent.trim()).to.equal('Aside One'); + const aside1Section = aside1.querySelector('section'); + const aside1SectionP1 = aside1Section.querySelector('p:nth-of-type(1)'); + expect(aside1SectionP1.textContent).to.equal('I\'m a Markdown paragraph inside an top-level aside tag'); + const aside1H2_1 = aside1Section.querySelector('h2:nth-of-type(1)'); + expect(aside1H2_1.id).to.equal('im-an-h2-via-markdown-markup'); // automatic slug + expect(aside1H2_1.textContent).to.equal('I\'m an H2 via Markdown markup'); + const aside1H2_2 = aside1Section.querySelector('h2:nth-of-type(2)'); + expect(aside1H2_2.id).to.equal('h-two'); + expect(aside1H2_2.textContent).to.equal('I\'m an H2 via HTML markup'); + const aside1SectionP2 = aside1Section.querySelector('p:nth-of-type(2)'); + expect(aside1SectionP2.textContent).to.equal('Markdown bold vs HTML bold'); + expect(aside1SectionP2.children.length).to.equal(2); + const aside1SectionP2Strong1 = aside1SectionP2.querySelector('strong:nth-of-type(1)'); + expect(aside1SectionP2Strong1.textContent).to.equal('Markdown bold'); + const aside1SectionP2Strong2 = aside1SectionP2.querySelector('strong:nth-of-type(2)'); + expect(aside1SectionP2Strong2.textContent).to.equal('HTML bold'); + + const article = document.querySelector('article'); + expect(article.textContent).to.contain('RENDERED'); + expect(article.textContent).to.not.contain('NOT RENDERED'); + + 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'); + expect(section1Aside1Title.textContent.trim()).to.equal('Nested un-indented Aside'); + const section1Aside1Section = section1Aside1.querySelector('section'); + const section1Aside1SectionP1 = section1Aside1Section.querySelector('p:nth-of-type(1)'); + expect(section1Aside1SectionP1.textContent).to.equal('regular Markdown markup'); + const section1Aside1SectionP4 = section1Aside1Section.querySelector('p:nth-of-type(2)'); + expect(section1Aside1SectionP4.textContent).to.equal('nested inline mark content'); + expect(section1Aside1SectionP4.children.length).to.equal(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'); + expect(section1Aside2Title.textContent.trim()).to.equal('Nested indented Aside 💀'); + const section1Aside2Section = section1Aside2.querySelector('section'); + const section1Aside2SectionP1 = section1Aside2Section.querySelector('p:nth-of-type(1)'); + expect(section1Aside2SectionP1.textContent).to.equal('regular Markdown markup'); + const section1Aside1SectionP5 = section1Aside2Section.querySelector('p:nth-of-type(2)'); + expect(section1Aside1SectionP5.id).to.equal('p5'); + expect(section1Aside1SectionP5.children.length).to.equal(1); + const section1Aside1SectionP5Span1 = section1Aside1SectionP5.children[0]; + expect(section1Aside1SectionP5Span1.textContent).to.equal('inline mark'); + expect(section1Aside1SectionP5Span1.children.length).to.equal(1); + const section1Aside1SectionP5Span1Span1 = section1Aside1SectionP5Span1.children[0]; + expect(section1Aside1SectionP5Span1Span1.textContent).to.equal(' mark'); +}; + +/** @param {HTMLElement | null | undefined} el */ + +function assertInlineMark(el) { + expect(el).to.not.be.null; + expect(el).to.not.be.undefined; + expect(el.children.length).to.equal(0); + expect(el.textContent).to.equal('inline mark'); + expect(el.className).to.equal('mark'); + expect(el.style.color).to.equal('hotpink'); +} |