d311e7f7e6
gr-file-list has an issue handling very large (500+) amounts of files due to the dynamic rendering of many DOM elements. This change caps the number of files shown initially at 75, and allows the user to view more in chunks of 75. Also added is a button that allows the user to show all files. Bug: Issue 4575 Change-Id: I84c7fc352da80609d424217250830f19a599c940
377 lines
13 KiB
HTML
377 lines
13 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-file-list</title>
|
|
|
|
<script src="../../../bower_components/webcomponentsjs/webcomponents.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-file-list.html">
|
|
|
|
<test-fixture id="basic">
|
|
<template>
|
|
<gr-file-list></gr-file-list>
|
|
</template>
|
|
</test-fixture>
|
|
|
|
<script>
|
|
suite('gr-file-list tests', function() {
|
|
var element;
|
|
|
|
setup(function() {
|
|
stub('gr-rest-api-interface', {
|
|
getLoggedIn: function() { return Promise.resolve(true); },
|
|
getPreferences: function() { return Promise.resolve({}); },
|
|
});
|
|
element = fixture('basic');
|
|
});
|
|
|
|
test('get file list', function(done) {
|
|
var getChangeFilesStub = sinon.stub(element.$.restAPI, 'getChangeFiles',
|
|
function() {
|
|
return Promise.resolve({
|
|
'/COMMIT_MSG': {lines_inserted: 9},
|
|
'tags.html': {lines_deleted: 123},
|
|
'about.txt': {},
|
|
});
|
|
});
|
|
|
|
element._getFiles().then(function(files) {
|
|
var filenames = files.map(function(f) { return f.__path; });
|
|
assert.deepEqual(filenames, ['/COMMIT_MSG', 'about.txt', 'tags.html']);
|
|
assert.deepEqual(files[0], {
|
|
lines_inserted: 9,
|
|
lines_deleted: 0,
|
|
__path: '/COMMIT_MSG',
|
|
__expanded: false,
|
|
});
|
|
assert.deepEqual(files[1], {
|
|
lines_inserted: 0,
|
|
lines_deleted: 0,
|
|
__path: 'about.txt',
|
|
__expanded: false,
|
|
});
|
|
assert.deepEqual(files[2], {
|
|
lines_inserted: 0,
|
|
lines_deleted: 123,
|
|
__path: 'tags.html',
|
|
__expanded: false,
|
|
});
|
|
|
|
getChangeFilesStub.restore();
|
|
done();
|
|
});
|
|
});
|
|
|
|
suite('keyboard shortcuts', function() {
|
|
setup(function() {
|
|
element._files = [
|
|
{__path: '/COMMIT_MSG', __expanded: false},
|
|
{__path: 'file_added_in_rev2.txt', __expanded: false},
|
|
{__path: 'myfile.txt', __expanded: false},
|
|
];
|
|
element.changeNum = '42';
|
|
element.patchRange = {
|
|
basePatchNum: 'PARENT',
|
|
patchNum: '2',
|
|
};
|
|
element.selectedIndex = 0;
|
|
});
|
|
|
|
test('toggle left diff via shortcut', function() {
|
|
var toggleLeftDiffStub = sinon.stub();
|
|
sinon.stub(element, 'diffs', {get: function() {
|
|
return [{toggleLeftDiff: toggleLeftDiffStub}];
|
|
}});
|
|
MockInteractions.pressAndReleaseKeyOn(element, 65, 'shift'); // 'A'
|
|
assert.isTrue(toggleLeftDiffStub.calledOnce);
|
|
});
|
|
|
|
test('keyboard shortcuts', function() {
|
|
var toggleInlineDiffsStub = sinon.stub(element, '_toggleInlineDiffs');
|
|
MockInteractions.pressAndReleaseKeyOn(element, 73, 'shift'); // 'I'
|
|
assert.isTrue(toggleInlineDiffsStub.calledOnce);
|
|
toggleInlineDiffsStub.restore();
|
|
|
|
flushAsynchronousOperations();
|
|
var elementItems = Polymer.dom(element.root).querySelectorAll(
|
|
'.row:not(.header)');
|
|
assert.equal(elementItems.length, 3);
|
|
assert.isTrue(elementItems[0].hasAttribute('selected'));
|
|
assert.isFalse(elementItems[1].hasAttribute('selected'));
|
|
assert.isFalse(elementItems[2].hasAttribute('selected'));
|
|
MockInteractions.pressAndReleaseKeyOn(element, 74); // 'J'
|
|
assert.equal(element.selectedIndex, 1);
|
|
MockInteractions.pressAndReleaseKeyOn(element, 74); // 'J'
|
|
|
|
var showStub = sinon.stub(page, 'show');
|
|
assert.equal(element.selectedIndex, 2);
|
|
MockInteractions.pressAndReleaseKeyOn(element, 13); // 'ENTER'
|
|
assert(showStub.lastCall.calledWith('/c/42/2/myfile.txt'),
|
|
'Should navigate to /c/42/2/myfile.txt');
|
|
|
|
MockInteractions.pressAndReleaseKeyOn(element, 75); // 'K'
|
|
assert.equal(element.selectedIndex, 1);
|
|
MockInteractions.pressAndReleaseKeyOn(element, 79); // 'O'
|
|
assert(showStub.lastCall.calledWith('/c/42/2/file_added_in_rev2.txt'),
|
|
'Should navigate to /c/42/2/file_added_in_rev2.txt');
|
|
|
|
MockInteractions.pressAndReleaseKeyOn(element, 75); // 'K'
|
|
MockInteractions.pressAndReleaseKeyOn(element, 75); // 'K'
|
|
MockInteractions.pressAndReleaseKeyOn(element, 75); // 'K'
|
|
assert.equal(element.selectedIndex, 0);
|
|
|
|
showStub.restore();
|
|
});
|
|
|
|
test('i key shows/hides selected inline diff', function() {
|
|
element.selectedIndex = 0;
|
|
MockInteractions.pressAndReleaseKeyOn(element, 73); // 'I'
|
|
assert.isTrue(element._files[0].__expanded);
|
|
MockInteractions.pressAndReleaseKeyOn(element, 73); // 'I'
|
|
assert.isFalse(element._files[0].__expanded);
|
|
element.selectedIndex = 1;
|
|
MockInteractions.pressAndReleaseKeyOn(element, 73); // 'I'
|
|
assert.isTrue(element._files[1].__expanded);
|
|
});
|
|
});
|
|
|
|
test('comment filtering', function() {
|
|
var comments = {
|
|
'/COMMIT_MSG': [
|
|
{patch_set: 1, message: 'Done'},
|
|
{patch_set: 1, message: 'oh hay'},
|
|
{patch_set: 2, message: 'hello'},
|
|
],
|
|
'myfile.txt': [
|
|
{patch_set: 1, message: 'good news!'},
|
|
{patch_set: 2, message: 'wat!?'},
|
|
{patch_set: 2, message: 'hi'},
|
|
],
|
|
};
|
|
assert.equal(
|
|
element._computeCountString(comments, '1', '/COMMIT_MSG', 'comment'),
|
|
'2 comments');
|
|
assert.equal(
|
|
element._computeCountString(comments, '1', 'myfile.txt', 'comment'),
|
|
'1 comment');
|
|
assert.equal(
|
|
element._computeCountString(comments, '1',
|
|
'file_added_in_rev2.txt', 'comment'),
|
|
'');
|
|
assert.equal(
|
|
element._computeCountString(comments, '2', '/COMMIT_MSG', 'comment'),
|
|
'1 comment');
|
|
assert.equal(
|
|
element._computeCountString(comments, '2', 'myfile.txt', 'comment'),
|
|
'2 comments');
|
|
assert.equal(
|
|
element._computeCountString(comments, '2',
|
|
'file_added_in_rev2.txt', 'comment'),
|
|
'');
|
|
});
|
|
|
|
test('computed properties', function() {
|
|
assert.equal(element._computeFileStatus('A'), 'A');
|
|
assert.equal(element._computeFileStatus(undefined), 'M');
|
|
assert.equal(element._computeFileStatus(null), 'M');
|
|
|
|
assert.equal(element._computeFileDisplayName('/foo/bar/baz'),
|
|
'/foo/bar/baz');
|
|
assert.equal(element._computeFileDisplayName('/COMMIT_MSG'),
|
|
'Commit message');
|
|
|
|
assert.equal(element._computeClass('clazz', '/foo/bar/baz'), 'clazz');
|
|
assert.equal(element._computeClass('clazz', '/COMMIT_MSG'),
|
|
'clazz invisible');
|
|
});
|
|
|
|
test('file review status', function() {
|
|
element._files = [
|
|
{__path: '/COMMIT_MSG', __expanded: false},
|
|
{__path: 'file_added_in_rev2.txt', __expanded: false},
|
|
{__path: 'myfile.txt', __expanded: false},
|
|
];
|
|
element._reviewed = ['/COMMIT_MSG', 'myfile.txt'];
|
|
element.changeNum = '42';
|
|
element.patchRange = {
|
|
basePatchNum: 'PARENT',
|
|
patchNum: '2',
|
|
};
|
|
element.selectedIndex = 0;
|
|
|
|
flushAsynchronousOperations();
|
|
var fileRows =
|
|
Polymer.dom(element.root).querySelectorAll('.row:not(.header)');
|
|
var commitMsg = fileRows[0].querySelector(
|
|
'input.reviewed[type="checkbox"]');
|
|
var fileAdded = fileRows[1].querySelector(
|
|
'input.reviewed[type="checkbox"]');
|
|
var myFile = fileRows[2].querySelector(
|
|
'input.reviewed[type="checkbox"]');
|
|
|
|
assert.isTrue(commitMsg.checked);
|
|
assert.isFalse(fileAdded.checked);
|
|
assert.isTrue(myFile.checked);
|
|
|
|
var saveStub = sinon.stub(element, '_saveReviewedState',
|
|
function() { return Promise.resolve(); });
|
|
|
|
MockInteractions.tap(commitMsg);
|
|
assert.isTrue(saveStub.lastCall.calledWithExactly('/COMMIT_MSG', false));
|
|
MockInteractions.tap(commitMsg);
|
|
assert.isTrue(saveStub.lastCall.calledWithExactly('/COMMIT_MSG', true));
|
|
|
|
saveStub.restore();
|
|
});
|
|
|
|
test('patch set from revisions', function() {
|
|
var patchNums = element._computePatchSets({
|
|
rev3: {_number: 3},
|
|
rev1: {_number: 1},
|
|
rev4: {_number: 4},
|
|
rev2: {_number: 2},
|
|
});
|
|
assert.deepEqual(patchNums, [1, 2, 3, 4]);
|
|
});
|
|
|
|
test('patch range string', function() {
|
|
assert.equal(
|
|
element._patchRangeStr({basePatchNum: 'PARENT', patchNum: '1'}),
|
|
'1');
|
|
assert.equal(
|
|
element._patchRangeStr({basePatchNum: '1', patchNum: '3'}),
|
|
'1..3');
|
|
});
|
|
|
|
test('diff against dropdown', function(done) {
|
|
var showStub = sinon.stub(page, 'show');
|
|
element.changeNum = '42';
|
|
element.patchRange = {
|
|
basePatchNum: 'PARENT',
|
|
patchNum: '3',
|
|
};
|
|
element.revisions = {
|
|
rev1: {_number: 1},
|
|
rev2: {_number: 2},
|
|
rev3: {_number: 3},
|
|
};
|
|
flush(function() {
|
|
var selectEl = element.$$('select');
|
|
assert.equal(selectEl.value, 'PARENT');
|
|
assert.isTrue(element.$$('option[value="3"]').hasAttribute('disabled'));
|
|
selectEl.addEventListener('change', function() {
|
|
assert.equal(selectEl.value, '2');
|
|
assert(showStub.lastCall.calledWithExactly('/c/42/2..3'),
|
|
'Should navigate to /c/42/2..3');
|
|
showStub.restore();
|
|
done();
|
|
});
|
|
selectEl.value = '2';
|
|
element.fire('change', {}, {node: selectEl});
|
|
});
|
|
});
|
|
|
|
test('checkbox shows/hides diff inline', function() {
|
|
element._files = [
|
|
{__path: 'myfile.txt', __expanded: false},
|
|
];
|
|
element.changeNum = '42';
|
|
element.patchRange = {
|
|
basePatchNum: 'PARENT',
|
|
patchNum: '2',
|
|
};
|
|
element.selectedIndex = 0;
|
|
flushAsynchronousOperations();
|
|
var fileRows =
|
|
Polymer.dom(element.root).querySelectorAll('.row:not(.header)');
|
|
// Prevent diff from making API call.
|
|
var diffStub = sinon.stub(element.diffs[0], 'reload');
|
|
var showHideCheck = fileRows[0].querySelector(
|
|
'input.show-hide[type="checkbox"]');
|
|
assert.isTrue(showHideCheck.checked);
|
|
MockInteractions.tap(showHideCheck);
|
|
assert.isFalse(element.diffs[0].hidden);
|
|
diffStub.restore();
|
|
});
|
|
|
|
test('path should be properly escaped', function() {
|
|
element._files = [
|
|
{__path: 'foo bar/my+file.txt%'},
|
|
];
|
|
element.changeNum = '42';
|
|
element.patchRange = {
|
|
basePatchNum: 'PARENT',
|
|
patchNum: '2',
|
|
};
|
|
flushAsynchronousOperations();
|
|
// Slashes should be preserved, and spaces should be translated to `+`.
|
|
// @see Issue 4255 regarding double-encoding.
|
|
// @see Issue 4577 regarding more readable URLs.
|
|
assert.equal(
|
|
element.$$('a').getAttribute('href'),
|
|
'/c/42/2/foo+bar/my%252Bfile.txt%2525');
|
|
});
|
|
|
|
test('increment button is functional', function(done) {
|
|
flush(function() {
|
|
element._files = [];
|
|
var files = [];
|
|
assert.isTrue(element.$.incrementButton.hasAttribute('hidden'));
|
|
assert.isTrue(element.$.showAllButton.hasAttribute('hidden'));
|
|
for (var i = 0; i < 99; i++) {
|
|
files.push({__path: 'foo bar/my+file.txt%'});
|
|
}
|
|
element._files = files;
|
|
assert.equal(
|
|
element.$.incrementButton.textContent.trim(), 'Show 24 more');
|
|
assert.isFalse(element.$.incrementButton.hasAttribute('hidden'));
|
|
assert.isFalse(element.$.showAllButton.hasAttribute('hidden'));
|
|
MockInteractions.tap(element.$.incrementButton);
|
|
assert.isTrue(element.$.incrementButton.hasAttribute('hidden'));
|
|
assert.isTrue(element.$.showAllButton.hasAttribute('hidden'));
|
|
done();
|
|
});
|
|
});
|
|
|
|
test('show all button is functional', function(done) {
|
|
flush(function() {
|
|
element._files = [];
|
|
var files = [];
|
|
assert.isTrue(element.$.incrementButton.hasAttribute('hidden'));
|
|
assert.isTrue(element.$.showAllButton.hasAttribute('hidden'));
|
|
for (var i = 0; i < 99; i++) {
|
|
files.push({__path: 'foo bar/my+file.txt%'});
|
|
}
|
|
element._files = files;
|
|
assert.equal(
|
|
element.$.showAllButton.textContent.trim(), 'Show all 99 files');
|
|
assert.isFalse(element.$.incrementButton.hasAttribute('hidden'));
|
|
assert.isFalse(element.$.showAllButton.hasAttribute('hidden'));
|
|
MockInteractions.tap(element.$.showAllButton);
|
|
assert.isTrue(element.$.showAllButton.hasAttribute('hidden'));
|
|
assert.isTrue(element.$.incrementButton.hasAttribute('hidden'));
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
</script>
|