polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element_test.ts - gerrit.git

/**

* @license

* 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 */ `

</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 */ `

</colgroup>

<tr

aria-labelledby="left-button-LOST right-button-LOST right-content-LOST"

class="both diff-row gr-diff unified"

tabindex="-1"

>

<td

class="both content gr-diff lost no-intraline-info right"

></td>

</tr>

</tbody>

<tr

aria-labelledby="left-button-FILE right-button-FILE right-content-FILE"

class="both diff-row gr-diff unified"

tabindex="-1"

>

<button

aria-label="Add file comment"

class="gr-diff left lineNumButton"

data-value="FILE"

id="left-button-FILE"

tabindex="-1"

>

FILE

</button>

</td>

<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>

<tr

aria-labelledby="left-button-1 right-button-1 right-content-1"

class="both diff-row gr-diff unified"

tabindex="-1"

>

<button

aria-label="1 unmodified"

class="gr-diff left lineNumButton"

data-value="1"

id="left-button-1"

tabindex="-1"

>

1

</button>

</td>

<button

aria-label="1 unmodified"

class="gr-diff lineNumButton right"

data-value="1"

id="right-button-1"

tabindex="-1"

>

1

</button>

</td>

<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"

>

<button

aria-label="2 unmodified"

class="gr-diff left lineNumButton"

data-value="2"

id="left-button-2"

tabindex="-1"

>

2

</button>

</td>

<button

aria-label="2 unmodified"

class="gr-diff lineNumButton right"

data-value="2"

id="right-button-2"

tabindex="-1"

>

2

</button>

</td>

<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"

>

<button

aria-label="3 unmodified"

class="gr-diff left lineNumButton"

data-value="3"

id="left-button-3"

tabindex="-1"

>

3

</button>

</td>

<button

aria-label="3 unmodified"

class="gr-diff lineNumButton right"

data-value="3"

id="right-button-3"

tabindex="-1"

>

3

</button>

</td>

<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"

>

<button

aria-label="4 unmodified"

class="gr-diff left lineNumButton"

data-value="4"

id="left-button-4"

tabindex="-1"

>

4

</button>

</td>

<button

aria-label="4 unmodified"

class="gr-diff lineNumButton right"

data-value="4"

id="right-button-4"

tabindex="-1"

>

4

</button>

</td>

<div

class="contentText gr-diff"

data-side="right"

id="right-content-4"

></div>

</td>

</tr>

</tbody>

<tr

aria-labelledby="right-button-5 right-content-5"

class="add diff-row gr-diff unified"

tabindex="-1"

>

<button

aria-label="5 added"

class="gr-diff lineNumButton right"

data-value="5"

id="right-button-5"

tabindex="-1"

>

5

</button>

</td>

<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"

>

<button

aria-label="6 added"

class="gr-diff lineNumButton right"

data-value="6"

id="right-button-6"

tabindex="-1"

>

6

</button>

</td>

<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"

>

<button

aria-label="7 added"

class="gr-diff lineNumButton right"

data-value="7"

id="right-button-7"

tabindex="-1"

>

7

</button>

</td>

<div

class="contentText gr-diff"

data-side="right"

id="right-content-7"

></div>

</td>

</tr>

</tbody>

<tr

aria-labelledby="left-button-5 right-button-8 right-content-8"

class="both diff-row gr-diff unified"

tabindex="-1"

>

<button

aria-label="5 unmodified"

class="gr-diff left lineNumButton"

data-value="5"

id="left-button-5"

tabindex="-1"

>

5

</button>

</td>

<button

aria-label="8 unmodified"

class="gr-diff lineNumButton right"

data-value="8"

id="right-button-8"

tabindex="-1"

>

8

</button>

</td>

<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"

>

<button

aria-label="6 unmodified"

class="gr-diff left lineNumButton"

data-value="6"

id="left-button-6"

tabindex="-1"

>

6

</button>

</td>

<button

aria-label="9 unmodified"

class="gr-diff lineNumButton right"

data-value="9"

id="right-button-9"

tabindex="-1"

>

9

</button>

</td>

<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"

>

<button

aria-label="7 unmodified"

class="gr-diff left lineNumButton"

data-value="7"

id="left-button-7"

tabindex="-1"

>

7

</button>

</td>

<button

aria-label="10 unmodified"

class="gr-diff lineNumButton right"

data-value="10"

id="right-button-10"

tabindex="-1"

>

