luciano/diff2html
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

test: Use Jest snapshots

Browse source
This commit is contained in:
Rodrigo Fernandes 2019-12-22 19:52:51 +00:00
parent e573663789
commit c3c5f60c0d
No known key found for this signature in database
GPG key ID: 67157D2E3D4258B4
7 changed files with 2928 additions and 1396 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1885
src/__tests__/diff-parser-tests.ts
View file

File diff suppressed because it is too large Load diff

1091
src/__tests__/diff2html-tests.ts
View file

File diff suppressed because it is too large Load diff

133
src/__tests__/file-list-printer-tests.ts
View file

@ -56,13 +56,13 @@ describe("FileListPrinter", () => {
]; ];
const fileHtml = render(files, hoganUtils); const fileHtml = render(files, hoganUtils);
const expected =
"my/file/name.js, my/file/name.js, my/file/name.js\n" +
"my/file/name1.js, my/file/name2.js, my/file/{name1.js → name2.js}\n" +
"dev/null, my/file/name.js, my/file/name.js\n" +
"my/file/name.js, dev/null, my/file/name.js";
expect(fileHtml).toEqual(expected); expect(fileHtml).toMatchInlineSnapshot(`
"my/file/name.js, my/file/name.js, my/file/name.js
my/file/name1.js, my/file/name2.js, my/file/{name1.js → name2.js}
dev/null, my/file/name.js, my/file/name.js
my/file/name.js, dev/null, my/file/name.js"
`);
}); });
it("should work for all kinds of files", () => { it("should work for all kinds of files", () => {
@ -111,69 +111,66 @@ describe("FileListPrinter", () => {
isDeleted: true isDeleted: true
} }
]; ];
const fileHtml = render(files, hoganUtils); const fileHtml = render(files, hoganUtils);
expect(fileHtml).toMatchInlineSnapshot(`
const expected = "<div class=\\"d2h-file-list-wrapper\\">
'<div class="d2h-file-list-wrapper">\n' + <div class=\\"d2h-file-list-header\\">
' <div class="d2h-file-list-header">\n' + <span class=\\"d2h-file-list-title\\">Files changed (4)</span>
' <span class="d2h-file-list-title">Files changed (4)</span>\n' + <a class=\\"d2h-file-switch d2h-hide\\">hide</a>
' <a class="d2h-file-switch d2h-hide">hide</a>\n' + <a class=\\"d2h-file-switch d2h-show\\">show</a>
' <a class="d2h-file-switch d2h-show">show</a>\n' + </div>
" </div>\n" + <ol class=\\"d2h-file-list\\">
' <ol class="d2h-file-list">\n' + <li class=\\"d2h-file-list-line\\">
' <li class="d2h-file-list-line">\n' + <span class=\\"d2h-file-name-wrapper\\">
' <span class="d2h-file-name-wrapper">\n' + <svg aria-hidden=\\"true\\" class=\\"d2h-icon d2h-changed\\" height=\\"16\\" title=\\"modified\\" version=\\"1.1\\"
' <svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"\n' + viewBox=\\"0 0 14 16\\" width=\\"14\\">
' viewBox="0 0 14 16" width="14">\n' + <path d=\\"M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z\\"></path>
' <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>\n' + </svg> <a href=\\"#d2h-781444\\" class=\\"d2h-file-name\\">my/file/name.js</a>
' </svg> <a href="#d2h-781444" class="d2h-file-name">my/file/name.js</a>\n' + <span class=\\"d2h-file-stats\\">
' <span class="d2h-file-stats">\n' + <span class=\\"d2h-lines-added\\">+12</span>
' <span class="d2h-lines-added">+12</span>\n' + <span class=\\"d2h-lines-deleted\\">-41</span>
' <span class="d2h-lines-deleted">-41</span>\n' + </span>
" </span>\n" + </span>
" </span>\n" + </li>
"</li>\n" + <li class=\\"d2h-file-list-line\\">
'<li class="d2h-file-list-line">\n' + <span class=\\"d2h-file-name-wrapper\\">
' <span class="d2h-file-name-wrapper">\n' + <svg aria-hidden=\\"true\\" class=\\"d2h-icon d2h-moved\\" height=\\"16\\" title=\\"renamed\\" version=\\"1.1\\"
' <svg aria-hidden="true" class="d2h-icon d2h-moved" height="16" title="renamed" version="1.1"\n' + viewBox=\\"0 0 14 16\\" width=\\"14\\">
' viewBox="0 0 14 16" width="14">\n' + <path d=\\"M6 9H3V7h3V4l5 4-5 4V9z m8-7v12c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h12c0.55 0 1 0.45 1 1z m-1 0H1v12h12V2z\\"></path>
' <path d="M6 9H3V7h3V4l5 4-5 4V9z m8-7v12c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h12c0.55 0 1 0.45 1 1z m-1 0H1v12h12V2z"></path>\n' + </svg> <a href=\\"#d2h-662683\\" class=\\"d2h-file-name\\">my/file/{name1.js → name2.js}</a>
' </svg> <a href="#d2h-662683" class="d2h-file-name">my/file/{name1.js → name2.js}</a>\n' + <span class=\\"d2h-file-stats\\">
' <span class="d2h-file-stats">\n' + <span class=\\"d2h-lines-added\\">+12</span>
' <span class="d2h-lines-added">+12</span>\n' + <span class=\\"d2h-lines-deleted\\">-41</span>
' <span class="d2h-lines-deleted">-41</span>\n' + </span>
" </span>\n" + </span>
" </span>\n" + </li>
"</li>\n" + <li class=\\"d2h-file-list-line\\">
'<li class="d2h-file-list-line">\n' + <span class=\\"d2h-file-name-wrapper\\">
' <span class="d2h-file-name-wrapper">\n' + <svg aria-hidden=\\"true\\" class=\\"d2h-icon d2h-added\\" height=\\"16\\" title=\\"added\\" version=\\"1.1\\" viewBox=\\"0 0 14 16\\"
' <svg aria-hidden="true" class="d2h-icon d2h-added" height="16" title="added" version="1.1" viewBox="0 0 14 16"\n' + width=\\"14\\">
' width="14">\n' + <path d=\\"M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM6 9H3V7h3V4h2v3h3v2H8v3H6V9z\\"></path>
' <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM6 9H3V7h3V4h2v3h3v2H8v3H6V9z"></path>\n' + </svg> <a href=\\"#d2h-781444\\" class=\\"d2h-file-name\\">my/file/name.js</a>
' </svg> <a href="#d2h-781444" class="d2h-file-name">my/file/name.js</a>\n' + <span class=\\"d2h-file-stats\\">
' <span class="d2h-file-stats">\n' + <span class=\\"d2h-lines-added\\">+12</span>
' <span class="d2h-lines-added">+12</span>\n' + <span class=\\"d2h-lines-deleted\\">-0</span>
' <span class="d2h-lines-deleted">-0</span>\n' + </span>
" </span>\n" + </span>
" </span>\n" + </li>
"</li>\n" + <li class=\\"d2h-file-list-line\\">
'<li class="d2h-file-list-line">\n' + <span class=\\"d2h-file-name-wrapper\\">
' <span class="d2h-file-name-wrapper">\n' + <svg aria-hidden=\\"true\\" class=\\"d2h-icon d2h-deleted\\" height=\\"16\\" title=\\"removed\\" version=\\"1.1\\"
' <svg aria-hidden="true" class="d2h-icon d2h-deleted" height="16" title="removed" version="1.1"\n' + viewBox=\\"0 0 14 16\\" width=\\"14\\">
' viewBox="0 0 14 16" width="14">\n' + <path d=\\"M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM11 9H3V7h8v2z\\"></path>
' <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM11 9H3V7h8v2z"></path>\n' + </svg> <a href=\\"#d2h-781444\\" class=\\"d2h-file-name\\">my/file/name.js</a>
' </svg> <a href="#d2h-781444" class="d2h-file-name">my/file/name.js</a>\n' + <span class=\\"d2h-file-stats\\">
' <span class="d2h-file-stats">\n' + <span class=\\"d2h-lines-added\\">+0</span>
' <span class="d2h-lines-added">+0</span>\n' + <span class=\\"d2h-lines-deleted\\">-41</span>
' <span class="d2h-lines-deleted">-41</span>\n' + </span>
" </span>\n" + </span>
" </span>\n" + </li>
"</li>\n" + </ol>
" </ol>\n" + </div>"
"</div>"; `);
expect(fileHtml).toEqual(expected);
}); });
}); });
}); });

