test: update Markdoc node config test

This commit is contained in:
bholmesdev 2023-03-02 13:53:55 -05:00
parent a628b264df
commit 9bb1c29e98
5 changed files with 104 additions and 52 deletions

View file

@ -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',
};

View file

@ -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()],
});

View file

@ -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;
---
<Code {code} {lang} />
<Code lang={language} code={content} />

View file

@ -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 %}

View file

@ -17,10 +17,7 @@ const { Content } = await post.render();
</head>
<body>
<Content
components={{
marquee: CustomMarquee,
pre: Code,
}}
components={{ CustomMarquee, Code }}
/>
</body>
</html>