mdx-get-headings.test.js — astro Source File

Source Code

import * as assert from 'node:assert/strict';
import { before, describe, it } from 'node:test';
import { rehypeHeadingIds } from '@astrojs/markdown-remark';
import mdx from '@astrojs/mdx';
import { parseHTML } from 'linkedom';
import { visit } from 'unist-util-visit';
import { loadFixture } from '../../../astro/test/test-utils.js';

describe('MDX getHeadings', () => {
	let fixture;

	before(async () => {
		fixture = await loadFixture({
			root: new URL('./fixtures/mdx-get-headings/', import.meta.url),
			integrations: [mdx()],
		});

		await fixture.build();
	});

	it('adds anchor IDs to headings', async () => {
		const html = await fixture.readFile('/test/index.html');
		const { document } = parseHTML(html);

		const h2Ids = document.querySelectorAll('h2').map((el) => el?.id);
		const h3Ids = document.querySelectorAll('h3').map((el) => el?.id);
		assert.equal(document.querySelector('h1').id, 'heading-test');
		assert.equal(h2Ids.includes('section-1'), true);
		assert.equal(h2Ids.includes('section-2'), true);
		assert.equal(h3Ids.includes('subsection-1'), true);
		assert.equal(h3Ids.includes('subsection-2'), true);
	});

	it('generates correct getHeadings() export', async () => {
		const { headingsByPage } = JSON.parse(await fixture.readFile('/pages.json'));
		// TODO: make this a snapshot test :)
		assert.equal(
			JSON.stringify(headingsByPage['./test.mdx']),
			JSON.stringify([
				{ depth: 1, slug: 'heading-test', text: 'Heading test' },
				{ depth: 2, slug: 'section-1', text: 'Section 1' },
				{ depth: 3, slug: 'subsection-1', text: 'Subsection 1' },
				{ depth: 3, slug: 'subsection-2', text: 'Subsection 2' },
				{ depth: 2, slug: 'section-2', text: 'Section 2' },
				{ depth: 2, slug: 'picture-', text: '<Picture />' },
				{ depth: 3, slug: '-sacrebleu--', text: '« Sacrebleu ! »' },
			]),
		);
	});

	it('generates correct getHeadings() export for JSX expressions', async () => {
		const { headingsByPage } = JSON.parse(await fixture.readFile('/pages.json'));
		assert.equal(
			JSON.stringify(headingsByPage['./test-with-jsx-expressions.mdx']),
			JSON.stringify([
				{
					depth: 1,
					slug: 'heading-test-with-jsx-expressions',
					text: 'Heading test with JSX expressions',
				},
// ... (144 more lines)