From 9bb1c29e98a649c2a5534c0fc1ea5e003b3bf95d Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Thu, 2 Mar 2023 13:53:55 -0500 Subject: [PATCH] test: update Markdoc node config test --- .../markdoc/test/content-collections.test.js | 113 +++++++++++++++--- .../content-collections/astro.config.mjs | 19 +-- .../src/components/Code.astro | 8 +- .../src/content/blog/with-config.mdoc | 11 +- .../src/pages/content-with-components.astro | 5 +- 5 files changed, 104 insertions(+), 52 deletions(-) diff --git a/packages/integrations/markdoc/test/content-collections.test.js b/packages/integrations/markdoc/test/content-collections.test.js index 1eebca32e..5822c181a 100644 --- a/packages/integrations/markdoc/test/content-collections.test.js +++ b/packages/integrations/markdoc/test/content-collections.test.js @@ -2,6 +2,7 @@ import { parseHTML } from 'linkedom'; import { parse as parseDevalue } from 'devalue'; import { expect } from 'chai'; import { loadFixture, fixLineEndings } from '../../../astro/test/test-utils.js'; +import markdoc from '../dist/index.js'; function formatPost(post) { return { @@ -10,12 +11,15 @@ function formatPost(post) { }; } +const root = new URL('./fixtures/content-collections/', import.meta.url); + describe('Markdoc - Content Collections', () => { - let fixture; + let baseFixture; before(async () => { - fixture = await loadFixture({ - root: new URL('./fixtures/content-collections/', import.meta.url), + baseFixture = await loadFixture({ + root, + integrations: [markdoc()], }); }); @@ -23,7 +27,7 @@ describe('Markdoc - Content Collections', () => { let devServer; before(async () => { - devServer = await fixture.startDevServer(); + devServer = await baseFixture.startDevServer(); }); after(async () => { @@ -31,13 +35,13 @@ describe('Markdoc - Content Collections', () => { }); it('loads entry', async () => { - const res = await fixture.fetch('/entry.json'); + const res = await baseFixture.fetch('/entry.json'); const post = parseDevalue(await res.text()); expect(formatPost(post)).to.deep.equal(simplePostEntry); }); it('loads collection', async () => { - const res = await fixture.fetch('/collection.json'); + const res = await baseFixture.fetch('/collection.json'); const posts = parseDevalue(await res.text()); expect(posts).to.not.be.null; expect(posts.sort().map((post) => formatPost(post))).to.deep.equal([ @@ -48,7 +52,7 @@ describe('Markdoc - Content Collections', () => { }); it('renders content - simple', async () => { - const res = await fixture.fetch('/content-simple'); + const res = await baseFixture.fetch('/content-simple'); const html = await res.text(); const { document } = parseHTML(html); const h2 = document.querySelector('h2'); @@ -58,17 +62,27 @@ describe('Markdoc - Content Collections', () => { }); it('renders content - with config', async () => { + const fixture = await getFixtureWithConfig(); + const server = await fixture.startDevServer(); + const res = await fixture.fetch('/content-with-config'); const html = await res.text(); const { document } = parseHTML(html); const h2 = document.querySelector('h2'); expect(h2.textContent).to.equal('Post with config'); - const marquee = document.querySelector('marquee'); - expect(marquee).to.not.be.null; - expect(marquee.textContent).to.equal('Im a marquee!'); + const textContent = html; + + expect(textContent).to.not.include('Hello'); + expect(textContent).to.include('Hola'); + expect(textContent).to.include(`Konnichiwa`); + + await server.stop(); }); it('renders content - with components', async () => { + const fixture = await getFixtureWithComponents(); + const server = await fixture.startDevServer(); + const res = await fixture.fetch('/content-with-components'); const html = await res.text(); const { document } = parseHTML(html); @@ -84,22 +98,24 @@ describe('Markdoc - Content Collections', () => { const pre = document.querySelector('pre'); expect(pre).to.not.be.null; expect(pre.className).to.equal('astro-code'); + + await server.stop(); }); }); describe('build', () => { before(async () => { - await fixture.build(); + await baseFixture.build(); }); it('loads entry', async () => { - const res = await fixture.readFile('/entry.json'); + const res = await baseFixture.readFile('/entry.json'); const post = parseDevalue(res); expect(formatPost(post)).to.deep.equal(simplePostEntry); }); it('loads collection', async () => { - const res = await fixture.readFile('/collection.json'); + const res = await baseFixture.readFile('/collection.json'); const posts = parseDevalue(res); expect(posts).to.not.be.null; expect(posts.sort().map((post) => formatPost(post))).to.deep.equal([ @@ -110,7 +126,7 @@ describe('Markdoc - Content Collections', () => { }); it('renders content - simple', async () => { - const html = await fixture.readFile('/content-simple/index.html'); + const html = await baseFixture.readFile('/content-simple/index.html'); const { document } = parseHTML(html); const h2 = document.querySelector('h2'); expect(h2.textContent).to.equal('Simple post'); @@ -119,16 +135,24 @@ describe('Markdoc - Content Collections', () => { }); it('renders content - with config', async () => { + const fixture = await getFixtureWithConfig(); + await fixture.build(); + const html = await fixture.readFile('/content-with-config/index.html'); const { document } = parseHTML(html); const h2 = document.querySelector('h2'); expect(h2.textContent).to.equal('Post with config'); - const marquee = document.querySelector('marquee'); - expect(marquee).to.not.be.null; - expect(marquee.textContent).to.equal('Im a marquee!'); + const textContent = html; + + expect(textContent).to.not.include('Hello'); + expect(textContent).to.include('Hola'); + expect(textContent).to.include(`Konnichiwa`); }); it('renders content - with components', async () => { + const fixture = await getFixtureWithComponents(); + await fixture.build(); + const html = await fixture.readFile('/content-with-components/index.html'); const { document } = parseHTML(html); const h2 = document.querySelector('h2'); @@ -147,6 +171,59 @@ describe('Markdoc - Content Collections', () => { }); }); +function getFixtureWithConfig() { + return loadFixture({ + root, + integrations: [ + markdoc({ + variables: { + countries: ['ES', 'JP'], + }, + functions: { + includes: { + transform(parameters) { + const [array, value] = Object.values(parameters); + return Array.isArray(array) ? array.includes(value) : false; + }, + }, + }, + }), + ], + }); +} + +function getFixtureWithComponents() { + return loadFixture({ + root, + integrations: [ + markdoc({ + nodes: { + fence: { + render: 'Code', + attributes: { + language: { type: String }, + content: { type: String }, + }, + }, + }, + tags: { + mq: { + render: 'CustomMarquee', + attributes: { + direction: { + type: String, + default: 'left', + matches: ['left', 'right', 'up', 'down'], + errorLevel: 'critical', + }, + }, + }, + }, + }), + ], + }); +} + const simplePostEntry = { id: 'simple.mdoc', slug: 'simple', @@ -177,5 +254,5 @@ const withConfigEntry = { schemaWorks: true, title: 'Post with config', }, - body: '\n## Post with config\n\nThis uses a shortcode to render a marquee element,\nwith a variable to show and hide:\n\n{% if $showMarquee %}\n{% mq direction="down" %}\nIm a marquee!\n{% /mq %}\n{% /if %}\n', + body: '\n## Post with config\n\n{% if includes($countries, "EN") %} Hello {% /if %}\n{% if includes($countries, "ES") %} Hola {% /if %}\n{% if includes($countries, "JP") %} Konnichiwa {% /if %}\n', }; diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/content-collections/astro.config.mjs index 5e75827e9..29d846359 100644 --- a/packages/integrations/markdoc/test/fixtures/content-collections/astro.config.mjs +++ b/packages/integrations/markdoc/test/fixtures/content-collections/astro.config.mjs @@ -3,22 +3,5 @@ import markdoc from '@astrojs/markdoc'; // https://astro.build/config export default defineConfig({ - integrations: [markdoc({ - variables: { - showMarquee: true, - }, - tags: { - mq: { - render: 'marquee', - attributes: { - direction: { - type: String, - default: 'left', - matches: ['left', 'right', 'up', 'down'], - errorLevel: 'critical', - }, - }, - }, - } - })], + integrations: [markdoc()], }); diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/components/Code.astro b/packages/integrations/markdoc/test/fixtures/content-collections/src/components/Code.astro index 6cd2f0222..18bf1399f 100644 --- a/packages/integrations/markdoc/test/fixtures/content-collections/src/components/Code.astro +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/components/Code.astro @@ -2,11 +2,11 @@ import { Code } from 'astro/components'; type Props = { - 'data-language'?: string; + content: string; + language: string; } -const { 'data-language': lang } = Astro.props as Props; -const code = await Astro.slots.render('default'); +const { content, language } = Astro.props as Props; --- - + diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/with-config.mdoc b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/with-config.mdoc index 8563378fc..199eadb9c 100644 --- a/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/with-config.mdoc +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/with-config.mdoc @@ -4,11 +4,6 @@ title: Post with config ## Post with config -This uses a shortcode to render a marquee element, -with a variable to show and hide: - -{% if $showMarquee %} -{% mq direction="down" %} -Im a marquee! -{% /mq %} -{% /if %} +{% if includes($countries, "EN") %} Hello {% /if %} +{% if includes($countries, "ES") %} Hola {% /if %} +{% if includes($countries, "JP") %} Konnichiwa {% /if %} diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/content-with-components.astro b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/content-with-components.astro index 2b4cb36d5..dfb9b1de5 100644 --- a/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/content-with-components.astro +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/content-with-components.astro @@ -17,10 +17,7 @@ const { Content } = await post.render();