35
src/__tests__/hogan-cache-tests.ts
View file

@ -3,22 +3,21 @@ import { CSSLineClass } from "../render-utils";
describe("HoganJsUtils", () => { describe("HoganJsUtils", () => {
describe("render", () => { describe("render", () => {
const emptyDiffHtml =
"<tr>\n" +
' <td class="d2h-info">\n' +
' <div class="d2h-code-line d2h-info">\n' +
" File without changes\n" +
" </div>\n" +
" </td>\n" +
"</tr>";
it("should render view", () => { it("should render view", () => {
const hoganJsUtils = new HoganJsUtils({}); const hoganJsUtils = new HoganJsUtils({});
const result = hoganJsUtils.render("generic", "empty-diff", { const result = hoganJsUtils.render("generic", "empty-diff", {
contentClass: "d2h-code-line", contentClass: "d2h-code-line",
CSSLineClass: CSSLineClass CSSLineClass: CSSLineClass
}); });
expect(result).toEqual(emptyDiffHtml); expect(result).toMatchInlineSnapshot(`
"<tr>
<td class=\\"d2h-info\\">
<div class=\\"d2h-code-line d2h-info\\">
File without changes
</div>
</td>
</tr>"
`);
}); });
it("should render view without cache", () => { it("should render view without cache", () => {
@ -27,7 +26,15 @@ describe("HoganJsUtils", () => {
contentClass: "d2h-code-line", contentClass: "d2h-code-line",
CSSLineClass: CSSLineClass CSSLineClass: CSSLineClass
}); });
expect(result).toEqual(emptyDiffHtml); expect(result).toMatchInlineSnapshot(`
"<tr>
<td class=\\"d2h-info\\">
<div class=\\"d2h-code-line d2h-info\\">
File without changes
</div>
</td>
</tr>"
`);
}); });
it("should throw exception if template is missing", () => { it("should throw exception if template is missing", () => {
@ -40,7 +47,7 @@ describe("HoganJsUtils", () => {
const hoganJsUtils = new HoganJsUtils({ compiledTemplates: { "generic-empty-diff": emptyDiffTemplate } }); const hoganJsUtils = new HoganJsUtils({ compiledTemplates: { "generic-empty-diff": emptyDiffTemplate } });
const result = hoganJsUtils.render("generic", "empty-diff", { myName: "Rodrigo Fernandes" }); const result = hoganJsUtils.render("generic", "empty-diff", { myName: "Rodrigo Fernandes" });
expect(result).toEqual("<p>Rodrigo Fernandes</p>"); expect(result).toMatchInlineSnapshot(`"<p>Rodrigo Fernandes</p>"`);
}); });
it("should allow templates to be overridden with uncompiled templates", () => { it("should allow templates to be overridden with uncompiled templates", () => {
@ -48,7 +55,7 @@ describe("HoganJsUtils", () => {
const hoganJsUtils = new HoganJsUtils({ rawTemplates: { "generic-empty-diff": emptyDiffTemplate } }); const hoganJsUtils = new HoganJsUtils({ rawTemplates: { "generic-empty-diff": emptyDiffTemplate } });
const result = hoganJsUtils.render("generic", "empty-diff", { myName: "Rodrigo Fernandes" }); const result = hoganJsUtils.render("generic", "empty-diff", { myName: "Rodrigo Fernandes" });
expect(result).toEqual("<p>Rodrigo Fernandes</p>"); expect(result).toMatchInlineSnapshot(`"<p>Rodrigo Fernandes</p>"`);
}); });
it("should allow templates to be overridden giving priority to raw templates", () => { it("should allow templates to be overridden giving priority to raw templates", () => {
@ -60,7 +67,7 @@ describe("HoganJsUtils", () => {
}); });
const result = hoganJsUtils.render("generic", "empty-diff", { myName: "Rodrigo Fernandes" }); const result = hoganJsUtils.render("generic", "empty-diff", { myName: "Rodrigo Fernandes" });
expect(result).toEqual("<p>Rodrigo Fernandes</p>"); expect(result).toMatchInlineSnapshot(`"<p>Rodrigo Fernandes</p>"`);
}); });
}); });
}); });

609
src/__tests__/line-by-line-tests.ts
View file

