<!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 +
          '        &lt;gr-linked-text content=&quot;' +
          element._highlightEndTag +
          '[[_computeCurrentRevisionMessage(change)]]' +
          element._highlightStartTag +
          '&quot;&gt;&lt;&#x2F;gr-linked-text&gt;' +
          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>