Improve lock tab view code + JS tests

Add missing translation.
Use index based look up.

apps/files/js/locktabview.js

@@ -11,19 +11,31 @@
 (function () {
 	var TEMPLATE =
 		'<ul class="locks"></ul>' +
-		'<div class="clear-float mainFileInfoView"></div>' +
+		'<div class="clear-float"></div>' +
 		'{{#each locks}}' +
-		'<div>' +
-		'<div style="display: inline;">{{owner}} has locked this resource via {{lockroot}}</div>' +
+		'<div class="lock-entry" data-index="{{index}}">' +
+		'<div style="display: inline;">{{displayText}}</div>' +
 		// TODO: no inline css
 		'<a href="#" class="unlock" style="float: right" title="{{unlockLabel}}">' +
-		'<span class="icon icon-lock-open" data-lock-token="{{locktoken}}" data-lock-root="{{lockroot}}" style="display: block" /></a>' +
+		'<span class="icon icon-lock-open" style="display: block" /></a>' +
 		'</div>' +
 		'{{else}}' +
 		'<div class="empty">{{emptyResultLabel}}</div>' +
 		'{{/each}}' +
 		'';
 
+	function formatLocks(locks) {
+		return _.map(locks, function(lock, index) {
+			return {
+				index: index,
+				displayText: t('files', '{owner} has locked this resource via {root}', {owner: lock.owner, root: lock.lockroot}),
+				unlockLabel: t('files', 'Unlock'),
+				locktoken: lock.locktoken,
+				lockroot: lock.lockroot
+			};
+		});
+	}
+
 	/**
 	 * @memberof OCA.Files
 	 */
@@ -38,19 +50,20 @@
 
 			_onClickUnlock: function (event) {
 				var self = this;
-				var lockToken = event.target.getAttribute('data-lock-token');
-				var lockUrl = event.target.getAttribute('data-lock-root');
+				var $target = $(event.target).closest('.lock-entry');
+				var lockIndex = parseInt($target.attr('data-index'), 10);
+
+				var currentLock = this.model.get('activeLocks')[lockIndex];
 
+				// FIXME: move to FileInfoModel
 				this.model._filesClient.getClient().request('UNLOCK',
-					lockUrl,
+					currentLock.lockroot,
 					{
-						'Lock-Token': lockToken
+						'Lock-Token': currentLock.locktoken
 					}).then(function (result) {
 						if (result.status === 204) {
 							var locks = self.model.get('activeLocks');
-							locks = locks.filter(function(item) {
-								return item.locktoken !== lockToken;
-							});
+							locks.splice(lockIndex, 1);
 							self.model.set('activeLocks', locks);
 							self.render();
 						} else {
@@ -81,8 +94,7 @@
 				}
 				this.$el.html(this.template({
 					emptyResultLabel: t('files', 'Resource is not locked'),
-					locks: this.model.get('activeLocks'),
-					model: this.model
+					locks: formatLocks(this.model.get('activeLocks'))
 				}));
 			}
 		});

apps/files/tests/js/locktabviewSpec.js

@@ -0,0 +1,113 @@
+/**
+* ownCloud
+*
+* @author Vincent Petry
+* @copyright Copyright (c) 2018 Vincent Petry <pvince81@owncloud.com>
+*
+* This library is free software; you can redistribute it and/or
+* modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
+* License as published by the Free Software Foundation; either
+* comment 3 of the License, or any later comment.
+*
+* This library is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU AFFERO GENERAL PUBLIC LICENSE for more details.
+*
+* You should have received a copy of the GNU Affero General Public
+* License along with this library.  If not, see <http://www.gnu.org/licenses/>.
+*
+*/
+
+/* global dav */
+describe('OCA.Files.LockTabView tests', function() {
+	var view, fileInfoModel;
+	var fetchStub;
+	var lockData1;
+	var lockData2;
+
+	beforeEach(function() {
+		view = new OCA.Files.LockTabView();
+		lockData1 = {
+			lockscope: 'shared',
+			locktype: 'read',
+			lockroot: '/owncloud/remote.php/dav/files/currentuser/basepath',
+			depth: 'infinite',
+			timeout: '12345',
+			locktoken: 'tehtoken',
+			owner: 'some girl'
+		};
+		lockData2 = {
+			lockscope: 'shared',
+			locktype: 'read',
+			lockroot: '/owncloud/remote.php/dav/files/currentuser/basepath/One.txt',
+			depth: '0',
+			timeout: '12345',
+			locktoken: 'anothertoken',
+			owner: 'some guy'
+		};
+		fileInfoModel = new OCA.Files.FileInfoModel({
+			id: '5',
+			name: 'One.txt',
+			mimetype: 'text/plain',
+			permissions: 31,
+			path: '/subdir',
+			size: 123456789,
+			etag: 'abcdefg',
+			mtime: Date.UTC(2016, 1, 0, 0, 0, 0),
+			activeLocks: [lockData1, lockData2],
+		}, {
+			filesClient: OC.Files.getClient()
+		});
+		view.render();
+	});
+	afterEach(function() {
+		view.remove();
+		view = undefined;
+	});
+	describe('rendering', function() {
+		it('renders list of locks', function() {
+			view.setFileInfo(fileInfoModel);
+			expect(view.$('.lock-entry').length).toEqual(2);
+			var $lock1 = view.$('.lock-entry').eq(0);
+			var $lock2 = view.$('.lock-entry').eq(1);
+
+			expect($lock1.first().text()).toEqual('some girl has locked this resource via /owncloud/remote.php/dav/files/currentuser/basepath');
+			expect($lock2.first().text()).toEqual('some guy has locked this resource via /owncloud/remote.php/dav/files/currentuser/basepath/One.txt');
+		});
+	});
+	describe('unlocking', function() {
+		var requestDeferred;
+		var requestStub;
+
+		beforeEach(function() {
+			requestDeferred = new $.Deferred();
+			requestStub = sinon.stub(dav.Client.prototype, 'request').returns(requestDeferred.promise());
+		});
+		afterEach(function() { 
+			requestStub.restore(); 
+		});
+
+		it('clicking action sends unlock request', function() {
+			view.setFileInfo(fileInfoModel);
+			expect(view.$('.lock-entry').length).toEqual(2);
+			view.$('.lock-entry').eq(1).find('.unlock').click();
+
+			expect(requestStub.calledOnce).toEqual(true);
+			expect(requestStub.getCall(0).args[0]).toEqual('UNLOCK');
+			expect(requestStub.getCall(0).args[1]).toEqual('/owncloud/remote.php/dav/files/currentuser/basepath/One.txt');
+			expect(requestStub.getCall(0).args[2]).toEqual({'Lock-Token': 'anothertoken'});
+
+			requestDeferred.resolve({
+				status: 204,
+				body: ''
+			});
+
+			// only one lock left
+			expect(view.$('.lock-entry').length).toEqual(1);
+			var $lock1 = view.$('.lock-entry').eq(0);
+
+			expect($lock1.first().text()).toEqual('some girl has locked this resource via /owncloud/remote.php/dav/files/currentuser/basepath');
+		});
+	});
+});