blob: be6b72e28c1cb8ea257f58ba0f261458705b8f03 [file] [log] [blame]
/**
* @license
* Copyright 2023 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import '../../../test/common-test-setup';
import {createDiff, createEmptyDiff} from '../../../test/test-data-generators';
import './gr-diff-element';
import {GrDiffElement} from './gr-diff-element';
import {querySelectorAll} from '../../../utils/dom-util';
import '@polymer/paper-button/paper-button';
import {
DiffContent,
DiffInfo,
DiffPreferencesInfo,
DiffViewMode,
IgnoreWhitespaceType,
} from '../../../api/diff';
import {query, queryAndAssert, waitUntil} from '../../../test/test-utils';
import {waitForEventOnce} from '../../../utils/event-util';
import {ImageInfo} from '../../../types/common';
import {fixture, html, assert} from '@open-wc/testing';
import {createDefaultDiffPrefs} from '../../../constants/constants';
import {DiffModel, diffModelToken} from '../gr-diff-model/gr-diff-model';
import {wrapInProvider} from '../../../models/di-provider-element';
const DEFAULT_PREFS = createDefaultDiffPrefs();
suite('gr-diff-element tests', () => {
let element: GrDiffElement;
let model: DiffModel;
const MINIMAL_PREFS: DiffPreferencesInfo = {
tab_size: 2,
line_length: 80,
font_size: 12,
context: 3,
ignore_whitespace: 'IGNORE_NONE',
};
setup(async () => {
model = new DiffModel(document);
element = (
await fixture(
wrapInProvider(
html`<gr-diff-element></gr-diff-element>`,
diffModelToken,
model
)
)
).querySelector('gr-diff-element')!;
});
suite('rendering', () => {
test('empty diff', async () => {
await element.updateComplete;
assert.lightDom.equal(
element,
/* HTML */ `
<div class="diffContainer sideBySide">
<table id="diffTable">
<colgroup>
<col class="blame gr-diff" />
<col class="gr-diff left" width="48" />
<col class="gr-diff left" />
<col class="gr-diff right" width="48" />
<col class="gr-diff right" />
</colgroup>
</table>
</div>
`
);
});
test('a unified diff lit', async () => {
model.updateState({
diff: createDiff(),
diffPrefs: {...MINIMAL_PREFS},
renderPrefs: {view_mode: DiffViewMode.UNIFIED},
});
await element.updateComplete;
await waitForEventOnce(element, 'render');
assert.lightDom.equal(
element,
/* HTML */ `
<div class="diffContainer unified">
<table id="diffTable">
<colgroup>
<col class="blame gr-diff" />
<col class="gr-diff left" width="48" />
<col class="gr-diff right" width="48" />
<col class="gr-diff right" />
</colgroup>
<tbody class="both gr-diff section">
<tr
aria-labelledby="left-button-LOST right-button-LOST right-content-LOST"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="LOST"></td>
<td class="gr-diff left lineNum" data-value="LOST"></td>
<td class="gr-diff lineNum right" data-value="LOST"></td>
<td
class="both content gr-diff lost no-intraline-info right"
></td>
</tr>
</tbody>
<tbody class="both gr-diff section">
<tr
aria-labelledby="left-button-FILE right-button-FILE right-content-FILE"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="FILE"></td>
<td class="gr-diff left lineNum" data-value="FILE">
<button
aria-label="Add file comment"
class="gr-diff left lineNumButton"
data-value="FILE"
id="left-button-FILE"
tabindex="-1"
>
FILE
</button>
</td>
<td class="gr-diff lineNum right" data-value="FILE">
<button
aria-label="Add file comment"
class="gr-diff lineNumButton right"
data-value="FILE"
id="right-button-FILE"
tabindex="-1"
>
FILE
</button>
</td>
<td
class="both content file gr-diff no-intraline-info right"
></td>
</tr>
</tbody>
<tbody class="both gr-diff section">
<tr
aria-labelledby="left-button-1 right-button-1 right-content-1"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="1"></td>
<td class="gr-diff left lineNum" data-value="1">
<button
aria-label="1 unmodified"
class="gr-diff left lineNumButton"
data-value="1"
id="left-button-1"
tabindex="-1"
>
1
</button>
</td>
<td class="gr-diff lineNum right" data-value="1">
<button
aria-label="1 unmodified"
class="gr-diff lineNumButton right"
data-value="1"
id="right-button-1"
tabindex="-1"
>
1
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-1"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-2 right-button-2 right-content-2"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="2"></td>
<td class="gr-diff left lineNum" data-value="2">
<button
aria-label="2 unmodified"
class="gr-diff left lineNumButton"
data-value="2"
id="left-button-2"
tabindex="-1"
>
2
</button>
</td>
<td class="gr-diff lineNum right" data-value="2">
<button
aria-label="2 unmodified"
class="gr-diff lineNumButton right"
data-value="2"
id="right-button-2"
tabindex="-1"
>
2
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-2"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-3 right-button-3 right-content-3"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="3"></td>
<td class="gr-diff left lineNum" data-value="3">
<button
aria-label="3 unmodified"
class="gr-diff left lineNumButton"
data-value="3"
id="left-button-3"
tabindex="-1"
>
3
</button>
</td>
<td class="gr-diff lineNum right" data-value="3">
<button
aria-label="3 unmodified"
class="gr-diff lineNumButton right"
data-value="3"
id="right-button-3"
tabindex="-1"
>
3
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-3"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-4 right-button-4 right-content-4"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="4"></td>
<td class="gr-diff left lineNum" data-value="4">
<button
aria-label="4 unmodified"
class="gr-diff left lineNumButton"
data-value="4"
id="left-button-4"
tabindex="-1"
>
4
</button>
</td>
<td class="gr-diff lineNum right" data-value="4">
<button
aria-label="4 unmodified"
class="gr-diff lineNumButton right"
data-value="4"
id="right-button-4"
tabindex="-1"
>
4
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-4"
></div>
</td>
</tr>
</tbody>
<tbody class="delta gr-diff section total">
<tr
aria-labelledby="right-button-5 right-content-5"
class="add diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="5">
<button
aria-label="5 added"
class="gr-diff lineNumButton right"
data-value="5"
id="right-button-5"
tabindex="-1"
>
5
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-5"
></div>
</td>
</tr>
<tr
aria-labelledby="right-button-6 right-content-6"
class="add diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="6">
<button
aria-label="6 added"
class="gr-diff lineNumButton right"
data-value="6"
id="right-button-6"
tabindex="-1"
>
6
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-6"
></div>
</td>
</tr>
<tr
aria-labelledby="right-button-7 right-content-7"
class="add diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="7">
<button
aria-label="7 added"
class="gr-diff lineNumButton right"
data-value="7"
id="right-button-7"
tabindex="-1"
>
7
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-7"
></div>
</td>
</tr>
</tbody>
<tbody class="both gr-diff section">
<tr
aria-labelledby="left-button-5 right-button-8 right-content-8"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="5"></td>
<td class="gr-diff left lineNum" data-value="5">
<button
aria-label="5 unmodified"
class="gr-diff left lineNumButton"
data-value="5"
id="left-button-5"
tabindex="-1"
>
5
</button>
</td>
<td class="gr-diff lineNum right" data-value="8">
<button
aria-label="8 unmodified"
class="gr-diff lineNumButton right"
data-value="8"
id="right-button-8"
tabindex="-1"
>
8
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-8"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-6 right-button-9 right-content-9"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="6"></td>
<td class="gr-diff left lineNum" data-value="6">
<button
aria-label="6 unmodified"
class="gr-diff left lineNumButton"
data-value="6"
id="left-button-6"
tabindex="-1"
>
6
</button>
</td>
<td class="gr-diff lineNum right" data-value="9">
<button
aria-label="9 unmodified"
class="gr-diff lineNumButton right"
data-value="9"
id="right-button-9"
tabindex="-1"
>
9
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-9"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-7 right-button-10 right-content-10"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="7"></td>
<td class="gr-diff left lineNum" data-value="7">
<button
aria-label="7 unmodified"
class="gr-diff left lineNumButton"
data-value="7"
id="left-button-7"
tabindex="-1"
>
7
</button>
</td>
<td class="gr-diff lineNum right" data-value="10">
<button
aria-label="10 unmodified"
class="gr-diff lineNumButton right"
data-value="10"
id="right-button-10"
tabindex="-1"
>
10
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-10"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-8 right-button-11 right-content-11"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="8"></td>
<td class="gr-diff left lineNum" data-value="8">
<button
aria-label="8 unmodified"
class="gr-diff left lineNumButton"
data-value="8"
id="left-button-8"
tabindex="-1"
>
8
</button>
</td>
<td class="gr-diff lineNum right" data-value="11">
<button
aria-label="11 unmodified"
class="gr-diff lineNumButton right"
data-value="11"
id="right-button-11"
tabindex="-1"
>
11
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-11"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-9 right-button-12 right-content-12"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="9"></td>
<td class="gr-diff left lineNum" data-value="9">
<button
aria-label="9 unmodified"
class="gr-diff left lineNumButton"
data-value="9"
id="left-button-9"
tabindex="-1"
>
9
</button>
</td>
<td class="gr-diff lineNum right" data-value="12">
<button
aria-label="12 unmodified"
class="gr-diff lineNumButton right"
data-value="12"
id="right-button-12"
tabindex="-1"
>
12
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-12"
></div>
</td>
</tr>
</tbody>
<tbody class="delta gr-diff section total">
<tr
aria-labelledby="left-button-10 left-content-10"
class="diff-row gr-diff remove unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="10"></td>
<td class="gr-diff left lineNum" data-value="10">
<button
aria-label="10 removed"
class="gr-diff left lineNumButton"
data-value="10"
id="left-button-10"
tabindex="-1"
>
10
</button>
</td>
<td class="blankLineNum gr-diff right"></td>
<td class="content gr-diff left no-intraline-info remove">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-10"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-11 left-content-11"
class="diff-row gr-diff remove unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="11"></td>
<td class="gr-diff left lineNum" data-value="11">
<button
aria-label="11 removed"
class="gr-diff left lineNumButton"
data-value="11"
id="left-button-11"
tabindex="-1"
>
11
</button>
</td>
<td class="blankLineNum gr-diff right"></td>
<td class="content gr-diff left no-intraline-info remove">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-11"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-12 left-content-12"
class="diff-row gr-diff remove unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="12"></td>
<td class="gr-diff left lineNum" data-value="12">
<button
aria-label="12 removed"
class="gr-diff left lineNumButton"
data-value="12"
id="left-button-12"
tabindex="-1"
>
12
</button>
</td>
<td class="blankLineNum gr-diff right"></td>
<td class="content gr-diff left no-intraline-info remove">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-12"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-13 left-content-13"
class="diff-row gr-diff remove unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="13"></td>
<td class="gr-diff left lineNum" data-value="13">
<button
aria-label="13 removed"
class="gr-diff left lineNumButton"
data-value="13"
id="left-button-13"
tabindex="-1"
>
13
</button>
</td>
<td class="blankLineNum gr-diff right"></td>
<td class="content gr-diff left no-intraline-info remove">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-13"
></div>
</td>
</tr>
</tbody>
<tbody class="delta gr-diff ignoredWhitespaceOnly section">
<tr
aria-labelledby="right-button-13 right-content-13"
class="add diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="13">
<button
aria-label="13 added"
class="gr-diff lineNumButton right"
data-value="13"
id="right-button-13"
tabindex="-1"
>
13
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-13"
></div>
</td>
</tr>
<tr
aria-labelledby="right-button-14 right-content-14"
class="add diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="14">
<button
aria-label="14 added"
class="gr-diff lineNumButton right"
data-value="14"
id="right-button-14"
tabindex="-1"
>
14
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-14"
></div>
</td>
</tr>
</tbody>
<tbody class="delta gr-diff section">
<tr
aria-labelledby="left-button-16 left-content-16"
class="diff-row gr-diff remove unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="16"></td>
<td class="gr-diff left lineNum" data-value="16">
<button
aria-label="16 removed"
class="gr-diff left lineNumButton"
data-value="16"
id="left-button-16"
tabindex="-1"
>
16
</button>
</td>
<td class="blankLineNum gr-diff right"></td>
<td class="content gr-diff left remove">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-16"
></div>
</td>
</tr>
<tr
aria-labelledby="right-button-15 right-content-15"
class="add diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="15">
<button
aria-label="15 added"
class="gr-diff lineNumButton right"
data-value="15"
id="right-button-15"
tabindex="-1"
>
15
</button>
</td>
<td class="add content gr-diff right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-15"
></div>
</td>
</tr>
</tbody>
<tbody class="both gr-diff section">
<tr
aria-labelledby="left-button-17 right-button-16 right-content-16"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="17"></td>
<td class="gr-diff left lineNum" data-value="17">
<button
aria-label="17 unmodified"
class="gr-diff left lineNumButton"
data-value="17"
id="left-button-17"
tabindex="-1"
>
17
</button>
</td>
<td class="gr-diff lineNum right" data-value="16">
<button
aria-label="16 unmodified"
class="gr-diff lineNumButton right"
data-value="16"
id="right-button-16"
tabindex="-1"
>
16
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-16"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-18 right-button-17 right-content-17"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="18"></td>
<td class="gr-diff left lineNum" data-value="18">
<button
aria-label="18 unmodified"
class="gr-diff left lineNumButton"
data-value="18"
id="left-button-18"
tabindex="-1"
>
18
</button>
</td>
<td class="gr-diff lineNum right" data-value="17">
<button
aria-label="17 unmodified"
class="gr-diff lineNumButton right"
data-value="17"
id="right-button-17"
tabindex="-1"
>
17
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-17"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-19 right-button-18 right-content-18"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="19"></td>
<td class="gr-diff left lineNum" data-value="19">
<button
aria-label="19 unmodified"
class="gr-diff left lineNumButton"
data-value="19"
id="left-button-19"
tabindex="-1"
>
19
</button>
</td>
<td class="gr-diff lineNum right" data-value="18">
<button
aria-label="18 unmodified"
class="gr-diff lineNumButton right"
data-value="18"
id="right-button-18"
tabindex="-1"
>
18
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-18"
></div>
</td>
</tr>
</tbody>
<tbody class="contextControl gr-diff section">
<tr class="above contextBackground gr-diff unified">
<td class="blame gr-diff" data-line-number="0"></td>
<td class="contextLineNum gr-diff"></td>
<td class="contextLineNum gr-diff"></td>
<td class="gr-diff"></td>
</tr>
<tr class="dividerRow gr-diff show-both">
<td class="blame gr-diff" data-line-number="0"></td>
<td class="dividerCell gr-diff" colspan="3">
<gr-context-controls class="gr-diff" showconfig="both">
</gr-context-controls>
</td>
</tr>
<tr class="below contextBackground gr-diff unified">
<td class="blame gr-diff" data-line-number="0"></td>
<td class="contextLineNum gr-diff"></td>
<td class="contextLineNum gr-diff"></td>
<td class="gr-diff"></td>
</tr>
</tbody>
<tbody class="both gr-diff section">
<tr
aria-labelledby="left-button-38 right-button-37 right-content-37"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="38"></td>
<td class="gr-diff left lineNum" data-value="38">
<button
aria-label="38 unmodified"
class="gr-diff left lineNumButton"
data-value="38"
id="left-button-38"
tabindex="-1"
>
38
</button>
</td>
<td class="gr-diff lineNum right" data-value="37">
<button
aria-label="37 unmodified"
class="gr-diff lineNumButton right"
data-value="37"
id="right-button-37"
tabindex="-1"
>
37
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-37"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-39 right-button-38 right-content-38"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="39"></td>
<td class="gr-diff left lineNum" data-value="39">
<button
aria-label="39 unmodified"
class="gr-diff left lineNumButton"
data-value="39"
id="left-button-39"
tabindex="-1"
>
39
</button>
</td>
<td class="gr-diff lineNum right" data-value="38">
<button
aria-label="38 unmodified"
class="gr-diff lineNumButton right"
data-value="38"
id="right-button-38"
tabindex="-1"
>
38
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-38"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-40 right-button-39 right-content-39"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="40"></td>
<td class="gr-diff left lineNum" data-value="40">
<button
aria-label="40 unmodified"
class="gr-diff left lineNumButton"
data-value="40"
id="left-button-40"
tabindex="-1"
>
40
</button>
</td>
<td class="gr-diff lineNum right" data-value="39">
<button
aria-label="39 unmodified"
class="gr-diff lineNumButton right"
data-value="39"
id="right-button-39"
tabindex="-1"
>
39
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-39"
></div>
</td>
</tr>
</tbody>
<tbody class="delta gr-diff section total">
<tr
aria-labelledby="right-button-40 right-content-40"
class="add diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="40">
<button
aria-label="40 added"
class="gr-diff lineNumButton right"
data-value="40"
id="right-button-40"
tabindex="-1"
>
40
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-40"
></div>
</td>
</tr>
<tr
aria-labelledby="right-button-41 right-content-41"
class="add diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="41">
<button
aria-label="41 added"
class="gr-diff lineNumButton right"
data-value="41"
id="right-button-41"
tabindex="-1"
>
41
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-41"
></div>
</td>
</tr>
<tr
aria-labelledby="right-button-42 right-content-42"
class="add diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="42">
<button
aria-label="42 added"
class="gr-diff lineNumButton right"
data-value="42"
id="right-button-42"
tabindex="-1"
>
42
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-42"
></div>
</td>
</tr>
<tr
aria-labelledby="right-button-43 right-content-43"
class="add diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="43">
<button
aria-label="43 added"
class="gr-diff lineNumButton right"
data-value="43"
id="right-button-43"
tabindex="-1"
>
43
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-43"
></div>
</td>
</tr>
</tbody>
<tbody class="both gr-diff section">
<tr
aria-labelledby="left-button-41 right-button-44 right-content-44"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="41"></td>
<td class="gr-diff left lineNum" data-value="41">
<button
aria-label="41 unmodified"
class="gr-diff left lineNumButton"
data-value="41"
id="left-button-41"
tabindex="-1"
>
41
</button>
</td>
<td class="gr-diff lineNum right" data-value="44">
<button
aria-label="44 unmodified"
class="gr-diff lineNumButton right"
data-value="44"
id="right-button-44"
tabindex="-1"
>
44
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-44"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-42 right-button-45 right-content-45"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="42"></td>
<td class="gr-diff left lineNum" data-value="42">
<button
aria-label="42 unmodified"
class="gr-diff left lineNumButton"
data-value="42"
id="left-button-42"
tabindex="-1"
>
42
</button>
</td>
<td class="gr-diff lineNum right" data-value="45">
<button
aria-label="45 unmodified"
class="gr-diff lineNumButton right"
data-value="45"
id="right-button-45"
tabindex="-1"
>
45
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-45"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-43 right-button-46 right-content-46"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="43"></td>
<td class="gr-diff left lineNum" data-value="43">
<button
aria-label="43 unmodified"
class="gr-diff left lineNumButton"
data-value="43"
id="left-button-43"
tabindex="-1"
>
43
</button>
</td>
<td class="gr-diff lineNum right" data-value="46">
<button
aria-label="46 unmodified"
class="gr-diff lineNumButton right"
data-value="46"
id="right-button-46"
tabindex="-1"
>
46
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-46"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-44 right-button-47 right-content-47"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="44"></td>
<td class="gr-diff left lineNum" data-value="44">
<button
aria-label="44 unmodified"
class="gr-diff left lineNumButton"
data-value="44"
id="left-button-44"
tabindex="-1"
>
44
</button>
</td>
<td class="gr-diff lineNum right" data-value="47">
<button
aria-label="47 unmodified"
class="gr-diff lineNumButton right"
data-value="47"
id="right-button-47"
tabindex="-1"
>
47
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-47"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-45 right-button-48 right-content-48"
class="both diff-row gr-diff unified"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="45"></td>
<td class="gr-diff left lineNum" data-value="45">
<button
aria-label="45 unmodified"
class="gr-diff left lineNumButton"
data-value="45"
id="left-button-45"
tabindex="-1"
>
45
</button>
</td>
<td class="gr-diff lineNum right" data-value="48">
<button
aria-label="48 unmodified"
class="gr-diff lineNumButton right"
data-value="48"
id="right-button-48"
tabindex="-1"
>
48
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-48"
></div>
</td>
</tr>
</tbody>
</table>
</div>
`,
{
ignoreTags: [
'gr-context-controls-section',
'gr-diff-section',
'gr-diff-row',
'gr-diff-text',
'gr-legacy-text',
'slot',
],
}
);
});
test('a normal diff lit', async () => {
model.updateState({
diff: createDiff(),
diffPrefs: {...MINIMAL_PREFS},
renderPrefs: {view_mode: DiffViewMode.SIDE_BY_SIDE},
});
await element.updateComplete;
await waitForEventOnce(element, 'render');
assert.lightDom.equal(
element,
/* HTML */ `
<div class="diffContainer sideBySide">
<table id="diffTable">
<colgroup>
<col class="blame gr-diff" />
<col class="gr-diff left" width="48" />
<col class="gr-diff left" />
<col class="gr-diff right" width="48" />
<col class="gr-diff right" />
</colgroup>
<tbody class="both gr-diff section">
<tr
aria-labelledby="left-button-LOST left-content-LOST right-button-LOST right-content-LOST"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="LOST"></td>
<td class="gr-diff left lineNum" data-value="LOST"></td>
<td
class="both content gr-diff left lost no-intraline-info"
></td>
<td class="gr-diff lineNum right" data-value="LOST"></td>
<td
class="both content gr-diff lost no-intraline-info right"
></td>
</tr>
</tbody>
<tbody class="both gr-diff section">
<tr
aria-labelledby="left-button-FILE left-content-FILE right-button-FILE right-content-FILE"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="FILE"></td>
<td class="gr-diff left lineNum" data-value="FILE">
<button
aria-label="Add file comment"
class="gr-diff left lineNumButton"
data-value="FILE"
id="left-button-FILE"
tabindex="-1"
>
FILE
</button>
</td>
<td
class="both content file gr-diff left no-intraline-info"
></td>
<td class="gr-diff lineNum right" data-value="FILE">
<button
aria-label="Add file comment"
class="gr-diff lineNumButton right"
data-value="FILE"
id="right-button-FILE"
tabindex="-1"
>
FILE
</button>
</td>
<td
class="both content file gr-diff no-intraline-info right"
></td>
</tr>
</tbody>
<tbody class="both gr-diff section">
<tr
aria-labelledby="left-button-1 left-content-1 right-button-1 right-content-1"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="1"></td>
<td class="gr-diff left lineNum" data-value="1">
<button
aria-label="1 unmodified"
class="gr-diff left lineNumButton"
data-value="1"
id="left-button-1"
tabindex="-1"
>
1
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-1"
></div>
</td>
<td class="gr-diff lineNum right" data-value="1">
<button
aria-label="1 unmodified"
class="gr-diff lineNumButton right"
data-value="1"
id="right-button-1"
tabindex="-1"
>
1
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-1"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-2 left-content-2 right-button-2 right-content-2"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="2"></td>
<td class="gr-diff left lineNum" data-value="2">
<button
aria-label="2 unmodified"
class="gr-diff left lineNumButton"
data-value="2"
id="left-button-2"
tabindex="-1"
>
2
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-2"
></div>
</td>
<td class="gr-diff lineNum right" data-value="2">
<button
aria-label="2 unmodified"
class="gr-diff lineNumButton right"
data-value="2"
id="right-button-2"
tabindex="-1"
>
2
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-2"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-3 left-content-3 right-button-3 right-content-3"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="3"></td>
<td class="gr-diff left lineNum" data-value="3">
<button
aria-label="3 unmodified"
class="gr-diff left lineNumButton"
data-value="3"
id="left-button-3"
tabindex="-1"
>
3
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-3"
></div>
</td>
<td class="gr-diff lineNum right" data-value="3">
<button
aria-label="3 unmodified"
class="gr-diff lineNumButton right"
data-value="3"
id="right-button-3"
tabindex="-1"
>
3
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-3"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-4 left-content-4 right-button-4 right-content-4"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="4"></td>
<td class="gr-diff left lineNum" data-value="4">
<button
aria-label="4 unmodified"
class="gr-diff left lineNumButton"
data-value="4"
id="left-button-4"
tabindex="-1"
>
4
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-4"
></div>
</td>
<td class="gr-diff lineNum right" data-value="4">
<button
aria-label="4 unmodified"
class="gr-diff lineNumButton right"
data-value="4"
id="right-button-4"
tabindex="-1"
>
4
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-4"
></div>
</td>
</tr>
</tbody>
<tbody class="delta gr-diff section total">
<tr
aria-labelledby="right-button-5 right-content-5"
class="diff-row gr-diff side-by-side"
left-type="blank"
right-type="add"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="blankLineNum gr-diff left"></td>
<td class="blank gr-diff left no-intraline-info">
<div class="contentText gr-diff" data-side="left"></div>
</td>
<td class="gr-diff lineNum right" data-value="5">
<button
aria-label="5 added"
class="gr-diff lineNumButton right"
data-value="5"
id="right-button-5"
tabindex="-1"
>
5
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-5"
></div>
</td>
</tr>
<tr
aria-labelledby="right-button-6 right-content-6"
class="diff-row gr-diff side-by-side"
left-type="blank"
right-type="add"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="blankLineNum gr-diff left"></td>
<td class="blank gr-diff left no-intraline-info">
<div class="contentText gr-diff" data-side="left"></div>
</td>
<td class="gr-diff lineNum right" data-value="6">
<button
aria-label="6 added"
class="gr-diff lineNumButton right"
data-value="6"
id="right-button-6"
tabindex="-1"
>
6
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-6"
></div>
</td>
</tr>
<tr
aria-labelledby="right-button-7 right-content-7"
class="diff-row gr-diff side-by-side"
left-type="blank"
right-type="add"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="blankLineNum gr-diff left"></td>
<td class="blank gr-diff left no-intraline-info">
<div class="contentText gr-diff" data-side="left"></div>
</td>
<td class="gr-diff lineNum right" data-value="7">
<button
aria-label="7 added"
class="gr-diff lineNumButton right"
data-value="7"
id="right-button-7"
tabindex="-1"
>
7
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-7"
></div>
</td>
</tr>
</tbody>
<tbody class="both gr-diff section">
<tr
aria-labelledby="left-button-5 left-content-5 right-button-8 right-content-8"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="5"></td>
<td class="gr-diff left lineNum" data-value="5">
<button
aria-label="5 unmodified"
class="gr-diff left lineNumButton"
data-value="5"
id="left-button-5"
tabindex="-1"
>
5
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-5"
></div>
</td>
<td class="gr-diff lineNum right" data-value="8">
<button
aria-label="8 unmodified"
class="gr-diff lineNumButton right"
data-value="8"
id="right-button-8"
tabindex="-1"
>
8
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-8"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-6 left-content-6 right-button-9 right-content-9"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="6"></td>
<td class="gr-diff left lineNum" data-value="6">
<button
aria-label="6 unmodified"
class="gr-diff left lineNumButton"
data-value="6"
id="left-button-6"
tabindex="-1"
>
6
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-6"
></div>
</td>
<td class="gr-diff lineNum right" data-value="9">
<button
aria-label="9 unmodified"
class="gr-diff lineNumButton right"
data-value="9"
id="right-button-9"
tabindex="-1"
>
9
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-9"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-7 left-content-7 right-button-10 right-content-10"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="7"></td>
<td class="gr-diff left lineNum" data-value="7">
<button
aria-label="7 unmodified"
class="gr-diff left lineNumButton"
data-value="7"
id="left-button-7"
tabindex="-1"
>
7
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-7"
></div>
</td>
<td class="gr-diff lineNum right" data-value="10">
<button
aria-label="10 unmodified"
class="gr-diff lineNumButton right"
data-value="10"
id="right-button-10"
tabindex="-1"
>
10
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-10"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-8 left-content-8 right-button-11 right-content-11"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="8"></td>
<td class="gr-diff left lineNum" data-value="8">
<button
aria-label="8 unmodified"
class="gr-diff left lineNumButton"
data-value="8"
id="left-button-8"
tabindex="-1"
>
8
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-8"
></div>
</td>
<td class="gr-diff lineNum right" data-value="11">
<button
aria-label="11 unmodified"
class="gr-diff lineNumButton right"
data-value="11"
id="right-button-11"
tabindex="-1"
>
11
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-11"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-9 left-content-9 right-button-12 right-content-12"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="9"></td>
<td class="gr-diff left lineNum" data-value="9">
<button
aria-label="9 unmodified"
class="gr-diff left lineNumButton"
data-value="9"
id="left-button-9"
tabindex="-1"
>
9
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-9"
></div>
</td>
<td class="gr-diff lineNum right" data-value="12">
<button
aria-label="12 unmodified"
class="gr-diff lineNumButton right"
data-value="12"
id="right-button-12"
tabindex="-1"
>
12
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-12"
></div>
</td>
</tr>
</tbody>
<tbody class="delta gr-diff section total">
<tr
aria-labelledby="left-button-10 left-content-10"
class="diff-row gr-diff side-by-side"
left-type="remove"
right-type="blank"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="10"></td>
<td class="gr-diff left lineNum" data-value="10">
<button
aria-label="10 removed"
class="gr-diff left lineNumButton"
data-value="10"
id="left-button-10"
tabindex="-1"
>
10
</button>
</td>
<td class="content gr-diff left no-intraline-info remove">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-10"
></div>
</td>
<td class="blankLineNum gr-diff right"></td>
<td class="blank gr-diff no-intraline-info right">
<div class="contentText gr-diff" data-side="right"></div>
</td>
</tr>
<tr
aria-labelledby="left-button-11 left-content-11"
class="diff-row gr-diff side-by-side"
left-type="remove"
right-type="blank"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="11"></td>
<td class="gr-diff left lineNum" data-value="11">
<button
aria-label="11 removed"
class="gr-diff left lineNumButton"
data-value="11"
id="left-button-11"
tabindex="-1"
>
11
</button>
</td>
<td class="content gr-diff left no-intraline-info remove">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-11"
></div>
</td>
<td class="blankLineNum gr-diff right"></td>
<td class="blank gr-diff no-intraline-info right">
<div class="contentText gr-diff" data-side="right"></div>
</td>
</tr>
<tr
aria-labelledby="left-button-12 left-content-12"
class="diff-row gr-diff side-by-side"
left-type="remove"
right-type="blank"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="12"></td>
<td class="gr-diff left lineNum" data-value="12">
<button
aria-label="12 removed"
class="gr-diff left lineNumButton"
data-value="12"
id="left-button-12"
tabindex="-1"
>
12
</button>
</td>
<td class="content gr-diff left no-intraline-info remove">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-12"
></div>
</td>
<td class="blankLineNum gr-diff right"></td>
<td class="blank gr-diff no-intraline-info right">
<div class="contentText gr-diff" data-side="right"></div>
</td>
</tr>
<tr
aria-labelledby="left-button-13 left-content-13"
class="diff-row gr-diff side-by-side"
left-type="remove"
right-type="blank"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="13"></td>
<td class="gr-diff left lineNum" data-value="13">
<button
aria-label="13 removed"
class="gr-diff left lineNumButton"
data-value="13"
id="left-button-13"
tabindex="-1"
>
13
</button>
</td>
<td class="content gr-diff left no-intraline-info remove">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-13"
></div>
</td>
<td class="blankLineNum gr-diff right"></td>
<td class="blank gr-diff no-intraline-info right">
<div class="contentText gr-diff" data-side="right"></div>
</td>
</tr>
</tbody>
<tbody class="delta gr-diff ignoredWhitespaceOnly section">
<tr
aria-labelledby="left-button-14 left-content-14 right-button-13 right-content-13"
class="diff-row gr-diff side-by-side"
left-type="remove"
right-type="add"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="14"></td>
<td class="gr-diff left lineNum" data-value="14">
<button
aria-label="14 removed"
class="gr-diff left lineNumButton"
data-value="14"
id="left-button-14"
tabindex="-1"
>
14
</button>
</td>
<td class="content gr-diff left no-intraline-info remove">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-14"
></div>
</td>
<td class="gr-diff lineNum right" data-value="13">
<button
aria-label="13 added"
class="gr-diff lineNumButton right"
data-value="13"
id="right-button-13"
tabindex="-1"
>
13
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-13"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-15 left-content-15 right-button-14 right-content-14"
class="diff-row gr-diff side-by-side"
left-type="remove"
right-type="add"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="15"></td>
<td class="gr-diff left lineNum" data-value="15">
<button
aria-label="15 removed"
class="gr-diff left lineNumButton"
data-value="15"
id="left-button-15"
tabindex="-1"
>
15
</button>
</td>
<td class="content gr-diff left no-intraline-info remove">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-15"
></div>
</td>
<td class="gr-diff lineNum right" data-value="14">
<button
aria-label="14 added"
class="gr-diff lineNumButton right"
data-value="14"
id="right-button-14"
tabindex="-1"
>
14
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-14"
></div>
</td>
</tr>
</tbody>
<tbody class="delta gr-diff section">
<tr
aria-labelledby="left-button-16 left-content-16 right-button-15 right-content-15"
class="diff-row gr-diff side-by-side"
left-type="remove"
right-type="add"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="16"></td>
<td class="gr-diff left lineNum" data-value="16">
<button
aria-label="16 removed"
class="gr-diff left lineNumButton"
data-value="16"
id="left-button-16"
tabindex="-1"
>
16
</button>
</td>
<td class="content gr-diff left remove">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-16"
></div>
</td>
<td class="gr-diff lineNum right" data-value="15">
<button
aria-label="15 added"
class="gr-diff lineNumButton right"
data-value="15"
id="right-button-15"
tabindex="-1"
>
15
</button>
</td>
<td class="add content gr-diff right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-15"
></div>
</td>
</tr>
</tbody>
<tbody class="both gr-diff section">
<tr
aria-labelledby="left-button-17 left-content-17 right-button-16 right-content-16"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="17"></td>
<td class="gr-diff left lineNum" data-value="17">
<button
aria-label="17 unmodified"
class="gr-diff left lineNumButton"
data-value="17"
id="left-button-17"
tabindex="-1"
>
17
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-17"
></div>
</td>
<td class="gr-diff lineNum right" data-value="16">
<button
aria-label="16 unmodified"
class="gr-diff lineNumButton right"
data-value="16"
id="right-button-16"
tabindex="-1"
>
16
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-16"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-18 left-content-18 right-button-17 right-content-17"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="18"></td>
<td class="gr-diff left lineNum" data-value="18">
<button
aria-label="18 unmodified"
class="gr-diff left lineNumButton"
data-value="18"
id="left-button-18"
tabindex="-1"
>
18
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-18"
></div>
</td>
<td class="gr-diff lineNum right" data-value="17">
<button
aria-label="17 unmodified"
class="gr-diff lineNumButton right"
data-value="17"
id="right-button-17"
tabindex="-1"
>
17
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-17"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-19 left-content-19 right-button-18 right-content-18"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="19"></td>
<td class="gr-diff left lineNum" data-value="19">
<button
aria-label="19 unmodified"
class="gr-diff left lineNumButton"
data-value="19"
id="left-button-19"
tabindex="-1"
>
19
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-19"
></div>
</td>
<td class="gr-diff lineNum right" data-value="18">
<button
aria-label="18 unmodified"
class="gr-diff lineNumButton right"
data-value="18"
id="right-button-18"
tabindex="-1"
>
18
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-18"
></div>
</td>
</tr>
</tbody>
<tbody class="contextControl gr-diff section">
<tr
class="above contextBackground gr-diff side-by-side"
left-type="contextControl"
right-type="contextControl"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="contextLineNum gr-diff"></td>
<td class="gr-diff"></td>
<td class="contextLineNum gr-diff"></td>
<td class="gr-diff"></td>
</tr>
<tr class="dividerRow gr-diff show-both">
<td class="blame gr-diff" data-line-number="0"></td>
<td class="dividerCell gr-diff" colspan="4">
<gr-context-controls
class="gr-diff"
showconfig="both"
></gr-context-controls>
</td>
</tr>
<tr
class="below contextBackground gr-diff side-by-side"
left-type="contextControl"
right-type="contextControl"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="contextLineNum gr-diff"></td>
<td class="gr-diff"></td>
<td class="contextLineNum gr-diff"></td>
<td class="gr-diff"></td>
</tr>
</tbody>
<tbody class="both gr-diff section">
<tr
aria-labelledby="left-button-38 left-content-38 right-button-37 right-content-37"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="38"></td>
<td class="gr-diff left lineNum" data-value="38">
<button
aria-label="38 unmodified"
class="gr-diff left lineNumButton"
data-value="38"
id="left-button-38"
tabindex="-1"
>
38
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-38"
></div>
</td>
<td class="gr-diff lineNum right" data-value="37">
<button
aria-label="37 unmodified"
class="gr-diff lineNumButton right"
data-value="37"
id="right-button-37"
tabindex="-1"
>
37
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-37"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-39 left-content-39 right-button-38 right-content-38"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="39"></td>
<td class="gr-diff left lineNum" data-value="39">
<button
aria-label="39 unmodified"
class="gr-diff left lineNumButton"
data-value="39"
id="left-button-39"
tabindex="-1"
>
39
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-39"
></div>
</td>
<td class="gr-diff lineNum right" data-value="38">
<button
aria-label="38 unmodified"
class="gr-diff lineNumButton right"
data-value="38"
id="right-button-38"
tabindex="-1"
>
38
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-38"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-40 left-content-40 right-button-39 right-content-39"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="40"></td>
<td class="gr-diff left lineNum" data-value="40">
<button
aria-label="40 unmodified"
class="gr-diff left lineNumButton"
data-value="40"
id="left-button-40"
tabindex="-1"
>
40
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-40"
></div>
</td>
<td class="gr-diff lineNum right" data-value="39">
<button
aria-label="39 unmodified"
class="gr-diff lineNumButton right"
data-value="39"
id="right-button-39"
tabindex="-1"
>
39
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-39"
></div>
</td>
</tr>
</tbody>
<tbody class="delta gr-diff section total">
<tr
aria-labelledby="right-button-40 right-content-40"
class="diff-row gr-diff side-by-side"
left-type="blank"
right-type="add"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="blankLineNum gr-diff left"></td>
<td class="blank gr-diff left no-intraline-info">
<div class="contentText gr-diff" data-side="left"></div>
</td>
<td class="gr-diff lineNum right" data-value="40">
<button
aria-label="40 added"
class="gr-diff lineNumButton right"
data-value="40"
id="right-button-40"
tabindex="-1"
>
40
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-40"
></div>
</td>
</tr>
<tr
aria-labelledby="right-button-41 right-content-41"
class="diff-row gr-diff side-by-side"
left-type="blank"
right-type="add"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="blankLineNum gr-diff left"></td>
<td class="blank gr-diff left no-intraline-info">
<div class="contentText gr-diff" data-side="left"></div>
</td>
<td class="gr-diff lineNum right" data-value="41">
<button
aria-label="41 added"
class="gr-diff lineNumButton right"
data-value="41"
id="right-button-41"
tabindex="-1"
>
41
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-41"
></div>
</td>
</tr>
<tr
aria-labelledby="right-button-42 right-content-42"
class="diff-row gr-diff side-by-side"
left-type="blank"
right-type="add"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="blankLineNum gr-diff left"></td>
<td class="blank gr-diff left no-intraline-info">
<div class="contentText gr-diff" data-side="left"></div>
</td>
<td class="gr-diff lineNum right" data-value="42">
<button
aria-label="42 added"
class="gr-diff lineNumButton right"
data-value="42"
id="right-button-42"
tabindex="-1"
>
42
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-42"
></div>
</td>
</tr>
<tr
aria-labelledby="right-button-43 right-content-43"
class="diff-row gr-diff side-by-side"
left-type="blank"
right-type="add"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
<td class="blankLineNum gr-diff left"></td>
<td class="blank gr-diff left no-intraline-info">
<div class="contentText gr-diff" data-side="left"></div>
</td>
<td class="gr-diff lineNum right" data-value="43">
<button
aria-label="43 added"
class="gr-diff lineNumButton right"
data-value="43"
id="right-button-43"
tabindex="-1"
>
43
</button>
</td>
<td class="add content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-43"
></div>
</td>
</tr>
</tbody>
<tbody class="both gr-diff section">
<tr
aria-labelledby="left-button-41 left-content-41 right-button-44 right-content-44"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="41"></td>
<td class="gr-diff left lineNum" data-value="41">
<button
aria-label="41 unmodified"
class="gr-diff left lineNumButton"
data-value="41"
id="left-button-41"
tabindex="-1"
>
41
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-41"
></div>
</td>
<td class="gr-diff lineNum right" data-value="44">
<button
aria-label="44 unmodified"
class="gr-diff lineNumButton right"
data-value="44"
id="right-button-44"
tabindex="-1"
>
44
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-44"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-42 left-content-42 right-button-45 right-content-45"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="42"></td>
<td class="gr-diff left lineNum" data-value="42">
<button
aria-label="42 unmodified"
class="gr-diff left lineNumButton"
data-value="42"
id="left-button-42"
tabindex="-1"
>
42
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-42"
></div>
</td>
<td class="gr-diff lineNum right" data-value="45">
<button
aria-label="45 unmodified"
class="gr-diff lineNumButton right"
data-value="45"
id="right-button-45"
tabindex="-1"
>
45
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-45"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-43 left-content-43 right-button-46 right-content-46"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="43"></td>
<td class="gr-diff left lineNum" data-value="43">
<button
aria-label="43 unmodified"
class="gr-diff left lineNumButton"
data-value="43"
id="left-button-43"
tabindex="-1"
>
43
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-43"
></div>
</td>
<td class="gr-diff lineNum right" data-value="46">
<button
aria-label="46 unmodified"
class="gr-diff lineNumButton right"
data-value="46"
id="right-button-46"
tabindex="-1"
>
46
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-46"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-44 left-content-44 right-button-47 right-content-47"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="44"></td>
<td class="gr-diff left lineNum" data-value="44">
<button
aria-label="44 unmodified"
class="gr-diff left lineNumButton"
data-value="44"
id="left-button-44"
tabindex="-1"
>
44
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-44"
></div>
</td>
<td class="gr-diff lineNum right" data-value="47">
<button
aria-label="47 unmodified"
class="gr-diff lineNumButton right"
data-value="47"
id="right-button-47"
tabindex="-1"
>
47
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-47"
></div>
</td>
</tr>
<tr
aria-labelledby="left-button-45 left-content-45 right-button-48 right-content-48"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="45"></td>
<td class="gr-diff left lineNum" data-value="45">
<button
aria-label="45 unmodified"
class="gr-diff left lineNumButton"
data-value="45"
id="left-button-45"
tabindex="-1"
>
45
</button>
</td>
<td class="both content gr-diff left no-intraline-info">
<div
class="contentText gr-diff"
data-side="left"
id="left-content-45"
></div>
</td>
<td class="gr-diff lineNum right" data-value="48">
<button
aria-label="48 unmodified"
class="gr-diff lineNumButton right"
data-value="48"
id="right-button-48"
tabindex="-1"
>
48
</button>
</td>
<td class="both content gr-diff no-intraline-info right">
<div
class="contentText gr-diff"
data-side="right"
id="right-content-48"
></div>
</td>
</tr>
</tbody>
</table>
</div>
`,
{
ignoreTags: [
'gr-context-controls-section',
'gr-diff-section',
'gr-diff-row',
'gr-diff-text',
'gr-legacy-text',
'slot',
],
}
);
});
});
suite('not logged in', () => {
setup(async () => {
await element.updateComplete;
});
suite('binary diffs', () => {
test('render binary diff', async () => {
model.updateState({
diff: {
meta_a: {name: 'carrot.exe', content_type: 'binary', lines: 0},
meta_b: {name: 'carrot.exe', content_type: 'binary', lines: 0},
change_type: 'MODIFIED',
intraline_status: 'OK',
diff_header: [],
content: [],
binary: true,
},
diffPrefs: {...MINIMAL_PREFS},
});
await waitForEventOnce(element, 'render');
assert.lightDom.equal(
element,
/* HTML */ `
<div class="diffContainer sideBySide">
<gr-diff-section class="left-FILE right-FILE"> </gr-diff-section>
<gr-diff-row class="left-FILE right-FILE"> </gr-diff-row>
<table id="diffTable">
<colgroup>
<col class="blame gr-diff" />
<col class="gr-diff left" width="48" />
<col class="gr-diff left" />
<col class="gr-diff right" width="48" />
<col class="gr-diff right" />
</colgroup>
<tbody class="both gr-diff section">
<tr
aria-labelledby="left-button-FILE left-content-FILE right-button-FILE right-content-FILE"
class="diff-row gr-diff side-by-side"
left-type="both"
right-type="both"
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="FILE"></td>
<td class="gr-diff left lineNum" data-value="FILE">
<button
aria-label="Add file comment"
class="gr-diff left lineNumButton"
data-value="FILE"
id="left-button-FILE"
tabindex="-1"
>
FILE
</button>
</td>
<td
class="both content file gr-diff left no-intraline-info"
></td>
<td class="gr-diff lineNum right" data-value="FILE">
<button
aria-label="Add file comment"
class="gr-diff lineNumButton right"
data-value="FILE"
id="right-button-FILE"
tabindex="-1"
>
FILE
</button>
</td>
<td
class="both content file gr-diff no-intraline-info right"
></td>
</tr>
</tbody>
<tbody class="binary-diff gr-diff">
<tr class="gr-diff">
<td class="gr-diff" colspan="5">
<span> Difference in binary files </span>
</td>
</tr>
</tbody>
</table>
</div>
`
);
});
});
suite('image diffs', () => {
let mockFile1: ImageInfo;
let mockFile2: ImageInfo;
setup(() => {
mockFile1 = {
body:
'Qk06AAAAAAAAADYAAAAoAAAAAQAAAP////8BACAAAAAAAAAAAAATCwAAE' +
'wsAAAAAAAAAAAAAAAAA/w==',
type: 'image/bmp',
};
mockFile2 = {
body:
'Qk06AAAAAAAAADYAAAAoAAAAAQAAAP////8BACAAAAAAAAAAAAATCwAAE' +
'wsAAAAAAAAAAAAA/////w==',
type: 'image/bmp',
};
element.diffPrefs = {
context: 10,
cursor_blink_rate: 0,
font_size: 12,
ignore_whitespace: 'IGNORE_NONE',
line_length: 100,
line_wrapping: false,
show_line_endings: true,
show_tabs: true,
show_whitespace_errors: true,
syntax_highlighting: true,
tab_size: 8,
};
});
test('render image diff', async () => {
model.updateState({
diff: {
meta_a: {name: 'carrot.jpg', content_type: 'image/jpeg', lines: 66},
meta_b: {
name: 'carrot.jpg',
content_type: 'image/jpeg',
lines: 560,
},
intraline_status: 'OK',
change_type: 'MODIFIED',
diff_header: [
'diff --git a/carrot.jpg b/carrot.jpg',
'index 2adc47d..f9c2f2c 100644',
'--- a/carrot.jpg',
'+++ b/carrot.jpg',
'Binary files differ',
],
content: [{skip: 66}],
binary: true,
},
diffPrefs: {...MINIMAL_PREFS},
renderPrefs: {view_mode: DiffViewMode.SIDE_BY_SIDE},
baseImage: mockFile1,
revisionImage: mockFile2,
});
await waitForEventOnce(element, 'render');
const imageDiffSection = queryAndAssert(element, 'tbody.image-diff');
assert.lightDom.equal(
imageDiffSection,
/* HTML */ `
<tbody class="gr-diff image-diff">
<tr class="gr-diff">
<td class="blank gr-diff left lineNum"></td>
<td class="gr-diff left">
<img
class="gr-diff left"
src="data:image/bmp;base64,${mockFile1.body}"
/>
</td>
<td class="blank gr-diff lineNum right"></td>
<td class="gr-diff right">
<img
class="gr-diff right"
src="data:image/bmp;base64,${mockFile2.body}"
/>
</td>
</tr>
<tr class="gr-diff">
<td class="blank gr-diff left lineNum"></td>
<td class="gr-diff left">
<label class="gr-diff">
<span class="gr-diff label"> 1×1 image/bmp </span>
</label>
</td>
<td class="blank gr-diff lineNum right"></td>
<td class="gr-diff right">
<label class="gr-diff">
<span class="gr-diff label"> 1×1 image/bmp </span>
</label>
</td>
</tr>
</tbody>
`
);
const endpoint = queryAndAssert(element, 'tbody.endpoint');
assert.dom.equal(
endpoint,
/* HTML */ `
<tbody class="gr-diff endpoint">
<tr class="gr-diff">
<gr-endpoint-decorator class="gr-diff" name="image-diff">
<gr-endpoint-param class="gr-diff" name="baseImage">
</gr-endpoint-param>
<gr-endpoint-param class="gr-diff" name="revisionImage">
</gr-endpoint-param>
</gr-endpoint-decorator>
</tr>
</tbody>
`
);
});
test('renders image diffs with a different file name', async () => {
model.updateState({
diff: {
meta_a: {name: 'carrot.jpg', content_type: 'image/jpeg', lines: 66},
meta_b: {
name: 'carrot2.jpg',
content_type: 'image/jpeg',
lines: 560,
},
intraline_status: 'OK',
change_type: 'MODIFIED',
diff_header: [
'diff --git a/carrot.jpg b/carrot2.jpg',
'index 2adc47d..f9c2f2c 100644',
'--- a/carrot.jpg',
'+++ b/carrot2.jpg',
'Binary files differ',
],
content: [{skip: 66}],
binary: true,
},
diffPrefs: {...MINIMAL_PREFS},
renderPrefs: {view_mode: DiffViewMode.SIDE_BY_SIDE},
baseImage: {...mockFile1, _name: 'carrot.jpg'},
revisionImage: {...mockFile1, _name: 'carrot2.jpg'},
});
await waitForEventOnce(element, 'render');
const imageDiffSection = queryAndAssert(element, 'tbody.image-diff');
const leftLabel = queryAndAssert(imageDiffSection, 'td.left label');
const rightLabel = queryAndAssert(imageDiffSection, 'td.right label');
assert.dom.equal(
leftLabel,
/* HTML */ `
<label class="gr-diff">
<span class="gr-diff name"> carrot.jpg </span>
<br class="gr-diff" />
<span class="gr-diff label"> 1×1 image/bmp </span>
</label>
`
);
assert.dom.equal(
rightLabel,
/* HTML */ `
<label class="gr-diff">
<span class="gr-diff name"> carrot2.jpg </span>
<br class="gr-diff" />
<span class="gr-diff label"> 1×1 image/bmp </span>
</label>
`
);
});
test('renders added image', async () => {
model.updateState({
diff: {
meta_b: {
name: 'carrot.jpg',
content_type: 'image/jpeg',
lines: 560,
},
intraline_status: 'OK',
change_type: 'ADDED',
diff_header: [
'diff --git a/carrot.jpg b/carrot.jpg',
'index 0000000..f9c2f2c 100644',
'--- /dev/null',
'+++ b/carrot.jpg',
'Binary files differ',
],
content: [{skip: 66}],
binary: true,
},
diffPrefs: {...MINIMAL_PREFS},
renderPrefs: {view_mode: DiffViewMode.SIDE_BY_SIDE},
revisionImage: mockFile2,
});
await waitForEventOnce(element, 'render');
const imageDiffSection = queryAndAssert(element, 'tbody.image-diff');
const leftImage = query(imageDiffSection, 'td.left img');
const rightImage = queryAndAssert(imageDiffSection, 'td.right img');
assert.isNotOk(leftImage);
assert.dom.equal(
rightImage,
/* HTML */ `
<img
class="gr-diff right"
src="data:image/bmp;base64,${mockFile2.body}"
/>
`
);
});
test('renders removed image', async () => {
model.updateState({
diff: {
meta_a: {
name: 'carrot.jpg',
content_type: 'image/jpeg',
lines: 560,
},
intraline_status: 'OK',
change_type: 'DELETED',
diff_header: [
'diff --git a/carrot.jpg b/carrot.jpg',
'index f9c2f2c..0000000 100644',
'--- a/carrot.jpg',
'+++ /dev/null',
'Binary files differ',
],
content: [{skip: 66}],
binary: true,
},
diffPrefs: {...MINIMAL_PREFS},
renderPrefs: {view_mode: DiffViewMode.SIDE_BY_SIDE},
baseImage: mockFile1,
});
await waitForEventOnce(element, 'render');
const imageDiffSection = queryAndAssert(element, 'tbody.image-diff');
const leftImage = queryAndAssert(imageDiffSection, 'td.left img');
const rightImage = query(imageDiffSection, 'td.right img');
assert.isNotOk(rightImage);
assert.dom.equal(
leftImage,
/* HTML */ `
<img
class="gr-diff left"
src="data:image/bmp;base64,${mockFile1.body}"
/>
`
);
});
test('does not render disallowed image type', async () => {
model.updateState({
diff: {
meta_a: {
name: 'carrot.jpg',
content_type: 'image/jpeg-evil',
lines: 560,
},
intraline_status: 'OK',
change_type: 'DELETED',
diff_header: [
'diff --git a/carrot.jpg b/carrot.jpg',
'index f9c2f2c..0000000 100644',
'--- a/carrot.jpg',
'+++ /dev/null',
'Binary files differ',
],
content: [{skip: 66}],
binary: true,
},
diffPrefs: {...MINIMAL_PREFS},
renderPrefs: {view_mode: DiffViewMode.SIDE_BY_SIDE},
baseImage: {...mockFile1, type: 'image/jpeg-evil'},
});
await waitForEventOnce(element, 'render');
const imageDiffSection = queryAndAssert(element, 'tbody.image-diff');
const leftImage = query(imageDiffSection, 'td.left img');
assert.isNotOk(leftImage);
});
});
});
suite('diff header', () => {
setup(async () => {
model.updateState({
diff: {
meta_a: {name: 'carrot.jpg', content_type: 'image/jpeg', lines: 66},
meta_b: {name: 'carrot.jpg', content_type: 'image/jpeg', lines: 560},
diff_header: [],
intraline_status: 'OK',
change_type: 'MODIFIED',
content: [{skip: 66}],
},
diffPrefs: {...MINIMAL_PREFS},
renderPrefs: {view_mode: DiffViewMode.SIDE_BY_SIDE},
});
await element.updateComplete;
});
test('hidden', async () => {
assert.equal(element.computeDiffHeaderItems().length, 0);
element.diff?.diff_header?.push('diff --git a/test.jpg b/test.jpg');
assert.equal(element.computeDiffHeaderItems().length, 0);
element.diff?.diff_header?.push('index 2adc47d..f9c2f2c 100644');
assert.equal(element.computeDiffHeaderItems().length, 0);
element.diff?.diff_header?.push('--- a/test.jpg');
assert.equal(element.computeDiffHeaderItems().length, 0);
element.diff?.diff_header?.push('+++ b/test.jpg');
assert.equal(element.computeDiffHeaderItems().length, 0);
element.diff?.diff_header?.push('test');
assert.equal(element.computeDiffHeaderItems().length, 1);
element.requestUpdate('diff');
await element.updateComplete;
const header = queryAndAssert(element, '#diffHeader');
assert.equal(header.textContent?.trim(), 'test');
});
test('binary files', () => {
element.diff!.binary = true;
assert.equal(element.computeDiffHeaderItems().length, 0);
element.diff?.diff_header?.push('diff --git a/test.jpg b/test.jpg');
assert.equal(element.computeDiffHeaderItems().length, 0);
element.diff?.diff_header?.push('test');
assert.equal(element.computeDiffHeaderItems().length, 1);
element.diff?.diff_header?.push('Binary files differ');
assert.equal(element.computeDiffHeaderItems().length, 1);
});
});
suite('trailing newline warnings', () => {
const NO_NEWLINE_LEFT = 'No newline at end of left file.';
const NO_NEWLINE_RIGHT = 'No newline at end of right file.';
const getWarning = (element: GrDiffElement) => {
const warningElement = query(element, '.newlineWarning');
return warningElement?.textContent ?? '';
};
test('shows combined warning if both sides set to warn', async () => {
model.updateState({
renderPrefs: {
show_newline_warning_left: true,
show_newline_warning_right: true,
},
});
await element.updateComplete;
assert.include(
getWarning(element),
NO_NEWLINE_LEFT + ' \u2014 ' + NO_NEWLINE_RIGHT
); // \u2014 - '—'
});
suite('showNewlineWarningLeft', () => {
test('show warning if true', async () => {
model.updateState({
renderPrefs: {show_newline_warning_left: true},
});
await element.updateComplete;
assert.include(getWarning(element), NO_NEWLINE_LEFT);
});
test('hide warning if false', async () => {
model.updateState({
renderPrefs: {show_newline_warning_left: false},
});
await element.updateComplete;
assert.notInclude(getWarning(element), NO_NEWLINE_LEFT);
});
});
suite('showNewlineWarningRight', () => {
test('show warning if true', async () => {
model.updateState({
renderPrefs: {show_newline_warning_right: true},
});
await element.updateComplete;
assert.include(getWarning(element), NO_NEWLINE_RIGHT);
});
test('hide warning if false', async () => {
model.updateState({
renderPrefs: {show_newline_warning_right: false},
});
await element.updateComplete;
assert.notInclude(getWarning(element), NO_NEWLINE_RIGHT);
});
});
});
const setupSampleDiff = async function (params: {
content: DiffContent[];
ignore_whitespace?: IgnoreWhitespaceType;
binary?: boolean;
}) {
const {ignore_whitespace, content} = params;
// binary can't be undefined, use false if not set
const binary = params.binary || false;
const diffPrefs = {
ignore_whitespace: ignore_whitespace || 'IGNORE_ALL',
context: 10,
cursor_blink_rate: 0,
font_size: 12,
line_length: 100,
line_wrapping: false,
show_line_endings: true,
show_tabs: true,
show_whitespace_errors: true,
syntax_highlighting: true,
tab_size: 8,
};
const diff: DiffInfo = {
intraline_status: 'OK',
change_type: 'MODIFIED',
diff_header: [
'diff --git a/carrot.js b/carrot.js',
'index 2adc47d..f9c2f2c 100644',
'--- a/carrot.js',
'+++ b/carrot.jjs',
'file differ',
],
content,
binary,
};
model.updateState({diff, diffPrefs});
await waitUntil(() => element.groups.length > 1);
await element.updateComplete;
};
suite('whitespace changes only message', () => {
test('show the message if ignore_whitespace is criteria matches', async () => {
await setupSampleDiff({content: [{skip: 100}]});
element.loading = false;
assert.isTrue(element.showNoChangeMessage());
});
test('do not show the message for binary files', async () => {
await setupSampleDiff({content: [{skip: 100}], binary: true});
element.loading = false;
assert.isFalse(element.showNoChangeMessage());
});
test('do not show the message if still loading', async () => {
await setupSampleDiff({content: [{skip: 100}]});
element.loading = true;
assert.isFalse(element.showNoChangeMessage());
});
test('do not show the message if contains valid changes', async () => {
const content = [
{
a: ['all work and no play make andybons a dull boy'],
b: ['elgoog elgoog elgoog'],
},
{
ab: [
'Non eram nescius, Brute, cum, quae summis ingeniis ',
'exquisitaque doctrina philosophi Graeco sermone tractavissent',
],
},
];
await setupSampleDiff({content});
element.loading = false;
assert.isFalse(element.showNoChangeMessage());
});
test('do not show message if ignore whitespace is disabled', async () => {
const content = [
{
a: ['all work and no play make andybons a dull boy'],
b: ['elgoog elgoog elgoog'],
},
{
ab: [
'Non eram nescius, Brute, cum, quae summis ingeniis ',
'exquisitaque doctrina philosophi Graeco sermone tractavissent',
],
},
];
await setupSampleDiff({ignore_whitespace: 'IGNORE_NONE', content});
element.loading = false;
assert.isFalse(element.showNoChangeMessage());
});
});
suite('rendering text, images and binary files', () => {
let content: DiffContent[] = [];
setup(() => {
element.viewMode = DiffViewMode.SIDE_BY_SIDE;
element.diffPrefs = {
...DEFAULT_PREFS,
context: -1,
syntax_highlighting: true,
};
content = [
{
a: ['all work and no play make andybons a dull boy'],
b: ['elgoog elgoog elgoog'],
},
{
ab: [
'Non eram nescius, Brute, cum, quae summis ingeniis ',
'exquisitaque doctrina philosophi Graeco sermone tractavissent',
],
},
];
});
test('text', async () => {
model.updateState({diff: {...createEmptyDiff(), content}});
await waitUntil(() => element.groups.length > 2);
await element.updateComplete;
const bodies = [...(querySelectorAll(element, 'tbody') ?? [])];
assert.equal(bodies.length, 4);
assert.isTrue(bodies[0].innerHTML.includes('LOST'));
assert.isTrue(bodies[1].innerHTML.includes('FILE'));
assert.isTrue(bodies[2].innerHTML.includes('andybons a dull boy'));
assert.isTrue(bodies[3].innerHTML.includes('Non eram nescius'));
});
test('image', async () => {
model.updateState({
diff: {
...createEmptyDiff(),
content,
binary: true,
meta_a: {name: 'carrot1.jpg', content_type: 'image/jpeg', lines: 0},
meta_b: {name: 'carrot2.jpg', content_type: 'image/jpeg', lines: 0},
},
});
await element.updateComplete;
const body = queryAndAssert(element, 'tbody.image-diff');
assert.lightDom.equal(
body,
/* HTML */ `
<label class="gr-diff">
<span class="gr-diff label"> No image </span>
</label>
<label class="gr-diff">
<span class="gr-diff label"> No image </span>
</label>
`
);
});
test('binary', async () => {
element.diff = {...createEmptyDiff(), content, binary: true};
await element.updateComplete;
const body = queryAndAssert(element, 'tbody.binary-diff');
assert.lightDom.equal(
body,
/* HTML */ '<span>Difference in binary files</span>'
);
});
});
});