You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

124 lines
3.1 KiB

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);
});
});