Pass config to file list renderer
This commit is contained in:
Jordan Welch
parent
669ee2bff8
commit
9f8d6bd4ca
2 changed files with 165 additions and 2 deletions
|
|
@ -1260,7 +1260,7 @@ describe('Diff2Html', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('with auto colorScheme', () => {
|
describe('with auto colorScheme', () => {
|
||||||
it('should return a html diff with dark mode', () => {
|
it('should return a html diff with auto color scheme', () => {
|
||||||
const result = html(diffExample1, {
|
const result = html(diffExample1, {
|
||||||
drawFileList: false,
|
drawFileList: false,
|
||||||
colorScheme: ColorSchemeType.AUTO,
|
colorScheme: ColorSchemeType.AUTO,
|
||||||
|
|
@ -1319,6 +1319,86 @@ describe('Diff2Html', () => {
|
||||||
</div>"
|
</div>"
|
||||||
`);
|
`);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should include auto mode on file list', () => {
|
||||||
|
const result = html(diffExample1, {
|
||||||
|
drawFileList: true,
|
||||||
|
colorScheme: ColorSchemeType.AUTO,
|
||||||
|
});
|
||||||
|
expect(result).toMatchInlineSnapshot(`
|
||||||
|
"<div class="d2h-file-list-wrapper d2h-auto-color-scheme">
|
||||||
|
<div class="d2h-file-list-header">
|
||||||
|
<span class="d2h-file-list-title">Files changed (1)</span>
|
||||||
|
<a class="d2h-file-switch d2h-hide">hide</a>
|
||||||
|
<a class="d2h-file-switch d2h-show">show</a>
|
||||||
|
</div>
|
||||||
|
<ol class="d2h-file-list">
|
||||||
|
<li class="d2h-file-list-line">
|
||||||
|
<span class="d2h-file-name-wrapper">
|
||||||
|
<svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"
|
||||||
|
viewBox="0 0 14 16" width="14">
|
||||||
|
<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>
|
||||||
|
</svg> <a href="#d2h-675094" class="d2h-file-name">sample</a>
|
||||||
|
<span class="d2h-file-stats">
|
||||||
|
<span class="d2h-lines-added">+1</span>
|
||||||
|
<span class="d2h-lines-deleted">-1</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div><div class="d2h-wrapper d2h-auto-color-scheme">
|
||||||
|
<div id="d2h-675094" class="d2h-file-wrapper" data-lang="">
|
||||||
|
<div class="d2h-file-header">
|
||||||
|
<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">
|
||||||
|
<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>
|
||||||
|
<span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>
|
||||||
|
<label class="d2h-file-collapse">
|
||||||
|
<input class="d2h-file-collapse-input" type="checkbox" name="viewed" value="viewed">
|
||||||
|
Viewed
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="d2h-file-diff">
|
||||||
|
<div class="d2h-code-wrapper">
|
||||||
|
<table class="d2h-diff-table">
|
||||||
|
<tbody class="d2h-diff-tbody">
|
||||||
|
<tr>
|
||||||
|
<td class="d2h-code-linenumber d2h-info"></td>
|
||||||
|
<td class="d2h-info">
|
||||||
|
<div class="d2h-code-line">@@ -1 +1 @@</div>
|
||||||
|
</td>
|
||||||
|
</tr><tr>
|
||||||
|
<td class="d2h-code-linenumber d2h-del d2h-change">
|
||||||
|
<div class="line-num1">1</div>
|
||||||
|
<div class="line-num2"></div>
|
||||||
|
</td>
|
||||||
|
<td class="d2h-del d2h-change">
|
||||||
|
<div class="d2h-code-line">
|
||||||
|
<span class="d2h-code-line-prefix">-</span>
|
||||||
|
<span class="d2h-code-line-ctn"><del>test</del></span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr><tr>
|
||||||
|
<td class="d2h-code-linenumber d2h-ins d2h-change">
|
||||||
|
<div class="line-num1"></div>
|
||||||
|
<div class="line-num2">1</div>
|
||||||
|
</td>
|
||||||
|
<td class="d2h-ins d2h-change">
|
||||||
|
<div class="d2h-code-line">
|
||||||
|
<span class="d2h-code-line-prefix">+</span>
|
||||||
|
<span class="d2h-code-line-ctn"><ins>test1</ins></span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>"
|
||||||
|
`);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('with dark colorScheme', () => {
|
describe('with dark colorScheme', () => {
|
||||||
|
|
@ -1381,6 +1461,86 @@ describe('Diff2Html', () => {
|
||||||
</div>"
|
</div>"
|
||||||
`);
|
`);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should include dark mode on file list', () => {
|
||||||
|
const result = html(diffExample1, {
|
||||||
|
drawFileList: true,
|
||||||
|
colorScheme: ColorSchemeType.DARK,
|
||||||
|
});
|
||||||
|
expect(result).toMatchInlineSnapshot(`
|
||||||
|
"<div class="d2h-file-list-wrapper d2h-dark-color-scheme">
|
||||||
|
<div class="d2h-file-list-header">
|
||||||
|
<span class="d2h-file-list-title">Files changed (1)</span>
|
||||||
|
<a class="d2h-file-switch d2h-hide">hide</a>
|
||||||
|
<a class="d2h-file-switch d2h-show">show</a>
|
||||||
|
</div>
|
||||||
|
<ol class="d2h-file-list">
|
||||||
|
<li class="d2h-file-list-line">
|
||||||
|
<span class="d2h-file-name-wrapper">
|
||||||
|
<svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"
|
||||||
|
viewBox="0 0 14 16" width="14">
|
||||||
|
<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>
|
||||||
|
</svg> <a href="#d2h-675094" class="d2h-file-name">sample</a>
|
||||||
|
<span class="d2h-file-stats">
|
||||||
|
<span class="d2h-lines-added">+1</span>
|
||||||
|
<span class="d2h-lines-deleted">-1</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div><div class="d2h-wrapper d2h-dark-color-scheme">
|
||||||
|
<div id="d2h-675094" class="d2h-file-wrapper" data-lang="">
|
||||||
|
<div class="d2h-file-header">
|
||||||
|
<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">
|
||||||
|
<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>
|
||||||
|
<span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>
|
||||||
|
<label class="d2h-file-collapse">
|
||||||
|
<input class="d2h-file-collapse-input" type="checkbox" name="viewed" value="viewed">
|
||||||
|
Viewed
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="d2h-file-diff">
|
||||||
|
<div class="d2h-code-wrapper">
|
||||||
|
<table class="d2h-diff-table">
|
||||||
|
<tbody class="d2h-diff-tbody">
|
||||||
|
<tr>
|
||||||
|
<td class="d2h-code-linenumber d2h-info"></td>
|
||||||
|
<td class="d2h-info">
|
||||||
|
<div class="d2h-code-line">@@ -1 +1 @@</div>
|
||||||
|
</td>
|
||||||
|
</tr><tr>
|
||||||
|
<td class="d2h-code-linenumber d2h-del d2h-change">
|
||||||
|
<div class="line-num1">1</div>
|
||||||
|
<div class="line-num2"></div>
|
||||||
|
</td>
|
||||||
|
<td class="d2h-del d2h-change">
|
||||||
|
<div class="d2h-code-line">
|
||||||
|
<span class="d2h-code-line-prefix">-</span>
|
||||||
|
<span class="d2h-code-line-ctn"><del>test</del></span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr><tr>
|
||||||
|
<td class="d2h-code-linenumber d2h-ins d2h-change">
|
||||||
|
<div class="line-num1"></div>
|
||||||
|
<div class="line-num2">1</div>
|
||||||
|
</td>
|
||||||
|
<td class="d2h-ins d2h-change">
|
||||||
|
<div class="d2h-code-line">
|
||||||
|
<span class="d2h-code-line-prefix">+</span>
|
||||||
|
<span class="d2h-code-line-ctn"><ins>test1</ins></span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>"
|
||||||
|
`);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,10 @@ export function html(diffInput: string | DiffFile[], configuration: Diff2HtmlCon
|
||||||
|
|
||||||
const hoganUtils = new HoganJsUtils(config);
|
const hoganUtils = new HoganJsUtils(config);
|
||||||
|
|
||||||
const fileList = config.drawFileList ? new FileListRenderer(hoganUtils).render(diffJson) : '';
|
const { colorScheme } = config;
|
||||||
|
const fileListRendererConfig = { colorScheme };
|
||||||
|
|
||||||
|
const fileList = config.drawFileList ? new FileListRenderer(hoganUtils, fileListRendererConfig).render(diffJson) : '';
|
||||||
|
|
||||||
const diffOutput =
|
const diffOutput =
|
||||||
config.outputFormat === 'side-by-side'
|
config.outputFormat === 'side-by-side'
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue