Files
gerrit/polygerrit-ui/app/elements/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_test.html
Wyatt Allen d0dd392794 Establish annotation pipeline
Apply diff annotations (intraline differences and comment ranges) by
executing the annotation layers in order to each line. The diff builder
maintains an ordered array of annotation layers which are communicated
to GrDiffBuilder subclass instances. The builder also listens to each
layer for notifications that annotations have changed for some line
range and re-renders (i.e. re-applies the pipeline on DIV.contentText
elements) accordingly.

Change-Id: Iea0599d4869cafaadc0974158153a91d927913e8
2016-07-20 12:25:40 -07:00

323 lines
11 KiB
HTML

<!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-ranged-comment-layer</title>
<script src="../../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../gr-diff/gr-diff-line.js"></script>
<link rel="import" href="../../../bower_components/iron-test-helpers/iron-test-helpers.html">
<link rel="import" href="gr-ranged-comment-layer.html">
<test-fixture id="basic">
<template>
<gr-ranged-comment-layer></gr-ranged-comment-layer>
</template>
</test-fixture>
<script>
suite('gr-ranged-comment-layer', function() {
var element;
var sandbox;
setup(function() {
var initialComments = {
left: [
{
id: '12345',
line: 39,
message: 'range comment',
range: {
end_character: 9,
end_line: 39,
start_character: 6,
start_line: 36,
},
}, {
id: '23456',
line: 100,
message: 'non range comment',
},
],
right: [
{
id: '34567',
line: 10,
message: 'range comment',
range: {
end_character: 22,
end_line: 12,
start_character: 10,
start_line: 10,
},
}, {
id: '45678',
line: 100,
message: 'single line range comment',
range: {
end_character: 15,
end_line: 100,
start_character: 5,
start_line: 100,
},
},
],
};
sandbox = sinon.sandbox.create();
element = fixture('basic');
element.comments = initialComments;
});
teardown(function() {
sandbox.restore();
});
suite('annotate', function() {
var GrAnnotation;
var el;
var line;
setup(function() {
GrAnnotation = {annotateElement: sinon.stub()};
el = document.createElement('div');
el.setAttribute('data-side', 'left');
line = new GrDiffLine(GrDiffLine.Type.BOTH);
line.text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,';
});
test('type=Remove no-comment', function() {
line.type = GrDiffLine.Type.REMOVE;
line.beforeNumber = 40;
element.annotate(el, line, GrAnnotation);
assert.isFalse(GrAnnotation.annotateElement.called);
});
test('type=Remove has-comment', function() {
line.type = GrDiffLine.Type.REMOVE;
line.beforeNumber = 36;
var expectedStart = 6;
var expectedLength = line.text.length - expectedStart;
element.annotate(el, line, GrAnnotation);
assert.isTrue(GrAnnotation.annotateElement.called);
var lastCall = GrAnnotation.annotateElement.lastCall;
assert.equal(lastCall.args[0], el);
assert.equal(lastCall.args[1], expectedStart);
assert.equal(lastCall.args[2], expectedLength);
assert.equal(lastCall.args[3], 'range');
});
test('type=Remove has-comment hovering', function() {
line.type = GrDiffLine.Type.REMOVE;
line.beforeNumber = 36;
element.set(['comments', 'left', 0, '__hovering'], true);
var expectedStart = 6;
var expectedLength = line.text.length - expectedStart;
element.annotate(el, line, GrAnnotation);
assert.isTrue(GrAnnotation.annotateElement.called);
var lastCall = GrAnnotation.annotateElement.lastCall;
assert.equal(lastCall.args[0], el);
assert.equal(lastCall.args[1], expectedStart);
assert.equal(lastCall.args[2], expectedLength);
assert.equal(lastCall.args[3], 'rangeHighlight');
});
test('type=Both has-comment', function() {
line.type = GrDiffLine.Type.BOTH;
line.beforeNumber = 36;
var expectedStart = 6;
var expectedLength = line.text.length - expectedStart;
element.annotate(el, line, GrAnnotation);
assert.isTrue(GrAnnotation.annotateElement.called);
var lastCall = GrAnnotation.annotateElement.lastCall;
assert.equal(lastCall.args[0], el);
assert.equal(lastCall.args[1], expectedStart);
assert.equal(lastCall.args[2], expectedLength);
assert.equal(lastCall.args[3], 'range');
});
test('type=Both has-comment off side', function() {
line.type = GrDiffLine.Type.BOTH;
line.beforeNumber = 36;
el.setAttribute('data-side', 'right');
var expectedStart = 6;
var expectedLength = line.text.length - expectedStart;
element.annotate(el, line, GrAnnotation);
assert.isFalse(GrAnnotation.annotateElement.called);
});
test('type=Add has-comment', function() {
line.type = GrDiffLine.Type.ADD;
line.afterNumber = 12;
el.setAttribute('data-side', 'right');
var expectedStart = 0;
var expectedLength = 22;
element.annotate(el, line, GrAnnotation);
assert.isTrue(GrAnnotation.annotateElement.called);
var lastCall = GrAnnotation.annotateElement.lastCall;
assert.equal(lastCall.args[0], el);
assert.equal(lastCall.args[1], expectedStart);
assert.equal(lastCall.args[2], expectedLength);
assert.equal(lastCall.args[3], 'range');
});
});
test('_handleCommentChange overwrite', function() {
var handlerSpy = sandbox.spy(element, '_handleCommentChange');
var mapSpy = sandbox.spy(element, '_computeCommentMap');
element.set('comments', {left: [], right: []});
assert.isTrue(handlerSpy.called);
assert.equal(mapSpy.callCount, 2);
assert.equal(Object.keys(element._commentMap.left).length, 0);
assert.equal(Object.keys(element._commentMap.right).length, 0);
});
test('_handleCommentChange hovering', function() {
var handlerSpy = sandbox.spy(element, '_handleCommentChange');
var mapSpy = sandbox.spy(element, '_computeCommentMap');
var notifyStub = sinon.stub();
element.addListener(notifyStub);
element.set(['comments', 'right', 0, '__hovering'], true);
assert.isTrue(handlerSpy.called);
assert.isTrue(mapSpy.called);
assert.isTrue(notifyStub.called);
var lastCall = notifyStub.lastCall;
assert.equal(lastCall.args[0], 10);
assert.equal(lastCall.args[1], 12);
assert.equal(lastCall.args[2], 'right');
});
test('_handleCommentChange splice out', function() {
var handlerSpy = sandbox.spy(element, '_handleCommentChange');
var mapSpy = sandbox.spy(element, '_computeCommentMap');
var notifyStub = sinon.stub();
element.addListener(notifyStub);
element.splice('comments.right', 0, 1);
assert.isTrue(handlerSpy.called);
assert.isTrue(mapSpy.called);
assert.isTrue(notifyStub.called);
var lastCall = notifyStub.lastCall;
assert.equal(lastCall.args[0], 10);
assert.equal(lastCall.args[1], 12);
assert.equal(lastCall.args[2], 'right');
});
test('_handleCommentChange splice in', function() {
var handlerSpy = sandbox.spy(element, '_handleCommentChange');
var mapSpy = sandbox.spy(element, '_computeCommentMap');
var notifyStub = sinon.stub();
element.addListener(notifyStub);
element.splice('comments.left', element.comments.left.length, 0, {
id: '56123',
line: 250,
message: 'new range comment',
range: {
end_character: 15,
end_line: 275,
start_character: 5,
start_line: 250,
},
});
assert.isTrue(handlerSpy.called);
assert.isTrue(mapSpy.called);
assert.isTrue(notifyStub.called);
var lastCall = notifyStub.lastCall;
assert.equal(lastCall.args[0], 250);
assert.equal(lastCall.args[1], 275);
assert.equal(lastCall.args[2], 'left');
});
test('_computeCommentMap creates maps correctly', function() {
// There is only one ranged comment on the left, but it spans ll.36-39.
var leftKeys = [];
for (var i = 36; i <= 39; i++) { leftKeys.push('' + i); }
assert.deepEqual(Object.keys(element._commentMap.left).sort(),
leftKeys.sort());
assert.equal(element._commentMap.left[36].length, 1);
assert.equal(element._commentMap.left[36][0].start, 6);
assert.equal(element._commentMap.left[36][0].end, -1);
assert.equal(element._commentMap.left[37].length, 1);
assert.equal(element._commentMap.left[37][0].start, 0);
assert.equal(element._commentMap.left[37][0].end, -1);
assert.equal(element._commentMap.left[38].length, 1);
assert.equal(element._commentMap.left[38][0].start, 0);
assert.equal(element._commentMap.left[38][0].end, -1);
assert.equal(element._commentMap.left[39].length, 1);
assert.equal(element._commentMap.left[39][0].start, 0);
assert.equal(element._commentMap.left[39][0].end, 9);
// The right has two ranged comments, one spanning ll.10-12 and the other
// on line 100.
var rightKeys = [];
for (i = 10; i <= 12; i++) { rightKeys.push('' + i); }
rightKeys.push('100');
assert.deepEqual(Object.keys(element._commentMap.right).sort(),
rightKeys.sort());
assert.equal(element._commentMap.right[10].length, 1);
assert.equal(element._commentMap.right[10][0].start, 10);
assert.equal(element._commentMap.right[10][0].end, -1);
assert.equal(element._commentMap.right[11].length, 1);
assert.equal(element._commentMap.right[11][0].start, 0);
assert.equal(element._commentMap.right[11][0].end, -1);
assert.equal(element._commentMap.right[12].length, 1);
assert.equal(element._commentMap.right[12][0].start, 0);
assert.equal(element._commentMap.right[12][0].end, 22);
assert.equal(element._commentMap.right[100].length, 1);
assert.equal(element._commentMap.right[100][0].start, 5);
assert.equal(element._commentMap.right[100][0].end, 15);
});
});
</script>