| <!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.prefs = { |
| line_length: 80, |
| tab_size: 4, |
| }; |
| |
| element.content = [{ |
| type: 'CODE', |
| content: 'A'.repeat(50), |
| numLines: 1, |
| lineNum: 1, |
| highlight: false, |
| intraline: [], |
| }]; |
| |
| 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)); |
| |
| element.content = [{ |
| type: 'CODE', |
| content: 'A'.repeat(100), |
| numLines: 2, |
| lineNum: 1, |
| highlight: false, |
| intraline: [], |
| }]; |
| |
| 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('tabs', function(done) { |
| element.prefs = { |
| line_length: 80, |
| tab_size: 4, |
| show_tabs: true, |
| }; |
| |
| element.content = [{ |
| type: 'CODE', |
| content: 'A'.repeat(50) + '\t' + 'A'.repeat(50), |
| numLines: 2, |
| lineNum: 1, |
| highlight: false, |
| intraline: [], |
| }]; |
| |
| var lineEl = element.$$('.numbers .lineNum[data-line-num="1"]'); |
| assert.ok(lineEl); |
| var contentEl = element.$$('.content .code[data-line-num="1"]'); |
| assert.ok(contentEl); |
| var spanEl = contentEl.childNodes[1]; |
| assert.equal(spanEl.tagName, 'SPAN'); |
| assert.isTrue(spanEl.classList.contains( |
| 'style-scope', 'gr-diff-side', 'tab', 'withIndicator')); |
| |
| element.prefs.show_tabs = false; |
| element.content = [{ |
| type: 'CODE', |
| content: 'A'.repeat(50) + '\t' + 'A'.repeat(50), |
| numLines: 2, |
| lineNum: 1, |
| highlight: false, |
| intraline: [], |
| }]; |
| contentEl = element.$$('.content .code[data-line-num="1"]'); |
| assert.ok(contentEl); |
| var spanEl = contentEl.childNodes[1]; |
| assert.equal(spanEl.tagName, 'SPAN'); |
| assert.isTrue(spanEl.classList.contains( |
| 'style-scope', 'gr-diff-side', 'tab')); |
| |
| var alertStub = sinon.stub(window, 'alert'); |
| element.prefs.tab_size = |
| '"><img src="/" onerror="alert(1);"><span class="'; |
| element.content = [{ |
| type: 'CODE', |
| content: '\t', |
| numLines: 1, |
| lineNum: 1, |
| highlight: false, |
| intraline: [], |
| }]; |
| element.async(function() { |
| assert.isFalse(alertStub.called); |
| alertStub.restore(); |
| done(); |
| }, 100); // Allow some time for the img error event to fire. |
| }); |
| |
| 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> |
