diff options
Diffstat (limited to 'packages/integrations/markdoc/test')
15 files changed, 424 insertions, 0 deletions
diff --git a/packages/integrations/markdoc/test/content-collections.test.js b/packages/integrations/markdoc/test/content-collections.test.js new file mode 100644 index 000000000..5822c181a --- /dev/null +++ b/packages/integrations/markdoc/test/content-collections.test.js @@ -0,0 +1,258 @@ +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 { + ...post, + body: fixLineEndings(post.body), + }; +} + +const root = new URL('./fixtures/content-collections/', import.meta.url); + +describe('Markdoc - Content Collections', () => { + let baseFixture; + + before(async () => { + baseFixture = await loadFixture({ + root, + integrations: [markdoc()], + }); + }); + + describe('dev', () => { + let devServer; + + before(async () => { + devServer = await baseFixture.startDevServer(); + }); + + after(async () => { + await devServer.stop(); + }); + + it('loads entry', async () => { + 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 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([ + simplePostEntry, + withComponentsEntry, + withConfigEntry, + ]); + }); + + it('renders content - simple', async () => { + const res = await baseFixture.fetch('/content-simple'); + 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.'); + }); + + 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 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); + 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'); + + await server.stop(); + }); + }); + + describe('build', () => { + before(async () => { + await baseFixture.build(); + }); + + it('loads entry', async () => { + 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 baseFixture.readFile('/collection.json'); + const posts = parseDevalue(res); + expect(posts).to.not.be.null; + expect(posts.sort().map((post) => formatPost(post))).to.deep.equal([ + simplePostEntry, + withComponentsEntry, + withConfigEntry, + ]); + }); + + it('renders content - simple', async () => { + 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'); + const p = document.querySelector('p'); + expect(p.textContent).to.equal('This is a simple Markdoc post.'); + }); + + 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 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'); + 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'); + }); + }); +}); + +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', + collection: 'blog', + data: { + schemaWorks: true, + title: 'Simple post', + }, + body: '\n## Simple post\n\nThis is a simple Markdoc post.\n', +}; + +const withComponentsEntry = { + id: 'with-components.mdoc', + slug: 'with-components', + collection: 'blog', + data: { + schemaWorks: true, + title: 'Post with components', + }, + body: '\n## Post with components\n\nThis uses a custom marquee component with a shortcode:\n\n{% mq direction="right" %}\nI\'m a marquee too!\n{% /mq %}\n\nAnd a code component for code blocks:\n\n```js\nconst isRenderedWithShiki = true;\n```\n', +}; + +const withConfigEntry = { + id: 'with-config.mdoc', + slug: 'with-config', + collection: 'blog', + data: { + schemaWorks: true, + title: 'Post with config', + }, + 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 new file mode 100644 index 000000000..29d846359 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/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()], +}); diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/package.json b/packages/integrations/markdoc/test/fixtures/content-collections/package.json new file mode 100644 index 000000000..a6403f49b --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/package.json @@ -0,0 +1,13 @@ +{ + "name": "@test/markdoc-content-collections", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "@markdoc/markdoc": "^0.2.2", + "astro": "workspace:*" + }, + "devDependencies": { + "shiki": "^0.11.1" + } +} 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 new file mode 100644 index 000000000..18bf1399f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/components/Code.astro @@ -0,0 +1,12 @@ +--- +import { Code } from 'astro/components'; + +type Props = { + content: string; + language: string; +} + +const { content, language } = Astro.props as Props; +--- + +<Code lang={language} code={content} /> diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/components/CustomMarquee.astro b/packages/integrations/markdoc/test/fixtures/content-collections/src/components/CustomMarquee.astro new file mode 100644 index 000000000..3108b9973 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/components/CustomMarquee.astro @@ -0,0 +1 @@ +<marquee data-custom-marquee {...Astro.props}><slot /></marquee> diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/simple.mdoc b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/simple.mdoc new file mode 100644 index 000000000..557f7b8e5 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/simple.mdoc @@ -0,0 +1,7 @@ +--- +title: Simple post +--- + +## Simple post + +This is a simple Markdoc post. diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/with-components.mdoc b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/with-components.mdoc new file mode 100644 index 000000000..2c9bae972 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/with-components.mdoc @@ -0,0 +1,17 @@ +--- +title: Post with components +--- + +## Post with components + +This uses a custom marquee component with a shortcode: + +{% mq direction="right" %} +I'm a marquee too! +{% /mq %} + +And a code component for code blocks: + +```js +const isRenderedWithShiki = true; +``` 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 new file mode 100644 index 000000000..199eadb9c --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/with-config.mdoc @@ -0,0 +1,9 @@ +--- +title: Post with config +--- + +## Post with config + +{% 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/content/config.ts b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/config.ts new file mode 100644 index 000000000..3b411201a --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/config.ts @@ -0,0 +1,12 @@ +import { defineCollection, z } from 'astro:content'; + +const blog = defineCollection({ + schema: z.object({ + title: z.string(), + }).transform(data => ({ + ...data, + schemaWorks: true, + })) +}); + +export const collections = { blog }; diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/collection.json.js b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/collection.json.js new file mode 100644 index 000000000..98ae36a58 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/collection.json.js @@ -0,0 +1,10 @@ +import { getCollection } from 'astro:content'; +import { stringify } from 'devalue'; +import { stripAllRenderFn } from '../../utils.js'; + +export async function get() { + const posts = await getCollection('blog'); + return { + body: stringify(stripAllRenderFn(posts)) + }; +} diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/content-simple.astro b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/content-simple.astro new file mode 100644 index 000000000..effbbee1c --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/content-simple.astro @@ -0,0 +1,18 @@ +--- +import { getEntryBySlug } from "astro:content"; +const post = await getEntryBySlug('blog', 'simple'); +const { Content } = await post.render(); +--- + +<!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 - Simple</title> +</head> +<body> + <Content /> +</body> +</html> 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 new file mode 100644 index 000000000..dfb9b1de5 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/content-with-components.astro @@ -0,0 +1,23 @@ +--- +import { getEntryBySlug } from "astro:content"; +import Code from '../components/Code.astro'; +import CustomMarquee from '../components/CustomMarquee.astro'; + +const post = await getEntryBySlug('blog', 'with-components'); +const { Content } = await post.render(); +--- + +<!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 - with components</title> +</head> +<body> + <Content + components={{ CustomMarquee, Code }} + /> +</body> +</html> diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/content-with-config.astro b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/content-with-config.astro new file mode 100644 index 000000000..f37217a62 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/content-with-config.astro @@ -0,0 +1,19 @@ +--- +import { getEntryBySlug } from "astro:content"; + +const post = await getEntryBySlug('blog', 'with-config'); +const { Content } = await post.render(); +--- + +<!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 - with config</title> +</head> +<body> + <Content /> +</body> +</html> diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/entry.json.js b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/entry.json.js new file mode 100644 index 000000000..842291826 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/entry.json.js @@ -0,0 +1,10 @@ +import { getEntryBySlug } from 'astro:content'; +import { stringify } from 'devalue'; +import { stripRenderFn } from '../../utils.js'; + +export async function get() { + const post = await getEntryBySlug('blog', 'simple'); + return { + body: stringify(stripRenderFn(post)), + }; +} diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/utils.js b/packages/integrations/markdoc/test/fixtures/content-collections/utils.js new file mode 100644 index 000000000..3a6244327 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/utils.js @@ -0,0 +1,8 @@ +export function stripRenderFn(entryWithRender) { + const { render, ...entry } = entryWithRender; + return entry; +} + +export function stripAllRenderFn(collection = []) { + return collection.map(stripRenderFn); +} |