@ -9,16 +9,15 @@ describe("LineByLineRenderer", () => {
const hoganUtils = new HoganJsUtils({}); const hoganUtils = new HoganJsUtils({});
const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {}); const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {});
const fileHtml = lineByLineRenderer.generateEmptyDiff(); const fileHtml = lineByLineRenderer.generateEmptyDiff();
const expected = expect(fileHtml).toMatchInlineSnapshot(`
"<tr>\n" + "<tr>
' <td class="d2h-info">\n' + <td class=\\"d2h-info\\">
' <div class="d2h-code-line d2h-info">\n' + <div class=\\"d2h-code-line d2h-info\\">
" File without changes\n" + File without changes
" </div>\n" + </div>
" </td>\n" + </td>
"</tr>"; </tr>"
`);
expect(fileHtml).toEqual(expected);
}); });
}); });
@ -26,142 +25,131 @@ describe("LineByLineRenderer", () => {
it("should work for insertions", () => { it("should work for insertions", () => {
const hoganUtils = new HoganJsUtils({}); const hoganUtils = new HoganJsUtils({});
const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {}); const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {});
let fileHtml = lineByLineRenderer.generateSingleLineHtml({ const fileHtml = lineByLineRenderer.generateSingleLineHtml({
type: CSSLineClass.INSERTS, type: CSSLineClass.INSERTS,
prefix: "+", prefix: "+",
content: "test", content: "test",
oldNumber: undefined, oldNumber: undefined,
newNumber: 30 newNumber: 30
}); });
fileHtml = fileHtml.replace(/\n\n+/g, "\n"); expect(fileHtml).toMatchInlineSnapshot(`
const expected = "<tr>
"<tr>\n" + <td class=\\"d2h-code-linenumber d2h-ins\\">
' <td class="d2h-code-linenumber d2h-ins">\n' + <div class=\\"line-num1\\"></div>
' <div class="line-num1"></div>\n' + <div class=\\"line-num2\\">30</div>
'<div class="line-num2">30</div>\n' + </td>
" </td>\n" + <td class=\\"d2h-ins\\">
' <td class="d2h-ins">\n' + <div class=\\"d2h-code-line d2h-ins\\">
' <div class="d2h-code-line d2h-ins">\n' + <span class=\\"d2h-code-line-prefix\\">+</span>
' <span class="d2h-code-line-prefix">+</span>\n' + <span class=\\"d2h-code-line-ctn\\">test</span>
' <span class="d2h-code-line-ctn">test</span>\n' + </div>
" </div>\n" + </td>
" </td>\n" + </tr>"
"</tr>"; `);
expect(fileHtml).toEqual(expected);
}); });
it("should work for deletions", () => { it("should work for deletions", () => {
const hoganUtils = new HoganJsUtils({}); const hoganUtils = new HoganJsUtils({});
const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {}); const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {});
let fileHtml = lineByLineRenderer.generateSingleLineHtml({ const fileHtml = lineByLineRenderer.generateSingleLineHtml({
type: CSSLineClass.DELETES, type: CSSLineClass.DELETES,
prefix: "-", prefix: "-",
content: "test", content: "test",
oldNumber: 30, oldNumber: 30,
newNumber: undefined newNumber: undefined
}); });
fileHtml = fileHtml.replace(/\n\n+/g, "\n"); expect(fileHtml).toMatchInlineSnapshot(`
const expected = "<tr>
"<tr>\n" + <td class=\\"d2h-code-linenumber d2h-del\\">
' <td class="d2h-code-linenumber d2h-del">\n' + <div class=\\"line-num1\\">30</div>
' <div class="line-num1">30</div>\n' + <div class=\\"line-num2\\"></div>
'<div class="line-num2"></div>\n' + </td>
" </td>\n" + <td class=\\"d2h-del\\">
' <td class="d2h-del">\n' + <div class=\\"d2h-code-line d2h-del\\">
' <div class="d2h-code-line d2h-del">\n' + <span class=\\"d2h-code-line-prefix\\">-</span>
' <span class="d2h-code-line-prefix">-</span>\n' + <span class=\\"d2h-code-line-ctn\\">test</span>
' <span class="d2h-code-line-ctn">test</span>\n' + </div>
" </div>\n" + </td>
" </td>\n" + </tr>"
"</tr>"; `);
expect(fileHtml).toEqual(expected);
}); });
it("should convert indents into non breakin spaces (2 white spaces)", () => { it("should convert indents into non breakin spaces (2 white spaces)", () => {
const hoganUtils = new HoganJsUtils({}); const hoganUtils = new HoganJsUtils({});
const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {}); const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {});
let fileHtml = lineByLineRenderer.generateSingleLineHtml({ const fileHtml = lineByLineRenderer.generateSingleLineHtml({
type: CSSLineClass.INSERTS, type: CSSLineClass.INSERTS,
prefix: "+", prefix: "+",
content: " test", content: " test",
oldNumber: undefined, oldNumber: undefined,
newNumber: 30 newNumber: 30
}); });
fileHtml = fileHtml.replace(/\n\n+/g, "\n"); expect(fileHtml).toMatchInlineSnapshot(`
const expected = "<tr>
"<tr>\n" + <td class=\\"d2h-code-linenumber d2h-ins\\">
' <td class="d2h-code-linenumber d2h-ins">\n' + <div class=\\"line-num1\\"></div>
' <div class="line-num1"></div>\n' + <div class=\\"line-num2\\">30</div>
'<div class="line-num2">30</div>\n' + </td>
" </td>\n" + <td class=\\"d2h-ins\\">
' <td class="d2h-ins">\n' + <div class=\\"d2h-code-line d2h-ins\\">
' <div class="d2h-code-line d2h-ins">\n' + <span class=\\"d2h-code-line-prefix\\">+</span>
' <span class="d2h-code-line-prefix">+</span>\n' + <span class=\\"d2h-code-line-ctn\\"> test</span>
' <span class="d2h-code-line-ctn"> test</span>\n' + </div>
" </div>\n" + </td>
" </td>\n" + </tr>"
"</tr>"; `);
expect(fileHtml).toEqual(expected);
}); });
it("should convert indents into non breakin spaces (4 white spaces)", () => { it("should convert indents into non breakin spaces (4 white spaces)", () => {
const hoganUtils = new HoganJsUtils({}); const hoganUtils = new HoganJsUtils({});
const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {}); const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {});
let fileHtml = lineByLineRenderer.generateSingleLineHtml({ const fileHtml = lineByLineRenderer.generateSingleLineHtml({
type: CSSLineClass.INSERTS, type: CSSLineClass.INSERTS,
prefix: "+", prefix: "+",
content: " test", content: " test",
oldNumber: undefined, oldNumber: undefined,
newNumber: 30 newNumber: 30
}); });
fileHtml = fileHtml.replace(/\n\n+/g, "\n"); expect(fileHtml).toMatchInlineSnapshot(`
const expected = "<tr>
"<tr>\n" + <td class=\\"d2h-code-linenumber d2h-ins\\">
' <td class="d2h-code-linenumber d2h-ins">\n' + <div class=\\"line-num1\\"></div>
' <div class="line-num1"></div>\n' + <div class=\\"line-num2\\">30</div>
'<div class="line-num2">30</div>\n' + </td>
" </td>\n" + <td class=\\"d2h-ins\\">
' <td class="d2h-ins">\n' + <div class=\\"d2h-code-line d2h-ins\\">
' <div class="d2h-code-line d2h-ins">\n' + <span class=\\"d2h-code-line-prefix\\">+</span>
' <span class="d2h-code-line-prefix">+</span>\n' + <span class=\\"d2h-code-line-ctn\\"> test</span>
' <span class="d2h-code-line-ctn"> test</span>\n' + </div>
" </div>\n" + </td>
" </td>\n" + </tr>"
"</tr>"; `);
expect(fileHtml).toEqual(expected);
}); });
it("should preserve tabs", () => { it("should preserve tabs", () => {
const hoganUtils = new HoganJsUtils({}); const hoganUtils = new HoganJsUtils({});
const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {}); const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {});
let fileHtml = lineByLineRenderer.generateSingleLineHtml({ const fileHtml = lineByLineRenderer.generateSingleLineHtml({
type: CSSLineClass.INSERTS, type: CSSLineClass.INSERTS,
prefix: "+", prefix: "+",
content: "\ttest", content: "\ttest",
oldNumber: undefined, oldNumber: undefined,
newNumber: 30 newNumber: 30
}); });
fileHtml = fileHtml.replace(/\n\n+/g, "\n"); expect(fileHtml).toMatchInlineSnapshot(`
const expected = "<tr>
"<tr>\n" + <td class=\\"d2h-code-linenumber d2h-ins\\">
' <td class="d2h-code-linenumber d2h-ins">\n' + <div class=\\"line-num1\\"></div>
' <div class="line-num1"></div>\n' + <div class=\\"line-num2\\">30</div>
"" + </td>
'<div class="line-num2">30</div>\n' + <td class=\\"d2h-ins\\">
" </td>\n" + <div class=\\"d2h-code-line d2h-ins\\">
' <td class="d2h-ins">\n' + <span class=\\"d2h-code-line-prefix\\">+</span>
' <div class="d2h-code-line d2h-ins">\n' + <span class=\\"d2h-code-line-ctn\\"> test</span>
' <span class="d2h-code-line-prefix">+</span>\n' + </div>
' <span class="d2h-code-line-ctn">\ttest</span>\n' + </td>
" </div>\n" + </tr>"
" </td>\n" + `);
"</tr>";
expect(fileHtml).toEqual(expected);
}); });
}); });
@ -184,27 +172,26 @@ describe("LineByLineRenderer", () => {
const fileHtml = lineByLineRenderer.makeFileDiffHtml(file, diffs); const fileHtml = lineByLineRenderer.makeFileDiffHtml(file, diffs);
const expected = expect(fileHtml).toMatchInlineSnapshot(`
'<div id="d2h-781444" class="d2h-file-wrapper" data-lang="js">\n' + "<div id=\\"d2h-781444\\" class=\\"d2h-file-wrapper\\" data-lang=\\"js\\">
' <div class="d2h-file-header">\n' + <div class=\\"d2h-file-header\\">
' <span class="d2h-file-name-wrapper">\n' + <span class=\\"d2h-file-name-wrapper\\">
' <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' + <svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' + <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
' </svg> <span class="d2h-file-name">my/file/name.js</span>\n' + </svg> <span class=\\"d2h-file-name\\">my/file/name.js</span>
' <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' + <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
" </div>\n" + </div>
' <div class="d2h-file-diff">\n' + <div class=\\"d2h-file-diff\\">
' <div class="d2h-code-wrapper">\n' + <div class=\\"d2h-code-wrapper\\">
' <table class="d2h-diff-table">\n' + <table class=\\"d2h-diff-table\\">
' <tbody class="d2h-diff-tbody">\n' + <tbody class=\\"d2h-diff-tbody\\">
" <span>Random Html</span>\n" + <span>Random Html</span>
" </tbody>\n" + </tbody>
" </table>\n" + </table>
" </div>\n" + </div>
" </div>\n" + </div>
"</div>"; </div>"
`);
expect(fileHtml).toEqual(expected);
}); });
it("should work for simple added file", () => { it("should work for simple added file", () => {
const hoganUtils = new HoganJsUtils({}); const hoganUtils = new HoganJsUtils({});
@ -225,27 +212,26 @@ describe("LineByLineRenderer", () => {
const fileHtml = lineByLineRenderer.makeFileDiffHtml(file, diffs); const fileHtml = lineByLineRenderer.makeFileDiffHtml(file, diffs);
const expected = expect(fileHtml).toMatchInlineSnapshot(`
'<div id="d2h-781444" class="d2h-file-wrapper" data-lang="js">\n' + "<div id=\\"d2h-781444\\" class=\\"d2h-file-wrapper\\" data-lang=\\"js\\">
' <div class="d2h-file-header">\n' + <div class=\\"d2h-file-header\\">
' <span class="d2h-file-name-wrapper">\n' + <span class=\\"d2h-file-name-wrapper\\">
' <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' + <svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' + <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
' </svg> <span class="d2h-file-name">my/file/name.js</span>\n' + </svg> <span class=\\"d2h-file-name\\">my/file/name.js</span>
' <span class="d2h-tag d2h-added d2h-added-tag">ADDED</span></span>\n' + <span class=\\"d2h-tag d2h-added d2h-added-tag\\">ADDED</span></span>
" </div>\n" + </div>
' <div class="d2h-file-diff">\n' + <div class=\\"d2h-file-diff\\">
' <div class="d2h-code-wrapper">\n' + <div class=\\"d2h-code-wrapper\\">
' <table class="d2h-diff-table">\n' + <table class=\\"d2h-diff-table\\">
' <tbody class="d2h-diff-tbody">\n' + <tbody class=\\"d2h-diff-tbody\\">
" <span>Random Html</span>\n" + <span>Random Html</span>
" </tbody>\n" + </tbody>
" </table>\n" + </table>
" </div>\n" + </div>
" </div>\n" + </div>
"</div>"; </div>"
`);
expect(fileHtml).toEqual(expected);
}); });
it("should work for simple deleted file", () => { it("should work for simple deleted file", () => {
const hoganUtils = new HoganJsUtils({}); const hoganUtils = new HoganJsUtils({});
@ -266,27 +252,26 @@ describe("LineByLineRenderer", () => {
const fileHtml = lineByLineRenderer.makeFileDiffHtml(file, diffs); const fileHtml = lineByLineRenderer.makeFileDiffHtml(file, diffs);
const expected = expect(fileHtml).toMatchInlineSnapshot(`
'<div id="d2h-781444" class="d2h-file-wrapper" data-lang="js">\n' + "<div id=\\"d2h-781444\\" class=\\"d2h-file-wrapper\\" data-lang=\\"js\\">
' <div class="d2h-file-header">\n' + <div class=\\"d2h-file-header\\">
' <span class="d2h-file-name-wrapper">\n' + <span class=\\"d2h-file-name-wrapper\\">
' <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' + <svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' + <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
' </svg> <span class="d2h-file-name">my/file/name.js</span>\n' + </svg> <span class=\\"d2h-file-name\\">my/file/name.js</span>
' <span class="d2h-tag d2h-deleted d2h-deleted-tag">DELETED</span></span>\n' + <span class=\\"d2h-tag d2h-deleted d2h-deleted-tag\\">DELETED</span></span>
" </div>\n" + </div>
' <div class="d2h-file-diff">\n' + <div class=\\"d2h-file-diff\\">
' <div class="d2h-code-wrapper">\n' + <div class=\\"d2h-code-wrapper\\">
' <table class="d2h-diff-table">\n' + <table class=\\"d2h-diff-table\\">
' <tbody class="d2h-diff-tbody">\n' + <tbody class=\\"d2h-diff-tbody\\">
" <span>Random Html</span>\n" + <span>Random Html</span>
" </tbody>\n" + </tbody>
" </table>\n" + </table>
" </div>\n" + </div>
" </div>\n" + </div>
"</div>"; </div>"
`);
expect(fileHtml).toEqual(expected);
}); });
it("should work for simple renamed file", () => { it("should work for simple renamed file", () => {
const hoganUtils = new HoganJsUtils({}); const hoganUtils = new HoganJsUtils({});
@ -307,27 +292,26 @@ describe("LineByLineRenderer", () => {
const fileHtml = lineByLineRenderer.makeFileDiffHtml(file, diffs); const fileHtml = lineByLineRenderer.makeFileDiffHtml(file, diffs);
const expected = expect(fileHtml).toMatchInlineSnapshot(`
'<div id="d2h-662683" class="d2h-file-wrapper" data-lang="js">\n' + "<div id=\\"d2h-662683\\" class=\\"d2h-file-wrapper\\" data-lang=\\"js\\">
' <div class="d2h-file-header">\n' + <div class=\\"d2h-file-header\\">
' <span class="d2h-file-name-wrapper">\n' + <span class=\\"d2h-file-name-wrapper\\">
' <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' + <svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' + <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
' </svg> <span class="d2h-file-name">my/file/{name1.js → name2.js}</span>\n' + </svg> <span class=\\"d2h-file-name\\">my/file/{name1.js → name2.js}</span>
' <span class="d2h-tag d2h-moved d2h-moved-tag">RENAMED</span></span>\n' + <span class=\\"d2h-tag d2h-moved d2h-moved-tag\\">RENAMED</span></span>
" </div>\n" + </div>
' <div class="d2h-file-diff">\n' + <div class=\\"d2h-file-diff\\">
' <div class="d2h-code-wrapper">\n' + <div class=\\"d2h-code-wrapper\\">
' <table class="d2h-diff-table">\n' + <table class=\\"d2h-diff-table\\">
' <tbody class="d2h-diff-tbody">\n' + <tbody class=\\"d2h-diff-tbody\\">
" <span>Random Html</span>\n" + <span>Random Html</span>
" </tbody>\n" + </tbody>
" </table>\n" + </table>
" </div>\n" + </div>
" </div>\n" + </div>
"</div>"; </div>"
`);
expect(fileHtml).toEqual(expected);
}); });
it("should return empty when option renderNothingWhenEmpty is true and file blocks not present", () => { it("should return empty when option renderNothingWhenEmpty is true and file blocks not present", () => {
const hoganUtils = new HoganJsUtils({}); const hoganUtils = new HoganJsUtils({});
@ -351,9 +335,7 @@ describe("LineByLineRenderer", () => {
const fileHtml = lineByLineRenderer.makeFileDiffHtml(file, diffs); const fileHtml = lineByLineRenderer.makeFileDiffHtml(file, diffs);
const expected = ""; expect(fileHtml).toMatchInlineSnapshot(`""`);
expect(fileHtml).toEqual(expected);
}); });
}); });
@ -400,56 +382,55 @@ describe("LineByLineRenderer", () => {
matching: LineMatchingType.LINES matching: LineMatchingType.LINES
}); });
const html = lineByLineRenderer.render(exampleJson); const html = lineByLineRenderer.render(exampleJson);
const expected = expect(html).toMatchInlineSnapshot(`
'<div class="d2h-wrapper">\n' + "<div class=\\"d2h-wrapper\\">
' <div id="d2h-675094" class="d2h-file-wrapper" data-lang="txt">\n' + <div id=\\"d2h-675094\\" class=\\"d2h-file-wrapper\\" data-lang=\\"txt\\">
' <div class="d2h-file-header">\n' + <div class=\\"d2h-file-header\\">
' <span class="d2h-file-name-wrapper">\n' + <span class=\\"d2h-file-name-wrapper\\">
' <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' + <svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' + <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
' </svg> <span class="d2h-file-name">sample</span>\n' + </svg> <span class=\\"d2h-file-name\\">sample</span>
' <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' + <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
" </div>\n" + </div>
' <div class="d2h-file-diff">\n' + <div class=\\"d2h-file-diff\\">
' <div class="d2h-code-wrapper">\n' + <div class=\\"d2h-code-wrapper\\">
' <table class="d2h-diff-table">\n' + <table class=\\"d2h-diff-table\\">
' <tbody class="d2h-diff-tbody">\n' + <tbody class=\\"d2h-diff-tbody\\">
" <tr>\n" + <tr>
' <td class="d2h-code-linenumber d2h-info"></td>\n' + <td class=\\"d2h-code-linenumber d2h-info\\"></td>
' <td class="d2h-info">\n' + <td class=\\"d2h-info\\">
' <div class="d2h-code-line d2h-info">@@ -1 +1 @@</div>\n' + <div class=\\"d2h-code-line d2h-info\\">@@ -1 +1 @@</div>
" </td>\n" + </td>
"</tr><tr>\n" + </tr><tr>
' <td class="d2h-code-linenumber d2h-del d2h-change">\n' + <td class=\\"d2h-code-linenumber d2h-del d2h-change\\">
' <div class="line-num1">1</div>\n' + <div class=\\"line-num1\\">1</div>
'<div class="line-num2"></div>\n' + <div class=\\"line-num2\\"></div>
" </td>\n" + </td>
' <td class="d2h-del d2h-change">\n' + <td class=\\"d2h-del d2h-change\\">
' <div class="d2h-code-line d2h-del d2h-change">\n' + <div class=\\"d2h-code-line d2h-del d2h-change\\">
' <span class="d2h-code-line-prefix">-</span>\n' + <span class=\\"d2h-code-line-prefix\\">-</span>
' <span class="d2h-code-line-ctn"><del>test</del></span>\n' + <span class=\\"d2h-code-line-ctn\\"><del>test</del></span>
" </div>\n" + </div>
" </td>\n" + </td>
"</tr><tr>\n" + </tr><tr>
' <td class="d2h-code-linenumber d2h-ins d2h-change">\n' + <td class=\\"d2h-code-linenumber d2h-ins d2h-change\\">
' <div class="line-num1"></div>\n' + <div class=\\"line-num1\\"></div>
'<div class="line-num2">1</div>\n' + <div class=\\"line-num2\\">1</div>
" </td>\n" + </td>
' <td class="d2h-ins d2h-change">\n' + <td class=\\"d2h-ins d2h-change\\">
' <div class="d2h-code-line d2h-ins d2h-change">\n' + <div class=\\"d2h-code-line d2h-ins d2h-change\\">
' <span class="d2h-code-line-prefix">+</span>\n' + <span class=\\"d2h-code-line-prefix\\">+</span>
' <span class="d2h-code-line-ctn"><ins>test1r</ins></span>\n' + <span class=\\"d2h-code-line-ctn\\"><ins>test1r</ins></span>
" </div>\n" + </div>
" </td>\n" + </td>
"</tr>\n" + </tr>
" </tbody>\n" + </tbody>
" </table>\n" + </table>
" </div>\n" + </div>
" </div>\n" + </div>
"</div>\n" + </div>
"</div>"; </div>"
`);
expect(html).toEqual(expected);
}); });
it("should work for empty blocks", () => { it("should work for empty blocks", () => {
@ -471,35 +452,34 @@ describe("LineByLineRenderer", () => {
renderNothingWhenEmpty: false renderNothingWhenEmpty: false
}); });
const html = lineByLineRenderer.render(exampleJson); const html = lineByLineRenderer.render(exampleJson);
const expected = expect(html).toMatchInlineSnapshot(`
'<div class="d2h-wrapper">\n' + "<div class=\\"d2h-wrapper\\">
' <div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">\n' + <div id=\\"d2h-675094\\" class=\\"d2h-file-wrapper\\" data-lang=\\"js\\">
' <div class="d2h-file-header">\n' + <div class=\\"d2h-file-header\\">
' <span class="d2h-file-name-wrapper">\n' + <span class=\\"d2h-file-name-wrapper\\">
' <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' + <svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' + <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
' </svg> <span class="d2h-file-name">sample</span>\n' + </svg> <span class=\\"d2h-file-name\\">sample</span>
' <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' + <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
" </div>\n" + </div>
' <div class="d2h-file-diff">\n' + <div class=\\"d2h-file-diff\\">
' <div class="d2h-code-wrapper">\n' + <div class=\\"d2h-code-wrapper\\">
' <table class="d2h-diff-table">\n' + <table class=\\"d2h-diff-table\\">
' <tbody class="d2h-diff-tbody">\n' + <tbody class=\\"d2h-diff-tbody\\">
" <tr>\n" + <tr>
' <td class="d2h-info">\n' + <td class=\\"d2h-info\\">
' <div class="d2h-code-line d2h-info">\n' + <div class=\\"d2h-code-line d2h-info\\">
" File without changes\n" + File without changes
" </div>\n" + </div>
" </td>\n" + </td>
"</tr>\n" + </tr>
" </tbody>\n" + </tbody>
" </table>\n" + </table>
" </div>\n" + </div>
" </div>\n" + </div>
"</div>\n" + </div>
"</div>"; </div>"
`);
expect(html).toEqual(expected);
}); });
}); });
@ -555,59 +535,58 @@ describe("LineByLineRenderer", () => {
const html = lineByLineRenderer.generateFileHtml(file); const html = lineByLineRenderer.generateFileHtml(file);
const expected = expect(html).toMatchInlineSnapshot(`
"<tr>\n" + "<tr>
' <td class="d2h-code-linenumber d2h-info"></td>\n' + <td class=\\"d2h-code-linenumber d2h-info\\"></td>
' <td class="d2h-info">\n' + <td class=\\"d2h-info\\">
' <div class="d2h-code-line d2h-info">@@ -1 +1 @@</div>\n' + <div class=\\"d2h-code-line d2h-info\\">@@ -1 +1 @@</div>
" </td>\n" + </td>
"</tr><tr>\n" + </tr><tr>
' <td class="d2h-code-linenumber d2h-cntx">\n' + <td class=\\"d2h-code-linenumber d2h-cntx\\">
' <div class="line-num1">1</div>\n' + <div class=\\"line-num1\\">1</div>
'<div class="line-num2">1</div>\n' + <div class=\\"line-num2\\">1</div>
" </td>\n" + </td>
' <td class="d2h-cntx">\n' + <td class=\\"d2h-cntx\\">
' <div class="d2h-code-line d2h-cntx">\n' + <div class=\\"d2h-code-line d2h-cntx\\">
' <span class="d2h-code-line-prefix">&nbsp;</span>\n' + <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
' <span class="d2h-code-line-ctn">one context line</span>\n' + <span class=\\"d2h-code-line-ctn\\">one context line</span>
" </div>\n" + </div>
" </td>\n" + </td>
"</tr><tr>\n" + </tr><tr>
' <td class="d2h-code-linenumber d2h-del d2h-change">\n' + <td class=\\"d2h-code-linenumber d2h-del d2h-change\\">
' <div class="line-num1">2</div>\n' + <div class=\\"line-num1\\">2</div>
'<div class="line-num2"></div>\n' + <div class=\\"line-num2\\"></div>
" </td>\n" + </td>
' <td class="d2h-del d2h-change">\n' + <td class=\\"d2h-del d2h-change\\">
' <div class="d2h-code-line d2h-del d2h-change">\n' + <div class=\\"d2h-code-line d2h-del d2h-change\\">
' <span class="d2h-code-line-prefix">-</span>\n' + <span class=\\"d2h-code-line-prefix\\">-</span>
' <span class="d2h-code-line-ctn"><del>test</del></span>\n' + <span class=\\"d2h-code-line-ctn\\"><del>test</del></span>
" </div>\n" + </div>
" </td>\n" + </td>
"</tr><tr>\n" + </tr><tr>
' <td class="d2h-code-linenumber d2h-ins d2h-change">\n' + <td class=\\"d2h-code-linenumber d2h-ins d2h-change\\">
' <div class="line-num1"></div>\n' + <div class=\\"line-num1\\"></div>
'<div class="line-num2">2</div>\n' + <div class=\\"line-num2\\">2</div>
" </td>\n" + </td>
' <td class="d2h-ins d2h-change">\n' + <td class=\\"d2h-ins d2h-change\\">
' <div class="d2h-code-line d2h-ins d2h-change">\n' + <div class=\\"d2h-code-line d2h-ins d2h-change\\">
' <span class="d2h-code-line-prefix">+</span>\n' + <span class=\\"d2h-code-line-prefix\\">+</span>
' <span class="d2h-code-line-ctn"><ins>test1r</ins></span>\n' + <span class=\\"d2h-code-line-ctn\\"><ins>test1r</ins></span>
" </div>\n" + </div>
" </td>\n" + </td>
"</tr><tr>\n" + </tr><tr>
' <td class="d2h-code-linenumber d2h-ins">\n' + <td class=\\"d2h-code-linenumber d2h-ins\\">
' <div class="line-num1"></div>\n' + <div class=\\"line-num1\\"></div>
'<div class="line-num2">3</div>\n' + <div class=\\"line-num2\\">3</div>
" </td>\n" + </td>
' <td class="d2h-ins">\n' + <td class=\\"d2h-ins\\">
' <div class="d2h-code-line d2h-ins">\n' + <div class=\\"d2h-code-line d2h-ins\\">
' <span class="d2h-code-line-prefix">+</span>\n' + <span class=\\"d2h-code-line-prefix\\">+</span>
' <span class="d2h-code-line-ctn">test2r</span>\n' + <span class=\\"d2h-code-line-ctn\\">test2r</span>
" </div>\n" + </div>
" </td>\n" + </td>
"</tr>"; </tr>"
`);
expect(html).toEqual(expected);
}); });
}); });
}); });