10

</button>

</td>

<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"

>

<button

aria-label="8 unmodified"

class="gr-diff left lineNumButton"

data-value="8"

id="left-button-8"

tabindex="-1"

>

8

</button>

</td>

<button

aria-label="11 unmodified"

class="gr-diff lineNumButton right"

data-value="11"

id="right-button-11"

tabindex="-1"

>

11

</button>

</td>

<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"

>

<button

aria-label="9 unmodified"

class="gr-diff left lineNumButton"

data-value="9"

id="left-button-9"

tabindex="-1"

>

9

</button>

</td>

<button

aria-label="12 unmodified"

class="gr-diff lineNumButton right"

data-value="12"

id="right-button-12"

tabindex="-1"

>

12

</button>

</td>

<div

class="contentText gr-diff"

data-side="right"

id="right-content-12"

></div>

</td>

</tr>

</tbody>

<tr

aria-labelledby="left-button-10 left-content-10"

class="diff-row gr-diff remove unified"

tabindex="-1"

>

<button

aria-label="10 removed"

class="gr-diff left lineNumButton"

data-value="10"

id="left-button-10"

tabindex="-1"

>

10

</button>

</td>

<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"

>

<button

aria-label="11 removed"

class="gr-diff left lineNumButton"

data-value="11"

id="left-button-11"

tabindex="-1"

>

11

</button>

</td>

<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"

>

<button

aria-label="12 removed"

class="gr-diff left lineNumButton"

data-value="12"

id="left-button-12"

tabindex="-1"

>

12

</button>

</td>

<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"

>

<button

aria-label="13 removed"

class="gr-diff left lineNumButton"

data-value="13"

id="left-button-13"

tabindex="-1"

>

13

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-13"

></div>

</td>

</tr>

</tbody>

<tr

aria-labelledby="right-button-13 right-content-13"

class="add diff-row gr-diff unified"

tabindex="-1"

>

<button

aria-label="13 added"

class="gr-diff lineNumButton right"

data-value="13"

id="right-button-13"

tabindex="-1"

>

13

</button>

</td>

<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"

>

<button

aria-label="14 added"

class="gr-diff lineNumButton right"

data-value="14"

id="right-button-14"

tabindex="-1"

>

14

</button>

</td>

<div

class="contentText gr-diff"

data-side="right"

id="right-content-14"

></div>

</td>

</tr>

</tbody>

<tr

aria-labelledby="left-button-16 left-content-16"

class="diff-row gr-diff remove unified"

tabindex="-1"

>

<button

aria-label="16 removed"

class="gr-diff left lineNumButton"

data-value="16"

id="left-button-16"

tabindex="-1"

>

16

</button>

</td>

<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"

>

<button

aria-label="15 added"

class="gr-diff lineNumButton right"

data-value="15"

id="right-button-15"

tabindex="-1"

>

15

</button>

</td>

<div

class="contentText gr-diff"

data-side="right"

id="right-content-15"

></div>

</td>

</tr>

</tbody>

<tr

aria-labelledby="left-button-17 right-button-16 right-content-16"

class="both diff-row gr-diff unified"

tabindex="-1"

>

<button

aria-label="17 unmodified"

class="gr-diff left lineNumButton"

data-value="17"

id="left-button-17"

tabindex="-1"

>

17

</button>

</td>

<button

aria-label="16 unmodified"

class="gr-diff lineNumButton right"

data-value="16"

id="right-button-16"

tabindex="-1"

>

16

</button>

</td>

<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"

>

<button

aria-label="18 unmodified"

class="gr-diff left lineNumButton"

data-value="18"

id="left-button-18"

tabindex="-1"

>

18

</button>

</td>

<button

aria-label="17 unmodified"

class="gr-diff lineNumButton right"

data-value="17"

id="right-button-17"

tabindex="-1"

>

17

</button>

</td>

<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"

>

<button

aria-label="19 unmodified"

class="gr-diff left lineNumButton"

data-value="19"

id="left-button-19"

tabindex="-1"

>

19

</button>

</td>

<button

aria-label="18 unmodified"

class="gr-diff lineNumButton right"

data-value="18"

id="right-button-18"

tabindex="-1"

>

18

</button>

</td>

<div

class="contentText gr-diff"

data-side="right"

id="right-content-18"

></div>

</td>

</tr>

</tbody>

</tr>

<gr-context-controls class="gr-diff" showconfig="both">

