2016-03-13 21:23:11 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<!--
|
|
|
|
|
Copyright (C) 2016 The Android Open Source Project
|
|
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
|
limitations under the License.
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
|
|
|
|
<title>gr-diff-builder</title>
|
|
|
|
|
|
2016-06-27 12:19:21 -07:00
|
|
|
<script src="../../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
|
2016-03-13 21:23:11 -04:00
|
|
|
<script src="../../../bower_components/web-component-tester/browser.js"></script>
|
2016-07-14 12:31:09 -07:00
|
|
|
<script src="../../../scripts/util.js"></script>
|
2016-06-01 11:41:47 -07:00
|
|
|
<script src="../gr-diff/gr-diff-line.js"></script>
|
|
|
|
|
<script src="../gr-diff/gr-diff-group.js"></script>
|
2016-07-14 12:31:09 -07:00
|
|
|
<script src="../gr-diff-highlight/gr-annotation.js"></script>
|
2016-03-13 21:23:11 -04:00
|
|
|
<script src="gr-diff-builder.js"></script>
|
|
|
|
|
|
2016-07-18 10:12:59 -07:00
|
|
|
<link rel="import" href="../../shared/gr-rest-api-interface/mock-diff-response_test.html">
|
2016-06-27 12:19:21 -07:00
|
|
|
<link rel="import" href="gr-diff-builder.html">
|
|
|
|
|
|
|
|
|
|
<test-fixture id="basic">
|
|
|
|
|
<template>
|
|
|
|
|
<gr-diff-builder>
|
|
|
|
|
<table id="diffTable"></table>
|
|
|
|
|
</gr-diff-builder>
|
|
|
|
|
</template>
|
|
|
|
|
</test-fixture>
|
|
|
|
|
|
2016-07-13 10:59:10 -07:00
|
|
|
<test-fixture id="div-with-text">
|
|
|
|
|
<template>
|
|
|
|
|
<div>Lorem ipsum dolor sit amet, suspendisse inceptos vehicula</div>
|
|
|
|
|
</template>
|
|
|
|
|
</test-fixture>
|
2016-06-27 12:19:21 -07:00
|
|
|
|
2016-07-15 17:08:22 -07:00
|
|
|
<test-fixture id="mock-diff">
|
|
|
|
|
<template>
|
|
|
|
|
<gr-diff-builder view-mode="SIDE_BY_SIDE">
|
|
|
|
|
<table id="diffTable"></table>
|
|
|
|
|
</gr-diff-builder>
|
|
|
|
|
</template>
|
|
|
|
|
</test-fixture>
|
|
|
|
|
|
2016-03-13 21:23:11 -04:00
|
|
|
<script>
|
|
|
|
|
suite('gr-diff-builder tests', function() {
|
2016-07-13 21:06:03 +02:00
|
|
|
var element;
|
2016-03-22 16:34:03 -04:00
|
|
|
var builder;
|
|
|
|
|
|
|
|
|
|
setup(function() {
|
|
|
|
|
var prefs = {
|
|
|
|
|
line_length: 10,
|
|
|
|
|
show_tabs: true,
|
|
|
|
|
tab_size: 4,
|
|
|
|
|
};
|
|
|
|
|
builder = new GrDiffBuilder({content: []}, {left: [], right: []}, prefs);
|
|
|
|
|
});
|
2016-03-13 21:23:11 -04:00
|
|
|
|
2016-06-01 15:13:33 -07:00
|
|
|
test('context control buttons', function() {
|
|
|
|
|
var section = {};
|
|
|
|
|
var line = {contextGroup: {lines: []}};
|
|
|
|
|
|
|
|
|
|
// Create 10 lines.
|
|
|
|
|
for (var i = 0; i < 10; i++) {
|
|
|
|
|
line.contextGroup.lines.push('lorem upsum');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Does not include +10 buttons when there are fewer than 11 lines.
|
|
|
|
|
var td = builder._createContextControl(section, line);
|
|
|
|
|
var buttons = td.querySelectorAll('gr-button.showContext');
|
|
|
|
|
|
|
|
|
|
assert.equal(buttons.length, 1);
|
|
|
|
|
assert.equal(buttons[0].textContent, 'Show 10 common lines');
|
|
|
|
|
|
|
|
|
|
// Add another line.
|
|
|
|
|
line.contextGroup.lines.push('lorem upsum');
|
|
|
|
|
|
|
|
|
|
// Includes +10 buttons when there are at least 11 lines.
|
|
|
|
|
td = builder._createContextControl(section, line);
|
|
|
|
|
buttons = td.querySelectorAll('gr-button.showContext');
|
|
|
|
|
|
|
|
|
|
assert.equal(buttons.length, 3);
|
|
|
|
|
assert.equal(buttons[0].textContent, '+10↑');
|
|
|
|
|
assert.equal(buttons[1].textContent, 'Show 11 common lines');
|
|
|
|
|
assert.equal(buttons[2].textContent, '+10↓');
|
|
|
|
|
});
|
|
|
|
|
|
2016-03-17 14:39:42 -04:00
|
|
|
test('newlines', function() {
|
|
|
|
|
var text = 'abcdef';
|
|
|
|
|
assert.equal(builder._addNewlines(text, text), text);
|
|
|
|
|
text = 'a'.repeat(20);
|
|
|
|
|
assert.equal(builder._addNewlines(text, text),
|
|
|
|
|
'a'.repeat(10) +
|
|
|
|
|
GrDiffBuilder.LINE_FEED_HTML +
|
|
|
|
|
'a'.repeat(10));
|
|
|
|
|
|
|
|
|
|
text = '<span class="thumbsup">👍</span>';
|
|
|
|
|
var html = '<span class="thumbsup">👍</span>';
|
|
|
|
|
assert.equal(builder._addNewlines(text, html),
|
|
|
|
|
'<span clas' +
|
|
|
|
|
GrDiffBuilder.LINE_FEED_HTML +
|
|
|
|
|
's="thumbsu' +
|
|
|
|
|
GrDiffBuilder.LINE_FEED_HTML +
|
|
|
|
|
'p">👍</spa' +
|
|
|
|
|
GrDiffBuilder.LINE_FEED_HTML +
|
|
|
|
|
'n>');
|
|
|
|
|
|
|
|
|
|
text = '01234\t56789';
|
|
|
|
|
assert.equal(builder._addNewlines(text, text),
|
|
|
|
|
'01234\t5' +
|
|
|
|
|
GrDiffBuilder.LINE_FEED_HTML +
|
|
|
|
|
'6789');
|
|
|
|
|
});
|
|
|
|
|
|
2016-07-11 17:32:53 -07:00
|
|
|
test('text length with tabs and unicode', function() {
|
2016-04-11 21:17:38 -04:00
|
|
|
assert.equal(builder._textLength('12345', 4), 5);
|
|
|
|
|
assert.equal(builder._textLength('\t\t12', 4), 10);
|
2016-07-11 17:32:53 -07:00
|
|
|
assert.equal(builder._textLength('abc💢123', 4), 7);
|
2016-07-12 13:50:26 -07:00
|
|
|
|
|
|
|
|
assert.equal(builder._textLength('abc\t', 8), 8);
|
|
|
|
|
assert.equal(builder._textLength('abc\t\t', 10), 20);
|
|
|
|
|
assert.equal(builder._textLength('', 10), 0);
|
|
|
|
|
assert.equal(builder._textLength('', 10), 0);
|
|
|
|
|
assert.equal(builder._textLength('abc\tde', 10), 12);
|
|
|
|
|
assert.equal(builder._textLength('abc\tde\t', 10), 20);
|
|
|
|
|
assert.equal(builder._textLength('\t\t\t\t\t', 20), 100);
|
2016-04-11 21:17:38 -04:00
|
|
|
});
|
|
|
|
|
|
2016-03-17 14:39:42 -04:00
|
|
|
test('tab wrapper insertion', function() {
|
|
|
|
|
var html = 'abc\tdef';
|
2016-03-22 16:34:03 -04:00
|
|
|
var wrapper = builder._getTabWrapper(
|
2016-07-12 13:50:26 -07:00
|
|
|
builder._prefs.tab_size - 3,
|
2016-03-22 16:34:03 -04:00
|
|
|
builder._prefs.show_tabs);
|
2016-03-18 16:06:37 -04:00
|
|
|
assert.ok(wrapper);
|
|
|
|
|
assert.isAbove(wrapper.length, 0);
|
2016-07-12 13:50:26 -07:00
|
|
|
assert.equal(builder._addTabWrappers(html, builder._prefs.tab_size),
|
|
|
|
|
'abc' + wrapper + 'def');
|
2016-03-17 14:39:42 -04:00
|
|
|
assert.throws(builder._getTabWrapper.bind(
|
|
|
|
|
builder,
|
2016-06-15 11:57:36 -07:00
|
|
|
// using \x3c instead of < in string so gjslint can parse
|
|
|
|
|
'">\x3cimg src="/" onerror="alert(1);">\x3cspan class="',
|
2016-03-17 14:39:42 -04:00
|
|
|
true));
|
|
|
|
|
});
|
2016-03-20 14:14:20 -04:00
|
|
|
|
|
|
|
|
test('comments', function() {
|
|
|
|
|
var line = new GrDiffLine(GrDiffLine.Type.BOTH);
|
|
|
|
|
line.beforeNumber = 3;
|
|
|
|
|
line.afterNumber = 5;
|
|
|
|
|
|
2016-04-29 22:25:51 +02:00
|
|
|
var comments = {left: [], right: []};
|
2016-03-22 16:34:03 -04:00
|
|
|
assert.deepEqual(builder._getCommentsForLine(comments, line), []);
|
|
|
|
|
assert.deepEqual(builder._getCommentsForLine(comments, line,
|
|
|
|
|
GrDiffBuilder.Side.LEFT), []);
|
|
|
|
|
assert.deepEqual(builder._getCommentsForLine(comments, line,
|
|
|
|
|
GrDiffBuilder.Side.RIGHT), []);
|
2016-03-20 14:14:20 -04:00
|
|
|
|
|
|
|
|
comments = {
|
|
|
|
|
left: [
|
|
|
|
|
{id: 'l3', line: 3},
|
|
|
|
|
{id: 'l5', line: 5},
|
|
|
|
|
],
|
|
|
|
|
right: [
|
|
|
|
|
{id: 'r3', line: 3},
|
|
|
|
|
{id: 'r5', line: 5},
|
|
|
|
|
],
|
|
|
|
|
};
|
2016-03-22 16:34:03 -04:00
|
|
|
assert.deepEqual(builder._getCommentsForLine(comments, line),
|
2016-03-20 14:14:20 -04:00
|
|
|
[{id: 'l3', line: 3}, {id: 'r5', line: 5}]);
|
2016-03-22 16:34:03 -04:00
|
|
|
assert.deepEqual(builder._getCommentsForLine(comments, line,
|
|
|
|
|
GrDiffBuilder.Side.LEFT), [{id: 'l3', line: 3}]);
|
|
|
|
|
assert.deepEqual(builder._getCommentsForLine(comments, line,
|
|
|
|
|
GrDiffBuilder.Side.RIGHT), [{id: 'r5', line: 5}]);
|
|
|
|
|
});
|
|
|
|
|
|
2016-03-22 19:14:12 -04:00
|
|
|
test('comment thread creation', function() {
|
|
|
|
|
builder._comments = {
|
|
|
|
|
meta: {
|
|
|
|
|
changeNum: '42',
|
|
|
|
|
patchRange: {
|
|
|
|
|
basePatchNum: 'PARENT',
|
|
|
|
|
patchNum: '3',
|
|
|
|
|
},
|
|
|
|
|
path: '/path/to/foo',
|
|
|
|
|
projectConfig: {foo: 'bar'},
|
|
|
|
|
},
|
|
|
|
|
left: [
|
|
|
|
|
{id: 'l3', line: 3},
|
|
|
|
|
{id: 'l5', line: 5},
|
|
|
|
|
],
|
|
|
|
|
right: [
|
|
|
|
|
{id: 'r5', line: 5},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
2016-04-29 22:25:51 +02:00
|
|
|
function checkThreadProps(threadEl, patchNum, side, comments) {
|
2016-03-22 19:14:12 -04:00
|
|
|
assert.equal(threadEl.changeNum, '42');
|
|
|
|
|
assert.equal(threadEl.patchNum, patchNum);
|
|
|
|
|
assert.equal(threadEl.path, '/path/to/foo');
|
|
|
|
|
assert.equal(threadEl.side, side);
|
|
|
|
|
assert.deepEqual(threadEl.projectConfig, {foo: 'bar'});
|
|
|
|
|
assert.deepEqual(threadEl.comments, comments);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var line = new GrDiffLine(GrDiffLine.Type.BOTH);
|
|
|
|
|
line.beforeNumber = 5;
|
|
|
|
|
line.afterNumber = 5;
|
2016-04-29 22:25:51 +02:00
|
|
|
var threadEl = builder._commentThreadForLine(line);
|
|
|
|
|
checkThreadProps(threadEl, '3', 'REVISION',
|
2016-03-22 19:14:12 -04:00
|
|
|
[{id: 'l5', line: 5}, {id: 'r5', line: 5}]);
|
|
|
|
|
|
|
|
|
|
threadEl = builder._commentThreadForLine(line, GrDiffBuilder.Side.RIGHT);
|
2016-04-29 22:25:51 +02:00
|
|
|
checkThreadProps(threadEl, '3', 'REVISION', [{id: 'r5', line: 5}]);
|
2016-03-22 19:14:12 -04:00
|
|
|
|
|
|
|
|
threadEl = builder._commentThreadForLine(line, GrDiffBuilder.Side.LEFT);
|
2016-04-29 22:25:51 +02:00
|
|
|
checkThreadProps(threadEl, '3', 'PARENT', [{id: 'l5', line: 5}]);
|
2016-03-22 19:14:12 -04:00
|
|
|
|
|
|
|
|
builder._comments.meta.patchRange.basePatchNum = '1';
|
|
|
|
|
|
|
|
|
|
threadEl = builder._commentThreadForLine(line);
|
2016-04-29 22:25:51 +02:00
|
|
|
checkThreadProps(threadEl, '3', 'REVISION',
|
2016-03-22 19:14:12 -04:00
|
|
|
[{id: 'l5', line: 5}, {id: 'r5', line: 5}]);
|
|
|
|
|
|
|
|
|
|
threadEl = builder._commentThreadForLine(line, GrDiffBuilder.Side.LEFT);
|
2016-04-29 22:25:51 +02:00
|
|
|
checkThreadProps(threadEl, '1', 'REVISION', [{id: 'l5', line: 5}]);
|
2016-03-22 19:14:12 -04:00
|
|
|
|
|
|
|
|
threadEl = builder._commentThreadForLine(line, GrDiffBuilder.Side.RIGHT);
|
2016-04-29 22:25:51 +02:00
|
|
|
checkThreadProps(threadEl, '3', 'REVISION', [{id: 'r5', line: 5}]);
|
2016-03-22 19:14:12 -04:00
|
|
|
|
|
|
|
|
builder._comments.meta.patchRange.basePatchNum = 'PARENT';
|
|
|
|
|
|
|
|
|
|
line = new GrDiffLine(GrDiffLine.Type.REMOVE);
|
|
|
|
|
line.beforeNumber = 5;
|
|
|
|
|
line.afterNumber = 5;
|
|
|
|
|
threadEl = builder._commentThreadForLine(line);
|
2016-04-29 22:25:51 +02:00
|
|
|
checkThreadProps(threadEl, '3', 'PARENT',
|
2016-03-22 19:14:12 -04:00
|
|
|
[{id: 'l5', line: 5}, {id: 'r5', line: 5}]);
|
|
|
|
|
|
|
|
|
|
line = new GrDiffLine(GrDiffLine.Type.ADD);
|
|
|
|
|
line.beforeNumber = 3;
|
|
|
|
|
line.afterNumber = 5;
|
|
|
|
|
threadEl = builder._commentThreadForLine(line);
|
2016-04-29 22:25:51 +02:00
|
|
|
checkThreadProps(threadEl, '3', 'REVISION',
|
2016-03-22 19:14:12 -04:00
|
|
|
[{id: 'l3', line: 3}, {id: 'r5', line: 5}]);
|
|
|
|
|
});
|
|
|
|
|
|
2016-07-13 10:59:10 -07:00
|
|
|
suite('intraline differences', function() {
|
|
|
|
|
var el;
|
|
|
|
|
var str;
|
|
|
|
|
var annotateElementSpy;
|
2016-07-14 12:31:09 -07:00
|
|
|
var layer;
|
2016-07-13 10:59:10 -07:00
|
|
|
|
|
|
|
|
function slice(str, start, end) {
|
|
|
|
|
return Array.from(str).slice(start, end).join('');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setup(function() {
|
|
|
|
|
el = fixture('div-with-text');
|
|
|
|
|
str = el.textContent;
|
|
|
|
|
annotateElementSpy = sinon.spy(GrAnnotation, 'annotateElement');
|
2016-07-14 12:31:09 -07:00
|
|
|
layer = document.createElement('gr-diff-builder')
|
|
|
|
|
._createIntralineLayer();
|
2016-07-13 10:59:10 -07:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
teardown(function() {
|
|
|
|
|
annotateElementSpy.restore();
|
|
|
|
|
});
|
|
|
|
|
|
2016-07-14 12:31:09 -07:00
|
|
|
test('annotate no highlights', function() {
|
2016-07-13 10:59:10 -07:00
|
|
|
var line = {
|
|
|
|
|
text: str,
|
|
|
|
|
highlights: [],
|
|
|
|
|
};
|
|
|
|
|
|
2016-07-14 12:31:09 -07:00
|
|
|
layer.annotate(el, line, GrAnnotation);
|
2016-07-13 10:59:10 -07:00
|
|
|
|
|
|
|
|
// 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);
|
|
|
|
|
});
|
|
|
|
|
|
2016-07-14 12:31:09 -07:00
|
|
|
test('annotate with highlights', function() {
|
2016-07-13 10:59:10 -07:00
|
|
|
var line = {
|
|
|
|
|
text: str,
|
|
|
|
|
highlights: [
|
|
|
|
|
{startIndex: 6, endIndex: 12},
|
|
|
|
|
{startIndex: 18, endIndex: 22},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
var str0 = slice(str, 0, 6);
|
|
|
|
|
var str1 = slice(str, 6, 12);
|
|
|
|
|
var str2 = slice(str, 12, 18);
|
|
|
|
|
var str3 = slice(str, 18, 22);
|
|
|
|
|
var str4 = slice(str, 22);
|
|
|
|
|
|
2016-07-14 12:31:09 -07:00
|
|
|
layer.annotate(el, line, GrAnnotation);
|
2016-07-13 10:59:10 -07:00
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
});
|
|
|
|
|
|
2016-07-14 12:31:09 -07:00
|
|
|
test('annotate without endIndex', function() {
|
2016-07-13 10:59:10 -07:00
|
|
|
var line = {
|
|
|
|
|
text: str,
|
|
|
|
|
highlights: [
|
|
|
|
|
{startIndex: 28},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var str0 = slice(str, 0, 28);
|
|
|
|
|
var str1 = slice(str, 28);
|
|
|
|
|
|
2016-07-14 12:31:09 -07:00
|
|
|
layer.annotate(el, line, GrAnnotation);
|
2016-07-13 10:59:10 -07:00
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
});
|
|
|
|
|
|
2016-07-14 12:31:09 -07:00
|
|
|
test('annotate ignores empty highlights', function() {
|
2016-07-13 10:59:10 -07:00
|
|
|
var line = {
|
|
|
|
|
text: str,
|
|
|
|
|
highlights: [
|
|
|
|
|
{startIndex: 28, endIndex: 28},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
2016-07-14 12:31:09 -07:00
|
|
|
layer.annotate(el, line, GrAnnotation);
|
2016-07-13 10:59:10 -07:00
|
|
|
|
|
|
|
|
assert.isFalse(annotateElementSpy.called);
|
|
|
|
|
assert.equal(el.childNodes.length, 1);
|
|
|
|
|
});
|
|
|
|
|
|
2016-07-14 12:31:09 -07:00
|
|
|
test('annotate handles unicode', function() {
|
2016-07-13 10:59:10 -07:00
|
|
|
// Put some unicode into the string:
|
|
|
|
|
str = str.replace(/\s/g, '💢');
|
|
|
|
|
el.textContent = str;
|
|
|
|
|
var line = {
|
|
|
|
|
text: str,
|
|
|
|
|
highlights: [
|
|
|
|
|
{startIndex: 6, endIndex: 12},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var str0 = slice(str, 0, 6);
|
|
|
|
|
var str1 = slice(str, 6, 12);
|
|
|
|
|
var str2 = slice(str, 12);
|
|
|
|
|
|
2016-07-14 12:31:09 -07:00
|
|
|
layer.annotate(el, line, GrAnnotation);
|
2016-07-13 10:59:10 -07:00
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
});
|
|
|
|
|
|
2016-07-14 12:31:09 -07:00
|
|
|
test('annotate handles unicode w/o endIndex', function() {
|
2016-07-13 10:59:10 -07:00
|
|
|
// Put some unicode into the string:
|
|
|
|
|
str = str.replace(/\s/g, '💢');
|
|
|
|
|
el.textContent = str;
|
|
|
|
|
|
|
|
|
|
var line = {
|
|
|
|
|
text: str,
|
|
|
|
|
highlights: [
|
|
|
|
|
{startIndex: 6},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var str0 = slice(str, 0, 6);
|
|
|
|
|
var str1 = slice(str, 6);
|
|
|
|
|
|
2016-07-14 12:31:09 -07:00
|
|
|
layer.annotate(el, line, GrAnnotation);
|
2016-07-13 10:59:10 -07:00
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2016-05-23 15:31:21 -07:00
|
|
|
suite('rendering', function() {
|
|
|
|
|
var content;
|
|
|
|
|
var outputEl;
|
|
|
|
|
|
2016-06-27 12:19:21 -07:00
|
|
|
setup(function(done) {
|
2016-05-23 15:31:21 -07:00
|
|
|
var prefs = {
|
|
|
|
|
line_length: 10,
|
|
|
|
|
show_tabs: true,
|
|
|
|
|
tab_size: 4,
|
|
|
|
|
context: -1
|
|
|
|
|
};
|
|
|
|
|
content = [
|
2016-06-09 16:08:04 -07:00
|
|
|
{
|
|
|
|
|
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',
|
|
|
|
|
]
|
|
|
|
|
},
|
2016-05-23 15:31:21 -07:00
|
|
|
];
|
2016-06-27 12:19:21 -07:00
|
|
|
element = fixture('basic');
|
|
|
|
|
outputEl = element.queryEffectiveChildren('#diffTable');
|
|
|
|
|
element.addEventListener('render', function() {
|
|
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
sinon.stub(element, '_getDiffBuilder', function() {
|
|
|
|
|
var builder = new GrDiffBuilder(
|
|
|
|
|
{content: content}, {left: [], right: []}, prefs, outputEl);
|
|
|
|
|
builder.buildSectionElement = function(group) {
|
|
|
|
|
var section = document.createElement('stub');
|
|
|
|
|
section.textContent = group.lines.reduce(function(acc, line) {
|
|
|
|
|
return acc + line.text;
|
|
|
|
|
}, '');
|
|
|
|
|
return section;
|
|
|
|
|
};
|
|
|
|
|
return builder;
|
|
|
|
|
});
|
2016-07-21 22:19:25 -07:00
|
|
|
element.diff = {content: content};
|
|
|
|
|
element.render({left: [], right: []}, prefs);
|
2016-05-23 15:31:21 -07:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('renderSection', function() {
|
|
|
|
|
var section = outputEl.querySelector('stub:nth-of-type(2)');
|
|
|
|
|
var prevInnerHTML = section.innerHTML;
|
|
|
|
|
section.innerHTML = 'wiped';
|
2016-06-27 12:19:21 -07:00
|
|
|
element._builder.renderSection(section);
|
2016-05-23 15:31:21 -07:00
|
|
|
section = outputEl.querySelector('stub:nth-of-type(2)');
|
|
|
|
|
assert.equal(section.innerHTML, prevInnerHTML);
|
|
|
|
|
});
|
|
|
|
|
|
2016-06-09 16:08:04 -07:00
|
|
|
test('getSectionsByLineRange one line', function() {
|
2016-05-23 15:31:21 -07:00
|
|
|
var section = outputEl.querySelector('stub:nth-of-type(2)');
|
2016-06-27 12:19:21 -07:00
|
|
|
var sections = element._builder.getSectionsByLineRange(1, 1, 'left');
|
2016-05-23 15:31:21 -07:00
|
|
|
assert.equal(sections.length, 1);
|
|
|
|
|
assert.strictEqual(sections[0], section);
|
|
|
|
|
});
|
2016-06-09 16:08:04 -07:00
|
|
|
|
|
|
|
|
test('getSectionsByLineRange over diff', function() {
|
|
|
|
|
var section = [
|
|
|
|
|
outputEl.querySelector('stub:nth-of-type(2)'),
|
|
|
|
|
outputEl.querySelector('stub:nth-of-type(3)'),
|
|
|
|
|
];
|
2016-06-27 12:19:21 -07:00
|
|
|
var sections = element._builder.getSectionsByLineRange(1, 2, 'left');
|
2016-06-09 16:08:04 -07:00
|
|
|
assert.equal(sections.length, 2);
|
|
|
|
|
assert.strictEqual(sections[0], section[0]);
|
|
|
|
|
assert.strictEqual(sections[1], section[1]);
|
|
|
|
|
});
|
2016-05-23 15:31:21 -07:00
|
|
|
});
|
2016-07-15 17:08:22 -07:00
|
|
|
|
|
|
|
|
suite('mock-diff', function() {
|
|
|
|
|
var element;
|
|
|
|
|
var builder;
|
|
|
|
|
var diff;
|
2016-07-21 22:19:25 -07:00
|
|
|
var prefs;
|
2016-07-15 17:08:22 -07:00
|
|
|
|
|
|
|
|
setup(function(done) {
|
|
|
|
|
element = fixture('mock-diff');
|
|
|
|
|
diff = document.createElement('mock-diff-response').diffResponse;
|
2016-07-21 22:19:25 -07:00
|
|
|
element.diff = diff;
|
2016-07-15 17:08:22 -07:00
|
|
|
|
2016-07-21 22:19:25 -07:00
|
|
|
prefs = {
|
2016-07-15 17:08:22 -07:00
|
|
|
line_length: 80,
|
|
|
|
|
show_tabs: true,
|
|
|
|
|
tab_size: 4,
|
|
|
|
|
};
|
|
|
|
|
|
2016-07-21 22:19:25 -07:00
|
|
|
element.render({left: [], right: []}, prefs).then(function() {
|
2016-07-15 17:08:22 -07:00
|
|
|
builder = element._builder;
|
|
|
|
|
done();
|
2016-07-21 22:19:25 -07:00
|
|
|
});
|
2016-07-15 17:08:22 -07:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('getContentByLine', function() {
|
|
|
|
|
var actual;
|
|
|
|
|
|
|
|
|
|
actual = builder.getContentByLine(2, 'left');
|
|
|
|
|
assert.equal(actual.textContent, diff.content[0].ab[1]);
|
|
|
|
|
|
|
|
|
|
actual = builder.getContentByLine(2, 'right');
|
|
|
|
|
assert.equal(actual.textContent, diff.content[0].ab[1]);
|
|
|
|
|
|
|
|
|
|
actual = builder.getContentByLine(5, 'left');
|
|
|
|
|
assert.equal(actual.textContent, diff.content[2].ab[0]);
|
|
|
|
|
|
|
|
|
|
actual = builder.getContentByLine(5, 'right');
|
|
|
|
|
assert.equal(actual.textContent, diff.content[1].b[0]);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('findLinesByRange', function() {
|
|
|
|
|
var lines = [];
|
|
|
|
|
var elems = [];
|
|
|
|
|
var start = 6;
|
|
|
|
|
var end = 10;
|
|
|
|
|
var count = end - start + 1;
|
|
|
|
|
|
|
|
|
|
builder.findLinesByRange(start, end, 'right', lines, elems);
|
|
|
|
|
|
|
|
|
|
assert.equal(lines.length, count);
|
|
|
|
|
assert.equal(elems.length, count);
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < 5; i++) {
|
|
|
|
|
assert.instanceOf(lines[i], GrDiffLine);
|
|
|
|
|
assert.equal(lines[i].afterNumber, start + i);
|
|
|
|
|
assert.instanceOf(elems[i], HTMLElement);
|
|
|
|
|
assert.equal(lines[i].text, elems[i].textContent);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('_renderContentByRange', function() {
|
|
|
|
|
var spy = sinon.spy(builder, '_createTextEl');
|
|
|
|
|
var start = 9;
|
|
|
|
|
var end = 14;
|
|
|
|
|
var count = end - start + 1;
|
|
|
|
|
|
|
|
|
|
builder._renderContentByRange(start, end, 'left');
|
|
|
|
|
|
|
|
|
|
assert.equal(spy.callCount, count);
|
|
|
|
|
spy.getCalls().forEach(function(call, i) {
|
|
|
|
|
assert.equal(call.args[0].beforeNumber, start + i);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
spy.restore();
|
|
|
|
|
});
|
2016-07-21 22:19:25 -07:00
|
|
|
|
|
|
|
|
test('_getNextContentOnSide side-by-side left', function() {
|
|
|
|
|
var startElem = builder.getContentByLine(5, 'left',
|
|
|
|
|
element.$.diffTable);
|
|
|
|
|
var expectedStartString = diff.content[2].ab[0];
|
|
|
|
|
var expectedNextString = diff.content[2].ab[1];
|
|
|
|
|
assert.equal(startElem.textContent, expectedStartString);
|
|
|
|
|
|
|
|
|
|
var nextElem = builder._getNextContentOnSide(startElem,
|
|
|
|
|
'left');
|
|
|
|
|
assert.equal(nextElem.textContent, expectedNextString);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('_getNextContentOnSide side-by-side right', function() {
|
|
|
|
|
var startElem = builder.getContentByLine(5, 'right',
|
|
|
|
|
element.$.diffTable);
|
|
|
|
|
var expectedStartString = diff.content[1].b[0];
|
|
|
|
|
var expectedNextString = diff.content[1].b[1];
|
|
|
|
|
assert.equal(startElem.textContent, expectedStartString);
|
|
|
|
|
|
|
|
|
|
var nextElem = builder._getNextContentOnSide(startElem,
|
|
|
|
|
'right');
|
|
|
|
|
assert.equal(nextElem.textContent, expectedNextString);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('_getNextContentOnSide unified left', function(done) {
|
|
|
|
|
// Re-render as unified:
|
|
|
|
|
element.viewMode = 'UNIFIED_DIFF';
|
|
|
|
|
element.render({left: [], right: []}, prefs).then(function() {
|
|
|
|
|
builder = element._builder;
|
|
|
|
|
|
|
|
|
|
var startElem = builder.getContentByLine(5, 'left',
|
|
|
|
|
element.$.diffTable);
|
|
|
|
|
var expectedStartString = diff.content[2].ab[0];
|
|
|
|
|
var expectedNextString = diff.content[2].ab[1];
|
|
|
|
|
assert.equal(startElem.textContent, expectedStartString);
|
|
|
|
|
|
|
|
|
|
var nextElem = builder._getNextContentOnSide(startElem,
|
|
|
|
|
'left');
|
|
|
|
|
assert.equal(nextElem.textContent, expectedNextString);
|
|
|
|
|
|
|
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('_getNextContentOnSide unified right', function(done) {
|
|
|
|
|
// Re-render as unified:
|
|
|
|
|
element.viewMode = 'UNIFIED_DIFF';
|
|
|
|
|
element.render({left: [], right: []}, prefs).then(function() {
|
|
|
|
|
builder = element._builder;
|
|
|
|
|
|
|
|
|
|
var startElem = builder.getContentByLine(5, 'right',
|
|
|
|
|
element.$.diffTable);
|
|
|
|
|
var expectedStartString = diff.content[1].b[0];
|
|
|
|
|
var expectedNextString = diff.content[1].b[1];
|
|
|
|
|
assert.equal(startElem.textContent, expectedStartString);
|
|
|
|
|
|
|
|
|
|
var nextElem = builder._getNextContentOnSide(startElem,
|
|
|
|
|
'right');
|
|
|
|
|
assert.equal(nextElem.textContent, expectedNextString);
|
|
|
|
|
|
|
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
});
|
2016-07-15 17:08:22 -07:00
|
|
|
});
|
2016-03-13 21:23:11 -04:00
|
|
|
});
|
|
|
|
|
</script>
|
