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.
123 lines
3.1 KiB
123 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);
|
|
});
|
|
});
|
|
|