Becky Siegel acf455a9b6 Make file list more useful on mobile
Previously, the file path was truncated and often the file name was cut
off completely, which had made it hard to tell what files were actually
changed.  With this change, the text appearing on the file list just
show ellipsis and the file name (ex: '.../filename.txt').

Additionally, for both mobile and larger screens, the full filename
appears (line wrapped if needed) when the file list item is expanded.
This way, if enough content is cut off that it's still not useful, there
is a way to see the path in it's entirety.

Bug: Issue 4609
Change-Id: Ic4aaf45bafbc3c5b31add8f7c43b18c9d2b2913b
2016-12-14 14:46:17 -08:00

603 lines
23 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-view</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-diff-view.html">
<test-fixture id="basic">
<template>
<gr-diff-view></gr-diff-view>
</template>
</test-fixture>
<test-fixture id="blank">
<template>
<div></div>
</template>
</test-fixture>
<script>
suite('gr-diff-view tests', function() {
var element;
var sandbox;
setup(function() {
sandbox = sinon.sandbox.create();
stub('gr-rest-api-interface', {
getLoggedIn: function() { return Promise.resolve(false); },
getProjectConfig: function() { return Promise.resolve({}); },
getDiffChangeDetail: function() { return Promise.resolve(null); },
getChangeFiles: function() { return Promise.resolve({}); },
saveFileReviewed: function() { return Promise.resolve(); },
});
element = fixture('basic');
});
teardown(function() {
sandbox.restore();
});
test('toggle left diff with a hotkey', function() {
var toggleLeftDiffStub = sandbox.stub(element.$.diff, 'toggleLeftDiff');
MockInteractions.pressAndReleaseKeyOn(element, 65, 'shift', 'a');
assert.isTrue(toggleLeftDiffStub.calledOnce);
});
test('keyboard shortcuts', function() {
element._changeNum = '42';
element._patchRange = {
basePatchNum: 'PARENT',
patchNum: '10',
};
element._change = {
revisions: {
a: {_number: 10},
},
};
element._fileList = ['chell.go', 'glados.txt', 'wheatley.md'];
element._path = 'glados.txt';
element.changeViewState.selectedFileIndex = 1;
var showStub = sandbox.stub(page, 'show');
MockInteractions.pressAndReleaseKeyOn(element, 85, null, 'u');
assert(showStub.lastCall.calledWithExactly('/c/42/'),
'Should navigate to /c/42/');
MockInteractions.pressAndReleaseKeyOn(element, 221, null, ']');
assert(showStub.lastCall.calledWithExactly('/c/42/10/wheatley.md'),
'Should navigate to /c/42/10/wheatley.md');
element._path = 'wheatley.md';
assert.equal(element.changeViewState.selectedFileIndex, 2);
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
assert(showStub.lastCall.calledWithExactly('/c/42/10/glados.txt'),
'Should navigate to /c/42/10/glados.txt');
element._path = 'glados.txt';
assert.equal(element.changeViewState.selectedFileIndex, 1);
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
assert(showStub.lastCall.calledWithExactly('/c/42/10/chell.go'),
'Should navigate to /c/42/10/chell.go');
element._path = 'chell.go';
assert.equal(element.changeViewState.selectedFileIndex, 0);
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
assert(showStub.lastCall.calledWithExactly('/c/42/'),
'Should navigate to /c/42/');
assert.equal(element.changeViewState.selectedFileIndex, 0);
var showPrefsStub = sandbox.stub(element.$.prefsOverlay, 'open',
function() { return Promise.resolve({}); });
MockInteractions.pressAndReleaseKeyOn(element, 188, null, ',');
assert(showPrefsStub.calledOnce);
var scrollStub = sandbox.stub(element.$.cursor, 'moveToNextChunk');
MockInteractions.pressAndReleaseKeyOn(element, 78, null, 'n');
assert(scrollStub.calledOnce);
scrollStub = sandbox.stub(element.$.cursor, 'moveToPreviousChunk');
MockInteractions.pressAndReleaseKeyOn(element, 80, null, 'p');
assert(scrollStub.calledOnce);
scrollStub = sandbox.stub(element.$.cursor, 'moveToNextCommentThread');
MockInteractions.pressAndReleaseKeyOn(element, 78, 'shift', 'n');
assert(scrollStub.calledOnce);
scrollStub = sandbox.stub(element.$.cursor,
'moveToPreviousCommentThread');
MockInteractions.pressAndReleaseKeyOn(element, 80, 'shift', 'p');
assert(scrollStub.calledOnce);
var computeContainerClassStub = sandbox.stub(element.$.diff,
'_computeContainerClass');
MockInteractions.pressAndReleaseKeyOn(element, 74, null, 'j');
assert(computeContainerClassStub.lastCall.calledWithExactly(
false, 'SIDE_BY_SIDE', true));
MockInteractions.pressAndReleaseKeyOn(element, 27, null, 'esc');
assert(computeContainerClassStub.lastCall.calledWithExactly(
false, 'SIDE_BY_SIDE', false));
});
test('saving diff preferences', function() {
var savePrefs = sandbox.stub(element, '_handlePrefsSave');
var cancelPrefs = sandbox.stub(element, '_handlePrefsCancel');
element.$.diffPreferences._handleSave();
assert(savePrefs.calledOnce);
assert(cancelPrefs.notCalled);
});
test('cancelling diff preferences', function() {
var savePrefs = sandbox.stub(element, '_handlePrefsSave');
var cancelPrefs = sandbox.stub(element, '_handlePrefsCancel');
element.$.diffPreferences._handleCancel();
assert(cancelPrefs.calledOnce);
assert(savePrefs.notCalled);
});
test('keyboard shortcuts with patch range', function() {
element._changeNum = '42';
element._patchRange = {
basePatchNum: '5',
patchNum: '10',
};
element._change = {
revisions: {
a: {_number: 10},
},
};
element._fileList = ['chell.go', 'glados.txt', 'wheatley.md'];
element._path = 'glados.txt';
var showStub = sandbox.stub(page, 'show');
MockInteractions.pressAndReleaseKeyOn(element, 65, null, 'a');
assert.isTrue(showStub.notCalled, 'The `a` keyboard shortcut should ' +
'only work when the user is logged in.');
assert.isNull(window.sessionStorage.getItem(
'changeView.showReplyDialog'));
element._loggedIn = true;
MockInteractions.pressAndReleaseKeyOn(element, 65, null, 'a');
assert.isTrue(element.changeViewState.showReplyDialog);
assert(showStub.lastCall.calledWithExactly('/c/42/5..10'),
'Should navigate to /c/42/5..10');
MockInteractions.pressAndReleaseKeyOn(element, 85, null, 'u');
assert(showStub.lastCall.calledWithExactly('/c/42/5..10'),
'Should navigate to /c/42/5..10');
MockInteractions.pressAndReleaseKeyOn(element, 221, null, ']');
assert(showStub.lastCall.calledWithExactly('/c/42/5..10/wheatley.md'),
'Should navigate to /c/42/5..10/wheatley.md');
element._path = 'wheatley.md';
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
assert(showStub.lastCall.calledWithExactly('/c/42/5..10/glados.txt'),
'Should navigate to /c/42/5..10/glados.txt');
element._path = 'glados.txt';
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
assert(showStub.lastCall.calledWithExactly('/c/42/5..10/chell.go'),
'Should navigate to /c/42/5..10/chell.go');
element._path = 'chell.go';
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
assert(showStub.lastCall.calledWithExactly('/c/42/5..10'),
'Should navigate to /c/42/5..10');
});
test('keyboard shortcuts with old patch number', function() {
element._changeNum = '42';
element._patchRange = {
basePatchNum: 'PARENT',
patchNum: '1',
};
element._change = {
revisions: {
a: {_number: 1},
b: {_number: 2},
},
};
element._fileList = ['chell.go', 'glados.txt', 'wheatley.md'];
element._path = 'glados.txt';
var showStub = sandbox.stub(page, 'show');
MockInteractions.pressAndReleaseKeyOn(element, 65, null, 'a');
assert.isTrue(showStub.notCalled, 'The `a` keyboard shortcut should ' +
'only work when the user is logged in.');
assert.isNull(window.sessionStorage.getItem(
'changeView.showReplyDialog'));
element._loggedIn = true;
MockInteractions.pressAndReleaseKeyOn(element, 65, null, 'a');
assert.isTrue(element.changeViewState.showReplyDialog);
assert(showStub.lastCall.calledWithExactly('/c/42/1'),
'Should navigate to /c/42/1');
MockInteractions.pressAndReleaseKeyOn(element, 85, null, 'u');
assert(showStub.lastCall.calledWithExactly('/c/42/1'),
'Should navigate to /c/42/1');
MockInteractions.pressAndReleaseKeyOn(element, 221, null, ']');
assert(showStub.lastCall.calledWithExactly('/c/42/1/wheatley.md'),
'Should navigate to /c/42/1/wheatley.md');
element._path = 'wheatley.md';
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
assert(showStub.lastCall.calledWithExactly('/c/42/1/glados.txt'),
'Should navigate to /c/42/1/glados.txt');
element._path = 'glados.txt';
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
assert(showStub.lastCall.calledWithExactly('/c/42/1/chell.go'),
'Should navigate to /c/42/1/chell.go');
element._path = 'chell.go';
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
assert(showStub.lastCall.calledWithExactly('/c/42/1'),
'Should navigate to /c/42/1');
});
test('go up to change via kb without change loaded', function() {
element._changeNum = '42';
element._patchRange = {
basePatchNum: 'PARENT',
patchNum: '1',
};
element._fileList = ['chell.go', 'glados.txt', 'wheatley.md'];
element._path = 'glados.txt';
var showStub = sandbox.stub(page, 'show');
MockInteractions.pressAndReleaseKeyOn(element, 65, null, 'a');
assert.isTrue(showStub.notCalled, 'The `a` keyboard shortcut should ' +
'only work when the user is logged in.');
assert.isNull(window.sessionStorage.getItem(
'changeView.showReplyDialog'));
element._loggedIn = true;
MockInteractions.pressAndReleaseKeyOn(element, 65, null, 'a');
assert.isTrue(element.changeViewState.showReplyDialog);
assert(showStub.lastCall.calledWithExactly('/c/42/1'),
'Should navigate to /c/42/1');
MockInteractions.pressAndReleaseKeyOn(element, 85, null, 'u');
assert(showStub.lastCall.calledWithExactly('/c/42/1'),
'Should navigate to /c/42/1');
MockInteractions.pressAndReleaseKeyOn(element, 221, null, ']');
assert(showStub.lastCall.calledWithExactly('/c/42/1/wheatley.md'),
'Should navigate to /c/42/1/wheatley.md');
element._path = 'wheatley.md';
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
assert(showStub.lastCall.calledWithExactly('/c/42/1/glados.txt'),
'Should navigate to /c/42/1/glados.txt');
element._path = 'glados.txt';
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
assert(showStub.lastCall.calledWithExactly('/c/42/1/chell.go'),
'Should navigate to /c/42/1/chell.go');
element._path = 'chell.go';
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
assert(showStub.lastCall.calledWithExactly('/c/42/1'),
'Should navigate to /c/42/1');
});
test('jump to file dropdown', function() {
element._changeNum = '42';
element._patchRange = {
basePatchNum: 'PARENT',
patchNum: '10',
};
element._fileList = ['chell.go', 'glados.txt', 'wheatley.md'];
element._path = 'glados.txt';
flushAsynchronousOperations();
var linkEls =
Polymer.dom(element.root).querySelectorAll('.dropdown-content > a');
assert.equal(linkEls.length, 3);
assert.isFalse(linkEls[0].hasAttribute('selected'));
assert.isTrue(linkEls[1].hasAttribute('selected'));
assert.isFalse(linkEls[2].hasAttribute('selected'));
assert.equal(linkEls[0].getAttribute('data-key-nav'), '[');
assert.equal(linkEls[1].getAttribute('data-key-nav'), '');
assert.equal(linkEls[2].getAttribute('data-key-nav'), ']');
assert.equal(linkEls[0].getAttribute('href'), '/c/42/10/chell.go');
assert.equal(linkEls[1].getAttribute('href'), '/c/42/10/glados.txt');
assert.equal(linkEls[2].getAttribute('href'), '/c/42/10/wheatley.md');
assert.equal(element._computeFileDisplayName('/foo/bar/baz'),
'/foo/bar/baz');
assert.equal(element._computeFileDisplayName('/COMMIT_MSG'),
'Commit message');
});
test('jump to file dropdown with patch range', function() {
element._changeNum = '42';
element._patchRange = {
basePatchNum: '5',
patchNum: '10',
};
element._fileList = ['chell.go', 'glados.txt', 'wheatley.md'];
element._path = 'glados.txt';
flushAsynchronousOperations();
var linkEls =
Polymer.dom(element.root).querySelectorAll('.dropdown-content > a');
assert.equal(linkEls.length, 3);
assert.isFalse(linkEls[0].hasAttribute('selected'));
assert.isTrue(linkEls[1].hasAttribute('selected'));
assert.isFalse(linkEls[2].hasAttribute('selected'));
assert.equal(linkEls[0].getAttribute('data-key-nav'), '[');
assert.equal(linkEls[1].getAttribute('data-key-nav'), '');
assert.equal(linkEls[2].getAttribute('data-key-nav'), ']');
assert.equal(linkEls[0].getAttribute('href'), '/c/42/5..10/chell.go');
assert.equal(linkEls[1].getAttribute('href'), '/c/42/5..10/glados.txt');
assert.equal(linkEls[2].getAttribute('href'), '/c/42/5..10/wheatley.md');
});
test('prev/next links', function() {
element._changeNum = '42';
element._patchRange = {
basePatchNum: 'PARENT',
patchNum: '10',
};
element._fileList = ['chell.go', 'glados.txt', 'wheatley.md'];
element._path = 'glados.txt';
flushAsynchronousOperations();
var linkEls = Polymer.dom(element.root).querySelectorAll('.navLink');
assert.equal(linkEls.length, 2);
assert.equal(linkEls[0].getAttribute('href'), '/c/42/10/chell.go');
assert.equal(linkEls[1].getAttribute('href'), '/c/42/10/wheatley.md');
element._path = 'wheatley.md';
flushAsynchronousOperations();
assert.equal(linkEls[0].getAttribute('href'), '/c/42/10/glados.txt');
assert.isFalse(linkEls[1].hasAttribute('href'));
element._path = 'chell.go';
flushAsynchronousOperations();
assert.isFalse(linkEls[0].hasAttribute('href'));
assert.equal(linkEls[1].getAttribute('href'), '/c/42/10/glados.txt');
});
test('download link', function() {
element._changeNum = '42';
element._patchRange = {
basePatchNum: 'PARENT',
patchNum: '10',
};
element._fileList = ['chell.go', 'glados.txt', 'wheatley.md'];
element._path = 'glados.txt';
flushAsynchronousOperations();
assert.equal(element.$$('.downloadLink').getAttribute('href'),
'/changes/42/revisions/10/patch?zip&path=glados.txt');
});
test('prev/next links with patch range', function() {
element._changeNum = '42';
element._patchRange = {
basePatchNum: '5',
patchNum: '10',
};
element._fileList = ['chell.go', 'glados.txt', 'wheatley.md'];
element._path = 'glados.txt';
flushAsynchronousOperations();
var linkEls = Polymer.dom(element.root).querySelectorAll('.navLink');
assert.equal(linkEls.length, 2);
assert.equal(linkEls[0].getAttribute('href'), '/c/42/5..10/chell.go');
assert.equal(linkEls[1].getAttribute('href'), '/c/42/5..10/wheatley.md');
element._path = 'wheatley.md';
flushAsynchronousOperations();
assert.equal(linkEls[0].getAttribute('href'), '/c/42/5..10/glados.txt');
assert.isFalse(linkEls[1].hasAttribute('href'));
element._path = 'chell.go';
flushAsynchronousOperations();
assert.isFalse(linkEls[0].hasAttribute('href'));
assert.equal(linkEls[1].getAttribute('href'), '/c/42/5..10/glados.txt');
});
test('file review status', function(done) {
element._loggedIn = true;
element._changeNum = '42';
element._patchRange = {
basePatchNum: '1',
patchNum: '2',
};
element._fileList = ['/COMMIT_MSG'];
element._path = '/COMMIT_MSG';
var saveReviewedStub = sandbox.stub(element, '_saveReviewedState',
function() { return Promise.resolve(); });
flush(function() {
var commitMsg = Polymer.dom(element.root).querySelector(
'input[type="checkbox"]');
assert.isTrue(commitMsg.checked);
MockInteractions.tap(commitMsg);
assert.isFalse(commitMsg.checked);
assert.isTrue(saveReviewedStub.lastCall.calledWithExactly(false));
MockInteractions.tap(commitMsg);
assert.isTrue(commitMsg.checked);
assert.isTrue(saveReviewedStub.lastCall.calledWithExactly(true));
done();
});
});
test('diff mode selector correctly toggles the diff', function() {
var select = element.$.modeSelect;
var diffDisplay = element.$.diff;
element._userPrefs = {diff_view: 'SIDE_BY_SIDE'};
// The mode selected in the view state reflects the selected option.
assert.equal(element._getDiffViewMode(), select.value);
// The mode selected in the view state reflects the view rednered in the
// diff.
assert.equal(select.value, diffDisplay.viewMode);
// We will simulate a user change of the selected mode.
var newMode = 'UNIFIED_DIFF';
// Set the actual value of the select, and simulate the change event.
select.value = newMode;
element.fire('change', {}, {node: select});
// Make sure the handler was called and the state is still coherent.
assert.equal(element._getDiffViewMode(), newMode);
assert.equal(element._getDiffViewMode(), select.value);
assert.equal(element._getDiffViewMode(), diffDisplay.viewMode);
});
test('diff mode selector initializes from preferences', function() {
var resolvePrefs;
var prefsPromise = new Promise(function(resolve) {
resolvePrefs = resolve;
});
var getPreferencesStub = sandbox.stub(element.$.restAPI, 'getPreferences',
function() { return prefsPromise; });
// Attach a new gr-diff-view so we can intercept the preferences fetch.
var view = document.createElement('gr-diff-view');
var select = view.$.modeSelect;
fixture('blank').appendChild(view);
flushAsynchronousOperations();
// At this point the diff mode doesn't yet have the user's preference.
assert.equal(select.value, 'SIDE_BY_SIDE');
// Receive the overriding preference.
resolvePrefs({diff_view: 'UNIFIED'});
flushAsynchronousOperations();
assert.equal(select.value, 'SIDE_BY_SIDE');
});
test('unified view is always default on small screens', function() {
var resolvePrefs;
var prefsPromise = new Promise(function(resolve) {
resolvePrefs = resolve;
});
var getPreferencesStub = sandbox.stub(element.$.restAPI, 'getPreferences',
function() { return prefsPromise; });
// Attach a new gr-diff-view so we can intercept the preferences fetch.
var view = document.createElement('gr-diff-view');
view.changeViewState = {diffMode: null};
sandbox.stub(view, '_getWindowWidth', function() { return 800; });
var select = view.$.modeSelect;
fixture('blank').appendChild(view);
flushAsynchronousOperations();
// At this point the diff mode doesn't yet have the user's preference.
assert.equal(select.value, 'UNIFIED_DIFF');
// Receive the overriding preference.
resolvePrefs({diff_view: 'SIDE_BY_SIDE'});
flushAsynchronousOperations();
// On small screens, unified should override user perferences
assert.equal(select.value, 'UNIFIED_DIFF');
});
test('_loadHash', function() {
assert.isNotOk(element.$.cursor.initialLineNumber);
// Ignores invalid hashes:
element._loadHash('not valid');
assert.isNotOk(element.$.cursor.initialLineNumber);
// Revision hash:
element._loadHash('234');
assert.equal(element.$.cursor.initialLineNumber, 234);
assert.equal(element.$.cursor.side, 'right');
// Base hash:
element._loadHash('b345');
assert.equal(element.$.cursor.initialLineNumber, 345);
assert.equal(element.$.cursor.side, 'left');
// GWT-style base hash:
element._loadHash('a123');
assert.equal(element.$.cursor.initialLineNumber, 123);
assert.equal(element.$.cursor.side, 'left');
});
test('_shortenPath with long path should add ellipsis', function() {
var path =
'level1/level2/level3/level4/file.js';
var shortenedPath = util.truncatePath(path);
// The expected path is truncated with an ellipsis.
var expectedPath = '\u2026/file.js';
assert.equal(shortenedPath, expectedPath);
var path = 'level2/file.js';
var shortenedPath = util.truncatePath(path);
assert.equal(shortenedPath, expectedPath);
});
test('_shortenPath with short path should not add ellipsis', function() {
var path = 'file.js';
var expectedPath = 'file.js';
var shortenedPath = util.truncatePath(path);
assert.equal(shortenedPath, expectedPath);
});
test('_onLineSelected', function() {
var replaceStateStub = sandbox.stub(history, 'replaceState');
var moveStub = sandbox.stub(element.$.cursor, 'moveToLineNumber');
var e = {};
var detail = {number: 123, side: 'right'};
element._onLineSelected(e, detail);
assert.isTrue(moveStub.called);
assert.equal(moveStub.lastCall.args[0], detail.number);
assert.equal(moveStub.lastCall.args[1], detail.side);
assert.isTrue(replaceStateStub.called);
});
test('_getDiffURL encodes special characters', function() {
var changeNum = 123;
var patchRange = {basePatchNum: 123, patchNum: 456};
var path = 'c++/cpp.cpp';
assert.equal(element._getDiffURL(changeNum, patchRange, path),
'/c/123/123..456/c%252B%252B/cpp.cpp');
});
});
</script>