4f1b5c2dc9
This change is the PolyGerrit counterpart to [1]. Nicer rendering for reviewer comments in PolyGerrit using the Gerrit Wiki-like format. Whereas, formerly, PG comments were set in PRE blocks using monospaced font so that the original format and alignment of the comment can be directly viewed. This change allows comments to default to a variable-width font with wrapping while separately styling blocks intended to be pre-formatted text, quotes and lists. The logic to parse comment text into blocks is borrowed from the Java implementation found in [1]. Test cases are additionally translated from this change to ensure coincident behavior. Introduces GR-FORMATTED-TEXT to display these comments, and which uses a similar interface to GR-LINKED-TEXT. Much like [1], the comment is parsed into a list of blocks. These blocks are then mapped to the DOM nodes that get attached inside the element. [1] I8e11d363b80bff0b6395f56e210b636f68db36fa Feature: Issue 4861 Change-Id: I245d6782e2fd8982ac3eda438fe4ca80f3658195
440 lines
16 KiB
HTML
440 lines
16 KiB
HTML
<!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>
|
||
|
||
function isVisible(el) {
|
||
assert.ok(el);
|
||
return getComputedStyle(el).getPropertyValue('display') !== 'none';
|
||
}
|
||
|
||
suite('gr-diff-comment tests', function() {
|
||
var element;
|
||
var sandbox;
|
||
setup(function() {
|
||
stub('gr-rest-api-interface', {
|
||
getAccount: function() { return Promise.resolve(null); },
|
||
});
|
||
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',
|
||
};
|
||
sandbox = sinon.sandbox.create();
|
||
});
|
||
|
||
teardown(function() {
|
||
sandbox.restore();
|
||
});
|
||
|
||
test('collapsible comments', function() {
|
||
// When a comment (not draft) is loaded, it should be collapsed
|
||
assert.isTrue(element.collapsed);
|
||
assert.isFalse(isVisible(element.$$('gr-formatted-text')),
|
||
'gr-formatted-text is not visible');
|
||
assert.isFalse(isVisible(element.$$('.actions')),
|
||
'actions are not visible');
|
||
assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
|
||
'textarea is not visible');
|
||
|
||
// The header middle content is only visible when comments are collapsed.
|
||
// It shows the message in a condensed way, and limits to a single line.
|
||
assert.isTrue(isVisible(element.$$('.collapsedContent')),
|
||
'header middle content is visible');
|
||
|
||
// When the header row is clicked, the comment should expand
|
||
MockInteractions.tap(element.$.header);
|
||
assert.isFalse(element.collapsed);
|
||
assert.isTrue(isVisible(element.$$('gr-formatted-text')),
|
||
'gr-formatted-text is visible');
|
||
assert.isTrue(isVisible(element.$$('.actions')),
|
||
'actions are visible');
|
||
assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
|
||
'textarea is not visible');
|
||
assert.isFalse(isVisible(element.$$('.collapsedContent')),
|
||
'header middle content is not visible');
|
||
});
|
||
|
||
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();
|
||
});
|
||
|
||
test('comment expand and collapse', function() {
|
||
element.collapsed = true;
|
||
assert.isFalse(isVisible(element.$$('gr-formatted-text')),
|
||
'gr-formatted-text is not visible');
|
||
assert.isFalse(isVisible(element.$$('.actions')),
|
||
'actions are not visible');
|
||
assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
|
||
'textarea is not visible');
|
||
assert.isTrue(isVisible(element.$$('.collapsedContent')),
|
||
'header middle content is visible');
|
||
|
||
element.collapsed = false;
|
||
assert.isFalse(element.collapsed);
|
||
assert.isTrue(isVisible(element.$$('gr-formatted-text')),
|
||
'gr-formatted-text is visible');
|
||
assert.isTrue(isVisible(element.$$('.actions')),
|
||
'actions are visible');
|
||
assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
|
||
'textarea is not visible');
|
||
assert.isFalse(isVisible(element.$$('.collapsedContent')),
|
||
'header middle content is is not visible');
|
||
});
|
||
|
||
test('esc does not close comment unless text is empty', function(done) {
|
||
element.editing = true;
|
||
element._messageText = 'test';
|
||
var textarea = element.$.editTextarea;
|
||
var closeSpy = sandbox.spy(element, '_handleCancel');
|
||
|
||
flush(function() {
|
||
MockInteractions.pressAndReleaseKeyOn(textarea, 27); // esc
|
||
assert.isFalse(closeSpy.called);
|
||
element._messageText = '';
|
||
MockInteractions.pressAndReleaseKeyOn(textarea, 27); // esc
|
||
assert.isTrue(closeSpy.called);
|
||
done();
|
||
});
|
||
});
|
||
});
|
||
|
||
suite('gr-diff-comment draft tests', function() {
|
||
var element;
|
||
|
||
setup(function() {
|
||
stub('gr-rest-api-interface', {
|
||
getAccount: function() { return Promise.resolve(null); },
|
||
saveDiffDraft: function() {
|
||
return Promise.resolve({
|
||
ok: true,
|
||
text: function() {
|
||
return Promise.resolve(
|
||
')]}\'\n{' +
|
||
'"id": "baf0414d_40572e03",' +
|
||
'"path": "/path/to/file",' +
|
||
'"line": 5,' +
|
||
'"updated": "2015-12-08 21:52:36.177000000",' +
|
||
'"message": "saved!"' +
|
||
'}'
|
||
);
|
||
},
|
||
});
|
||
},
|
||
removeChangeReviewer: function() {
|
||
return Promise.resolve({ok: true});
|
||
},
|
||
});
|
||
stub('gr-storage', {
|
||
getDraftComment: function() { return null; },
|
||
});
|
||
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,
|
||
};
|
||
});
|
||
|
||
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('collapsible drafts', function() {
|
||
assert.isTrue(element.collapsed);
|
||
assert.isFalse(isVisible(element.$$('gr-formatted-text')),
|
||
'gr-formatted-text is not visible');
|
||
assert.isFalse(isVisible(element.$$('.actions')),
|
||
'actions are not visible');
|
||
assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
|
||
'textarea is not visible');
|
||
assert.isTrue(isVisible(element.$$('.collapsedContent')),
|
||
'header middle content is visible');
|
||
|
||
MockInteractions.tap(element.$.header);
|
||
assert.isFalse(element.collapsed);
|
||
assert.isTrue(isVisible(element.$$('gr-formatted-text')),
|
||
'gr-formatted-text is visible');
|
||
assert.isTrue(isVisible(element.$$('.actions')),
|
||
'actions are visible');
|
||
assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
|
||
'textarea is not visible');
|
||
assert.isFalse(isVisible(element.$$('.collapsedContent')),
|
||
'header middle content is is not visible');
|
||
|
||
// When the edit button is pressed, should still see the actions
|
||
// and also textarea
|
||
MockInteractions.tap(element.$$('.edit'));
|
||
assert.isFalse(element.collapsed);
|
||
assert.isFalse(isVisible(element.$$('gr-formatted-text')),
|
||
'gr-formatted-text is not visible');
|
||
assert.isTrue(isVisible(element.$$('.actions')),
|
||
'actions are visible');
|
||
assert.isTrue(isVisible(element.$$('iron-autogrow-textarea')),
|
||
'textarea is visible');
|
||
assert.isFalse(isVisible(element.$$('.collapsedContent')),
|
||
'header middle content is not visible');
|
||
|
||
// When toggle again, everything should be hidden except for textarea
|
||
// and header middle content should be visible
|
||
MockInteractions.tap(element.$.header);
|
||
assert.isTrue(element.collapsed);
|
||
assert.isFalse(isVisible(element.$$('gr-formatted-text')),
|
||
'gr-formatted-text is not visible');
|
||
assert.isFalse(isVisible(element.$$('.actions')),
|
||
'actions are not visible');
|
||
assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
|
||
'textarea is not visible');
|
||
assert.isTrue(isVisible(element.$$('.collapsedContent')),
|
||
'header middle content is visible');
|
||
|
||
// When toggle again, textarea should remain open in the state it was
|
||
// before
|
||
MockInteractions.tap(element.$.header);
|
||
assert.isFalse(isVisible(element.$$('gr-formatted-text')),
|
||
'gr-formatted-text is not visible');
|
||
assert.isTrue(isVisible(element.$$('.actions')),
|
||
'actions are visible');
|
||
assert.isTrue(isVisible(element.$$('iron-autogrow-textarea')),
|
||
'textarea is visible');
|
||
assert.isFalse(isVisible(element.$$('.collapsedContent')),
|
||
'header middle content is not visible');
|
||
});
|
||
|
||
test('draft creation/cancelation', function(done) {
|
||
assert.isFalse(element.editing);
|
||
MockInteractions.tap(element.$$('.edit'));
|
||
assert.isTrue(element.editing);
|
||
|
||
element._messageText = '';
|
||
// Save should be disabled on an empty message.
|
||
var disabled = element.$$('.save').hasAttribute('disabled');
|
||
assert.isTrue(disabled, 'save button should be disabled.');
|
||
element._messageText = ' ';
|
||
disabled = element.$$('.save').hasAttribute('disabled');
|
||
assert.isTrue(disabled, 'save button should be disabled.');
|
||
|
||
var updateStub = sinon.stub();
|
||
element.addEventListener('comment-update', updateStub);
|
||
|
||
var numDiscardEvents = 0;
|
||
element.addEventListener('comment-discard', function(e) {
|
||
numDiscardEvents++;
|
||
if (numDiscardEvents == 3) {
|
||
assert.isFalse(updateStub.called);
|
||
done();
|
||
}
|
||
});
|
||
MockInteractions.tap(element.$$('.cancel'));
|
||
MockInteractions.tap(element.$$('.discard'));
|
||
element.flushDebouncer('fire-update');
|
||
element._messageText = '';
|
||
MockInteractions.pressAndReleaseKeyOn(element.$.editTextarea, 27); // esc
|
||
});
|
||
|
||
test('ctrl+s saves comment', function(done) {
|
||
var stub = sinon.stub(element, 'save', function() {
|
||
assert.isTrue(stub.called);
|
||
stub.restore();
|
||
done();
|
||
});
|
||
element._messageText = 'is that the horse from horsing around??';
|
||
MockInteractions.pressAndReleaseKeyOn(
|
||
element.$.editTextarea.textarea,
|
||
83, 'ctrl'); // 'ctrl + s'
|
||
});
|
||
|
||
test('draft saving/editing', function(done) {
|
||
var fireStub = sinon.stub(element, 'fire');
|
||
|
||
element.draft = true;
|
||
MockInteractions.tap(element.$$('.edit'));
|
||
element._messageText = 'good news, everyone!';
|
||
element.flushDebouncer('fire-update');
|
||
element.flushDebouncer('store');
|
||
assert(fireStub.calledWith('comment-update'),
|
||
'comment-update should be sent');
|
||
assert.deepEqual(fireStub.lastCall.args, [
|
||
'comment-update', {
|
||
comment: {
|
||
__draft: true,
|
||
__draftID: 'temp_draft_id',
|
||
__editing: true,
|
||
line: 5,
|
||
path: '/path/to/file',
|
||
},
|
||
patchNum: 1,
|
||
},
|
||
]);
|
||
MockInteractions.tap(element.$$('.save'));
|
||
|
||
assert.isTrue(element.disabled,
|
||
'Element should be disabled when creating draft.');
|
||
|
||
element._xhrPromise.then(function(draft) {
|
||
assert(fireStub.calledWith('comment-save'),
|
||
'comment-save should be sent');
|
||
assert.deepEqual(fireStub.lastCall.args[1], {
|
||
comment: {
|
||
__draft: true,
|
||
__draftID: 'temp_draft_id',
|
||
__editing: false,
|
||
id: 'baf0414d_40572e03',
|
||
line: 5,
|
||
message: 'saved!',
|
||
path: '/path/to/file',
|
||
updated: '2015-12-08 21:52:36.177000000',
|
||
},
|
||
patchNum: 1,
|
||
});
|
||
assert.isFalse(element.disabled,
|
||
'Element should be enabled when done creating draft.');
|
||
assert.equal(draft.message, 'saved!');
|
||
assert.isFalse(element.editing);
|
||
}).then(function() {
|
||
MockInteractions.tap(element.$$('.edit'));
|
||
element._messageText = '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.');
|
||
|
||
element._xhrPromise.then(function(draft) {
|
||
assert.isFalse(element.disabled,
|
||
'Element should be enabled when done updating draft.');
|
||
assert.equal(draft.message, 'saved!');
|
||
assert.isFalse(element.editing);
|
||
fireStub.restore();
|
||
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>
|