26
src/__tests__/printer-utils-tests.ts
View file

@ -41,14 +41,14 @@ describe("Utils", () => {
oldName: "sample.js", oldName: "sample.js",
newName: "sample.js" newName: "sample.js"
}); });
expect("d2h-960013").toEqual(result); expect(result).toEqual("d2h-960013");
}); });
it("should generate file unique id for empty hashes", () => { it("should generate file unique id for empty hashes", () => {
const result = getHtmlId({ const result = getHtmlId({
oldName: "sample.js", oldName: "sample.js",
newName: "sample.js" newName: "sample.js"
}); });
expect("d2h-960013").toEqual(result); expect(result).toEqual("d2h-960013");
}); });
}); });
@ -58,49 +58,49 @@ describe("Utils", () => {
oldName: "sample.js", oldName: "sample.js",
newName: "sample.js" newName: "sample.js"
}); });
expect("sample.js").toEqual(result); expect(result).toEqual("sample.js");
}); });
it("should generate the file name for a changed file and full rename", () => { it("should generate the file name for a changed file and full rename", () => {
const result = filenameDiff({ const result = filenameDiff({
oldName: "sample1.js", oldName: "sample1.js",
newName: "sample2.js" newName: "sample2.js"
}); });
expect("sample1.js → sample2.js").toEqual(result); expect(result).toEqual("sample1.js → sample2.js");
}); });
it("should generate the file name for a changed file and prefix rename", () => { it("should generate the file name for a changed file and prefix rename", () => {
const result = filenameDiff({ const result = filenameDiff({
oldName: "src/path/sample.js", oldName: "src/path/sample.js",
newName: "source/path/sample.js" newName: "source/path/sample.js"
}); });
expect("{src → source}/path/sample.js").toEqual(result); expect(result).toEqual("{src → source}/path/sample.js");
}); });
it("should generate the file name for a changed file and suffix rename", () => { it("should generate the file name for a changed file and suffix rename", () => {
const result = filenameDiff({ const result = filenameDiff({
oldName: "src/path/sample1.js", oldName: "src/path/sample1.js",
newName: "src/path/sample2.js" newName: "src/path/sample2.js"
}); });
expect("src/path/{sample1.js → sample2.js}").toEqual(result); expect(result).toEqual("src/path/{sample1.js → sample2.js}");
}); });
it("should generate the file name for a changed file and middle rename", () => { it("should generate the file name for a changed file and middle rename", () => {
const result = filenameDiff({ const result = filenameDiff({
oldName: "src/really/big/path/sample.js", oldName: "src/really/big/path/sample.js",
newName: "src/small/path/sample.js" newName: "src/small/path/sample.js"
}); });
expect("src/{really/big → small}/path/sample.js").toEqual(result); expect(result).toEqual("src/{really/big → small}/path/sample.js");
}); });
it("should generate the file name for a deleted file", () => { it("should generate the file name for a deleted file", () => {
const result = filenameDiff({ const result = filenameDiff({
oldName: "src/my/file.js", oldName: "src/my/file.js",
newName: "/dev/null" newName: "/dev/null"
}); });
expect("src/my/file.js").toEqual(result); expect(result).toEqual("src/my/file.js");
}); });
it("should generate the file name for a new file", () => { it("should generate the file name for a new file", () => {
const result = filenameDiff({ const result = filenameDiff({
oldName: "/dev/null", oldName: "/dev/null",
newName: "src/my/file.js" newName: "src/my/file.js"
}); });
expect("src/my/file.js").toEqual(result); expect(result).toEqual("src/my/file.js");
}); });
}); });
@ -126,7 +126,7 @@ describe("Utils", () => {
diffStyle: DiffStyleType.CHAR diffStyle: DiffStyleType.CHAR
}); });
expect({ expect(result).toEqual({
oldLine: { oldLine: {
prefix: "-", prefix: "-",
content: "var myVar = <del>2</del>;" content: "var myVar = <del>2</del>;"
@ -135,7 +135,7 @@ describe("Utils", () => {
prefix: "+", prefix: "+",
content: "var myVar<ins>iable</ins> = <ins>3</ins>;" content: "var myVar<ins>iable</ins> = <ins>3</ins>;"
} }
}).toEqual(result); });
}); });
it("should highlight combined diff lines", () => { it("should highlight combined diff lines", () => {
const result = diffHighlight(" -var myVar = 2;", " +var myVariable = 3;", true, { const result = diffHighlight(" -var myVar = 2;", " +var myVariable = 3;", true, {
@ -144,7 +144,7 @@ describe("Utils", () => {
matchWordsThreshold: 1.0 matchWordsThreshold: 1.0
}); });
expect({ expect(result).toEqual({
oldLine: { oldLine: {
prefix: " -", prefix: " -",
content: 'var <del class="d2h-change">myVar</del> = <del class="d2h-change">2</del>;' content: 'var <del class="d2h-change">myVar</del> = <del class="d2h-change">2</del>;'
@ -153,7 +153,7 @@ describe("Utils", () => {
prefix: " +", prefix: " +",
content: 'var <ins class="d2h-change">myVariable</ins> = <ins class="d2h-change">3</ins>;' content: 'var <ins class="d2h-change">myVariable</ins> = <ins class="d2h-change">3</ins>;'
} }
}).toEqual(result); });
}); });
}); });
}); });

