364 lines
13 KiB
JavaScript
364 lines
13 KiB
JavaScript
|
/**
|
||
|
|
* @jest-environment jsdom
|
||
|
|
*/
|
||
|
|
import splitAtDelimiters from "../splitAtDelimiters";
|
||
|
|
import renderMathInElement from "../auto-render";
|
||
|
|
|
||
|
|
beforeEach(function() {
|
||
|
|
expect.extend({
|
||
|
|
toSplitInto: function(actual, result, delimiters) {
|
||
|
|
const message = {
|
||
|
|
pass: true,
|
||
|
|
message: () => "'" + actual + "' split correctly",
|
||
|
|
};
|
||
|
|
|
||
|
|
const split =
|
||
|
|
splitAtDelimiters(actual, delimiters);
|
||
|
|
|
||
|
|
if (split.length !== result.length) {
|
||
|
|
message.pass = false;
|
||
|
|
message.message = () => "Different number of splits: " +
|
||
|
|
split.length + " vs. " + result.length + " (" +
|
||
|
|
JSON.stringify(split) + " vs. " +
|
||
|
|
JSON.stringify(result) + ")";
|
||
|
|
return message;
|
||
|
|
}
|
||
|
|
|
||
|
|
for (let i = 0; i < split.length; i++) {
|
||
|
|
const real = split[i];
|
||
|
|
const correct = result[i];
|
||
|
|
|
||
|
|
let good = true;
|
||
|
|
let diff;
|
||
|
|
|
||
|
|
if (real.type !== correct.type) {
|
||
|
|
good = false;
|
||
|
|
diff = "type";
|
||
|
|
} else if (real.data !== correct.data) {
|
||
|
|
good = false;
|
||
|
|
diff = "data";
|
||
|
|
} else if (real.display !== correct.display) {
|
||
|
|
good = false;
|
||
|
|
diff = "display";
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!good) {
|
||
|
|
message.pass = false;
|
||
|
|
message.message = () => "Difference at split " +
|
||
|
|
(i + 1) + ": " + JSON.stringify(real) +
|
||
|
|
" vs. " + JSON.stringify(correct) +
|
||
|
|
" (" + diff + " differs)";
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return message;
|
||
|
|
},
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe("A delimiter splitter", function() {
|
||
|
|
it("doesn't split when there are no delimiters", function() {
|
||
|
|
expect("hello").toSplitInto(
|
||
|
|
[
|
||
|
|
{type: "text", data: "hello"},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{left: "(", right: ")", display: false},
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("doesn't create a math node with only one left delimiter", function() {
|
||
|
|
expect("hello ( world").toSplitInto(
|
||
|
|
[
|
||
|
|
{type: "text", data: "hello "},
|
||
|
|
{type: "text", data: "( world"},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{left: "(", right: ")", display: false},
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("doesn't split when there's only a right delimiter", function() {
|
||
|
|
expect("hello ) world").toSplitInto(
|
||
|
|
[
|
||
|
|
{type: "text", data: "hello ) world"},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{left: "(", right: ")", display: false},
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("splits when there are both delimiters", function() {
|
||
|
|
expect("hello ( world ) boo").toSplitInto(
|
||
|
|
[
|
||
|
|
{type: "text", data: "hello "},
|
||
|
|
{type: "math", data: " world ",
|
||
|
|
rawData: "( world )", display: false},
|
||
|
|
{type: "text", data: " boo"},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{left: "(", right: ")", display: false},
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("splits on multi-character delimiters", function() {
|
||
|
|
expect("hello [[ world ]] boo").toSplitInto(
|
||
|
|
[
|
||
|
|
{type: "text", data: "hello "},
|
||
|
|
{type: "math", data: " world ",
|
||
|
|
rawData: "[[ world ]]", display: false},
|
||
|
|
{type: "text", data: " boo"},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{left: "[[", right: "]]", display: false},
|
||
|
|
]);
|
||
|
|
expect("hello \\begin{equation} world \\end{equation} boo").toSplitInto(
|
||
|
|
[
|
||
|
|
{type: "text", data: "hello "},
|
||
|
|
{type: "math", data: "\\begin{equation} world \\end{equation}",
|
||
|
|
rawData: "\\begin{equation} world \\end{equation}",
|
||
|
|
display: false},
|
||
|
|
{type: "text", data: " boo"},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{left: "\\begin{equation}", right: "\\end{equation}",
|
||
|
|
display: false},
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("splits multiple times", function() {
|
||
|
|
expect("hello ( world ) boo ( more ) stuff").toSplitInto(
|
||
|
|
[
|
||
|
|
{type: "text", data: "hello "},
|
||
|
|
{type: "math", data: " world ",
|
||
|
|
rawData: "( world )", display: false},
|
||
|
|
{type: "text", data: " boo "},
|
||
|
|
{type: "math", data: " more ",
|
||
|
|
rawData: "( more )", display: false},
|
||
|
|
{type: "text", data: " stuff"},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{left: "(", right: ")", display: false},
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("leaves the ending when there's only a left delimiter", function() {
|
||
|
|
expect("hello ( world ) boo ( left").toSplitInto(
|
||
|
|
[
|
||
|
|
{type: "text", data: "hello "},
|
||
|
|
{type: "math", data: " world ",
|
||
|
|
rawData: "( world )", display: false},
|
||
|
|
{type: "text", data: " boo "},
|
||
|
|
{type: "text", data: "( left"},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{left: "(", right: ")", display: false},
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("doesn't split when close delimiters are in {}s", function() {
|
||
|
|
expect("hello ( world { ) } ) boo").toSplitInto(
|
||
|
|
[
|
||
|
|
{type: "text", data: "hello "},
|
||
|
|
{type: "math", data: " world { ) } ",
|
||
|
|
rawData: "( world { ) } )", display: false},
|
||
|
|
{type: "text", data: " boo"},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{left: "(", right: ")", display: false},
|
||
|
|
]);
|
||
|
|
|
||
|
|
expect("hello ( world { { } ) } ) boo").toSplitInto(
|
||
|
|
[
|
||
|
|
{type: "text", data: "hello "},
|
||
|
|
{type: "math", data: " world { { } ) } ",
|
||
|
|
rawData: "( world { { } ) } )", display: false},
|
||
|
|
{type: "text", data: " boo"},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{left: "(", right: ")", display: false},
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("correctly processes sequences of $..$", function() {
|
||
|
|
expect("$hello$$world$$boo$").toSplitInto(
|
||
|
|
[
|
||
|
|
{type: "math", data: "hello",
|
||
|
|
rawData: "$hello$", display: false},
|
||
|
|
{type: "math", data: "world",
|
||
|
|
rawData: "$world$", display: false},
|
||
|
|
{type: "math", data: "boo",
|
||
|
|
rawData: "$boo$", display: false},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{left: "$", right: "$", display: false},
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("doesn't split at escaped delimiters", function() {
|
||
|
|
expect("hello ( world \\) ) boo").toSplitInto(
|
||
|
|
[
|
||
|
|
{type: "text", data: "hello "},
|
||
|
|
{type: "math", data: " world \\) ",
|
||
|
|
rawData: "( world \\) )", display: false},
|
||
|
|
{type: "text", data: " boo"},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{left: "(", right: ")", display: false},
|
||
|
|
]);
|
||
|
|
|
||
|
|
/* TODO(emily): make this work maybe?
|
||
|
|
expect("hello \\( ( world ) boo").toSplitInto(
|
||
|
|
"(", ")",
|
||
|
|
[
|
||
|
|
{type: "text", data: "hello \\( "},
|
||
|
|
{type: "math", data: " world ",
|
||
|
|
rawData: "( world )", display: false},
|
||
|
|
{type: "text", data: " boo"},
|
||
|
|
]);
|
||
|
|
*/
|
||
|
|
});
|
||
|
|
|
||
|
|
it("splits when the right and left delimiters are the same", function() {
|
||
|
|
expect("hello $ world $ boo").toSplitInto(
|
||
|
|
[
|
||
|
|
{type: "text", data: "hello "},
|
||
|
|
{type: "math", data: " world ",
|
||
|
|
rawData: "$ world $", display: false},
|
||
|
|
{type: "text", data: " boo"},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{left: "$", right: "$", display: false},
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("ignores \\$", function() {
|
||
|
|
expect("$x = \\$5$").toSplitInto(
|
||
|
|
[
|
||
|
|
{type: "math", data: "x = \\$5",
|
||
|
|
rawData: "$x = \\$5$", display: false},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{left: "$", right: "$", display: false},
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("remembers which delimiters are display-mode", function() {
|
||
|
|
const startData = "hello ( world ) boo";
|
||
|
|
|
||
|
|
expect(splitAtDelimiters(startData,
|
||
|
|
[{left:"(", right:")", display:true}])).toEqual(
|
||
|
|
[
|
||
|
|
{type: "text", data: "hello "},
|
||
|
|
{type: "math", data: " world ",
|
||
|
|
rawData: "( world )", display: true},
|
||
|
|
{type: "text", data: " boo"},
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("handles nested delimiters irrespective of order", function() {
|
||
|
|
expect(splitAtDelimiters("$\\fbox{\\(hi\\)}$",
|
||
|
|
[
|
||
|
|
{left:"\\(", right:"\\)", display:false},
|
||
|
|
{left:"$", right:"$", display:false},
|
||
|
|
])).toEqual(
|
||
|
|
[
|
||
|
|
{type: "math", data: "\\fbox{\\(hi\\)}",
|
||
|
|
rawData: "$\\fbox{\\(hi\\)}$", display: false},
|
||
|
|
]);
|
||
|
|
expect(splitAtDelimiters("\\(\\fbox{$hi$}\\)",
|
||
|
|
[
|
||
|
|
{left:"\\(", right:"\\)", display:false},
|
||
|
|
{left:"$", right:"$", display:false},
|
||
|
|
])).toEqual(
|
||
|
|
[
|
||
|
|
{type: "math", data: "\\fbox{$hi$}",
|
||
|
|
rawData: "\\(\\fbox{$hi$}\\)", display: false},
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("handles a mix of $ and $$", function() {
|
||
|
|
expect(splitAtDelimiters("$hello$world$$boo$$",
|
||
|
|
[
|
||
|
|
{left:"$$", right:"$$", display:true},
|
||
|
|
{left:"$", right:"$", display:false},
|
||
|
|
])).toEqual(
|
||
|
|
[
|
||
|
|
{type: "math", data: "hello",
|
||
|
|
rawData: "$hello$", display: false},
|
||
|
|
{type: "text", data: "world"},
|
||
|
|
{type: "math", data: "boo",
|
||
|
|
rawData: "$$boo$$", display: true},
|
||
|
|
]);
|
||
|
|
expect(splitAtDelimiters("$hello$$world$$$boo$$",
|
||
|
|
[
|
||
|
|
{left:"$$", right:"$$", display:true},
|
||
|
|
{left:"$", right:"$", display:false},
|
||
|
|
])).toEqual(
|
||
|
|
[
|
||
|
|
{type: "math", data: "hello",
|
||
|
|
rawData: "$hello$", display: false},
|
||
|
|
{type: "math", data: "world",
|
||
|
|
rawData: "$world$", display: false},
|
||
|
|
{type: "math", data: "boo",
|
||
|
|
rawData: "$$boo$$", display: true},
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe("Pre-process callback", function() {
|
||
|
|
it("replace `-squared` with `^2 `", function() {
|
||
|
|
const el1 = document.createElement('div');
|
||
|
|
el1.textContent = 'Circle equation: $x-squared + y-squared = r-squared$.';
|
||
|
|
const el2 = document.createElement('div');
|
||
|
|
el2.textContent = 'Circle equation: $x^2 + y^2 = r^2$.';
|
||
|
|
const delimiters = [{left: "$", right: "$", display: false}];
|
||
|
|
renderMathInElement(el1, {
|
||
|
|
delimiters,
|
||
|
|
preProcess: math => math.replace(/-squared/g, '^2'),
|
||
|
|
});
|
||
|
|
renderMathInElement(el2, {delimiters});
|
||
|
|
expect(el1.innerHTML).toEqual(el2.innerHTML);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe("Parse adjacent text nodes", function() {
|
||
|
|
it("parse adjacent text nodes with math", function() {
|
||
|
|
const textNodes = ['\\[',
|
||
|
|
'x^2 + y^2 = r^2',
|
||
|
|
'\\]'];
|
||
|
|
const el = document.createElement('div');
|
||
|
|
for (let i = 0; i < textNodes.length; i++) {
|
||
|
|
const txt = document.createTextNode(textNodes[i]);
|
||
|
|
el.appendChild(txt);
|
||
|
|
}
|
||
|
|
const el2 = document.createElement('div');
|
||
|
|
const txt = document.createTextNode(textNodes.join(''));
|
||
|
|
el2.appendChild(txt);
|
||
|
|
const delimiters = [{left: "\\[", right: "\\]", display: true}];
|
||
|
|
renderMathInElement(el, {delimiters});
|
||
|
|
renderMathInElement(el2, {delimiters});
|
||
|
|
expect(el).toStrictEqual(el2);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("parse adjacent text nodes without math", function() {
|
||
|
|
const textNodes = ['Lorem ipsum dolor',
|
||
|
|
'sit amet',
|
||
|
|
'consectetur adipiscing elit'];
|
||
|
|
const el = document.createElement('div');
|
||
|
|
for (let i = 0; i < textNodes.length; i++) {
|
||
|
|
const txt = document.createTextNode(textNodes[i]);
|
||
|
|
el.appendChild(txt);
|
||
|
|
}
|
||
|
|
const el2 = document.createElement('div');
|
||
|
|
for (let i = 0; i < textNodes.length; i++) {
|
||
|
|
const txt = document.createTextNode(textNodes[i]);
|
||
|
|
el2.appendChild(txt);
|
||
|
|
}
|
||
|
|
const delimiters = [{left: "\\[", right: "\\]", display: true}];
|
||
|
|
renderMathInElement(el, {delimiters});
|
||
|
|
expect(el).toStrictEqual(el2);
|
||
|
|
});
|
||
|
|
});
|