| <!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-highlight</title> |
| |
| <script src="../../../bower_components/webcomponentsjs/webcomponents.min.js"></script> |
| <script src="../../../bower_components/web-component-tester/browser.js"></script> |
| |
| <link rel="import" href="../../../bower_components/iron-test-helpers/iron-test-helpers.html"> |
| <link rel="import" href="gr-diff-highlight.html"> |
| |
| <test-fixture id="basic"> |
| <template> |
| <gr-diff-highlight> |
| <table id="diffTable"> |
| |
| <tbody class="section both"> |
| <tr class="diff-row side-by-side" left-type="both" right-type="both"> |
| <td class="left lineNum" data-value="138"></td> |
| <td class="content both darkHighlight">[14] Nam cum ad me in Cumanum salutandi causa uterque venisset,</td> |
| <td class="right lineNum" data-value="119"></td> |
| <td class="content both darkHighlight">[14] Nam cum ad me in Cumanum salutandi causa uterque venisset,</td> |
| </tr> |
| </tbody> |
| |
| <tbody class="section delta"> |
| <tr class="diff-row side-by-side" left-type="remove" right-type="add"> |
| <td class="left lineNum" data-value="140"></td> |
| <!-- Next tag is formatted to eliminate zero-length text nodes. --> |
| <td class="content remove lightHighlight">na💢ti <hl class="foo">te, inquit</hl>, sumus <hl class="bar">aliquando</hl> otiosum, <hl>certe</hl> a udiam, <hl>quid</hl> sit, quod <hl>Epicurum</hl><gr-diff-comment-thread> |
| [Yet another random diff thread content here] |
| </gr-diff-comment-thread></td> |
| <td class="right lineNum" data-value="121"></td> |
| <td class="content add lightHighlight"> |
| nacti , |
| <hl>,</hl> |
| sumus otiosum, audiam, sit, quod |
| </td> |
| </tr> |
| </tbody> |
| |
| <tbody class="section both"> |
| <tr class="diff-row side-by-side" left-type="both" right-type="both"> |
| <td class="left lineNum" data-value="149"></td> |
| <td class="content both darkHighlight">nam et complectitur verbis, quod vult, et dicit plane, quod intellegam;</td> |
| <td class="right lineNum" data-value="130"></td> |
| <td class="content both darkHighlight">nam et complectitur verbis, quod vult, et dicit plane, quod intellegam;</td> |
| </tr> |
| </tbody> |
| |
| </table> |
| </gr-diff-highlight> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="highlighted"> |
| <template> |
| <div> |
| <hl class="rangeHighlight">foo</hl> |
| bar |
| <hl class="rangeHighlight">baz</hl> |
| </div> |
| </template> |
| </test-fixture> |
| |
| <script> |
| suite('gr-diff-highlight', function() { |
| var element; |
| var sandbox; |
| |
| setup(function() { |
| sandbox = sinon.sandbox.create(); |
| element = fixture('basic'); |
| }); |
| |
| teardown(function() { |
| sandbox.restore(); |
| }); |
| |
| test('_enabledListeners', function() { |
| var listeners = element._enabledListeners; |
| for (var eventName in listeners) { |
| sandbox.stub(element, listeners[eventName]); |
| } |
| // Enable all the listeners. |
| element.enabled = true; |
| for (var eventName in listeners) { |
| var methodName = listeners[eventName]; |
| var stub = element[methodName]; |
| element.fire(eventName); |
| assert.isTrue(stub.called); |
| stub.reset(); |
| } |
| // Disable all the listeners. |
| element.enabled = false; |
| for (var eventName in listeners) { |
| var methodName = listeners[eventName]; |
| var stub = element[methodName]; |
| element.fire(eventName); |
| assert.isFalse(stub.called); |
| } |
| }); |
| |
| suite('comment events', function() { |
| var builder; |
| |
| setup(function() { |
| builder = { |
| getContentsByLineRange: sandbox.stub().returns([]), |
| getLineElByChild: sandbox.stub().returns({}), |
| getSideByLineEl: sandbox.stub().returns('other-side'), |
| renderLineRange: sandbox.stub(), |
| }; |
| element._cachedDiffBuilder = builder; |
| element.enabled = true; |
| }); |
| |
| test('ignores thread discard for line comment', function(done) { |
| element.fire('thread-discard', {lastComment: {}}); |
| flush(function() { |
| assert.isFalse(builder.renderLineRange.called); |
| done(); |
| }); |
| }); |
| |
| test('ignores comment discard for line comment', function(done) { |
| element.fire('comment-discard', {comment: {}}); |
| flush(function() { |
| assert.isFalse(builder.renderLineRange.called); |
| done(); |
| }); |
| }); |
| |
| test('renders lines in comment range on thread discard', function(done) { |
| element.fire('thread-discard', { |
| lastComment: { |
| range: { |
| start_line: 10, |
| end_line: 24, |
| }, |
| }, |
| }); |
| flush(function() { |
| assert.isTrue( |
| builder.renderLineRange.calledWithExactly(10, 24, 'other-side')); |
| done(); |
| }); |
| }); |
| |
| |
| test('renders lines in comment range on comment discard', function(done) { |
| element.fire('comment-discard', { |
| comment: { |
| range: { |
| start_line: 10, |
| end_line: 24, |
| }, |
| }, |
| }); |
| flush(function() { |
| assert.isTrue( |
| builder.renderLineRange.calledWithExactly(10, 24, 'other-side')); |
| done(); |
| }); |
| }); |
| |
| test('comment-mouse-over from line comments is ignored', function() { |
| sandbox.stub(element, '_applyRangedHighlight'); |
| element.fire('comment-mouse-over', {comment: {}}); |
| assert.isFalse(element._applyRangedHighlight.called); |
| }); |
| |
| test('comment-mouse-out from line comments is ignored', function() { |
| element.fire('comment-mouse-over', {comment: {}}); |
| assert.isFalse(builder.getContentsByLineRange.called); |
| }); |
| |
| test('on comment-mouse-out highlight classes are removed', function() { |
| var testEl = fixture('highlighted'); |
| builder.getContentsByLineRange.returns([testEl]); |
| element.fire('comment-mouse-out', { |
| comment: { |
| range: { |
| start_line: 3, |
| start_character: 14, |
| end_line: 10, |
| end_character: 24, |
| } |
| }}); |
| assert.isTrue(builder.getContentsByLineRange.calledWithExactly( |
| 3, 10, 'other-side')); |
| assert.equal(0, testEl.querySelectorAll('.rangeHighlight').length); |
| assert.equal(2, testEl.querySelectorAll('.range').length); |
| }); |
| |
| test('on comment-mouse-over range is highlighted', function() { |
| sandbox.stub(element, '_applyRangedHighlight'); |
| element.fire('comment-mouse-over', { |
| comment: { |
| range: { |
| start_line: 3, |
| start_character: 14, |
| end_line: 10, |
| end_character: 24, |
| }, |
| }}); |
| assert.isTrue(element._applyRangedHighlight.calledWithExactly( |
| 'rangeHighlight', 3, 14, 10, 24, 'other-side')); |
| }); |
| |
| test('on create-comment range is highlighted', function() { |
| sandbox.stub(element, '_applyRangedHighlight'); |
| element.fire('create-comment', { |
| range: { |
| startLine: 3, |
| startChar: 14, |
| endLine: 10, |
| endChar: 24, |
| }, |
| side: 'some-side', |
| }); |
| assert.isTrue(element._applyRangedHighlight.calledWithExactly( |
| 'range', 3, 14, 10, 24, 'some-side')); |
| }); |
| |
| test('on create-comment action box is removed', function() { |
| sandbox.stub(element, '_applyRangedHighlight'); |
| sandbox.stub(element, '_removeActionBox'); |
| element.fire('create-comment', { |
| comment: { |
| range: {}, |
| }, |
| }); |
| assert.isTrue(element._removeActionBox.called); |
| }); |
| }); |
| |
| test('apply multiline highlight', function() { |
| var diff = element.querySelector('#diffTable'); |
| var startContent = |
| diff.querySelector('.left.lineNum[data-value="138"] ~ .content'); |
| var endContent = |
| diff.querySelector('.left.lineNum[data-value="149"] ~ .content'); |
| var betweenContent = |
| diff.querySelector('.left.lineNum[data-value="140"] ~ .content'); |
| var commentThread = |
| diff.querySelector('gr-diff-comment-thread'); |
| var builder = { |
| getCommentThreadByContentEl: sandbox.stub().returns(commentThread), |
| getContentByLine: sandbox.stub().returns({}), |
| getContentsByLineRange: sandbox.stub().returns([betweenContent]), |
| getLineElByChild: sandbox.stub().returns( |
| {getAttribute: sandbox.stub()}), |
| }; |
| element._cachedDiffBuilder = builder; |
| element.enabled = true; |
| builder.getContentByLine.withArgs(138, 'left').returns( |
| startContent); |
| builder.getContentByLine.withArgs(149, 'left').returns( |
| endContent); |
| element._applyRangedHighlight('some', 138, 4, 149, 8, 'left'); |
| assert.instanceOf(startContent.childNodes[0], Text); |
| assert.equal(startContent.childNodes[0].textContent, '[14]'); |
| assert.instanceOf(startContent.childNodes[1], Element); |
| assert.equal(startContent.childNodes[1].textContent, |
| ' Nam cum ad me in Cumanum salutandi causa uterque venisset,'); |
| assert.equal(startContent.childNodes[1].tagName, 'HL'); |
| assert.equal(startContent.childNodes[1].className, 'some'); |
| |
| assert.instanceOf(endContent.childNodes[0], Element); |
| assert.equal(endContent.childNodes[0].textContent, 'nam et c'); |
| assert.equal(endContent.childNodes[0].tagName, 'HL'); |
| assert.equal(endContent.childNodes[0].className, 'some'); |
| assert.instanceOf(endContent.childNodes[1], Text); |
| assert.equal(endContent.childNodes[1].textContent, |
| 'omplectitur verbis, quod vult, et dicit plane, quod intellegam;'); |
| |
| assert.instanceOf(betweenContent.firstChild, Element); |
| assert.equal(betweenContent.firstChild.tagName, 'HL'); |
| assert.equal(betweenContent.firstChild.className, 'some'); |
| assert.equal(betweenContent.childNodes.length, 2); |
| assert.equal(betweenContent.firstChild.childNodes.length, 1); |
| assert.equal(betweenContent.firstChild.textContent, |
| 'na💢ti te, inquit, sumus aliquando otiosum, certe a udiam, ' + |
| 'quid sit, quod Epicurum'); |
| |
| assert.isNull(diff.querySelector('.right + .content .some'), |
| 'Highlight should be applied only to the left side content.'); |
| |
| assert.strictEqual(betweenContent.querySelector('gr-diff-comment-thread'), |
| commentThread, 'Comment threads should be preserved.'); |
| }); |
| |
| suite('single line ranges', function() { |
| var diff; |
| var content; |
| var commentThread; |
| var builder; |
| |
| setup(function() { |
| diff = element.querySelector('#diffTable'); |
| content = |
| diff.querySelector('.left.lineNum[data-value="140"] ~ .content'); |
| commentThread = diff.querySelector('gr-diff-comment-thread'); |
| builder = { |
| getCommentThreadByContentEl: sandbox.stub().returns(commentThread), |
| getContentByLine: sandbox.stub().returns(content), |
| getContentsByLineRange: sandbox.stub().returns([]), |
| getLineElByChild: sandbox.stub().returns( |
| {getAttribute: sandbox.stub()}), |
| }; |
| element._cachedDiffBuilder = builder; |
| element.enabled = true; |
| }); |
| |
| test('whole line range', function() { |
| element._applyRangedHighlight('some', 140, 0, 140, 81, 'left'); |
| assert.instanceOf(content.firstChild, Element); |
| assert.equal(content.firstChild.tagName, 'HL'); |
| assert.equal(content.firstChild.className, 'some'); |
| assert.equal(content.childNodes.length, 2); |
| assert.equal(content.firstChild.childNodes.length, 1); |
| assert.equal(content.firstChild.textContent, |
| 'na💢ti te, inquit, sumus aliquando otiosum, certe a udiam, ' + |
| 'quid sit, quod Epicurum'); |
| }); |
| |
| test('merging multiple other hls', function() { |
| element._applyRangedHighlight('some', 140, 1, 140, 80, 'left'); |
| assert.instanceOf(content.firstChild, Text); |
| assert.equal(content.childNodes.length, 4); |
| var hl = content.querySelector('hl.some'); |
| assert.strictEqual(content.firstChild, hl.previousSibling); |
| assert.equal(hl.childNodes.length, 1); |
| assert.equal(hl.textContent, |
| 'a💢ti te, inquit, sumus aliquando otiosum, certe a udiam, ' + |
| 'quid sit, quod Epicuru'); |
| }); |
| |
| test('hl inside Text node', function() { |
| // Before: na💢ti |
| // After: n<hl class="some">a💢t</hl>i |
| element._applyRangedHighlight('some', 140, 1, 140, 4, 'left'); |
| var hl = content.querySelector('hl.some'); |
| assert.equal(hl.outerHTML, '<hl class="some">a💢t</hl>'); |
| }); |
| |
| test('hl ending over different hl', function() { |
| // Before: na💢ti <hl>te, inquit</hl>, |
| // After: na💢<hl class="some">ti te</hl><hl class="foo">, inquit</hl>, |
| element._applyRangedHighlight('some', 140, 3, 140, 8, 'left'); |
| var hl = content.querySelector('hl.some'); |
| assert.equal(hl.outerHTML, '<hl class="some">ti te</hl>'); |
| assert.equal(hl.nextSibling.outerHTML, |
| '<hl class="foo">, inquit</hl>'); |
| }); |
| |
| test('hl starting inside different hl', function() { |
| // Before: na💢ti <hl>te, inquit</hl>, sumus |
| // After: na💢ti <hl class="foo">te, in</hl><hl class="some">quit, ... |
| element._applyRangedHighlight('some', 140, 12, 140, 21, 'left'); |
| var hl = content.querySelector('hl.some'); |
| assert.equal(hl.outerHTML, '<hl class="some">quit, sum</hl>'); |
| assert.equal( |
| hl.previousSibling.outerHTML, '<hl class="foo">te, in</hl>'); |
| }); |
| |
| test('hl inside different hl', function() { |
| // Before: na💢ti <hl class="foo">te, inquit</hl>, sumus |
| // After: <hl class="foo">t</hl><hl="some">e, i</hl><hl class="foo">n.. |
| element._applyRangedHighlight('some', 140, 7, 140, 12, 'left'); |
| var hl = content.querySelector('hl.some'); |
| assert.equal(hl.outerHTML, '<hl class="some">e, in</hl>'); |
| assert.equal(hl.previousSibling.outerHTML, '<hl class="foo">t</hl>'); |
| assert.equal(hl.nextSibling.outerHTML, '<hl class="foo">quit</hl>'); |
| }); |
| |
| test('hl starts and ends in different hls', function() { |
| element._applyRangedHighlight('some', 140, 8, 140, 27, 'left'); |
| var hl = content.querySelector('hl.some'); |
| assert.equal(hl.outerHTML, '<hl class="some">, inquit, sumus ali</hl>'); |
| assert.equal(hl.previousSibling.outerHTML, '<hl class="foo">te</hl>'); |
| assert.equal(hl.nextSibling.outerHTML, '<hl class="bar">quando</hl>'); |
| }); |
| |
| test('hl over different hl', function() { |
| element._applyRangedHighlight('some', 140, 2, 140, 21, 'left'); |
| var hl = content.querySelector('hl.some'); |
| assert.equal(hl.outerHTML, '<hl class="some">💢ti te, inquit, sum</hl>'); |
| assert.notOk(content.querySelector('.foo')); |
| }); |
| |
| test('hl starting and ending in boundaries', function() { |
| element._applyRangedHighlight('some', 140, 6, 140, 33, 'left'); |
| var hl = content.querySelector('hl.some'); |
| assert.equal( |
| hl.outerHTML, '<hl class="some">te, inquit, sumus aliquando</hl>'); |
| assert.notOk(content.querySelector('.foo')); |
| assert.notOk(content.querySelector('.bar')); |
| }); |
| |
| test('overlapping hls', function() { |
| element._applyRangedHighlight('some', 140, 1, 140, 3, 'left'); |
| element._applyRangedHighlight('some', 140, 2, 140, 4, 'left'); |
| assert.equal(content.querySelectorAll('hl.some').length, 1); |
| var hl = content.querySelector('hl.some'); |
| assert.equal(hl.outerHTML, '<hl class="some">a💢t</hl>'); |
| }); |
| |
| test('growing hl left including another hl', function() { |
| element._applyRangedHighlight('some', 140, 1, 140, 4, 'left'); |
| element._applyRangedHighlight('some', 140, 3, 140, 10, 'left'); |
| assert.equal(content.querySelectorAll('hl.some').length, 1); |
| var hl = content.querySelector('hl.some'); |
| assert.equal(hl.outerHTML, '<hl class="some">a💢ti te, </hl>'); |
| assert.equal(hl.nextSibling.outerHTML, '<hl class="foo">inquit</hl>'); |
| }); |
| |
| test('growing hl right to start of line', function() { |
| element._applyRangedHighlight('some', 140, 2, 140, 5, 'left'); |
| element._applyRangedHighlight('some', 140, 0, 140, 3, 'left'); |
| assert.equal(content.querySelectorAll('hl.some').length, 1); |
| var hl = content.querySelector('hl.some'); |
| assert.equal(hl.outerHTML, '<hl class="some">na💢ti</hl>'); |
| assert.strictEqual(content.firstChild, hl); |
| }); |
| }); |
| |
| test('_applyAllHighlights', function() { |
| element.comments = { |
| left: [ |
| { |
| range: { |
| start_line: 3, |
| start_character: 14, |
| end_line: 10, |
| end_character: 24, |
| }, |
| }, |
| ], |
| right: [ |
| { |
| range: { |
| start_line: 320, |
| start_character: 200, |
| end_line: 1024, |
| end_character: 768, |
| }, |
| }, |
| ], |
| }; |
| sandbox.stub(element, '_applyRangedHighlight'); |
| element._applyAllHighlights(); |
| sinon.assert.calledWith(element._applyRangedHighlight, |
| 'range', 3, 14, 10, 24, 'left'); |
| sinon.assert.calledWith(element._applyRangedHighlight, |
| 'range', 320, 200, 1024, 768, 'right'); |
| }); |
| |
| test('apply comment ranges on render', function() { |
| element.enabled = true; |
| sandbox.stub(element, '_applyAllHighlights'); |
| element.fire('render'); |
| assert.isTrue(element._applyAllHighlights.called); |
| }); |
| |
| test('apply comment ranges on context expand', function() { |
| element.enabled = true; |
| sandbox.stub(element, '_applyAllHighlights'); |
| element.fire('show-context'); |
| assert.isTrue(element._applyAllHighlights.called); |
| }); |
| |
| test('ignores render when disabled', function() { |
| element.enabled = false; |
| sandbox.stub(element, '_applyAllHighlights'); |
| element.fire('render'); |
| assert.isFalse(element._applyAllHighlights.called); |
| }); |
| |
| test('ignores context expand when disabled', function() { |
| element.enabled = false; |
| sandbox.stub(element, '_applyAllHighlights'); |
| element.fire('show-context'); |
| assert.isFalse(element._applyAllHighlights.called); |
| }); |
| }); |
| </script> |