545
src/__tests__/side-by-side-printer-tests.ts
View file

@ -9,18 +9,18 @@ describe("SideBySideRenderer", () => {
const hoganUtils = new HoganJsUtils({}); const hoganUtils = new HoganJsUtils({});
const sideBySideRenderer = new SideBySideRenderer(hoganUtils, {}); const sideBySideRenderer = new SideBySideRenderer(hoganUtils, {});
const fileHtml = sideBySideRenderer.generateEmptyDiff(); const fileHtml = sideBySideRenderer.generateEmptyDiff();
const expectedRight = ""; expect(fileHtml).toMatchInlineSnapshot(`
const expectedLeft = Object {
"<tr>\n" + "left": "<tr>
' <td class="d2h-info">\n' + <td class=\\"d2h-info\\">
' <div class="d2h-code-side-line d2h-info">\n' + <div class=\\"d2h-code-side-line d2h-info\\">
" File without changes\n" + File without changes
" </div>\n" + </div>
" </td>\n" + </td>
"</tr>"; </tr>",
"right": "",
expect(fileHtml.right).toEqual(expectedRight); }
expect(fileHtml.left).toEqual(expectedLeft); `);
}); });
}); });
@ -77,85 +77,82 @@ describe("SideBySideRenderer", () => {
const fileHtml = sideBySideRenderer.generateFileHtml(file); const fileHtml = sideBySideRenderer.generateFileHtml(file);
const expectedLeft = expect(fileHtml).toMatchInlineSnapshot(`
"<tr>\n" + Object {
' <td class="d2h-code-side-linenumber d2h-info"></td>\n' + "left": "<tr>
' <td class="d2h-info">\n' + <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
' <div class="d2h-code-side-line d2h-info">@@ -19,7 +19,7 @@</div>\n' + <td class=\\"d2h-info\\">
" </td>\n" + <div class=\\"d2h-code-side-line d2h-info\\">@@ -19,7 +19,7 @@</div>
"</tr><tr>\n" + </td>
' <td class="d2h-code-side-linenumber d2h-cntx">\n' + </tr><tr>
" 19\n" + <td class=\\"d2h-code-side-linenumber d2h-cntx\\">
" </td>\n" + 19
' <td class="d2h-cntx">\n' + </td>
' <div class="d2h-code-side-line d2h-cntx">\n' + <td class=\\"d2h-cntx\\">
' <span class="d2h-code-line-prefix">&nbsp;</span>\n' + <div class=\\"d2h-code-side-line d2h-cntx\\">
' <span class="d2h-code-line-ctn">context</span>\n' + <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
" </div>\n" + <span class=\\"d2h-code-line-ctn\\">context</span>
" </td>\n" + </div>
"</tr><tr>\n" + </td>
' <td class="d2h-code-side-linenumber d2h-del d2h-change">\n' + </tr><tr>
" 20\n" + <td class=\\"d2h-code-side-linenumber d2h-del d2h-change\\">
" </td>\n" + 20
' <td class="d2h-del d2h-change">\n' + </td>
' <div class="d2h-code-side-line d2h-del d2h-change">\n' + <td class=\\"d2h-del d2h-change\\">
' <span class="d2h-code-line-prefix">-</span>\n' + <div class=\\"d2h-code-side-line d2h-del d2h-change\\">
' <span class="d2h-code-line-ctn"><del>removed</del></span>\n' + <span class=\\"d2h-code-line-prefix\\">-</span>
" </div>\n" + <span class=\\"d2h-code-line-ctn\\"><del>removed</del></span>
" </td>\n" + </div>
"</tr><tr>\n" + </td>
' <td class="d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder">\n' + </tr><tr>
" " + <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
"\n" +
" </td>\n" + </td>
' <td class="d2h-cntx d2h-emptyplaceholder">\n' + <td class=\\"d2h-cntx d2h-emptyplaceholder\\">
' <div class="d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder">\n' + <div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
' <span class="d2h-code-line-prefix">&nbsp;</span>\n' + <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
' <span class="d2h-code-line-ctn">&nbsp;</span>\n' + <span class=\\"d2h-code-line-ctn\\">&nbsp;</span>
" </div>\n" + </div>
" </td>\n" + </td>
"</tr>"; </tr>",
"right": "<tr>
const expectedRight = <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
"<tr>\n" + <td class=\\"d2h-info\\">
' <td class="d2h-code-side-linenumber d2h-info"></td>\n' + <div class=\\"d2h-code-side-line d2h-info\\"></div>
' <td class="d2h-info">\n' + </td>
' <div class="d2h-code-side-line d2h-info"></div>\n' + </tr><tr>
" </td>\n" + <td class=\\"d2h-code-side-linenumber d2h-cntx\\">
"</tr><tr>\n" + 19
' <td class="d2h-code-side-linenumber d2h-cntx">\n' + </td>
" 19\n" + <td class=\\"d2h-cntx\\">
" </td>\n" + <div class=\\"d2h-code-side-line d2h-cntx\\">
' <td class="d2h-cntx">\n' + <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
' <div class="d2h-code-side-line d2h-cntx">\n' + <span class=\\"d2h-code-line-ctn\\">context</span>
' <span class="d2h-code-line-prefix">&nbsp;</span>\n' + </div>
' <span class="d2h-code-line-ctn">context</span>\n' + </td>
" </div>\n" + </tr><tr>
" </td>\n" + <td class=\\"d2h-code-side-linenumber d2h-ins d2h-change\\">
"</tr><tr>\n" + 20
' <td class="d2h-code-side-linenumber d2h-ins d2h-change">\n' + </td>
" 20\n" + <td class=\\"d2h-ins d2h-change\\">
" </td>\n" + <div class=\\"d2h-code-side-line d2h-ins d2h-change\\">
' <td class="d2h-ins d2h-change">\n' + <span class=\\"d2h-code-line-prefix\\">+</span>
' <div class="d2h-code-side-line d2h-ins d2h-change">\n' + <span class=\\"d2h-code-line-ctn\\"><ins>added</ins></span>
' <span class="d2h-code-line-prefix">+</span>\n' + </div>
' <span class="d2h-code-line-ctn"><ins>added</ins></span>\n' + </td>
" </div>\n" + </tr><tr>
" </td>\n" + <td class=\\"d2h-code-side-linenumber d2h-ins\\">
"</tr><tr>\n" + 21
' <td class="d2h-code-side-linenumber d2h-ins">\n' + </td>
" 21\n" + <td class=\\"d2h-ins\\">
" </td>\n" + <div class=\\"d2h-code-side-line d2h-ins\\">
' <td class="d2h-ins">\n' + <span class=\\"d2h-code-line-prefix\\">+</span>
' <div class="d2h-code-side-line d2h-ins">\n' + <span class=\\"d2h-code-line-ctn\\">another added</span>
' <span class="d2h-code-line-prefix">+</span>\n' + </div>
' <span class="d2h-code-line-ctn">another added</span>\n' + </td>
" </div>\n" + </tr>",
" </td>\n" + }
"</tr>"; `);
expect(fileHtml.left).toEqual(expectedLeft);
expect(fileHtml.right).toEqual(expectedRight);
}); });
}); });
@ -170,34 +167,32 @@ describe("SideBySideRenderer", () => {
number: 30 number: 30
}); });
const expected = { expect(fileHtml).toMatchInlineSnapshot(`
left: Object {
"<tr>\n" + "left": "<tr>
' <td class="d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder">\n' + <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
" \n" +
" </td>\n" + </td>
' <td class="d2h-cntx d2h-emptyplaceholder">\n' + <td class=\\"d2h-cntx d2h-emptyplaceholder\\">
' <div class="d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder">\n' + <div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
' <span class="d2h-code-line-prefix">&nbsp;</span>\n' + <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
' <span class="d2h-code-line-ctn">&nbsp;</span>\n' + <span class=\\"d2h-code-line-ctn\\">&nbsp;</span>
" </div>\n" + </div>
" </td>\n" + </td>
"</tr>", </tr>",
right: "right": "<tr>
"<tr>\n" + <td class=\\"d2h-code-side-linenumber d2h-ins\\">
' <td class="d2h-code-side-linenumber d2h-ins">\n' + 30
" 30\n" + </td>
" </td>\n" + <td class=\\"d2h-ins\\">
' <td class="d2h-ins">\n' + <div class=\\"d2h-code-side-line d2h-ins\\">
' <div class="d2h-code-side-line d2h-ins">\n' + <span class=\\"d2h-code-line-prefix\\">+</span>
' <span class="d2h-code-line-prefix">+</span>\n' + <span class=\\"d2h-code-line-ctn\\">test</span>
' <span class="d2h-code-line-ctn">test</span>\n' + </div>
" </div>\n" + </td>
" </td>\n" + </tr>",
"</tr>" }
}; `);
expect(fileHtml).toEqual(expected);
}); });
it("should work for deletions", () => { it("should work for deletions", () => {
const hoganUtils = new HoganJsUtils({}); const hoganUtils = new HoganJsUtils({});
@ -211,34 +206,33 @@ describe("SideBySideRenderer", () => {
}, },
undefined undefined
); );
const expected = {
left:
"<tr>\n" +
' <td class="d2h-code-side-linenumber d2h-del">\n' +
" 30\n" +
" </td>\n" +
' <td class="d2h-del">\n' +
' <div class="d2h-code-side-line d2h-del">\n' +
' <span class="d2h-code-line-prefix">-</span>\n' +
' <span class="d2h-code-line-ctn">test</span>\n' +
" </div>\n" +
" </td>\n" +
"</tr>",
right:
"<tr>\n" +
' <td class="d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder">\n' +
" \n" +
" </td>\n" +
' <td class="d2h-cntx d2h-emptyplaceholder">\n' +
' <div class="d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder">\n' +
' <span class="d2h-code-line-prefix">&nbsp;</span>\n' +
' <span class="d2h-code-line-ctn">&nbsp;</span>\n' +
" </div>\n" +
" </td>\n" +
"</tr>"
};
expect(fileHtml).toEqual(expected); expect(fileHtml).toMatchInlineSnapshot(`
Object {
"left": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-del\\">
30
</td>
<td class=\\"d2h-del\\">
<div class=\\"d2h-code-side-line d2h-del\\">
<span class=\\"d2h-code-line-prefix\\">-</span>
<span class=\\"d2h-code-line-ctn\\">test</span>
</div>
</td>
</tr>",
"right": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
</td>
<td class=\\"d2h-cntx d2h-emptyplaceholder\\">
<div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
<span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
<span class=\\"d2h-code-line-ctn\\">&nbsp;</span>
</div>
</td>
</tr>",
}
`);
}); });
}); });
@ -283,70 +277,69 @@ describe("SideBySideRenderer", () => {
const hoganUtils = new HoganJsUtils({}); const hoganUtils = new HoganJsUtils({});
const sideBySideRenderer = new SideBySideRenderer(hoganUtils, { matching: LineMatchingType.LINES }); const sideBySideRenderer = new SideBySideRenderer(hoganUtils, { matching: LineMatchingType.LINES });
const html = sideBySideRenderer.render(exampleJson); const html = sideBySideRenderer.render(exampleJson);
const expected = expect(html).toMatchInlineSnapshot(`
'<div class="d2h-wrapper">\n' + "<div class=\\"d2h-wrapper\\">
' <div id="d2h-675094" class="d2h-file-wrapper" data-lang="txt">\n' + <div id=\\"d2h-675094\\" class=\\"d2h-file-wrapper\\" data-lang=\\"txt\\">
' <div class="d2h-file-header">\n' + <div class=\\"d2h-file-header\\">
' <span class="d2h-file-name-wrapper">\n' + <span class=\\"d2h-file-name-wrapper\\">
' <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' + <svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' + <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
' </svg> <span class="d2h-file-name">sample</span>\n' + </svg> <span class=\\"d2h-file-name\\">sample</span>
' <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' + <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
" </div>\n" + </div>
' <div class="d2h-files-diff">\n' + <div class=\\"d2h-files-diff\\">
' <div class="d2h-file-side-diff">\n' + <div class=\\"d2h-file-side-diff\\">
' <div class="d2h-code-wrapper">\n' + <div class=\\"d2h-code-wrapper\\">
' <table class="d2h-diff-table">\n' + <table class=\\"d2h-diff-table\\">
' <tbody class="d2h-diff-tbody">\n' + <tbody class=\\"d2h-diff-tbody\\">
" <tr>\n" + <tr>
' <td class="d2h-code-side-linenumber d2h-info"></td>\n' + <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
' <td class="d2h-info">\n' + <td class=\\"d2h-info\\">
' <div class="d2h-code-side-line d2h-info">@@ -1 +1 @@</div>\n' + <div class=\\"d2h-code-side-line d2h-info\\">@@ -1 +1 @@</div>
" </td>\n" + </td>
"</tr><tr>\n" + </tr><tr>
' <td class="d2h-code-side-linenumber d2h-del d2h-change">\n' + <td class=\\"d2h-code-side-linenumber d2h-del d2h-change\\">
" 1\n" + 1
" </td>\n" + </td>
' <td class="d2h-del d2h-change">\n' + <td class=\\"d2h-del d2h-change\\">
' <div class="d2h-code-side-line d2h-del d2h-change">\n' + <div class=\\"d2h-code-side-line d2h-del d2h-change\\">
' <span class="d2h-code-line-prefix">-</span>\n' + <span class=\\"d2h-code-line-prefix\\">-</span>
' <span class="d2h-code-line-ctn"><del>test</del></span>\n' + <span class=\\"d2h-code-line-ctn\\"><del>test</del></span>
" </div>\n" + </div>
" </td>\n" + </td>
"</tr>\n" + </tr>
" </tbody>\n" + </tbody>
" </table>\n" + </table>
" </div>\n" + </div>
" </div>\n" + </div>
' <div class="d2h-file-side-diff">\n' + <div class=\\"d2h-file-side-diff\\">
' <div class="d2h-code-wrapper">\n' + <div class=\\"d2h-code-wrapper\\">
' <table class="d2h-diff-table">\n' + <table class=\\"d2h-diff-table\\">
' <tbody class="d2h-diff-tbody">\n' + <tbody class=\\"d2h-diff-tbody\\">
" <tr>\n" + <tr>
' <td class="d2h-code-side-linenumber d2h-info"></td>\n' + <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
' <td class="d2h-info">\n' + <td class=\\"d2h-info\\">
' <div class="d2h-code-side-line d2h-info"></div>\n' + <div class=\\"d2h-code-side-line d2h-info\\"></div>
" </td>\n" + </td>
"</tr><tr>\n" + </tr><tr>
' <td class="d2h-code-side-linenumber d2h-ins d2h-change">\n' + <td class=\\"d2h-code-side-linenumber d2h-ins d2h-change\\">
" 1\n" + 1
" </td>\n" + </td>
' <td class="d2h-ins d2h-change">\n' + <td class=\\"d2h-ins d2h-change\\">
' <div class="d2h-code-side-line d2h-ins d2h-change">\n' + <div class=\\"d2h-code-side-line d2h-ins d2h-change\\">
' <span class="d2h-code-line-prefix">+</span>\n' + <span class=\\"d2h-code-line-prefix\\">+</span>
' <span class="d2h-code-line-ctn"><ins>test1r</ins></span>\n' + <span class=\\"d2h-code-line-ctn\\"><ins>test1r</ins></span>
" </div>\n" + </div>
" </td>\n" + </td>
"</tr>\n" + </tr>
" </tbody>\n" + </tbody>
" </table>\n" + </table>
" </div>\n" + </div>
" </div>\n" + </div>
" </div>\n" + </div>
"</div>\n" + </div>
"</div>"; </div>"
`);
expect(html).toEqual(expected);
}); });
it("should work for files without blocks", () => { it("should work for files without blocks", () => {
const exampleJson: DiffFile[] = [ const exampleJson: DiffFile[] = [
@ -365,46 +358,45 @@ describe("SideBySideRenderer", () => {
const hoganUtils = new HoganJsUtils({}); const hoganUtils = new HoganJsUtils({});
const sideBySideRenderer = new SideBySideRenderer(hoganUtils, {}); const sideBySideRenderer = new SideBySideRenderer(hoganUtils, {});
const html = sideBySideRenderer.render(exampleJson); const html = sideBySideRenderer.render(exampleJson);
const expected = expect(html).toMatchInlineSnapshot(`
'<div class="d2h-wrapper">\n' + "<div class=\\"d2h-wrapper\\">
' <div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">\n' + <div id=\\"d2h-675094\\" class=\\"d2h-file-wrapper\\" data-lang=\\"js\\">
' <div class="d2h-file-header">\n' + <div class=\\"d2h-file-header\\">
' <span class="d2h-file-name-wrapper">\n' + <span class=\\"d2h-file-name-wrapper\\">
' <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' + <svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
' <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' + <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
' </svg> <span class="d2h-file-name">sample</span>\n' + </svg> <span class=\\"d2h-file-name\\">sample</span>
' <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' + <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
" </div>\n" + </div>
' <div class="d2h-files-diff">\n' + <div class=\\"d2h-files-diff\\">
' <div class="d2h-file-side-diff">\n' + <div class=\\"d2h-file-side-diff\\">
' <div class="d2h-code-wrapper">\n' + <div class=\\"d2h-code-wrapper\\">
' <table class="d2h-diff-table">\n' + <table class=\\"d2h-diff-table\\">
' <tbody class="d2h-diff-tbody">\n' + <tbody class=\\"d2h-diff-tbody\\">
" <tr>\n" + <tr>
' <td class="d2h-info">\n' + <td class=\\"d2h-info\\">
' <div class="d2h-code-side-line d2h-info">\n' + <div class=\\"d2h-code-side-line d2h-info\\">
" File without changes\n" + File without changes
" </div>\n" + </div>
" </td>\n" + </td>
"</tr>\n" + </tr>
" </tbody>\n" + </tbody>
" </table>\n" + </table>
" </div>\n" + </div>
" </div>\n" + </div>
' <div class="d2h-file-side-diff">\n' + <div class=\\"d2h-file-side-diff\\">
' <div class="d2h-code-wrapper">\n' + <div class=\\"d2h-code-wrapper\\">
' <table class="d2h-diff-table">\n' + <table class=\\"d2h-diff-table\\">
' <tbody class="d2h-diff-tbody">\n' + <tbody class=\\"d2h-diff-tbody\\">
" \n" +
" </tbody>\n" + </tbody>
" </table>\n" + </table>
" </div>\n" + </div>
" </div>\n" + </div>
" </div>\n" + </div>
"</div>\n" + </div>
"</div>"; </div>"
`);
expect(html).toEqual(expected);
}); });
}); });
@ -431,34 +423,33 @@ describe("SideBySideRenderer", () => {
const hoganUtils = new HoganJsUtils({}); const hoganUtils = new HoganJsUtils({});
const sideBySideRenderer = new SideBySideRenderer(hoganUtils, { matching: LineMatchingType.LINES }); const sideBySideRenderer = new SideBySideRenderer(hoganUtils, { matching: LineMatchingType.LINES });
const html = sideBySideRenderer.processChangedLines(false, oldLines, newLines); const html = sideBySideRenderer.processChangedLines(false, oldLines, newLines);
const expected = {
left:
"<tr>\n" +
' <td class="d2h-code-side-linenumber d2h-del d2h-change">\n' +
" 1\n" +
" </td>\n" +
' <td class="d2h-del d2h-change">\n' +
' <div class="d2h-code-side-line d2h-del d2h-change">\n' +
' <span class="d2h-code-line-prefix">-</span>\n' +
' <span class="d2h-code-line-ctn"><del>test</del></span>\n' +
" </div>\n" +
" </td>\n" +
"</tr>",
right:
"<tr>\n" +
' <td class="d2h-code-side-linenumber d2h-ins d2h-change">\n' +
" 1\n" +
" </td>\n" +
' <td class="d2h-ins d2h-change">\n' +
' <div class="d2h-code-side-line d2h-ins d2h-change">\n' +
' <span class="d2h-code-line-prefix">+</span>\n' +
' <span class="d2h-code-line-ctn"><ins>test1r</ins></span>\n' +
" </div>\n" +
" </td>\n" +
"</tr>"
};
expect(html).toEqual(expected); expect(html).toMatchInlineSnapshot(`
Object {
"left": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-del d2h-change\\">
1
</td>
<td class=\\"d2h-del d2h-change\\">
<div class=\\"d2h-code-side-line d2h-del d2h-change\\">
<span class=\\"d2h-code-line-prefix\\">-</span>
<span class=\\"d2h-code-line-ctn\\"><del>test</del></span>
</div>
</td>
</tr>",
"right": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-ins d2h-change\\">
1
</td>
<td class=\\"d2h-ins d2h-change\\">
<div class=\\"d2h-code-side-line d2h-ins d2h-change\\">
<span class=\\"d2h-code-line-prefix\\">+</span>
<span class=\\"d2h-code-line-ctn\\"><ins>test1r</ins></span>
</div>
</td>
</tr>",
}
`);
}); });
}); });
}); });