rendering.test.js — astro Source File

Source Code

import * as assert from 'node:assert/strict';
import { beforeEach, describe, it } from 'node:test';
import { isPromise } from 'node:util/types';
import * as cheerio from 'cheerio';
import {
	createComponent,
	HTMLString,
	renderComponent,
	renderTemplate,
} from '../../../dist/runtime/server/index.js';

const DEFAULT_RESULT = {
	clientDirectives: new Map(),
};

describe('rendering', () => {
	const evaluated = [];

	const Scalar = createComponent((_result, props) => {
		evaluated.push(props.id);
		return renderTemplate`<scalar id="${props.id}"></scalar>`;
	});

	beforeEach(() => {
		evaluated.length = 0;
	});

	it('components are evaluated and rendered depth-first', async () => {
		const Root = createComponent((result, props) => {
			evaluated.push(props.id);
			return renderTemplate`<root id="${props.id}">
				${renderComponent(result, '', Scalar, { id: `${props.id}/scalar_1` })}
				${renderComponent(result, '', Nested, { id: `${props.id}/nested` })}
				${renderComponent(result, '', Scalar, { id: `${props.id}/scalar_2` })}
			</root>`;
		});

		const Nested = createComponent((result, props) => {
			evaluated.push(props.id);
			return renderTemplate`<nested id="${props.id}">
				${renderComponent(result, '', Scalar, { id: `${props.id}/scalar` })}
			</nested>`;
		});

		const result = await renderToString(Root(DEFAULT_RESULT, { id: 'root' }, {}));
		const rendered = getRenderedIds(result);

		assert.deepEqual(evaluated, [
			'root',
			'root/scalar_1',
			'root/nested',
			'root/nested/scalar',
			'root/scalar_2',
		]);

		assert.deepEqual(rendered, [
			'root',
			'root/scalar_1',
			'root/nested',
			'root/nested/scalar',
// ... (257 more lines)