</gr-context-controls>

</td>

</tr>

</tr>

</tbody>

<tr

aria-labelledby="left-button-38 right-button-37 right-content-37"

class="both diff-row gr-diff unified"

tabindex="-1"

>

<button

aria-label="38 unmodified"

class="gr-diff left lineNumButton"

data-value="38"

id="left-button-38"

tabindex="-1"

>

38

</button>

</td>

<button

aria-label="37 unmodified"

class="gr-diff lineNumButton right"

data-value="37"

id="right-button-37"

tabindex="-1"

>

37

</button>

</td>

<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"

>

<button

aria-label="39 unmodified"

class="gr-diff left lineNumButton"

data-value="39"

id="left-button-39"

tabindex="-1"

>

39

</button>

</td>

<button

aria-label="38 unmodified"

class="gr-diff lineNumButton right"

data-value="38"

id="right-button-38"

tabindex="-1"

>

38

</button>

</td>

<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"

>

<button

aria-label="40 unmodified"

class="gr-diff left lineNumButton"

data-value="40"

id="left-button-40"

tabindex="-1"

>

40

</button>

</td>

<button

aria-label="39 unmodified"

class="gr-diff lineNumButton right"

data-value="39"

id="right-button-39"

tabindex="-1"

>

39

</button>

</td>

<div

class="contentText gr-diff"

data-side="right"

id="right-content-39"

></div>

</td>

</tr>

</tbody>

<tr

aria-labelledby="right-button-40 right-content-40"

class="add diff-row gr-diff unified"

tabindex="-1"

>

<button

aria-label="40 added"

class="gr-diff lineNumButton right"

data-value="40"

id="right-button-40"

tabindex="-1"

>

40

</button>

</td>

<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"

>

<button

aria-label="41 added"

class="gr-diff lineNumButton right"

data-value="41"

id="right-button-41"

tabindex="-1"

>

41

</button>

</td>

<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"

>

<button

aria-label="42 added"

class="gr-diff lineNumButton right"

data-value="42"

id="right-button-42"

tabindex="-1"

>

42

</button>

</td>

<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"

>

<button

aria-label="43 added"

class="gr-diff lineNumButton right"

data-value="43"

id="right-button-43"

tabindex="-1"

>

43

</button>

</td>

<div

class="contentText gr-diff"

data-side="right"

id="right-content-43"

></div>

</td>

</tr>

</tbody>

<tr

aria-labelledby="left-button-41 right-button-44 right-content-44"

class="both diff-row gr-diff unified"

tabindex="-1"

>

<button

aria-label="41 unmodified"

class="gr-diff left lineNumButton"

data-value="41"

id="left-button-41"

tabindex="-1"

>

41

</button>

</td>

<button

aria-label="44 unmodified"

class="gr-diff lineNumButton right"

data-value="44"

id="right-button-44"

tabindex="-1"

>

44

</button>

</td>

<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"

>

<button

aria-label="42 unmodified"

class="gr-diff left lineNumButton"

data-value="42"

id="left-button-42"

tabindex="-1"

>

42

</button>

</td>

<button

aria-label="45 unmodified"

class="gr-diff lineNumButton right"

data-value="45"

id="right-button-45"

tabindex="-1"

>

45

</button>

</td>

<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"

>

<button

aria-label="43 unmodified"

class="gr-diff left lineNumButton"

data-value="43"

id="left-button-43"

tabindex="-1"

>

43

</button>

</td>

<button

aria-label="46 unmodified"

class="gr-diff lineNumButton right"

data-value="46"

id="right-button-46"

tabindex="-1"

>

46

</button>

</td>

<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"

>

<button

aria-label="44 unmodified"

class="gr-diff left lineNumButton"

data-value="44"

id="left-button-44"

tabindex="-1"

>

44

</button>

</td>

<button

aria-label="47 unmodified"

class="gr-diff lineNumButton right"

data-value="47"

id="right-button-47"

tabindex="-1"

>

47

</button>

</td>

<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"

>

<button

aria-label="45 unmodified"

class="gr-diff left lineNumButton"

data-value="45"

id="left-button-45"

tabindex="-1"

>

45

</button>

</td>

<button

aria-label="48 unmodified"

class="gr-diff lineNumButton right"

data-value="48"

id="right-button-48"

tabindex="-1"

>

48

</button>

</td>

