opendev/gerrit
Code Issues Proposed changes
41bdc04cb8
gerrit/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment_test.html
Becky Siegel 41bdc04cb8 Don't merge threads on same line left/right 
Goes along with c/95273/. Adds commentSide attribute to comments to see
which side of the diff view they belong on. This is also used as part
of the locationRange for the gr-diff-comment-thread-group, so that two
thread groups can be on the same line or range for the unified group (
one for the right, one for the left).

Note: there is already a 'side' attribute on the gr-diff-comment, which
is confusing. This side actually references 'PARENT' or 'REVISION', to
identify whether the comment belongs to the parent or any revision. On
diffs where two revisions are compared to each other, this cannot be
used to determine left/right. However, because 'side' is part of
the CommentInfo entity[1], it is difficult to change the name and make
more sense out of that.

[1] https://gerrit-review.googlesource.com/Documentation/rest-api-changes.html#comment-info

Bug: Issue 5114
Change-Id: I5cc4c17d4bb134e31e5cc07ff9b08ed349488c97
2017-02-07 21:00:52 +00:00

559 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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('create-reply-comment', function(e) {
assert.ok(e.detail.comment);
done();
});
MockInteractions.tap(element.$$('.reply'));
});
test('proper event fires on quote', function(done) {
element.addEventListener('create-reply-comment', function(e) {
assert.ok(e.detail.comment);
assert.isTrue(e.detail.quote);
done();
});
MockInteractions.tap(element.$$('.quote'));
});
test('proper event fires on ack', function(done) {
element.addEventListener('create-ack-comment', function(e) {
done();
});
MockInteractions.tap(element.$$('.ack'));
});
test('proper event fires on done', function(done) {
element.addEventListener('create-done-comment', 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('message is not retrieved from storage when other editing is true',
function(done) {
var storageStub = sandbox.stub(element.$.storage, 'getDraftComment');
var loadSpy = sandbox.spy(element, '_loadLocalDraft');
element.changeNum = 1;
element.patchNum = 1;
element.comment = {
author: {
name: 'Mr. Peanutbutter',
email: 'tenn1sballchaser@aol.com',
},
line: 5,
__otherEditing: true,
};
flush(function() {
assert.isTrue(loadSpy.called);
assert.isFalse(storageStub.called);
done();
});
});
test('message is retrieved from storage when there is no other editing',
function(done) {
var storageStub = sandbox.stub(element.$.storage, 'getDraftComment');
var loadSpy = sandbox.spy(element, '_loadLocalDraft');
element.changeNum = 1;
element.patchNum = 1;
element.comment = {
author: {
name: 'Mr. Peanutbutter',
email: 'tenn1sballchaser@aol.com',
},
line: 5,
};
flush(function() {
assert.isTrue(loadSpy.called);
assert.isTrue(storageStub.called);
done();
});
});
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;
var sandbox;
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 = {
__commentSide: 'right',
__draft: true,
__draftID: 'temp_draft_id',
path: '/path/to/file',
line: 5,
};
element.commentSide = 'right';
sandbox = sinon.sandbox.create();
});
teardown(function() {
sandbox.restore();
});
test('button visibility states', function() {
element.showActions = false;
assert.isTrue(element.$$('.humanActions').hasAttribute('hidden'));
assert.isTrue(element.$$('.robotActions').hasAttribute('hidden'));
element.showActions = true;
assert.isFalse(element.$$('.humanActions').hasAttribute('hidden'));
assert.isTrue(element.$$('.robotActions').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.$$('.ack')), 'ack is not visible');
assert.isFalse(isVisible(element.$$('.done')), 'done is not visible');
assert.isFalse(isVisible(element.$$('.resolve')),
'resolve is not visible');
assert.isFalse(element.$$('.humanActions').hasAttribute('hidden'));
assert.isTrue(element.$$('.robotActions').hasAttribute('hidden'));
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.$$('.ack')), 'ack is not visible');
assert.isFalse(isVisible(element.$$('.done')), 'done is not visible');
assert.isTrue(isVisible(element.$$('.resolve')), 'resolve is visible');
assert.isFalse(element.$$('.humanActions').hasAttribute('hidden'));
assert.isTrue(element.$$('.robotActions').hasAttribute('hidden'));
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.$$('.ack')), 'ack is visible');
assert.isTrue(isVisible(element.$$('.done')), 'done is visible');
assert.isFalse(element.$$('.humanActions').hasAttribute('hidden'));
assert.isTrue(element.$$('.robotActions').hasAttribute('hidden'));
element.comment.id = 'foo';
element.draft = true;
element.editing = true;
assert.isTrue(isVisible(element.$$('.cancel')), 'cancel is visible');
assert.isFalse(element.$$('.humanActions').hasAttribute('hidden'));
assert.isTrue(element.$$('.robotActions').hasAttribute('hidden'));
element.isRobotComment = true;
element.draft = true;
assert.isTrue(element.$$('.humanActions').hasAttribute('hidden'));
assert.isFalse(element.$$('.robotActions').hasAttribute('hidden'));
// It is not expected to see Robot comment drafts, but if they appear,
// they will behave the same as non-drafts.
element.draft = false;
assert.isTrue(element.$$('.humanActions').hasAttribute('hidden'));
assert.isFalse(element.$$('.robotActions').hasAttribute('hidden'));
});
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 = '';
var eraseMessageDraftSpy = sandbox.spy(element, '_eraseDraftComment');
// 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++;
assert.isFalse(eraseMessageDraftSpy.called);
if (numDiscardEvents === 2) {
assert.isFalse(updateStub.called);
done();
}
});
MockInteractions.tap(element.$$('.cancel'));
element.flushDebouncer('fire-update');
element._messageText = '';
MockInteractions.pressAndReleaseKeyOn(element.$.editTextarea, 27); // esc
});
test('draft discard removes message from storage', function(done) {
element._messageText = '';
var eraseMessageDraftSpy = sandbox.spy(element, '_eraseDraftComment');
var numDiscardEvents = 0;
element.addEventListener('comment-discard', function(e) {
assert.isTrue(eraseMessageDraftSpy.called);
done();
});
MockInteractions.tap(element.$$('.discard'));
});
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: {
__commentSide: 'right',
__draft: true,
__draftID: 'temp_draft_id',
__editing: true,
line: 5,
path: '/path/to/file',
message: 'good news, everyone!',
unresolved: false,
},
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: {
__commentSide: 'right',
__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();
});
test('proper event fires on resolve', function(done) {
element.addEventListener('comment-update', function(e) {
assert.isTrue(e.detail.comment.unresolved);
done();
});
MockInteractions.tap(element.$$('.resolve input'));
});
test('resolved comment state indicated by checkbox', function() {
element.comment = {unresolved: false};
assert.isTrue(element.$$('.resolve input').checked);
element.comment = {unresolved: true};
assert.isFalse(element.$$('.resolve input').checked);
});
});
</script>
View Git Blame Copy Permalink