|
| 1 | +const unified = require("unified") |
| 2 | +const remark = require("remark-parse") |
| 3 | +const remark2rehype = require("remark-rehype") |
| 4 | +const stringify = require("rehype-stringify") |
| 5 | +const rehypeFigure = require("./index") |
| 6 | +const assert = require("assert") |
| 7 | +const vfile = require("to-vfile") |
| 8 | + |
| 9 | +function compile(file, opt) { |
| 10 | + return unified() |
| 11 | + .use(remark) |
| 12 | + .use(remark2rehype) |
| 13 | + .use(rehypeFigure, opt) |
| 14 | + .use(stringify) |
| 15 | + .processSync(vfile.readSync("./__example__/" + file)) |
| 16 | + .toString() |
| 17 | +} |
| 18 | + |
| 19 | +describe("Parse markdown to HTML", () => { |
| 20 | + it("two or more images consecutively should be wrapped with 'div'.", () => { |
| 21 | + const want = `<div class="rehype-figure-container"><figure class="rehype-figure"><img src="https://img.id/dog.png" alt="This is a caption and image alt property"><figcaption>This is a caption and image alt property</figcaption></figure><figure class="rehype-figure"><img src="https://img.id/cat.png" alt="This thow images will be children of 'rehype-container'"><figcaption>This thow images will be children of 'rehype-container'</figcaption></figure></div>` |
| 22 | + const got = compile("1.md") |
| 23 | + assert.equal(want, got) |
| 24 | + }) |
| 25 | + |
| 26 | + it("Should be unwrapped with 'div'.", () => { |
| 27 | + const want = `<figure class="rehype-figure"><img src="https://img.id/dog.png" alt="This is a caption and image alt property"><figcaption>This is a caption and image alt property</figcaption></figure>\n<figure class="rehype-figure"><img src="https://img.id/cat.png" alt="This thow images will be children of 'rehype-container'"><figcaption>This thow images will be children of 'rehype-container'</figcaption></figure>` |
| 28 | + const got = compile("2.md") |
| 29 | + assert.equal(want, got) |
| 30 | + }) |
| 31 | + |
| 32 | + it("Custom className: Wrapped", () => { |
| 33 | + const got = compile("1.md", { className: "my-className" }) |
| 34 | + const hasClassName = got.match(/class="my-className"/) !== null |
| 35 | + const hasContainer = got.match(/class="my-className-container"/) !== null |
| 36 | + assert.ok(hasClassName && hasContainer) |
| 37 | + }) |
| 38 | + |
| 39 | + it("Custom className: Unwrapped", () => { |
| 40 | + const got = compile("2.md", { className: "my-className" }) |
| 41 | + const hasClassName = got.match(/class="my-className"/) !== null |
| 42 | + assert.ok(hasClassName) |
| 43 | + }) |
| 44 | + |
| 45 | + it("No caption", () => { |
| 46 | + const got = compile("4.md") |
| 47 | + assert.ok(got.match(/<figcaption>/) === null) |
| 48 | + }) |
| 49 | + |
| 50 | + it("Example", () => { |
| 51 | + const got = compile("5.md") |
| 52 | + const want = `<h1>Images</h1>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>\n<div class="rehype-figure-container"><figure class="rehype-figure"><img src="https://img.id/dog.png" alt="This is a caption and image alt property"><figcaption>This is a caption and image alt property</figcaption></figure><figure class="rehype-figure"><img src="https://img.id/cat.png" alt="This thow images will be children of 'rehype-container'"><figcaption>This thow images will be children of 'rehype-container'</figcaption></figure></div>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>\n<figure class="rehype-figure"><img src="https://img.id/cat.png" alt="This thow images will be children of 'rehype-container'"><figcaption>This thow images will be children of 'rehype-container'</figcaption></figure>` |
| 53 | + |
| 54 | + assert.equal(got, want) |
| 55 | + }) |
| 56 | +}) |
0 commit comments