<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 */ `

</colgroup>

<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="both content gr-diff left lost no-intraline-info"

></td>

<td

class="both content gr-diff lost no-intraline-info right"

></td>

</tr>

</tbody>

<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"

>

<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>

<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>

<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"

>

<button

aria-label="1 unmodified"

class="gr-diff left lineNumButton"

data-value="1"

id="left-button-1"

tabindex="-1"

>

1

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-1"

></div>

</td>

<button

aria-label="1 unmodified"

class="gr-diff lineNumButton right"

data-value="1"

id="right-button-1"

tabindex="-1"

>

1

</button>

</td>

<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"

>

<button

aria-label="2 unmodified"

class="gr-diff left lineNumButton"

data-value="2"

id="left-button-2"

tabindex="-1"

>

2

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-2"

></div>

</td>

<button

aria-label="2 unmodified"

class="gr-diff lineNumButton right"

data-value="2"

id="right-button-2"

tabindex="-1"

>

2

</button>

</td>

<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"

>

<button

aria-label="3 unmodified"

class="gr-diff left lineNumButton"

data-value="3"

id="left-button-3"

tabindex="-1"

>

3

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-3"

></div>

</td>

<button

aria-label="3 unmodified"

class="gr-diff lineNumButton right"

data-value="3"

id="right-button-3"

tabindex="-1"

>

3

</button>

</td>

<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"

>

<button

aria-label="4 unmodified"

class="gr-diff left lineNumButton"

data-value="4"

id="left-button-4"

tabindex="-1"

>

4

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-4"

></div>

</td>

<button

aria-label="4 unmodified"

class="gr-diff lineNumButton right"

data-value="4"

id="right-button-4"

tabindex="-1"

>

4

</button>

</td>

<div

class="contentText gr-diff"

data-side="right"

id="right-content-4"

></div>

</td>

</tr>

</tbody>

<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>

<button

aria-label="5 added"

class="gr-diff lineNumButton right"

data-value="5"

id="right-button-5"

tabindex="-1"

>

5

</button>

</td>

<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>

<button

aria-label="6 added"

class="gr-diff lineNumButton right"

data-value="6"

id="right-button-6"

tabindex="-1"

>

6

</button>

</td>

<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>

<button

aria-label="7 added"

class="gr-diff lineNumButton right"

data-value="7"

id="right-button-7"

tabindex="-1"

>

7

</button>

</td>

<div

class="contentText gr-diff"

data-side="right"

id="right-content-7"

></div>

</td>

</tr>

</tbody>

<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"

>

<button

aria-label="5 unmodified"

class="gr-diff left lineNumButton"

data-value="5"

id="left-button-5"

tabindex="-1"

>

5

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-5"

></div>

</td>

<button

aria-label="8 unmodified"

class="gr-diff lineNumButton right"

data-value="8"

id="right-button-8"

tabindex="-1"

>

8

</button>

</td>

<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"

>

<button

aria-label="6 unmodified"

class="gr-diff left lineNumButton"

data-value="6"

id="left-button-6"

tabindex="-1"

>

6

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-6"

></div>

</td>

<button

aria-label="9 unmodified"

class="gr-diff lineNumButton right"

data-value="9"

id="right-button-9"

tabindex="-1"

>

9

</button>

</td>

<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"

>

<button

aria-label="7 unmodified"

class="gr-diff left lineNumButton"

data-value="7"

id="left-button-7"

tabindex="-1"

>

7

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-7"

></div>

</td>

<button

aria-label="10 unmodified"

class="gr-diff lineNumButton right"

data-value="10"

id="right-button-10"

tabindex="-1"

>

10

</button>

</td>

<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"

>

<button

aria-label="8 unmodified"

class="gr-diff left lineNumButton"

data-value="8"

id="left-button-8"

tabindex="-1"

>

8

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-8"

></div>

</td>

<button

aria-label="11 unmodified"

class="gr-diff lineNumButton right"

data-value="11"

id="right-button-11"

tabindex="-1"

>

11

</button>

</td>

<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"

>

<button

aria-label="9 unmodified"

class="gr-diff left lineNumButton"

data-value="9"

id="left-button-9"

tabindex="-1"

>

9

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-9"

></div>

</td>

<button

aria-label="12 unmodified"

class="gr-diff lineNumButton right"

data-value="12"

id="right-button-12"

tabindex="-1"

>

12

</button>

</td>

<div

class="contentText gr-diff"

data-side="right"

id="right-content-12"

></div>

</td>

</tr>

</tbody>

<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"

>

<button

aria-label="10 removed"

class="gr-diff left lineNumButton"

data-value="10"

id="left-button-10"

tabindex="-1"

>

10

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-10"

></div>

</td>

</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"

>

<button

aria-label="11 removed"

class="gr-diff left lineNumButton"

data-value="11"

id="left-button-11"

tabindex="-1"

>

11

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-11"

></div>

</td>

</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"

>

<button

aria-label="12 removed"

class="gr-diff left lineNumButton"

data-value="12"

id="left-button-12"

tabindex="-1"

>

12

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-12"

></div>

</td>

</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"

>

<button

aria-label="13 removed"

class="gr-diff left lineNumButton"

data-value="13"

id="left-button-13"

tabindex="-1"

>

13

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-13"

></div>

</td>

</td>

</tr>

</tbody>

<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"

>

<button

aria-label="14 removed"

class="gr-diff left lineNumButton"

data-value="14"

id="left-button-14"

tabindex="-1"

>

14

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-14"

></div>

</td>

<button

aria-label="13 added"

class="gr-diff lineNumButton right"

data-value="13"

id="right-button-13"

tabindex="-1"

>

13

</button>

</td>

<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"

>

<button

aria-label="15 removed"

class="gr-diff left lineNumButton"

data-value="15"

id="left-button-15"

tabindex="-1"

>

15

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-15"

></div>

</td>

<button

aria-label="14 added"

class="gr-diff lineNumButton right"

data-value="14"

id="right-button-14"

tabindex="-1"

>

14

</button>

</td>

<div

class="contentText gr-diff"

data-side="right"

id="right-content-14"

></div>

</td>

</tr>

</tbody>

<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"

>

<button

aria-label="16 removed"

class="gr-diff left lineNumButton"

data-value="16"

id="left-button-16"

tabindex="-1"

>

16

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-16"

></div>

</td>

<button

aria-label="15 added"

class="gr-diff lineNumButton right"

data-value="15"

id="right-button-15"

tabindex="-1"

>

15

</button>

</td>

<div

class="contentText gr-diff"

data-side="right"

id="right-content-15"

></div>

</td>

</tr>

</tbody>

<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"

>

<button

aria-label="17 unmodified"

class="gr-diff left lineNumButton"

data-value="17"

id="left-button-17"

tabindex="-1"

>

17

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-17"

></div>

</td>

<button

aria-label="16 unmodified"

class="gr-diff lineNumButton right"

data-value="16"

id="right-button-16"

tabindex="-1"

>

16

</button>

</td>

<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"

>

<button

aria-label="18 unmodified"

class="gr-diff left lineNumButton"

data-value="18"

id="left-button-18"

tabindex="-1"

>

18

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-18"

></div>

</td>

<button

aria-label="17 unmodified"

class="gr-diff lineNumButton right"

data-value="17"

id="right-button-17"

tabindex="-1"

>

17

</button>

</td>

<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"

>

<button

aria-label="19 unmodified"

class="gr-diff left lineNumButton"

data-value="19"

id="left-button-19"

tabindex="-1"

>

19

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-19"

></div>

</td>

<button

aria-label="18 unmodified"

class="gr-diff lineNumButton right"

data-value="18"

id="right-button-18"

tabindex="-1"

>

18

</button>

</td>

<div

class="contentText gr-diff"

data-side="right"

id="right-content-18"

></div>

</td>

</tr>

</tbody>

<tr

class="above contextBackground gr-diff side-by-side"

left-type="contextControl"

right-type="contextControl"

>

</tr>

<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"

>

</tr>

</tbody>

<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"

>

<button

aria-label="38 unmodified"

class="gr-diff left lineNumButton"

data-value="38"

id="left-button-38"

tabindex="-1"

>

38

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-38"

></div>

</td>

<button

aria-label="37 unmodified"

class="gr-diff lineNumButton right"

data-value="37"

id="right-button-37"

tabindex="-1"

>

37

</button>

</td>

<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"

>

<button

aria-label="39 unmodified"

class="gr-diff left lineNumButton"

data-value="39"

id="left-button-39"

tabindex="-1"

>

39

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-39"

></div>

</td>

<button

aria-label="38 unmodified"

class="gr-diff lineNumButton right"

data-value="38"

id="right-button-38"

tabindex="-1"

>

38

</button>

</td>

<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"

>

<button

aria-label="40 unmodified"

class="gr-diff left lineNumButton"

data-value="40"

id="left-button-40"

tabindex="-1"

>

40

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-40"

></div>

</td>

<button

aria-label="39 unmodified"

class="gr-diff lineNumButton right"

data-value="39"

id="right-button-39"

tabindex="-1"

>

39

</button>

</td>

<div

class="contentText gr-diff"

data-side="right"

id="right-content-39"

></div>

</td>

</tr>

</tbody>

<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>

<button

aria-label="40 added"

class="gr-diff lineNumButton right"

data-value="40"

id="right-button-40"

tabindex="-1"

>

40

</button>

</td>

<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>

<button

aria-label="41 added"

class="gr-diff lineNumButton right"

data-value="41"

id="right-button-41"

tabindex="-1"

>

41

</button>

</td>

<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>

<button

aria-label="42 added"

class="gr-diff lineNumButton right"

data-value="42"

id="right-button-42"

tabindex="-1"

>

42

</button>

</td>

<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>

<button

aria-label="43 added"

class="gr-diff lineNumButton right"

data-value="43"

id="right-button-43"

tabindex="-1"

>

43

</button>

</td>

<div

class="contentText gr-diff"

data-side="right"

id="right-content-43"

></div>

</td>

</tr>

</tbody>

<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"

>

<button

aria-label="41 unmodified"

class="gr-diff left lineNumButton"

data-value="41"

id="left-button-41"

tabindex="-1"

>

41

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-41"

></div>

</td>

<button

aria-label="44 unmodified"

class="gr-diff lineNumButton right"

data-value="44"

id="right-button-44"

tabindex="-1"

>

44

</button>

</td>

<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"

>

<button

aria-label="42 unmodified"

class="gr-diff left lineNumButton"

data-value="42"

id="left-button-42"

tabindex="-1"

>

42

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-42"

></div>

</td>

<button

aria-label="45 unmodified"

class="gr-diff lineNumButton right"

data-value="45"

id="right-button-45"

tabindex="-1"

>

45

</button>

</td>

<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"

>

<button

aria-label="43 unmodified"

class="gr-diff left lineNumButton"

data-value="43"

id="left-button-43"

tabindex="-1"

>

43

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-43"

></div>

</td>

<button

aria-label="46 unmodified"

class="gr-diff lineNumButton right"

data-value="46"

id="right-button-46"

tabindex="-1"

>

46

</button>

</td>

<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"

>

<button

aria-label="44 unmodified"

class="gr-diff left lineNumButton"

data-value="44"

id="left-button-44"

tabindex="-1"

>

44

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-44"

></div>

</td>

<button

aria-label="47 unmodified"

class="gr-diff lineNumButton right"

data-value="47"

id="right-button-47"

tabindex="-1"

>

47

</button>

</td>

<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"

>

<button

aria-label="45 unmodified"

class="gr-diff left lineNumButton"

data-value="45"

id="left-button-45"

tabindex="-1"

>

45

</button>

</td>

<div

class="contentText gr-diff"

data-side="left"

id="left-content-45"

></div>

</td>

<button

aria-label="48 unmodified"

class="gr-diff lineNumButton right"

data-value="48"

id="right-button-48"

tabindex="-1"

>

48

</button>

</td>

<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 */ `

<gr-diff-section class="left-FILE right-FILE"> </gr-diff-section>

<gr-diff-row class="left-FILE right-FILE"> </gr-diff-row>

</colgroup>

<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"

>

<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>

<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>

<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: {

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 */ `

<img

class="gr-diff left"

src="data:image/bmp;base64,${mockFile1.body}"

/>

</td>

<img

class="gr-diff right"

src="data:image/bmp;base64,${mockFile2.body}"

/>

</td>

</tr>

<span class="gr-diff label"> 1×1 image/bmp </span>

</label>

</td>

<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 */ `

<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: {

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 */ `

<span class="gr-diff name"> carrot.jpg </span>

<span class="gr-diff label"> 1×1 image/bmp </span>

</label>

`

);

assert.dom.equal(

rightLabel,

/* HTML */ `

<span class="gr-diff name"> carrot2.jpg </span>

<span class="gr-diff label"> 1×1 image/bmp </span>

</label>

`

);

});

test('renders added image', async () => {

model.updateState({

diff: {

meta_b: {

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: {

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: {

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 */ `

<span class="gr-diff label"> No image </span>

</label>

<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>'

);

});