204 lines
4.6 KiB
TypeScript
204 lines
4.6 KiB
TypeScript
import MarkdownIt from "markdown-it";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
import { chart } from "../../src/node/markdown-it/chart.js";
|
|
|
|
describe("chart", () => {
|
|
const markdownIt = MarkdownIt({ linkify: true }).use(chart);
|
|
|
|
it("Should resolve chart info with json block", () => {
|
|
const result = markdownIt.render(
|
|
`
|
|
::: chart A bar chart
|
|
|
|
\`\`\`json
|
|
{
|
|
"type": "bar",
|
|
"data": {
|
|
"labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
|
"datasets": [
|
|
{
|
|
"label": "# of Votes",
|
|
"data": [12, 19, 3, 5, 2, 3],
|
|
"backgroundColor": [
|
|
"rgba(255, 99, 132, 0.2)",
|
|
"rgba(54, 162, 235, 0.2)",
|
|
"rgba(255, 206, 86, 0.2)",
|
|
"rgba(75, 192, 192, 0.2)",
|
|
"rgba(153, 102, 255, 0.2)",
|
|
"rgba(255, 159, 64, 0.2)"
|
|
],
|
|
"borderColor": [
|
|
"rgba(255, 99, 132, 1)",
|
|
"rgba(54, 162, 235, 1)",
|
|
"rgba(255, 206, 86, 1)",
|
|
"rgba(75, 192, 192, 1)",
|
|
"rgba(153, 102, 255, 1)",
|
|
"rgba(255, 159, 64, 1)"
|
|
],
|
|
"borderWidth": 1
|
|
}
|
|
]
|
|
},
|
|
"options": {
|
|
"scales": {
|
|
"y": {
|
|
"beginAtZero": true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
\`\`\`
|
|
|
|
:::
|
|
`,
|
|
{},
|
|
);
|
|
|
|
expect(result).toMatch(/<ChartJS.*><\/ChartJS>/);
|
|
expect(result).toContain(`title="${encodeURIComponent("A bar chart")}"`);
|
|
expect(result).toContain('type="json"');
|
|
expect(result).toMatchSnapshot();
|
|
});
|
|
|
|
it("Should resolve chart info with js block", () => {
|
|
const result = markdownIt.render(
|
|
`
|
|
::: chart A bar chart
|
|
|
|
\`\`\`js
|
|
const config = {
|
|
type: "bar",
|
|
data: {
|
|
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
|
datasets: [
|
|
{
|
|
label: "# of Votes",
|
|
data: [12, 19, 3, 5, 2, 3],
|
|
backgroundColor: [
|
|
"rgba(255, 99, 132, 0.2)",
|
|
"rgba(54, 162, 235, 0.2)",
|
|
"rgba(255, 206, 86, 0.2)",
|
|
"rgba(75, 192, 192, 0.2)",
|
|
"rgba(153, 102, 255, 0.2)",
|
|
"rgba(255, 159, 64, 0.2)",
|
|
],
|
|
borderColor: [
|
|
"rgba(255, 99, 132, 1)",
|
|
"rgba(54, 162, 235, 1)",
|
|
"rgba(255, 206, 86, 1)",
|
|
"rgba(75, 192, 192, 1)",
|
|
"rgba(153, 102, 255, 1)",
|
|
"rgba(255, 159, 64, 1)",
|
|
],
|
|
borderWidth: 1,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
\`\`\`
|
|
|
|
:::
|
|
`,
|
|
{},
|
|
);
|
|
|
|
expect(result).toMatch(/<ChartJS.*><\/ChartJS>/);
|
|
expect(result).toContain(`title="${encodeURIComponent("A bar chart")}"`);
|
|
expect(result).toContain('type="js"');
|
|
expect(result).toMatchSnapshot();
|
|
});
|
|
|
|
it("Should resolve chart info with javascript block", () => {
|
|
const result = markdownIt.render(
|
|
`
|
|
::: chart A bar chart
|
|
|
|
\`\`\`javascript
|
|
const config = {
|
|
type: "bar",
|
|
data: {
|
|
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
|
datasets: [
|
|
{
|
|
label: "# of Votes",
|
|
data: [12, 19, 3, 5, 2, 3],
|
|
backgroundColor: [
|
|
"rgba(255, 99, 132, 0.2)",
|
|
"rgba(54, 162, 235, 0.2)",
|
|
"rgba(255, 206, 86, 0.2)",
|
|
"rgba(75, 192, 192, 0.2)",
|
|
"rgba(153, 102, 255, 0.2)",
|
|
"rgba(255, 159, 64, 0.2)",
|
|
],
|
|
borderColor: [
|
|
"rgba(255, 99, 132, 1)",
|
|
"rgba(54, 162, 235, 1)",
|
|
"rgba(255, 206, 86, 1)",
|
|
"rgba(75, 192, 192, 1)",
|
|
"rgba(153, 102, 255, 1)",
|
|
"rgba(255, 159, 64, 1)",
|
|
],
|
|
borderWidth: 1,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
\`\`\`
|
|
|
|
:::
|
|
`,
|
|
{},
|
|
);
|
|
|
|
expect(result).toMatch(/<ChartJS.*><\/ChartJS>/);
|
|
expect(result).toContain(`title="${encodeURIComponent("A bar chart")}"`);
|
|
expect(result).toContain('type="js"');
|
|
expect(result).toMatchSnapshot();
|
|
});
|
|
|
|
it("Should resolve chart with empty title and body", () => {
|
|
const result = markdownIt.render(
|
|
`
|
|
::: chart
|
|
|
|
:::
|
|
`,
|
|
{},
|
|
);
|
|
|
|
expect(result).toMatch(/<ChartJS.*><\/ChartJS>/);
|
|
expect(result).not.toContain('title="');
|
|
expect(result).toContain('type=""');
|
|
expect(result).toMatchSnapshot();
|
|
});
|
|
|
|
it("Should not break markdown fence", () => {
|
|
const result = markdownIt.render(
|
|
`
|
|
\`\`\`js
|
|
const a = 1;
|
|
\`\`\`
|
|
`,
|
|
{},
|
|
);
|
|
|
|
expect(result).toMatch(/<pre.*>[\s\S]*<\/pre>/);
|
|
expect(result).toMatchSnapshot();
|
|
});
|
|
});
|