1b3d9536eb
Some additional cleanup of event names and fixing of the bubbles property not being placed in the right place. TODO in a follow-up change: + Comments are not considered in context, yet. So if there is a comment made in a span of common lines that are hidden, it will be there underneath the context control but wont show the code. Feature: Issue 3649 Change-Id: I8117b243a7d8d529e0c1cea155a4b6b436c0c768
209 lines
7.0 KiB
HTML
209 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Copyright (C) 2015 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-side</title>
|
|
|
|
<script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
|
|
<script src="../../bower_components/web-component-tester/browser.js"></script>
|
|
<script src="../scripts/util.js"></script>
|
|
|
|
<link rel="import" href="../../bower_components/iron-test-helpers/iron-test-helpers.html">
|
|
<link rel="import" href="../elements/gr-diff-side.html">
|
|
|
|
<test-fixture id="basic">
|
|
<template>
|
|
<gr-diff-side></gr-diff-side>
|
|
</template>
|
|
</test-fixture>
|
|
|
|
<script>
|
|
suite('gr-diff-side tests', function() {
|
|
var element;
|
|
|
|
function isVisibleInWindow(el) {
|
|
var rect = el.getBoundingClientRect();
|
|
return rect.top >= 0 && rect.left >= 0 &&
|
|
rect.bottom <= window.innerHeight && rect.right <= window.innerWidth;
|
|
}
|
|
|
|
setup(function() {
|
|
element = fixture('basic');
|
|
});
|
|
|
|
test('comments', function() {
|
|
assert.isFalse(element.$$('.container').classList.contains('canComment'));
|
|
element.canComment = true;
|
|
assert.isTrue(element.$$('.container').classList.contains('canComment'));
|
|
// TODO(andybons): Check for comment creation events firing/not firing
|
|
// when implemented.
|
|
});
|
|
|
|
test('scroll to line', function() {
|
|
var content = [];
|
|
for (var i = 0; i < 300; i++) {
|
|
content.push({
|
|
type: 'CODE',
|
|
content: 'All work and no play makes Jack a dull boy',
|
|
numLines: 1,
|
|
lineNum: i + 1,
|
|
highlight: false,
|
|
intraline: [],
|
|
});
|
|
}
|
|
element.content = content;
|
|
|
|
window.scrollTo(0, 0);
|
|
element.scrollToLine(-12849);
|
|
assert.equal(window.scrollY, 0);
|
|
element.scrollToLine('sup');
|
|
assert.equal(window.scrollY, 0);
|
|
var lineEl = element.$$('.numbers .lineNum[data-line-num="150"]');
|
|
assert.ok(lineEl);
|
|
element.scrollToLine(150);
|
|
assert.isAbove(window.scrollY, 0);
|
|
assert.isTrue(isVisibleInWindow(lineEl), 'element should be visible');
|
|
});
|
|
|
|
test('intraline highlights', function() {
|
|
var content = ' <gr-linked-text content="' +
|
|
'[[_computeCurrentRevisionMessage(change)]]"></gr-linked-text>';
|
|
var html = util.escapeHTML(content);
|
|
var highlights = [
|
|
{ startIndex: 0, endIndex: 33, },
|
|
{ startIndex: 75 },
|
|
];
|
|
assert.equal(
|
|
content.slice(highlights[0].startIndex, highlights[0].endIndex),
|
|
' <gr-linked-text content="');
|
|
assert.equal(content.slice(highlights[1].startIndex),
|
|
'"></gr-linked-text>');
|
|
var result = element._addIntralineHighlights(content, html, highlights);
|
|
var expected = element._highlightStartTag +
|
|
' <gr-linked-text content="' +
|
|
element._highlightEndTag +
|
|
'[[_computeCurrentRevisionMessage(change)]]' +
|
|
element._highlightStartTag +
|
|
'"></gr-linked-text>' +
|
|
element._highlightEndTag;
|
|
assert.equal(result, expected);
|
|
});
|
|
|
|
test('newlines', function() {
|
|
element.width = 80;
|
|
var content = [{
|
|
type: 'CODE',
|
|
content: 'A'.repeat(50),
|
|
numLines: 1,
|
|
lineNum: 1,
|
|
highlight: false,
|
|
intraline: [],
|
|
}];
|
|
element.content = content;
|
|
|
|
var lineEl = element.$$('.numbers .lineNum[data-line-num="1"]');
|
|
assert.ok(lineEl);
|
|
var contentEl = element.$$('.content .code[data-line-num="1"]');
|
|
assert.ok(contentEl);
|
|
assert.equal(contentEl.innerHTML, 'A'.repeat(50));
|
|
|
|
content = [{
|
|
type: 'CODE',
|
|
content: 'A'.repeat(100),
|
|
numLines: 2,
|
|
lineNum: 1,
|
|
highlight: false,
|
|
intraline: [],
|
|
}];
|
|
element.content = content;
|
|
|
|
lineEl = element.$$('.numbers .lineNum[data-line-num="1"]');
|
|
assert.ok(lineEl);
|
|
contentEl = element.$$('.content .code[data-line-num="1"]');
|
|
assert.ok(contentEl);
|
|
assert.equal(contentEl.innerHTML,
|
|
'A'.repeat(80) + element._lineFeedHTML +
|
|
'A'.repeat(20) + element._lineFeedHTML);
|
|
|
|
});
|
|
|
|
test('diff context', function() {
|
|
var content = [
|
|
{type: 'CODE', hidden: true, content: '<!DOCTYPE html>'},
|
|
{type: 'CODE', hidden: true, content: '<meta charset="utf-8">'},
|
|
{type: 'CODE', hidden: true, content: '<title>My great page</title>'},
|
|
{type: 'CODE', hidden: true, content: '<style>'},
|
|
{type: 'CODE', hidden: true, content: ' *,'},
|
|
{type: 'CODE', hidden: true, content: ' *:before,'},
|
|
{type: 'CODE', hidden: true, content: ' *:after {'},
|
|
{type: 'CODE', hidden: true, content: ' box-sizing: border-box;'},
|
|
{type: 'CONTEXT_CONTROL', numLines: 8, start: 0, end: 8},
|
|
{type: 'CODE', hidden: false, content: ' }'},
|
|
];
|
|
element.content = content;
|
|
|
|
// Only the context elements and the following code line elements should
|
|
// be present in the DOM.
|
|
var contextEls =
|
|
Polymer.dom(element.root).querySelectorAll('.contextControl');
|
|
assert.equal(contextEls.length, 2);
|
|
var codeLineEls =
|
|
Polymer.dom(element.root).querySelectorAll('.lineNum, .code');
|
|
assert.equal(codeLineEls.length, 2);
|
|
|
|
for (var i = 0; i <= 8; i++) {
|
|
element.content[i].hidden = false;
|
|
}
|
|
element.renderLineIndexRange(0, 8);
|
|
element.hideElementsWithIndex(8);
|
|
|
|
contextEls =
|
|
Polymer.dom(element.root).querySelectorAll('.contextControl');
|
|
for (var i = 0; i < contextEls.length; i++) {
|
|
assert.isTrue(contextEls[i].hasAttribute('hidden'));
|
|
}
|
|
|
|
codeLineEls =
|
|
Polymer.dom(element.root).querySelectorAll('.lineNum, .code');
|
|
|
|
// Nine lines should now be present in the DOM.
|
|
assert.equal(codeLineEls.length, 9 * 2);
|
|
});
|
|
|
|
test('tap line to add a draft', function() {
|
|
var numAddDraftEvents = 0;
|
|
var fireMock = sinon.stub(element, 'fire', function(eventName) {
|
|
if (eventName == 'add-draft') {
|
|
numAddDraftEvents++;
|
|
}
|
|
});
|
|
element.content = [{type: 'CODE', content: '<!DOCTYPE html>'}];
|
|
element.canComment = false;
|
|
flushAsynchronousOperations();
|
|
|
|
var lineEl = element.$$('.lineNum');
|
|
assert.ok(lineEl);
|
|
MockInteractions.tap(lineEl);
|
|
assert.equal(numAddDraftEvents, 0);
|
|
|
|
element.canComment = true;
|
|
MockInteractions.tap(lineEl);
|
|
assert.equal(numAddDraftEvents, 1);
|
|
});
|
|
});
|
|
</script>
|