<!DOCTYPE html>
<!--
@license
Copyright (C) 2020 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">
<meta charset="utf-8">
<title>gr-messages-list-experimental</title>

<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>

<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
<script src="/components/wct-browser-legacy/browser.js"></script>

<dom-module id="comment-api-mock">
  <template>
    <gr-messages-list-experimental
        id="messagesList"
        change-comments="[[_changeComments]]"></gr-messages-list-experimental>
    <gr-comment-api id="commentAPI"></gr-comment-api>
  </template>
  </dom-module>

<test-fixture id="basic">
  <template>
    <comment-api-mock>
      <gr-messages-list-experimental></gr-messages-list-experimental>
    </comment-api-mock>
  </template>
</test-fixture>

<script type="module">
import '../../../test/common-test-setup.js';
import '../../diff/gr-comment-api/gr-comment-api.js';
import './gr-messages-list-experimental.js';
import '../../diff/gr-comment-api/gr-comment-api-mock_test.js';
import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
const randomMessage = function(opt_params) {
  const params = opt_params || {};
  const author1 = {
    _account_id: 1115495,
    name: 'Andrew Bonventre',
    email: 'andybons@chromium.org',
  };
  return {
    id: params.id || Math.random().toString(),
    date: params.date || '2016-01-12 20:28:33.038000',
    message: params.message || Math.random().toString(),
    _revision_number: params._revision_number || 1,
    author: params.author || author1,
  };
};

const randomAutomated = function(opt_params) {
  return Object.assign({tag: 'autogenerated:gerrit:replace'},
      randomMessage(opt_params));
};

