markdown/test/compileReact.test.js

const chai = require("chai");
const { expect } = chai;
const CompileReact = require("../lib/compileReact");
const ReactDOM = require("react-dom");
const { act } = require("react-dom/test-utils");
const { inspect } = require("util");
const {
	BOLD,
	TEXT,
	ITALICS,
	STRIKETHROUGH,
	UNDERLINE,
	URL,
	PARAGRAPH,
} = require("../constants");

let rootContainer;

beforeEach(() => {
	rootContainer = document.createElement("div");
	document.body.appendChild(rootContainer);
});

afterEach(() => {
	document.body.removeChild(rootContainer);
	rootContainer = null;
});

const render = ast => {
	act(() => {
		ReactDOM.render(CompileReact(ast), rootContainer);
	});
};

describe("Compile AST to REACT elements", function () {
	it("Simple react elements", function () {
		const ast = [
			{
				type: "underline",
				children: ["The ", { type: "bold", children: ["Apple"] }],
			},
		];
		render(ast);
		const wrapper = rootContainer.querySelector("p");
		expect(wrapper.textContent).to.equal("The Apple");
	});

	it("Link element", function () {
		const ast = [
			{ type: "url", children: ["The Feathers"], url: "feathers.studio" },
		];
		render(ast);
		const anchor = rootContainer.getElementsByTagName("a");

		expect(anchor[0].textContent).to.equal("The Feathers");
		expect(anchor[0].href).to.equal("feathers.studio");
		expect(anchor[0].classList.contains(URL)).to.be.true;
	});

	it("Nested ast to react elements", function () {
		const ast = [
			{
				type: "bold",
				children: [
					"Bold",
					{
						type: "italics",
						children: [
							"Italics",
							{
								type: "strikethrough",
								children: [
									"Strikethrough",
									{ type: "underline", children: ["Underline"] },
									"Strikethrough",
								],
							},
							"Italics",
						],
					},
					"Bold",
				],
			},
		];
		render(ast);

		const wrapper = rootContainer.getElementsByTagName("p")[0];
		const level_1 = wrapper.firstElementChild;
		const level_2 = level_1.firstElementChild;
		const level_3 = level_2.firstElementChild;
		const level_4 = level_3.firstElementChild;

		expect(level_1.firstChild.textContent).to.equal("Bold");
		expect(level_2.firstChild.textContent).to.equal("Italics");
		expect(level_3.firstChild.textContent).to.equal("Strikethrough");
		expect(level_4.firstChild.textContent).to.equal("Underline");

		expect(wrapper.classList.contains(PARAGRAPH)).to.be.true;
		expect(level_1.classList.contains(BOLD)).to.be.true;
		expect(level_2.classList.contains(ITALICS)).to.be.true;
		expect(level_3.classList.contains(STRIKETHROUGH)).to.be.true;
		expect(level_4.classList.contains(UNDERLINE)).to.be.true;
	});

	it("Formatted Link", function () {
		const ast = [
			{
				type: "url",
				children: [
					{
						type: "bold",
						children: ["The ", { type: "underline", children: ["Feathers"] }],
					},
				],
				url: "feathers.studio",
			},
		];
		const expectedHTMLOutput =
			'<p class="paragraph"><a href="feathers.studio" class="url"><span class="bold">The <span class="underline">Feathers</span></span></a></p>';
		render(ast);
		expect(rootContainer.innerHTML).to.equal(expectedHTMLOutput);
	});
});