blob: 9cf9baedce6080d1d5f6feb1e16907ac275e5e70 [file] [log] [blame]
/**
* @license
* Copyright 2016 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import '../../../test/common-test-setup';
import {
createConfig,
createDiff,
createEmptyDiff,
} from '../../../test/test-data-generators';
import './gr-diff-builder-element';
import {queryAndAssert, stubBaseUrl, waitUntil} from '../../../test/test-utils';
import {GrAnnotation} from '../gr-diff-highlight/gr-annotation';
import {GrDiffLine, GrDiffLineType} from '../gr-diff/gr-diff-line';
import {GrDiffBuilderSideBySide} from './gr-diff-builder-side-by-side';
import {
DiffContent,
DiffInfo,
DiffLayer,
DiffPreferencesInfo,
DiffViewMode,
Side,
} from '../../../api/diff';
import {stubRestApi} from '../../../test/test-utils';
import {GrDiffBuilderLegacy} from './gr-diff-builder-legacy';
import {waitForEventOnce} from '../../../utils/event-util';
import {GrDiffBuilderElement} from './gr-diff-builder-element';
import {createDefaultDiffPrefs} from '../../../constants/constants';
import {KeyLocations} from '../gr-diff-processor/gr-diff-processor';
import {BlameInfo} from '../../../types/common';
import {fixture, html, assert} from '@open-wc/testing';
const DEFAULT_PREFS = createDefaultDiffPrefs();
suite('gr-diff-builder tests', () => {
let element: GrDiffBuilderElement;
let builder: GrDiffBuilderLegacy;
let diffTable: HTMLTableElement;
const LINE_BREAK_HTML = '<span class="gr-diff br"></span>';
const WBR_HTML = '<wbr class="gr-diff">';
const setBuilderPrefs = (prefs: Partial<DiffPreferencesInfo>) => {
builder = new GrDiffBuilderSideBySide(
createEmptyDiff(),
{...createDefaultDiffPrefs(), ...prefs},
diffTable
);
};
const line = (text: string) => {
const line = new GrDiffLine(GrDiffLineType.BOTH);
line.text = text;
return line;
};
setup(async () => {
diffTable = await fixture(html`<table id="diffTable"></table>`);
element = new GrDiffBuilderElement();
element.diffElement = diffTable;
stubRestApi('getLoggedIn').returns(Promise.resolve(false));
stubRestApi('getProjectConfig').returns(Promise.resolve(createConfig()));
stubBaseUrl('/r');
setBuilderPrefs({});
});
test('line_length applied with <wbr> if line_wrapping is true', () => {
setBuilderPrefs({line_wrapping: true, tab_size: 4, line_length: 50});
const text = 'a'.repeat(51);
const expected = 'a'.repeat(50) + WBR_HTML + 'a';
const result = builder.createTextEl(null, line(text)).firstElementChild
?.firstElementChild?.innerHTML;
assert.equal(result, expected);
});
test('line_length applied with line break if line_wrapping is false', () => {
setBuilderPrefs({line_wrapping: false, tab_size: 4, line_length: 50});
const text = 'a'.repeat(51);
const expected = 'a'.repeat(50) + LINE_BREAK_HTML + 'a';
const result = builder.createTextEl(null, line(text)).firstElementChild
?.firstElementChild?.innerHTML;
assert.equal(result, expected);
});
[DiffViewMode.UNIFIED, DiffViewMode.SIDE_BY_SIDE].forEach(mode => {
test(`line_length used for regular files under ${mode}`, () => {
element.path = '/a.txt';
element.viewMode = mode;
element.diff = createEmptyDiff();
element.prefs = {
...createDefaultDiffPrefs(),
tab_size: 4,
line_length: 50,
};
builder = element.getDiffBuilder() as GrDiffBuilderLegacy;
assert.equal(builder._prefs.line_length, 50);
});
test(`line_length ignored for commit msg under ${mode}`, () => {
element.path = '/COMMIT_MSG';
element.viewMode = mode;
element.diff = createEmptyDiff();
element.prefs = {
...createDefaultDiffPrefs(),
tab_size: 4,
line_length: 50,
};
builder = element.getDiffBuilder() as GrDiffBuilderLegacy;
assert.equal(builder._prefs.line_length, 72);
});
});
test('createTextEl linewrap with tabs', () => {
setBuilderPrefs({tab_size: 4, line_length: 10});
const text = '\t'.repeat(7) + '!';
const el = builder.createTextEl(null, line(text));
assert.equal(el.innerText, text);
// With line length 10 and tab size 4, there should be a line break
// after every two tabs.
const newlineEl = el.querySelector('.contentText .br');
assert.isOk(newlineEl);
assert.equal(
el.querySelector('.contentText .tab:nth-child(2)')?.nextSibling,
newlineEl
);
});
test('_handlePreferenceError throws with invalid preference', () => {
element.prefs = {...createDefaultDiffPrefs(), tab_size: 0};
assert.throws(() => element.getDiffBuilder());
});
test('_handlePreferenceError triggers alert and javascript error', () => {
const errorStub = sinon.stub();
diffTable.addEventListener('show-alert', errorStub);
assert.throws(() => element.handlePreferenceError('tab size'));
assert.equal(
errorStub.lastCall.args[0].detail.message,
"The value of the 'tab size' user preference is invalid. " +
'Fix in diff preferences'
);
});
suite('intraline differences', () => {
let el: HTMLElement;
let str: string;
let annotateElementSpy: sinon.SinonSpy;
let layer: DiffLayer;
const lineNumberEl = document.createElement('td');
function slice(str: string, start: number, end?: number) {
return Array.from(str).slice(start, end).join('');
}
setup(async () => {
el = await fixture(html`
<div>Lorem ipsum dolor sit amet, suspendisse inceptos vehicula</div>
`);
str = el.textContent ?? '';
annotateElementSpy = sinon.spy(GrAnnotation, 'annotateElement');
layer = element.createIntralineLayer();
});
test('annotate no highlights', () => {
layer.annotate(el, lineNumberEl, line(str), Side.LEFT);
// The content is unchanged.
assert.isFalse(annotateElementSpy.called);
assert.equal(el.childNodes.length, 1);
assert.instanceOf(el.childNodes[0], Text);
assert.equal(str, el.childNodes[0].textContent);
});
test('annotate with highlights', () => {
const l = line(str);
l.highlights = [
{contentIndex: 0, startIndex: 6, endIndex: 12},
{contentIndex: 0, startIndex: 18, endIndex: 22},
];
const str0 = slice(str, 0, 6);
const str1 = slice(str, 6, 12);
const str2 = slice(str, 12, 18);
const str3 = slice(str, 18, 22);
const str4 = slice(str, 22);
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isTrue(annotateElementSpy.called);
assert.equal(el.childNodes.length, 5);
assert.instanceOf(el.childNodes[0], Text);
assert.equal(el.childNodes[0].textContent, str0);
assert.notInstanceOf(el.childNodes[1], Text);
assert.equal(el.childNodes[1].textContent, str1);
assert.instanceOf(el.childNodes[2], Text);
assert.equal(el.childNodes[2].textContent, str2);
assert.notInstanceOf(el.childNodes[3], Text);
assert.equal(el.childNodes[3].textContent, str3);
assert.instanceOf(el.childNodes[4], Text);
assert.equal(el.childNodes[4].textContent, str4);
});
test('annotate without endIndex', () => {
const l = line(str);
l.highlights = [{contentIndex: 0, startIndex: 28}];
const str0 = slice(str, 0, 28);
const str1 = slice(str, 28);
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isTrue(annotateElementSpy.called);
assert.equal(el.childNodes.length, 2);
assert.instanceOf(el.childNodes[0], Text);
assert.equal(el.childNodes[0].textContent, str0);
assert.notInstanceOf(el.childNodes[1], Text);
assert.equal(el.childNodes[1].textContent, str1);
});
test('annotate ignores empty highlights', () => {
const l = line(str);
l.highlights = [{contentIndex: 0, startIndex: 28, endIndex: 28}];
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isFalse(annotateElementSpy.called);
assert.equal(el.childNodes.length, 1);
});
test('annotate handles unicode', () => {
// Put some unicode into the string:
str = str.replace(/\s/g, '💢');
el.textContent = str;
const l = line(str);
l.highlights = [{contentIndex: 0, startIndex: 6, endIndex: 12}];
const str0 = slice(str, 0, 6);
const str1 = slice(str, 6, 12);
const str2 = slice(str, 12);
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isTrue(annotateElementSpy.called);
assert.equal(el.childNodes.length, 3);
assert.instanceOf(el.childNodes[0], Text);
assert.equal(el.childNodes[0].textContent, str0);
assert.notInstanceOf(el.childNodes[1], Text);
assert.equal(el.childNodes[1].textContent, str1);
assert.instanceOf(el.childNodes[2], Text);
assert.equal(el.childNodes[2].textContent, str2);
});
test('annotate handles unicode w/o endIndex', () => {
// Put some unicode into the string:
str = str.replace(/\s/g, '💢');
el.textContent = str;
const l = line(str);
l.highlights = [{contentIndex: 0, startIndex: 6}];
const str0 = slice(str, 0, 6);
const str1 = slice(str, 6);
const numHighlightedChars = GrAnnotation.getStringLength(str1);
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isTrue(annotateElementSpy.calledWith(el, 6, numHighlightedChars));
assert.equal(el.childNodes.length, 2);
assert.instanceOf(el.childNodes[0], Text);
assert.equal(el.childNodes[0].textContent, str0);
assert.notInstanceOf(el.childNodes[1], Text);
assert.equal(el.childNodes[1].textContent, str1);
});
});
suite('tab indicators', () => {
let layer: DiffLayer;
const lineNumberEl = document.createElement('td');
setup(() => {
element.showTabs = true;
layer = element.createTabIndicatorLayer();
});
test('does nothing with empty line', () => {
const l = line('');
const el = document.createElement('div');
const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isFalse(annotateElementStub.called);
});
test('does nothing with no tabs', () => {
const str = 'lorem ipsum no tabs';
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isFalse(annotateElementStub.called);
});
test('annotates tab at beginning', () => {
const str = '\tlorem upsum';
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.equal(annotateElementStub.callCount, 1);
const args = annotateElementStub.getCalls()[0].args;
assert.equal(args[0], el);
assert.equal(args[1], 0, 'offset of tab indicator');
assert.equal(args[2], 1, 'length of tab indicator');
assert.include(args[3], 'tab-indicator');
});
test('does not annotate when disabled', () => {
element.showTabs = false;
const str = '\tlorem upsum';
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isFalse(annotateElementStub.called);
});
test('annotates multiple in beginning', () => {
const str = '\t\tlorem upsum';
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.equal(annotateElementStub.callCount, 2);
let args = annotateElementStub.getCalls()[0].args;
assert.equal(args[0], el);
assert.equal(args[1], 0, 'offset of tab indicator');
assert.equal(args[2], 1, 'length of tab indicator');
assert.include(args[3], 'tab-indicator');
args = annotateElementStub.getCalls()[1].args;
assert.equal(args[0], el);
assert.equal(args[1], 1, 'offset of tab indicator');
assert.equal(args[2], 1, 'length of tab indicator');
assert.include(args[3], 'tab-indicator');
});
test('annotates intermediate tabs', () => {
const str = 'lorem\tupsum';
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.equal(annotateElementStub.callCount, 1);
const args = annotateElementStub.getCalls()[0].args;
assert.equal(args[0], el);
assert.equal(args[1], 5, 'offset of tab indicator');
assert.equal(args[2], 1, 'length of tab indicator');
assert.include(args[3], 'tab-indicator');
});
});
suite('layers', () => {
let initialLayersCount = 0;
let withLayerCount = 0;
setup(() => {
const layers: DiffLayer[] = [];
element.layers = layers;
element.showTrailingWhitespace = true;
element.setupAnnotationLayers();
initialLayersCount = element.layersInternal.length;
});
test('no layers', () => {
element.setupAnnotationLayers();
assert.equal(element.layersInternal.length, initialLayersCount);
});
suite('with layers', () => {
const layers: DiffLayer[] = [{annotate: () => {}}, {annotate: () => {}}];
setup(() => {
element.layers = layers;
element.showTrailingWhitespace = true;
element.setupAnnotationLayers();
withLayerCount = element.layersInternal.length;
});
test('with layers', () => {
element.setupAnnotationLayers();
assert.equal(element.layersInternal.length, withLayerCount);
assert.equal(initialLayersCount + layers.length, withLayerCount);
});
});
});
suite('trailing whitespace', () => {
let layer: DiffLayer;
const lineNumberEl = document.createElement('td');
setup(() => {
element.showTrailingWhitespace = true;
layer = element.createTrailingWhitespaceLayer();
});
test('does nothing with empty line', () => {
const l = line('');
const el = document.createElement('div');
const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isFalse(annotateElementStub.called);
});
test('does nothing with no trailing whitespace', () => {
const str = 'lorem ipsum blah blah';
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isFalse(annotateElementStub.called);
});
test('annotates trailing spaces', () => {
const str = 'lorem ipsum ';
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isTrue(annotateElementStub.called);
assert.equal(annotateElementStub.lastCall.args[1], 11);
assert.equal(annotateElementStub.lastCall.args[2], 3);
});
test('annotates trailing tabs', () => {
const str = 'lorem ipsum\t\t\t';
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isTrue(annotateElementStub.called);
assert.equal(annotateElementStub.lastCall.args[1], 11);
assert.equal(annotateElementStub.lastCall.args[2], 3);
});
test('annotates mixed trailing whitespace', () => {
const str = 'lorem ipsum\t \t';
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isTrue(annotateElementStub.called);
assert.equal(annotateElementStub.lastCall.args[1], 11);
assert.equal(annotateElementStub.lastCall.args[2], 3);
});
test('unicode preceding trailing whitespace', () => {
const str = '💢\t';
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isTrue(annotateElementStub.called);
assert.equal(annotateElementStub.lastCall.args[1], 1);
assert.equal(annotateElementStub.lastCall.args[2], 1);
});
test('does not annotate when disabled', () => {
element.showTrailingWhitespace = false;
const str = 'lorem upsum\t \t ';
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isFalse(annotateElementStub.called);
});
});
suite('rendering text, images and binary files', () => {
let processStub: sinon.SinonStub;
let keyLocations: KeyLocations;
let content: DiffContent[] = [];
setup(() => {
element.viewMode = 'SIDE_BY_SIDE';
processStub = sinon
.stub(element.processor, 'process')
.returns(Promise.resolve());
keyLocations = {left: {}, right: {}};
element.prefs = {
...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 () => {
element.diff = {...createEmptyDiff(), content};
element.render(keyLocations);
await waitForEventOnce(diffTable, 'render-content');
assert.isTrue(processStub.calledOnce);
assert.isFalse(processStub.lastCall.args[1]);
});
test('image', async () => {
element.diff = {...createEmptyDiff(), content, binary: true};
element.isImageDiff = true;
element.render(keyLocations);
await waitForEventOnce(diffTable, 'render-content');
assert.isTrue(processStub.calledOnce);
assert.isTrue(processStub.lastCall.args[1]);
});
test('binary', async () => {
element.diff = {...createEmptyDiff(), content, binary: true};
element.render(keyLocations);
await waitForEventOnce(diffTable, 'render-content');
assert.isTrue(processStub.calledOnce);
assert.isTrue(processStub.lastCall.args[1]);
});
});
suite('rendering', () => {
let content: DiffContent[];
let outputEl: HTMLTableElement;
let keyLocations: KeyLocations;
let addColumnsStub: sinon.SinonStub;
let dispatchStub: sinon.SinonStub;
let builder: GrDiffBuilderSideBySide;
setup(() => {
const prefs = {...DEFAULT_PREFS};
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',
],
},
];
dispatchStub = sinon.stub(diffTable, 'dispatchEvent');
outputEl = element.diffElement!;
keyLocations = {left: {}, right: {}};
sinon.stub(element, 'getDiffBuilder').callsFake(() => {
builder = new GrDiffBuilderSideBySide(
{...createEmptyDiff(), content},
prefs,
outputEl
);
addColumnsStub = sinon.stub(builder, 'addColumns');
builder.buildSectionElement = function (group) {
const section = document.createElement('stub');
section.style.display = 'block';
section.textContent = group.lines.reduce(
(acc, line) => acc + line.text,
''
);
return section;
};
return builder;
});
element.diff = {...createEmptyDiff(), content};
element.prefs = prefs;
element.render(keyLocations);
});
test('addColumns is called', () => {
assert.isTrue(addColumnsStub.called);
});
test('getGroupsByLineRange one line', () => {
const section = outputEl.querySelector<HTMLElement>(
'stub:nth-of-type(3)'
);
const groups = builder.getGroupsByLineRange(1, 1, Side.LEFT);
assert.equal(groups.length, 1);
assert.strictEqual(groups[0].element, section);
});
test('getGroupsByLineRange over diff', () => {
const section = [
outputEl.querySelector<HTMLElement>('stub:nth-of-type(3)'),
outputEl.querySelector<HTMLElement>('stub:nth-of-type(4)'),
];
const groups = builder.getGroupsByLineRange(1, 2, Side.LEFT);
assert.equal(groups.length, 2);
assert.strictEqual(groups[0].element, section[0]);
assert.strictEqual(groups[1].element, section[1]);
});
test('render-start and render-content are fired', async () => {
await waitUntil(() => dispatchStub.callCount >= 1);
let firedEventTypes = dispatchStub.getCalls().map(c => c.args[0].type);
assert.include(firedEventTypes, 'render-start');
await waitUntil(() => dispatchStub.callCount >= 2);
firedEventTypes = dispatchStub.getCalls().map(c => c.args[0].type);
assert.include(firedEventTypes, 'render-content');
});
test('cancel cancels the processor', () => {
const processorCancelStub = sinon.stub(element.processor, 'cancel');
element.cleanup();
assert.isTrue(processorCancelStub.called);
});
});
suite('context hiding and expanding', () => {
let dispatchStub: sinon.SinonStub;
setup(async () => {
dispatchStub = sinon.stub(diffTable, 'dispatchEvent');
element.diff = {
...createEmptyDiff(),
content: [
{ab: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(i => `unchanged ${i}`)},
{a: ['before'], b: ['after']},
{ab: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(i => `unchanged ${10 + i}`)},
],
};
element.viewMode = DiffViewMode.SIDE_BY_SIDE;
const keyLocations: KeyLocations = {left: {}, right: {}};
element.prefs = {
...DEFAULT_PREFS,
context: 1,
};
element.render(keyLocations);
// Make sure all listeners are installed.
await element.untilGroupsRendered();
});
test('hides lines behind two context controls', () => {
const contextControls = diffTable.querySelectorAll('gr-context-controls');
assert.equal(contextControls.length, 2);
const diffRows = diffTable.querySelectorAll('.diff-row');
// The first two are LOST and FILE line
assert.equal(diffRows.length, 2 + 1 + 1 + 1);
assert.include(diffRows[2].textContent, 'unchanged 10');
assert.include(diffRows[3].textContent, 'before');
assert.include(diffRows[3].textContent, 'after');
assert.include(diffRows[4].textContent, 'unchanged 11');
});
test('clicking +x common lines expands those lines', () => {
const contextControls = diffTable.querySelectorAll('gr-context-controls');
const topExpandCommonButton =
contextControls[0].shadowRoot?.querySelectorAll<HTMLElement>(
'.showContext'
)[0];
assert.isOk(topExpandCommonButton);
assert.include(topExpandCommonButton!.textContent, '+9 common lines');
topExpandCommonButton!.click();
const diffRows = diffTable.querySelectorAll('.diff-row');
// The first two are LOST and FILE line
assert.equal(diffRows.length, 2 + 10 + 1 + 1);
assert.include(diffRows[2].textContent, 'unchanged 1');
assert.include(diffRows[3].textContent, 'unchanged 2');
assert.include(diffRows[4].textContent, 'unchanged 3');
assert.include(diffRows[5].textContent, 'unchanged 4');
assert.include(diffRows[6].textContent, 'unchanged 5');
assert.include(diffRows[7].textContent, 'unchanged 6');
assert.include(diffRows[8].textContent, 'unchanged 7');
assert.include(diffRows[9].textContent, 'unchanged 8');
assert.include(diffRows[10].textContent, 'unchanged 9');
assert.include(diffRows[11].textContent, 'unchanged 10');
assert.include(diffRows[12].textContent, 'before');
assert.include(diffRows[12].textContent, 'after');
assert.include(diffRows[13].textContent, 'unchanged 11');
});
test('unhideLine shows the line with context', async () => {
dispatchStub.reset();
element.unhideLine(4, Side.LEFT);
const diffRows = diffTable.querySelectorAll('.diff-row');
// The first two are LOST and FILE line
// Lines 3-5 (Line 4 plus 1 context in each direction) will be expanded
// Because context expanders do not hide <3 lines, lines 1-2 will also
// be shown.
// Lines 6-9 continue to be hidden
assert.equal(diffRows.length, 2 + 5 + 1 + 1 + 1);
assert.include(diffRows[2].textContent, 'unchanged 1');
assert.include(diffRows[3].textContent, 'unchanged 2');
assert.include(diffRows[4].textContent, 'unchanged 3');
assert.include(diffRows[5].textContent, 'unchanged 4');
assert.include(diffRows[6].textContent, 'unchanged 5');
assert.include(diffRows[7].textContent, 'unchanged 10');
assert.include(diffRows[8].textContent, 'before');
assert.include(diffRows[8].textContent, 'after');
assert.include(diffRows[9].textContent, 'unchanged 11');
await element.untilGroupsRendered();
const firedEventTypes = dispatchStub.getCalls().map(c => c.args[0].type);
assert.include(firedEventTypes, 'render-content');
});
});
[DiffViewMode.UNIFIED, DiffViewMode.SIDE_BY_SIDE].forEach(mode => {
suite(`mock-diff mode:${mode}`, () => {
let builder: GrDiffBuilderSideBySide;
let diff: DiffInfo;
let keyLocations: KeyLocations;
setup(() => {
element.viewMode = mode;
diff = createDiff();
element.diff = diff;
keyLocations = {left: {}, right: {}};
element.prefs = {
...createDefaultDiffPrefs(),
line_length: 80,
show_tabs: true,
tab_size: 4,
};
element.render(keyLocations);
builder = element.builder as GrDiffBuilderSideBySide;
});
test('aria-labels on added line numbers', () => {
const deltaLineNumberButton = diffTable.querySelectorAll(
'.lineNumButton.right'
)[5];
assert.isOk(deltaLineNumberButton);
assert.equal(
deltaLineNumberButton.getAttribute('aria-label'),
'5 added'
);
});
test('aria-labels on removed line numbers', () => {
const deltaLineNumberButton = diffTable.querySelectorAll(
'.lineNumButton.left'
)[10];
assert.isOk(deltaLineNumberButton);
assert.equal(
deltaLineNumberButton.getAttribute('aria-label'),
'10 removed'
);
});
test('getContentByLine', () => {
let actual: HTMLElement | null;
actual = builder.getContentByLine(2, Side.LEFT);
assert.equal(actual?.textContent, diff.content[0].ab?.[1]);
actual = builder.getContentByLine(2, Side.RIGHT);
assert.equal(actual?.textContent, diff.content[0].ab?.[1]);
actual = builder.getContentByLine(5, Side.LEFT);
assert.equal(actual?.textContent, diff.content[2].ab?.[0]);
actual = builder.getContentByLine(5, Side.RIGHT);
assert.equal(actual?.textContent, diff.content[1].b?.[0]);
});
test('getContentTdByLineEl works both with button and td', () => {
const diffRow = diffTable.querySelectorAll('tr.diff-row')[2];
const lineNumTdLeft = queryAndAssert(diffRow, 'td.lineNum.left');
const lineNumButtonLeft = queryAndAssert(lineNumTdLeft, 'button');
const contentTdLeft = diffRow.querySelectorAll('.content')[0];
const lineNumTdRight = queryAndAssert(diffRow, 'td.lineNum.right');
const lineNumButtonRight = queryAndAssert(lineNumTdRight, 'button');
const contentTdRight =
mode === DiffViewMode.SIDE_BY_SIDE
? diffRow.querySelectorAll('.content')[1]
: contentTdLeft;
assert.equal(
element.getContentTdByLineEl(lineNumTdLeft),
contentTdLeft
);
assert.equal(
element.getContentTdByLineEl(lineNumButtonLeft),
contentTdLeft
);
assert.equal(
element.getContentTdByLineEl(lineNumTdRight),
contentTdRight
);
assert.equal(
element.getContentTdByLineEl(lineNumButtonRight),
contentTdRight
);
});
test('findLinesByRange LEFT', () => {
const lines: GrDiffLine[] = [];
const elems: HTMLElement[] = [];
const start = 1;
const end = 44;
// lines 26-29 are collapsed, so minus 4
let count = end - start + 1 - 4;
// Lines 14+15 are part of a 'common' chunk. And we have a bug in
// unified diff that results in not rendering these lines for the LEFT
// side. TODO: Fix that bug!
if (mode === DiffViewMode.UNIFIED) count -= 2;
builder.findLinesByRange(start, end, Side.LEFT, lines, elems);
assert.equal(lines.length, count);
assert.equal(elems.length, count);
for (let i = 0; i < count; i++) {
assert.instanceOf(lines[i], GrDiffLine);
assert.instanceOf(elems[i], HTMLElement);
assert.equal(lines[i].text, elems[i].textContent);
}
});
test('findLinesByRange RIGHT', () => {
const lines: GrDiffLine[] = [];
const elems: HTMLElement[] = [];
const start = 1;
const end = 48;
// lines 26-29 are collapsed, so minus 4
const count = end - start + 1 - 4;
builder.findLinesByRange(start, end, Side.RIGHT, lines, elems);
assert.equal(lines.length, count);
assert.equal(elems.length, count);
for (let i = 0; i < count; i++) {
assert.instanceOf(lines[i], GrDiffLine);
assert.instanceOf(elems[i], HTMLElement);
assert.equal(lines[i].text, elems[i].textContent);
}
});
test('renderContentByRange', () => {
const spy = sinon.spy(builder, 'createTextEl');
const start = 9;
const end = 14;
let count = end - start + 1;
// Lines 14+15 are part of a 'common' chunk. And we have a bug in
// unified diff that results in not rendering these lines for the LEFT
// side. TODO: Fix that bug!
if (mode === DiffViewMode.UNIFIED) count -= 1;
builder.renderContentByRange(start, end, Side.LEFT);
assert.equal(spy.callCount, count);
spy.getCalls().forEach((call, i: number) => {
assert.equal(call.args[1].beforeNumber, start + i);
});
});
test('renderContentByRange non-existent elements', () => {
const spy = sinon.spy(builder, 'createTextEl');
sinon
.stub(builder, 'getLineNumberEl')
.returns(document.createElement('div'));
sinon
.stub(builder, 'findLinesByRange')
.callsFake((_1, _2, _3, lines, elements) => {
// Add a line and a corresponding element.
lines?.push(new GrDiffLine(GrDiffLineType.BOTH));
const tr = document.createElement('tr');
const td = document.createElement('td');
const el = document.createElement('div');
tr.appendChild(td);
td.appendChild(el);
elements?.push(el);
// Add 2 lines without corresponding elements.
lines?.push(new GrDiffLine(GrDiffLineType.BOTH));
lines?.push(new GrDiffLine(GrDiffLineType.BOTH));
});
builder.renderContentByRange(1, 10, Side.LEFT);
// Should be called only once because only one line had a corresponding
// element.
assert.equal(spy.callCount, 1);
});
test('getLineNumberEl side-by-side left', () => {
const contentEl = builder.getContentByLine(
5,
Side.LEFT,
element.diffElement as HTMLTableElement
);
assert.isOk(contentEl);
const lineNumberEl = builder.getLineNumberEl(contentEl!, Side.LEFT);
assert.isOk(lineNumberEl);
assert.isTrue(lineNumberEl!.classList.contains('lineNum'));
assert.isTrue(lineNumberEl!.classList.contains(Side.LEFT));
});
test('getLineNumberEl side-by-side right', () => {
const contentEl = builder.getContentByLine(
5,
Side.RIGHT,
element.diffElement as HTMLTableElement
);
assert.isOk(contentEl);
const lineNumberEl = builder.getLineNumberEl(contentEl!, Side.RIGHT);
assert.isOk(lineNumberEl);
assert.isTrue(lineNumberEl!.classList.contains('lineNum'));
assert.isTrue(lineNumberEl!.classList.contains(Side.RIGHT));
});
test('getLineNumberEl unified left', async () => {
// Re-render as unified:
element.viewMode = 'UNIFIED_DIFF';
element.render(keyLocations);
builder = element.builder as GrDiffBuilderSideBySide;
const contentEl = builder.getContentByLine(
5,
Side.LEFT,
element.diffElement as HTMLTableElement
);
assert.isOk(contentEl);
const lineNumberEl = builder.getLineNumberEl(contentEl!, Side.LEFT);
assert.isOk(lineNumberEl);
assert.isTrue(lineNumberEl!.classList.contains('lineNum'));
assert.isTrue(lineNumberEl!.classList.contains(Side.LEFT));
});
test('getLineNumberEl unified right', async () => {
// Re-render as unified:
element.viewMode = 'UNIFIED_DIFF';
element.render(keyLocations);
builder = element.builder as GrDiffBuilderSideBySide;
const contentEl = builder.getContentByLine(
5,
Side.RIGHT,
element.diffElement as HTMLTableElement
);
assert.isOk(contentEl);
const lineNumberEl = builder.getLineNumberEl(contentEl!, Side.RIGHT);
assert.isOk(lineNumberEl);
assert.isTrue(lineNumberEl!.classList.contains('lineNum'));
assert.isTrue(lineNumberEl!.classList.contains(Side.RIGHT));
});
test('getNextContentOnSide side-by-side left', () => {
const startElem = builder.getContentByLine(
5,
Side.LEFT,
element.diffElement as HTMLTableElement
);
assert.isOk(startElem);
const expectedStartString = diff.content[2].ab?.[0];
const expectedNextString = diff.content[2].ab?.[1];
assert.equal(startElem!.textContent, expectedStartString);
const nextElem = builder.getNextContentOnSide(startElem!, Side.LEFT);
assert.isOk(nextElem);
assert.equal(nextElem!.textContent, expectedNextString);
});
test('getNextContentOnSide side-by-side right', () => {
const startElem = builder.getContentByLine(
5,
Side.RIGHT,
element.diffElement as HTMLTableElement
);
const expectedStartString = diff.content[1].b?.[0];
const expectedNextString = diff.content[1].b?.[1];
assert.isOk(startElem);
assert.equal(startElem!.textContent, expectedStartString);
const nextElem = builder.getNextContentOnSide(startElem!, Side.RIGHT);
assert.isOk(nextElem);
assert.equal(nextElem!.textContent, expectedNextString);
});
test('getNextContentOnSide unified left', async () => {
// Re-render as unified:
element.viewMode = 'UNIFIED_DIFF';
element.render(keyLocations);
builder = element.builder as GrDiffBuilderSideBySide;
const startElem = builder.getContentByLine(
5,
Side.LEFT,
element.diffElement as HTMLTableElement
);
const expectedStartString = diff.content[2].ab?.[0];
const expectedNextString = diff.content[2].ab?.[1];
assert.isOk(startElem);
assert.equal(startElem!.textContent, expectedStartString);
const nextElem = builder.getNextContentOnSide(startElem!, Side.LEFT);
assert.isOk(nextElem);
assert.equal(nextElem!.textContent, expectedNextString);
});
test('getNextContentOnSide unified right', async () => {
// Re-render as unified:
element.viewMode = 'UNIFIED_DIFF';
element.render(keyLocations);
builder = element.builder as GrDiffBuilderSideBySide;
const startElem = builder.getContentByLine(
5,
Side.RIGHT,
element.diffElement as HTMLTableElement
);
const expectedStartString = diff.content[1].b?.[0];
const expectedNextString = diff.content[1].b?.[1];
assert.isOk(startElem);
assert.equal(startElem!.textContent, expectedStartString);
const nextElem = builder.getNextContentOnSide(startElem!, Side.RIGHT);
assert.isOk(nextElem);
assert.equal(nextElem!.textContent, expectedNextString);
});
});
});
suite('blame', () => {
let mockBlame: BlameInfo[];
setup(() => {
mockBlame = [
{
author: 'test-author',
time: 314,
commit_msg: 'test-commit-message',
id: 'commit 1',
ranges: [
{start: 1, end: 2},
{start: 10, end: 16},
],
},
{
author: 'test-author',
time: 314,
commit_msg: 'test-commit-message',
id: 'commit 2',
ranges: [
{start: 4, end: 10},
{start: 17, end: 32},
],
},
];
});
test('setBlame attempts to render each blamed line', () => {
const getBlameStub = sinon
.stub(builder, 'getBlameTdByLine')
.returns(undefined);
builder.setBlame(mockBlame);
assert.equal(getBlameStub.callCount, 32);
});
test('getBlameCommitForBaseLine', () => {
sinon.stub(builder, 'getBlameTdByLine').returns(undefined);
builder.setBlame(mockBlame);
assert.isOk(builder.getBlameCommitForBaseLine(1));
assert.equal(builder.getBlameCommitForBaseLine(1)?.id, 'commit 1');
assert.isOk(builder.getBlameCommitForBaseLine(11));
assert.equal(builder.getBlameCommitForBaseLine(11)?.id, 'commit 1');
assert.isOk(builder.getBlameCommitForBaseLine(32));
assert.equal(builder.getBlameCommitForBaseLine(32)?.id, 'commit 2');
assert.isUndefined(builder.getBlameCommitForBaseLine(33));
});
test('getBlameCommitForBaseLine w/o blame returns null', () => {
assert.isUndefined(builder.getBlameCommitForBaseLine(1));
assert.isUndefined(builder.getBlameCommitForBaseLine(11));
assert.isUndefined(builder.getBlameCommitForBaseLine(31));
});
test('createBlameCell', () => {
const mockBlameInfo = {
time: 1576155200,
id: '1234567890',
author: 'Clark Kent',
commit_msg: 'Testing Commit',
ranges: [{start: 4, end: 10}],
};
const getBlameStub = sinon
.stub(builder, 'getBlameCommitForBaseLine')
.returns(mockBlameInfo);
const line = new GrDiffLine(GrDiffLineType.BOTH);
line.beforeNumber = 3;
line.afterNumber = 5;
const result = builder.createBlameCell(line.beforeNumber);
assert.isTrue(getBlameStub.calledWithExactly(3));
assert.equal(result.getAttribute('data-line-number'), '3');
assert.dom.equal(
result,
/* HTML */ `
<span class="gr-diff">
<a class="blameDate gr-diff" href="/r/q/1234567890"> 12/12/2019 </a>
<span class="blameAuthor gr-diff">Clark</span>
<gr-hovercard class="gr-diff">
<span class="blameHoverCard gr-diff">
Commit 1234567890<br />
Author: Clark Kent<br />
Date: 12/12/2019<br />
<br />
Testing Commit
</span>
</gr-hovercard>
</span>
`
);
});
});
});