suite('gr-messages-list-experimental tests', () => {
  let element;
  let messages;
  let sandbox;
  let commentApiWrapper;

  const getMessages = function() {
    return dom(element.root).querySelectorAll('gr-message');
  };

  const MESSAGE_ID_0 = '1234ccc949c6d482b061be6a28e10782abf0e7af';
  const MESSAGE_ID_1 = '8c19ccc949c6d482b061be6a28e10782abf0e7af';
  const MESSAGE_ID_2 = 'e7bfdbc842f6b6d8064bc68e0f52b673f40c0ca5';

  const author = {
    _account_id: 42,
    name: 'Marvin the Paranoid Android',
    email: 'marvin@sirius.org',
  };

  const comments = {
    file1: [
      {
        message: 'message text',
        change_message_id: MESSAGE_ID_0,
        updated: '2016-09-27 00:18:03.000000000',
        in_reply_to: '6505d749_f0bec0aa',
        line: 62,
        id: '6505d749_10ed44b2',
        patch_set: 2,
        author: {
          email: 'some@email.com',
          _account_id: 123,
        },
      },
      {
        message: 'message text',
        change_message_id: MESSAGE_ID_1,
        updated: '2016-09-27 00:18:03.000000000',
        in_reply_to: 'c5912363_6b820105',
        line: 42,
        id: '450a935e_0f1c05db',
        patch_set: 2,
        author,
      },
      {
        message: 'message text',
        change_message_id: MESSAGE_ID_1,
        updated: '2016-09-27 00:18:03.000000000',
        in_reply_to: '6505d749_f0bec0aa',
        line: 62,
        id: '6505d749_10ed44b2',
        patch_set: 2,
        author,
      },
      {
        message: 'message text',
        change_message_id: MESSAGE_ID_2,
        updated: '2016-09-27 00:18:03.000000000',
        line: 64,
        id: '34ed05d749_10ed44b2',
        patch_set: 2,
        author,
      },
    ],
    file2: [
      {
        message: 'message text',
        change_message_id: MESSAGE_ID_1,
        updated: '2016-09-27 00:18:03.000000000',
        in_reply_to: 'c5912363_4b7d450a',
        line: 132,
        id: '450a935e_4f260d25',
        patch_set: 2,
        author,
      },
    ],
  };

  suite('basic tests', () => {
    setup(() => {
      stub('gr-rest-api-interface', {
        getConfig() { return Promise.resolve({}); },
        getLoggedIn() { return Promise.resolve(false); },
        getDiffComments() { return Promise.resolve(comments); },
        getDiffRobotComments() { return Promise.resolve({}); },
        getDiffDrafts() { return Promise.resolve({}); },
      });
      sandbox = sinon.sandbox.create();
      messages = _.times(3, randomMessage);
      // Element must be wrapped in an element with direct access to the
      // comment API.
      commentApiWrapper = fixture('basic');
      element = commentApiWrapper.$.messagesList;
      element.messages = messages;

      // Stub methods on the changeComments object after changeComments has
      // been initialized.
      return commentApiWrapper.loadComments();
    });

    teardown(() => {
      sandbox.restore();
    });

    test('expand/collapse all', () => {
      let allMessageEls = getMessages();
      for (const message of allMessageEls) {
        message._expanded = false;
      }
      MockInteractions.tap(allMessageEls[1]);
      assert.isTrue(allMessageEls[1]._expanded);

      MockInteractions.tap(element.shadowRoot
          .querySelector('#collapse-messages'));
      allMessageEls = getMessages();
      for (const message of allMessageEls) {
        assert.isTrue(message._expanded);
      }

      MockInteractions.tap(element.shadowRoot
          .querySelector('#collapse-messages'));
      allMessageEls = getMessages();
      for (const message of allMessageEls) {
        assert.isFalse(message._expanded);
      }
    });

    test('expand/collapse from external keypress', () => {
      // Start with one expanded message. -> not all collapsed
      element.scrollToMessage(messages[1].id);
      assert.isFalse([...getMessages()].filter(m => m._expanded).length == 0);

      // Press 'z' -> all collapsed
      element.handleExpandCollapse(false);
      assert.isTrue([...getMessages()].filter(m => m._expanded).length == 0);

      // Press 'x' -> all expanded
      element.handleExpandCollapse(true);
      assert.isTrue([...getMessages()].filter(m => !m._expanded).length == 0);

      // Press 'z' -> all collapsed
      element.handleExpandCollapse(false);
      assert.isTrue([...getMessages()].filter(m => m._expanded).length == 0);
    });

    test('hide messages does not appear when no automated messages', () => {
      assert.isOk(element.shadowRoot
          .querySelector('#automatedMessageToggleContainer[hidden]'));
    });

    test('scroll to message', () => {
      const allMessageEls = getMessages();
      for (const message of allMessageEls) {
        message.set('message.expanded', false);
      }

      const scrollToStub = sandbox.stub(window, 'scrollTo');
      const highlightStub = sandbox.stub(element, '_highlightEl');

      element.scrollToMessage('invalid');

      for (const message of allMessageEls) {
        assert.isFalse(message._expanded,
            'expected gr-message to not be expanded');
      }

      const messageID = messages[1].id;
      element.scrollToMessage(messageID);
      assert.isTrue(
          element.shadowRoot
              .querySelector('[data-message-id="' + messageID + '"]')
              ._expanded);

      assert.isTrue(scrollToStub.calledOnce);
      assert.isTrue(highlightStub.calledOnce);
    });

    test('scroll to message offscreen', () => {
      const scrollToStub = sandbox.stub(window, 'scrollTo');
      const highlightStub = sandbox.stub(element, '_highlightEl');
      element.messages = _.times(25, randomMessage);
      flushAsynchronousOperations();
      assert.isFalse(scrollToStub.called);
      assert.isFalse(highlightStub.called);

      const messageID = element.messages[1].id;
      element.scrollToMessage(messageID);
      assert.isTrue(scrollToStub.calledOnce);
      assert.isTrue(highlightStub.calledOnce);
      assert.isTrue(
          element.shadowRoot
              .querySelector('[data-message-id="' + messageID + '"]')
              ._expanded);
    });

    test('messages', () => {
      const messages = [].concat(
          randomMessage(),
          {
            _index: 5,
            _revision_number: 4,
            message: 'Uploaded patch set 4.',
            date: '2016-09-28 13:36:33.000000000',
            author,
            id: '8c19ccc949c6d482b061be6a28e10782abf0e7af',
          },
          {
            _index: 6,
            _revision_number: 4,
            message: 'Patch Set 4:\n\n(6 comments)',
            date: '2016-09-28 13:36:33.000000000',
            author,
            id: 'e7bfdbc842f6b6d8064bc68e0f52b673f40c0ca5',
          }
      );
      element.messages = messages;
      const isAuthor = function(author, comment) {
        return comment.author._account_id === author._account_id;
      };
      const isMarvin = isAuthor.bind(null, author);
      flushAsynchronousOperations();
      const messageElements = getMessages();
      assert.equal(messageElements.length, messages.length);
      assert.deepEqual(messageElements[1].message, messages[1]);
      assert.deepEqual(messageElements[2].message, messages[2]);
      assert.deepEqual(messageElements[1].comments.file1,
          comments.file1.filter(isMarvin).filter(
              c => c.change_message_id === messages[1].id));
      assert.deepEqual(messageElements[1].comments.file2,
          comments.file2.filter(isMarvin).filter(
              c => c.change_message_id === messages[1].id));
      assert.deepEqual(messageElements[2].comments.file1,
          comments.file1.filter(isMarvin).filter(
              c => c.change_message_id === messages[2].id));
      assert.isUndefined(messageElements[2].comments.file2);
    });

    test('messages without author do not throw', () => {
      const messages = [{
        _index: 5,
        _revision_number: 4,
        message: 'Uploaded patch set 4.',
        date: '2016-09-28 13:36:33.000000000',
        id: '8c19ccc949c6d482b061be6a28e10782abf0e7af',
      }];
      element.messages = messages;
      flushAsynchronousOperations();
      const messageEls = getMessages();
      assert.equal(messageEls.length, 1);
      assert.equal(messageEls[0].message.message, messages[0].message);
    });
  });

  suite('gr-messages-list-experimental automate tests', () => {
    let element;
    let messages;
    let sandbox;
    let commentApiWrapper;

    const getMessages = function() {
      return dom(element.root).querySelectorAll('gr-message');
    };
    const getHiddenMessages = function() {
      return dom(element.root).querySelectorAll('gr-message[hidden]');
    };

    const randomMessageReviewer = {
      reviewer: {},
      date: '2016-01-13 20:30:33.038000',
    };

    setup(() => {
      stub('gr-rest-api-interface', {
        getConfig() { return Promise.resolve({}); },
        getLoggedIn() { return Promise.resolve(false); },
        getDiffComments() { return Promise.resolve({}); },
        getDiffRobotComments() { return Promise.resolve({}); },
        getDiffDrafts() { return Promise.resolve({}); },
      });

      sandbox = sinon.sandbox.create();
      messages = _.times(2, randomAutomated);
      messages.push(randomMessageReviewer);

      // Element must be wrapped in an element with direct access to the
      // comment API.
      commentApiWrapper = fixture('basic');
      element = commentApiWrapper.$.messagesList;
      sandbox.spy(commentApiWrapper.$.commentAPI, 'loadAll');
      element.messages = messages;

      // Stub methods on the changeComments object after changeComments has
      // been initialized.
      return commentApiWrapper.loadComments();
    });

    teardown(() => {
      sandbox.restore();
    });

    test('hide autogenerated button is not hidden', () => {
      assert.isNotOk(element.shadowRoot
          .querySelector('#automatedMessageToggle[hidden]'));
    });

    test('autogenerated messages are not hidden initially', () => {
      const allHiddenMessageEls = getHiddenMessages();

      // There are no hidden messages.
      assert.isFalse(!!allHiddenMessageEls.length);
    });

    test('autogenerated messages hidden after comments only toggle', () => {
      let allHiddenMessageEls = getHiddenMessages();

      element._hideAutomated = false;
      MockInteractions.tap(element.$.automatedMessageToggle);
      flushAsynchronousOperations();
      const allMessageEls = getMessages();
      allHiddenMessageEls = getHiddenMessages();

      // Autogenerated messages are now hidden.
      assert.equal(allHiddenMessageEls.length, allMessageEls.length);
    });

    test('autogenerated messages not hidden after comments only toggle',
        () => {
          let allHiddenMessageEls = getHiddenMessages();

          element._hideAutomated = true;
          MockInteractions.tap(element.$.automatedMessageToggle);
          allHiddenMessageEls = getHiddenMessages();

          // Autogenerated messages are now hidden.
          assert.isFalse(!!allHiddenMessageEls.length);
        });

    test('_computeLabelExtremes', () => {
      const computeSpy = sandbox.spy(element, '_computeLabelExtremes');

      element.labels = null;
      assert.isTrue(computeSpy.calledOnce);
      assert.deepEqual(computeSpy.lastCall.returnValue, {});

      element.labels = {};
      assert.isTrue(computeSpy.calledTwice);
      assert.deepEqual(computeSpy.lastCall.returnValue, {});

      element.labels = {'my-label': {}};
      assert.isTrue(computeSpy.calledThrice);
      assert.deepEqual(computeSpy.lastCall.returnValue, {});

      element.labels = {'my-label': {values: {}}};
      assert.equal(computeSpy.callCount, 4);
      assert.deepEqual(computeSpy.lastCall.returnValue, {});

      element.labels = {'my-label': {values: {'-12': {}}}};
      assert.equal(computeSpy.callCount, 5);
      assert.deepEqual(computeSpy.lastCall.returnValue,
          {'my-label': {min: -12, max: -12}});

      element.labels = {
        'my-label': {values: {'-2': {}, '-1': {}, '0': {}, '+1': {}, '+2': {}}},
      };
      assert.equal(computeSpy.callCount, 6);
      assert.deepEqual(computeSpy.lastCall.returnValue,
          {'my-label': {min: -2, max: 2}});

      element.labels = {
        'my-label': {values: {'-12': {}}},
        'other-label': {values: {'-1': {}, ' 0': {}, '+1': {}}},
      };
      assert.equal(computeSpy.callCount, 7);
      assert.deepEqual(computeSpy.lastCall.returnValue, {
        'my-label': {min: -12, max: -12},
        'other-label': {min: -1, max: 1},
      });
    });
  });
});
</script>