<!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-comment</title>

<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../../../bower_components/page/page.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="gr-diff-comment.html">

<test-fixture id="basic">
  <template>
    <gr-diff-comment></gr-diff-comment>
  </template>
</test-fixture>

<test-fixture id="draft">
  <template>
    <gr-diff-comment draft="true"></gr-diff-comment>
  </template>
</test-fixture>

<script>
  suite('gr-diff-comment tests', function() {
    var element;
    setup(function() {
      element = fixture('basic');
      element.comment = {
        author: {
          name: 'Mr. Peanutbutter',
          email: 'tenn1sballchaser@aol.com',
        },
        id: 'baf0414d_60047215',
        line: 5,
        message: 'is this a crossover episode!?',
        updated: '2015-12-08 19:48:33.843000000',
      };
    });

    test('proper event fires on reply', function(done) {
      element.addEventListener('reply', function(e) {
        assert.ok(e.detail.comment);
        done();
      });
      MockInteractions.tap(element.$$('.reply'));
    });

    test('proper event fires on quote', function(done) {
      element.addEventListener('reply', function(e) {
        assert.ok(e.detail.comment);
        assert.isTrue(e.detail.quote);
        done();
      });
      MockInteractions.tap(element.$$('.quote'));
    });

    test('proper event fires on done', function(done) {
      element.addEventListener('done', function(e) {
        done();
      });
      MockInteractions.tap(element.$$('.done'));
    });

    test('clicking on date link does not trigger nav', function() {
      var showStub = sinon.stub(page, 'show');
      var dateEl = element.$$('.date');
      assert.ok(dateEl);
      MockInteractions.tap(dateEl);
      var dest = window.location.pathname + '#5';
      assert(showStub.lastCall.calledWithExactly(dest, null, false),
          'Should navigate to ' + dest + ' without triggering nav');
      showStub.restore();
    });
  });

  suite('gr-diff-comment draft tests', function() {
    var element;
    var server;

    setup(function() {
      element = fixture('draft');
      element.changeNum = 42;
      element.patchNum = 1;
      element.editing = false;
      element.comment = {
        __draft: true,
        __draftID: 'temp_draft_id',
        path: '/path/to/file',
        line: 5,
      };

      server = sinon.fakeServer.create();
      server.respondWith(
        'PUT',
        '/changes/42/revisions/1/drafts',
        [
          201,
          {'Content-Type': 'application/json'},
          ')]}\'\n{' +
            '"id": "baf0414d_40572e03",' +
            '"path": "/path/to/file",' +
            '"line": 5,' +
            '"updated": "2015-12-08 21:52:36.177000000",' +
            '"message": "created!"' +
          '}'
        ]
      );

      server.respondWith(
        'PUT',
        /\/changes\/42\/revisions\/1\/drafts\/.+/,
        [
          200,
          {'Content-Type': 'application/json'},
          ')]}\'\n{' +
            '"id": "baf0414d_40572e03",' +
            '"path": "/path/to/file",' +
            '"line": 5,' +
            '"updated": "2015-12-08 21:52:36.177000000",' +
            '"message": "saved!"' +
          '}'
        ]
      );
    });

    teardown(function() {
      server.restore();
    });

    function isVisible(el) {
      assert.ok(el);
      return getComputedStyle(el).getPropertyValue('display') != 'none';
    }

    test('button visibility states', function() {
      element.showActions = false;
      assert.isTrue(element.$$('.actions').hasAttribute('hidden'));
      element.showActions = true;
      assert.isFalse(element.$$('.actions').hasAttribute('hidden'));

      element.draft = true;
      assert.isTrue(isVisible(element.$$('.edit')), 'edit is visible');
      assert.isTrue(isVisible(element.$$('.discard')), 'discard is visible');
      assert.isFalse(isVisible(element.$$('.save')), 'save is not visible');
      assert.isFalse(isVisible(element.$$('.cancel')), 'cancel is not visible');
      assert.isFalse(isVisible(element.$$('.reply')), 'reply is not visible');
      assert.isFalse(isVisible(element.$$('.quote')), 'quote is not visible');
      assert.isFalse(isVisible(element.$$('.done')), 'done is not visible');

      element.editing = true;
      assert.isFalse(isVisible(element.$$('.edit')), 'edit is not visible');
      assert.isTrue(isVisible(element.$$('.discard')), 'discard is visible');
      assert.isTrue(isVisible(element.$$('.save')), 'save is visible');
      assert.isFalse(isVisible(element.$$('.cancel')), 'cancel is visible');
      assert.isFalse(isVisible(element.$$('.reply')), 'reply is not visible');
      assert.isFalse(isVisible(element.$$('.quote')), 'quote is not visible');
      assert.isFalse(isVisible(element.$$('.done')), 'done is not visible');

      element.draft = false;
      element.editing = false;
      assert.isFalse(isVisible(element.$$('.edit')), 'edit is not visible');
      assert.isFalse(isVisible(element.$$('.discard')),
          'discard is not visible');
      assert.isFalse(isVisible(element.$$('.save')), 'save is not visible');
      assert.isFalse(isVisible(element.$$('.cancel')), 'cancel is not visible');
      assert.isTrue(isVisible(element.$$('.reply')), 'reply is visible');
      assert.isTrue(isVisible(element.$$('.quote')), 'quote is visible');
      assert.isTrue(isVisible(element.$$('.done')), 'done is visible');

      element.comment.id = 'foo';
      element.draft = true;
      element.editing = true;
      assert.isTrue(isVisible(element.$$('.cancel')), 'cancel is visible');
    });

    test('draft creation/cancelation', function(done) {
      assert.isFalse(element.editing);
      MockInteractions.tap(element.$$('.edit'));
      assert.isTrue(element.editing);

      element._editDraft = '';
      // Save should be disabled on an empty message.
      var disabled = element.$$('.save').hasAttribute('disabled');
      assert.isTrue(disabled, 'save button should be disabled.');
      element._editDraft = '     ';
      disabled = element.$$('.save').hasAttribute('disabled');
      assert.isTrue(disabled, 'save button should be disabled.');

      var numDiscardEvents = 0;
      element.addEventListener('discard', function(e) {
        numDiscardEvents++;
        if (numDiscardEvents == 3) {
          done();
        }
      });
      MockInteractions.tap(element.$$('.cancel'));
      MockInteractions.tap(element.$$('.discard'));
      MockInteractions.pressAndReleaseKeyOn(element.$.editTextarea, 27); // esc
    });

    test('draft saving/editing', function(done) {
      element.draft = true;
      MockInteractions.tap(element.$$('.edit'));
      element._editDraft = 'good news, everyone!';
      MockInteractions.tap(element.$$('.save'));
      assert.isTrue(element.disabled,
          'Element should be disabled when creating draft.');

      server.respond();

      element._xhrPromise.then(function(req) {
        assert.isFalse(element.disabled,
            'Element should be enabled when done creating draft.');
        assert.equal(req.status, 201);
        assert.equal(req.url, '/changes/42/revisions/1/drafts');
        assert.equal(req.response.message, 'created!');
        assert.isFalse(element.editing);
      }).then(function() {
        MockInteractions.tap(element.$$('.edit'));
        element._editDraft = 'You’ll be delivering a package to Chapek 9, a ' +
            'world where humans are killed on sight.';
        MockInteractions.tap(element.$$('.save'));
        assert.isTrue(element.disabled,
            'Element should be disabled when updating draft.');
        server.respond();

        element._xhrPromise.then(function(req) {
          assert.isFalse(element.disabled,
              'Element should be enabled when done updating draft.');
          assert.equal(req.status, 200);
          assert.equal(req.url,
              '/changes/42/revisions/1/drafts/baf0414d_40572e03');
          assert.equal(req.response.message, 'saved!');
          assert.isFalse(element.editing);
          done();
        });
      });
    });

    test('clicking on date link does not trigger nav', function() {
      var showStub = sinon.stub(page, 'show');
      var dateEl = element.$$('.date');
      assert.ok(dateEl);
      MockInteractions.tap(dateEl);
      var dest = window.location.pathname + '#5';
      assert(showStub.lastCall.calledWithExactly(dest, null, false),
          'Should navigate to ' + dest + ' without triggering nav');
      showStub.restore();
    });
  });
</script>