Added system tags GUI in sidebar

Added files details sidebar panel to assign/unassign/rename/delete
system tags.

3 files changed, 393 insertions, 1 deletions

diff --git a/core/js/tests/specHelper.js b/core/js/tests/specHelper.js
index f09a7054c9f..d1c7873f0ea 100644
--- a/core/js/tests/specHelper.js
+++ b/core/js/tests/specHelper.js
@@ -160,7 +160,7 @@ window.isPhantom = /phantom/i.test(navigator.userAgent);
 		OC.Plugins._plugins = [];
 
 		// dummy select2 (which isn't loaded during the tests)
-		$.fn.select2 = function() {};
+		$.fn.select2 = function() { return this; };
 	});
 
 	afterEach(function() {
diff --git a/core/js/tests/specs/systemtags/systemtagscollectionSpec.js b/core/js/tests/specs/systemtags/systemtagscollectionSpec.js
new file mode 100644
index 00000000000..6f2d8361754
--- /dev/null
+++ b/core/js/tests/specs/systemtags/systemtagscollectionSpec.js
@@ -0,0 +1,84 @@
+/**
+* ownCloud
+*
+* @author Vincent Petry
+* @copyright 2016 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
+* version 3 of the License, or any later version.
+*
+* 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/>.
+*
+*/
+
+describe('OC.SystemTags.SystemTagsCollection tests', function() {
+	var collection;
+
+	beforeEach(function() {
+		collection = new OC.SystemTags.SystemTagsCollection();
+	});
+	it('fetches only once, until reset', function() {
+		var syncStub = sinon.stub(collection, 'sync');
+		var callback = sinon.stub();
+		var callback2 = sinon.stub();
+		var callback3 = sinon.stub();
+		var eventHandler = sinon.stub();
+
+		collection.on('sync', eventHandler);
+
+		collection.fetch({
+			success: callback
+		});
+
+		expect(callback.notCalled).toEqual(true);
+		expect(syncStub.calledOnce).toEqual(true);
+		expect(eventHandler.notCalled).toEqual(true);
+
+		syncStub.yieldTo('success', collection);
+
+		expect(callback.calledOnce).toEqual(true);
+		expect(callback.firstCall.args[0]).toEqual(collection);
+		expect(eventHandler.calledOnce).toEqual(true);
+		expect(eventHandler.firstCall.args[0]).toEqual(collection);
+
+		collection.fetch({
+			success: callback2
+		});
+
+		expect(eventHandler.calledTwice).toEqual(true);
+		expect(eventHandler.secondCall.args[0]).toEqual(collection);
+
+		// not re-called
+		expect(syncStub.calledOnce).toEqual(true);
+
+		expect(callback.calledOnce).toEqual(true);
+		expect(callback2.calledOnce).toEqual(true);
+		expect(callback2.firstCall.args[0]).toEqual(collection);
+
+		expect(collection.fetched).toEqual(true);
+
+		collection.reset();
+
+		expect(collection.fetched).toEqual(false);
+
+		collection.fetch({
+			success: callback3
+		});
+
+		expect(syncStub.calledTwice).toEqual(true);
+
+		syncStub.yieldTo('success', collection);
+		expect(callback3.calledOnce).toEqual(true);
+		expect(callback3.firstCall.args[0]).toEqual(collection);
+
+		syncStub.restore();
+	});
+});
diff --git a/core/js/tests/specs/systemtags/systemtagsinputfieldSpec.js b/core/js/tests/specs/systemtags/systemtagsinputfieldSpec.js
new file mode 100644
index 00000000000..dc8d2ec82ff
--- /dev/null
+++ b/core/js/tests/specs/systemtags/systemtagsinputfieldSpec.js
@@ -0,0 +1,308 @@
+/**
+* ownCloud
+*
+* @author Vincent Petry
+* @copyright 2016 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
+* version 3 of the License, or any later version.
+*
+* 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/>.
+*
+*/
+
+describe('OC.SystemTags.SystemTagsInputField tests', function() {
+	var view, select2Stub;
+
+	beforeEach(function() {
+		var $container = $('<div class="testInputContainer"></div>');
+		select2Stub = sinon.stub($.fn, 'select2');
+		select2Stub.returnsThis();
+		$('#testArea').append($container);
+		view = new OC.SystemTags.SystemTagsInputField();
+		$container.append(view.$el);
+	});
+	afterEach(function() {
+		select2Stub.restore();
+		OC.SystemTags.collection.reset();
+		view.remove();
+		view = undefined;
+	});
+	describe('rendering', function() {
+		beforeEach(function() {
+			view.render();
+		});
+		it('calls select2 on rendering', function() {
+			expect(view.$el.find('input[name=tags]').length).toEqual(1);
+			expect(select2Stub.called).toEqual(true);
+		});
+		it('formatResult renders rename button', function() {
+			var opts = select2Stub.getCall(0).args[0];
+			var $el = $(opts.formatResult({id: '1', name: 'test'}));
+			expect($el.find('.label').text()).toEqual('test');
+			expect($el.find('.rename').length).toEqual(1);
+		});
+	});
+	describe('initSelection', function() {
+		var fetchStub;
+		var testTags;
+
+		beforeEach(function() {
+			fetchStub = sinon.stub(OC.SystemTags.SystemTagsCollection.prototype, 'fetch');
+			testTags = [
+				new OC.SystemTags.SystemTagModel({id: '1', name: 'test1'}),
+				new OC.SystemTags.SystemTagModel({id: '2', name: 'test2'}),
+				new OC.SystemTags.SystemTagModel({id: '3', name: 'test3'}),
+			];
+			view.render();
+		});
+		afterEach(function() {
+			fetchStub.restore();
+		});
+		it('grabs values from the full collection', function() {
+			var $el = view.$el.find('input');
+			$el.val('1,3');
+			var opts = select2Stub.getCall(0).args[0];
+			var callback = sinon.stub();
+			opts.initSelection($el, callback);
+
+			expect(fetchStub.calledOnce).toEqual(true);
+			view.collection.add(testTags);
+			fetchStub.yieldTo('success', view.collection);
+
+			expect(callback.calledOnce).toEqual(true);
+			var models = callback.getCall(0).args[0];
+			expect(models.length).toEqual(2);
+			expect(models[0].id).toEqual('1');
+			expect(models[0].name).toEqual('test1');
+			expect(models[1].id).toEqual('3');
+			expect(models[1].name).toEqual('test3');
+		});
+	});
+	describe('tag selection', function() {
+		beforeEach(function() {
+			view.render();
+			var $el = view.$el.find('input');
+			$el.val('1');
+
+			view.collection.add([
+				new OC.SystemTags.SystemTagModel({id: '1', name: 'abc'}),
+				new OC.SystemTags.SystemTagModel({id: '2', name: 'def'}),
+				new OC.SystemTags.SystemTagModel({id: '3', name: 'abd'}),
+			]);
+		});
+		afterEach(function() {
+		});
+		it('does not create dummy tag when user types non-matching name', function() {
+			var opts = select2Stub.getCall(0).args[0];
+			var result = opts.createSearchChoice('abc');
+			expect(result).not.toBeDefined();
+		});
+		it('creates dummy tag when user types non-matching name', function() {
+			var opts = select2Stub.getCall(0).args[0];
+			var result = opts.createSearchChoice('abnew');
+			expect(result.id).toEqual(-1);
+			expect(result.name).toEqual('abnew');
+			expect(result.isNew).toEqual(true);
+		});
+		it('creates the real tag and fires select event after user selects the dummy tag', function() {
+			var selectHandler = sinon.stub();
+			view.on('select', selectHandler);
+			var createStub = sinon.stub(OC.SystemTags.SystemTagsCollection.prototype, 'create');
+			view.$el.find('input').trigger(new $.Event('select2-selecting', {
+				object: {
+					id: -1,
+					name: 'newname',
+					isNew: true
+				}
+			}));
+
+			expect(createStub.calledOnce).toEqual(true);
+			expect(createStub.getCall(0).args[0]).toEqual({
+				name: 'newname',
+				userVisible: true,
+				userAssignable: true
+			});
+
+			var newModel = new OC.SystemTags.SystemTagModel({
+				id: '123',
+				name: 'newname',
+				userVisible: true,
+				userAssignable: true
+			});
+
+			// not called yet
+			expect(selectHandler.notCalled).toEqual(true);
+
+			select2Stub.withArgs('data').returns([{
+				id: '1',
+				name: 'abc'
+			}]);
+
+			createStub.yieldTo('success', newModel);
+
+			expect(select2Stub.lastCall.args[0]).toEqual('data');
+			expect(select2Stub.lastCall.args[1]).toEqual([{
+					id: '1',
+					name: 'abc'
+				},
+				newModel.toJSON()
+			]);
+
+			expect(selectHandler.calledOnce).toEqual(true);
+			expect(selectHandler.getCall(0).args[0]).toEqual(newModel);
+
+			createStub.restore();
+		});
+		it('triggers select event after selecting an existing tag', function() {
+			var selectHandler = sinon.stub();
+			view.on('select', selectHandler);
+			view.$el.find('input').trigger(new $.Event('select2-selecting', {
+				object: {
+					id: '2',
+					name: 'def'
+				}
+			}));
+
+			expect(selectHandler.calledOnce).toEqual(true);
+			expect(selectHandler.getCall(0).args[0]).toEqual(view.collection.get('2'));
+		});
+		it('triggers deselect event after deselecting an existing tag', function() {
+			var selectHandler = sinon.stub();
+			view.on('deselect', selectHandler);
+			view.$el.find('input').trigger(new $.Event('select2-removing', {
+				choice: {
+					id: '2',
+					name: 'def'
+				}
+			}));
+
+			expect(selectHandler.calledOnce).toEqual(true);
+			expect(selectHandler.getCall(0).args[0]).toEqual('2');
+		});
+	});
+	describe('autocomplete', function() {
+		var fetchStub, opts;
+
+		beforeEach(function() {
+			fetchStub = sinon.stub(OC.SystemTags.SystemTagsCollection.prototype, 'fetch');
+			view.render();
+			opts = select2Stub.getCall(0).args[0];
+
+			view.collection.add([
+				new OC.SystemTags.SystemTagModel({id: '1', name: 'abc'}),
+				new OC.SystemTags.SystemTagModel({id: '2', name: 'def'}),
+				new OC.SystemTags.SystemTagModel({id: '3', name: 'abd'}),
+			]);
+		});
+		afterEach(function() {
+			fetchStub.restore();
+		});
+		it('completes results', function() {
+			var callback = sinon.stub();
+			opts.query({
+				term: 'ab',
+			   	callback: callback
+			});
+			expect(fetchStub.calledOnce).toEqual(true);
+
+			fetchStub.yieldTo('success', view.collection);
+
+			expect(callback.calledOnce).toEqual(true);
+			expect(callback.getCall(0).args[0].results).toEqual([
+				{
+					id: '1',
+				   	name: 'abc',
+				   	userVisible: true,
+					userAssignable: true
+				},
+				{
+					id: '3',
+				   	name: 'abd',
+				   	userVisible: true,
+					userAssignable: true
+				}
+			]);
+		});
+	});
+	describe('tag actions', function() {
+		var $dropdown, opts;
+
+		beforeEach(function() {
+			$dropdown = $('<div class="select2-dropdown"></div>');
+			select2Stub.withArgs('dropdown').returns($dropdown);
+			$('#testArea').append($dropdown);
+
+			view.render();
+
+			opts = select2Stub.getCall(0).args[0];
+
+			view.collection.add([
+				new OC.SystemTags.SystemTagModel({id: '1', name: 'abc'}),
+			]);
+
+			$dropdown.append(opts.formatResult(view.collection.get('1').toJSON()));
+
+		});
+		afterEach(function() {
+		});
+		it('displays rename form when clicking rename', function() {
+			$dropdown.find('.rename').mouseup();
+			expect($dropdown.find('form.systemtags-rename-form').length).toEqual(1);
+			expect($dropdown.find('form.systemtags-rename-form input').val()).toEqual('abc');
+		});
+		it('renames model and submits change when submitting form', function() {
+			var saveStub = sinon.stub(OC.SystemTags.SystemTagModel.prototype, 'save');
+			$dropdown.find('.rename').mouseup();
+			$dropdown.find('form input').val('abc_renamed');
+			$dropdown.find('form').trigger(new $.Event('submit'));
+
+			expect(saveStub.calledOnce).toEqual(true);
+			expect(saveStub.getCall(0).args[0]).toEqual({'name': 'abc_renamed'});
+
+			expect($dropdown.find('.label').text()).toEqual('abc_renamed');
+			expect($dropdown.find('form').length).toEqual(0);
+
+			saveStub.restore();
+		});
+		it('deletes model and submits change when clicking delete', function() {
+			var destroyStub = sinon.stub(OC.SystemTags.SystemTagModel.prototype, 'destroy');
+
+			expect($dropdown.find('.delete').length).toEqual(0);
+			$dropdown.find('.rename').mouseup();
+			// delete button appears
+			expect($dropdown.find('.delete').length).toEqual(1);
+			$dropdown.find('.delete').mouseup();
+
+			expect(destroyStub.calledOnce).toEqual(true);
+			expect(destroyStub.calledOn(view.collection.get('1')));
+
+			destroyStub.restore();
+		});
+	});
+	describe('setting data', function() {
+		beforeEach(function() {
+			view.render();
+		});
+		it('sets value when calling setValues', function() {
+			var vals = ['1', '2'];
+			view.setValues(vals);
+			expect(select2Stub.lastCall.args[0]).toEqual('val');
+			expect(select2Stub.lastCall.args[1]).toEqual(vals);
+		});
+		it('sets data when calling setData', function() {
+			var vals = [{id: '1', name: 'test1'}, {id: '2', name: 'test2'}];
+			view.setData(vals);
+			expect(select2Stub.lastCall.args[0]).toEqual('data');
+			expect(select2Stub.lastCall.args[1]).toEqual(vals);
+		});
+	});
+});