Display number of hidden files in files summary (#25870)

When dot files are hidden, the table summary and selection summary will
not show how many hidden files were included.

4 files changed, 230 insertions, 52 deletions

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index f191ade240b..75fcadf619e 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -199,6 +199,7 @@
 		 * @param options.folderDropOptions folder drop options, disabled by default
 		 * @param options.scrollTo name of file to scroll to after the first load
 		 * @param {OC.Files.Client} [options.filesClient] files API client
+		 * @param {OC.Backbone.Model} [options.filesConfig] files app configuration
 		 * @private
 		 */
 		initialize: function($el, options) {
@@ -239,6 +240,7 @@
 				this._filesConfig.on('change:showhidden', function() {
 					var showHidden = this.get('showhidden');
 					self.$el.toggleClass('hide-hidden-files', !showHidden);
+					self.updateSelectionSummary();
 
 					if (!showHidden) {
 						// hiding files could make the page too small, need to try rendering next page
@@ -264,7 +266,7 @@
 
 			this.files = [];
 			this._selectedFiles = {};
-			this._selectionSummary = new OCA.Files.FileSummary();
+			this._selectionSummary = new OCA.Files.FileSummary(undefined, {config: this._filesConfig});
 			// dummy root dir info
 			this.dirInfo = new OC.Files.FileInfo({});
 
@@ -2304,7 +2306,7 @@
 			var $tr = $('<tr class="summary"></tr>');
 			this.$el.find('tfoot').append($tr);
 
-			return new OCA.Files.FileSummary($tr);
+			return new OCA.Files.FileSummary($tr, {config: this._filesConfig});
 		},
 		updateEmptyContent: function() {
 			var permissions = this.getDirectoryPermissions();
@@ -2451,6 +2453,7 @@
 			var summary = this._selectionSummary.summary;
 			var selection;
 
+			var showHidden = !!this._filesConfig.get('showhidden');
 			if (summary.totalFiles === 0 && summary.totalDirs === 0) {
 				this.$el.find('#headerName a.name>span:first').text(t('files','Name'));
 				this.$el.find('#headerSize a>span:first').text(t('files','Size'));
@@ -2477,6 +2480,11 @@
 					selection = fileInfo;
 				}
 
+				if (!showHidden && summary.totalHidden > 0) {
+					var hiddenInfo = n('files', 'including %n hidden', 'including %n hidden', summary.totalHidden);
+					selection += ' (' + hiddenInfo + ')';
+				}
+
 				this.$el.find('#headerName a.name>span:first').text(selection);
 				this.$el.find('#modified a>span:first').text('');
 				this.$el.find('table').addClass('multiselect');
diff --git a/apps/files/js/filesummary.js b/apps/files/js/filesummary.js
index a4cefe692a8..519718cfc82 100644
--- a/apps/files/js/filesummary.js
+++ b/apps/files/js/filesummary.js
@@ -20,6 +20,15 @@
 */
 
 (function() {
+	var INFO_TEMPLATE =
+		'<span class="info">' +
+			'<span class="dirinfo"></span>' +
+			'<span class="connector"> and </span>' +
+			'<span class="fileinfo"></span>' +
+			'<span class="hiddeninfo"></span>' +
+			'<span class="filter"></span>' +
+		'</span>';
+
 	/**
 	 * The FileSummary class encapsulates the file summary values and
 	 * the logic to render it in the given container
@@ -28,26 +37,51 @@
 	 * @memberof OCA.Files
 	 *
 	 * @param $tr table row element
+	 * @param {OC.Backbone.Model} [options.filesConfig] files app configuration
 	 */
-	var FileSummary = function($tr) {
+	var FileSummary = function($tr, options) {
+		options = options || {};
+		var self = this;
 		this.$el = $tr;
+		var filesConfig = options.config;
+		if (filesConfig) {
+			this._showHidden = !!filesConfig.get('showhidden');
+			filesConfig.on('change:showhidden', function() {
+				self._showHidden = !!this.get('showhidden');
+				self.update();
+			});
+		}
 		this.clear();
 		this.render();
 	};
 
 	FileSummary.prototype = {
+		_showHidden: null,
+
 		summary: {
 			totalFiles: 0,
 			totalDirs: 0,
+			totalHidden: 0,
 			totalSize: 0,
 			filter:'',
 			sumIsPending:false
 		},
 
 		/**
+		 * Returns whether the given file info must be hidden
+		 *
+		 * @param {OC.Files.FileInfo} fileInfo file info
+		 * 
+		 * @return {boolean} true if the file is a hidden file, false otherwise
+		 */
+		_isHiddenFile: function(file) {
+			return file.name && file.name.charAt(0) === '.';
+		},
+
+		/**
 		 * Adds file
-		 * @param file file to add
-		 * @param update whether to update the display
+		 * @param {OC.Files.FileInfo} file file to add
+		 * @param {boolean} update whether to update the display
 		 */
 		add: function(file, update) {
 			if (file.name && file.name.toLowerCase().indexOf(this.summary.filter) === -1) {
@@ -59,6 +93,10 @@
 			else {
 				this.summary.totalFiles++;
 			}
+			if (this._isHiddenFile(file)) {
+				this.summary.totalHidden++;
+			}
+
 			var size = parseInt(file.size, 10) || 0;
 			if (size >=0) {
 				this.summary.totalSize += size;
@@ -71,8 +109,8 @@
 		},
 		/**
 		 * Removes file
-		 * @param file file to remove
-		 * @param update whether to update the display
+		 * @param {OC.Files.FileInfo} file file to remove
+		 * @param {boolean} update whether to update the display
 		 */
 		remove: function(file, update) {
 			if (file.name && file.name.toLowerCase().indexOf(this.summary.filter) === -1) {
@@ -84,6 +122,9 @@
 			else {
 				this.summary.totalFiles--;
 			}
+			if (this._isHiddenFile(file)) {
+				this.summary.totalHidden--;
+			}
 			var size = parseInt(file.size, 10) || 0;
 			if (size >=0) {
 				this.summary.totalSize -= size;
@@ -111,6 +152,7 @@
 			var summary = {
 				totalDirs: 0,
 				totalFiles: 0,
+				totalHidden: 0,
 				totalSize: 0,
 				filter: this.summary.filter,
 				sumIsPending: false
@@ -127,6 +169,9 @@
 				else {
 					summary.totalFiles++;
 				}
+				if (this._isHiddenFile(file)) {
+					summary.totalHidden++;
+				}
 				var size = parseInt(file.size, 10) || 0;
 				if (size >=0) {
 					summary.totalSize += size;
@@ -154,6 +199,13 @@
 			this.update();
 		},
 
+		_infoTemplate: function(data) {
+			if (!this._infoTemplateCompiled) {
+				this._infoTemplateCompiled = Handlebars.compile(INFO_TEMPLATE);
+			}
+			return this._infoTemplateCompiled(data);
+		},
+
 		/**
 		 * Renders the file summary element
 		 */
@@ -171,10 +223,12 @@
 			var $fileInfo = this.$el.find('.fileinfo');
 			var $connector = this.$el.find('.connector');
 			var $filterInfo = this.$el.find('.filter');
+			var $hiddenInfo = this.$el.find('.hiddeninfo');
 
 			// Substitute old content with new translations
 			$dirInfo.html(n('files', '%n folder', '%n folders', this.summary.totalDirs));
 			$fileInfo.html(n('files', '%n file', '%n files', this.summary.totalFiles));
+			$hiddenInfo.html(' (' + n('files', 'including %n hidden', 'including %n hidden', this.summary.totalHidden) + ')');
 			var fileSize = this.summary.sumIsPending ? t('files', 'Pending') : OC.Util.humanFileSize(this.summary.totalSize);
 			this.$el.find('.filesize').html(fileSize);
 
@@ -194,6 +248,7 @@
 			if (this.summary.totalDirs > 0 && this.summary.totalFiles > 0) {
 				$connector.removeClass('hidden');
 			}
+			$hiddenInfo.toggleClass('hidden', this.summary.totalHidden === 0 || this._showHidden)
 			if (this.summary.filter === '') {
 				$filterInfo.html('');
 				$filterInfo.addClass('hidden');
@@ -206,19 +261,7 @@
 			if (!this.$el) {
 				return;
 			}
-			// TODO: ideally this should be separate to a template or something
 			var summary = this.summary;
-			var directoryInfo = n('files', '%n folder', '%n folders', summary.totalDirs);
-			var fileInfo = n('files', '%n file', '%n files', summary.totalFiles);
-			var filterInfo = '';
-			if (this.summary.filter !== '') {
-				filterInfo = ' ' + n('files', 'matches \'{filter}\'', 'match \'{filter}\'', summary.totalFiles + summary.totalDirs, {filter: summary.filter});
-			}
-
-			var infoVars = {
-				dirs: '<span class="dirinfo">'+directoryInfo+'</span><span class="connector">',
-				files: '</span><span class="fileinfo">'+fileInfo+'</span>'
-			};
 
 			// don't show the filesize column, if filesize is NaN (e.g. in trashbin)
 			var fileSize = '';
@@ -227,15 +270,14 @@
 				fileSize = '<td class="filesize">' + fileSize + '</td>';
 			}
 
-			var info = t('files', '{dirs} and {files}', infoVars, null, {'escape': false});
-
-			var $summary = $('<td><span class="info">'+info+'<span class="filter">'+filterInfo+'</span></span></td>'+fileSize+'<td class="date"></td>');
-
-			if (!this.summary.totalFiles && !this.summary.totalDirs) {
-				this.$el.addClass('hidden');
-			}
-
+			var $summary = $(
+				'<td>' + this._infoTemplate() + '</td>' +
+				fileSize +
+				'<td class="date"></td>'
+			);
+			this.$el.addClass('hidden');
 			this.$el.append($summary);
+			this.update();
 		}
 	};
 	OCA.Files.FileSummary = FileSummary;
diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js
index cf9f43f2d59..0a4812f3a81 100644
--- a/apps/files/tests/js/filelistSpec.js
+++ b/apps/files/tests/js/filelistSpec.js
@@ -385,8 +385,9 @@ describe('OCA.Files.FileList tests', function() {
 			$summary = $('#filestable .summary');
 			expect($summary.hasClass('hidden')).toEqual(false);
 			// yes, ugly...
-			expect($summary.find('.info').text()).toEqual('0 folders and 1 file');
+			expect($summary.find('.fileinfo').text()).toEqual('1 file');
 			expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(true);
+			expect($summary.find('.connector').hasClass('hidden')).toEqual(true);
 			expect($summary.find('.fileinfo').hasClass('hidden')).toEqual(false);
 			expect($summary.find('.filesize').text()).toEqual('12 B');
 			expect($('#filestable thead th').hasClass('hidden')).toEqual(false);
@@ -456,7 +457,8 @@ describe('OCA.Files.FileList tests', function() {
 
 			$summary = $('#filestable .summary');
 			expect($summary.hasClass('hidden')).toEqual(false);
-			expect($summary.find('.info').text()).toEqual('1 folder and 2 files');
+			expect($summary.find('.dirinfo').text()).toEqual('1 folder');
+			expect($summary.find('.fileinfo').text()).toEqual('2 files');
 			expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(false);
 			expect($summary.find('.fileinfo').hasClass('hidden')).toEqual(false);
 			expect($summary.find('.filesize').text()).toEqual('69 KB');
@@ -511,7 +513,8 @@ describe('OCA.Files.FileList tests', function() {
 
 			$summary = $('#filestable .summary');
 			expect($summary.hasClass('hidden')).toEqual(false);
-			expect($summary.find('.info').text()).toEqual('1 folder and 1 file');
+			expect($summary.find('.dirinfo').text()).toEqual('1 folder');
+			expect($summary.find('.fileinfo').text()).toEqual('1 file');
 			expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(false);
 			expect($summary.find('.fileinfo').hasClass('hidden')).toEqual(false);
 			expect($summary.find('.filesize').text()).toEqual('57 KB');
@@ -677,12 +680,14 @@ describe('OCA.Files.FileList tests', function() {
 
 			deferredRename.resolve(201);
 
-			expect($summary.find('.info').text()).toEqual('1 folder and 3 files');
+			expect($summary.find('.dirinfo').text()).toEqual('1 folder');
+			expect($summary.find('.fileinfo').text()).toEqual('3 files');
 		});
 		it('Leaves the summary alone when cancel renaming', function() {
 			var $summary = $('#filestable .summary');
 			doCancelRename();
-			expect($summary.find('.info').text()).toEqual('1 folder and 3 files');
+			expect($summary.find('.dirinfo').text()).toEqual('1 folder');
+			expect($summary.find('.fileinfo').text()).toEqual('3 files');
 		});
 		it('Shows busy state while rename in progress', function() {
 			var $tr;
@@ -856,11 +861,14 @@ describe('OCA.Files.FileList tests', function() {
 			});
 			var $tr = fileList.add(fileData);
 
-			expect($summary.find('.info').text()).toEqual('0 folders and 1 file');
+			expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(true);
+			expect($summary.find('.fileinfo').text()).toEqual('1 file');
 
 			var model = fileList.getModelForFile('test file');
 			model.set({size: '100'});
-			expect($summary.find('.info').text()).toEqual('0 folders and 1 file');
+
+			expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(true);
+			expect($summary.find('.fileinfo').text()).toEqual('1 file');
 		});
 	})
 	describe('List rendering', function() {
@@ -877,7 +885,8 @@ describe('OCA.Files.FileList tests', function() {
 			fileList.setFiles(testFiles);
 			$summary = $('#filestable .summary');
 			expect($summary.hasClass('hidden')).toEqual(false);
-			expect($summary.find('.info').text()).toEqual('1 folder and 3 files');
+			expect($summary.find('.dirinfo').text()).toEqual('1 folder');
+			expect($summary.find('.fileinfo').text()).toEqual('3 files');
 			expect($summary.find('.filesize').text()).toEqual('69 KB');
 		});
 		it('shows headers, summary and hide empty content message after setting files', function(){
@@ -962,10 +971,12 @@ describe('OCA.Files.FileList tests', function() {
 			fileList.setFiles([testFiles[0]]);
 			$summary = $('#filestable .summary');
 			expect($summary.hasClass('hidden')).toEqual(false);
-			expect($summary.find('.info').text()).toEqual('0 folders and 1 file');
+			expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(true);
+			expect($summary.find('.fileinfo').text()).toEqual('1 file');
 			fileList.remove('unexist.txt');
 			expect($summary.hasClass('hidden')).toEqual(false);
-			expect($summary.find('.info').text()).toEqual('0 folders and 1 file');
+			expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(true);
+			expect($summary.find('.fileinfo').text()).toEqual('1 file');
 		});
 	});
 	describe('Filtered list rendering', function() {
@@ -987,14 +998,18 @@ describe('OCA.Files.FileList tests', function() {
 			expect($('#fileList tr:not(.hidden)').length).toEqual(3);
 			expect(fileList.files.length).toEqual(4);
 			expect($summary.hasClass('hidden')).toEqual(false);
-			expect($summary.find('.info').text()).toEqual("1 folder and 2 files match 'e'");
+			expect($summary.find('.dirinfo').text()).toEqual('1 folder');
+			expect($summary.find('.fileinfo').text()).toEqual('2 files');
+			expect($summary.find('.filter').text()).toEqual(" match 'e'");
 			expect($nofilterresults.hasClass('hidden')).toEqual(true);
 
 			fileList.setFilter('ee');
 			expect($('#fileList tr:not(.hidden)').length).toEqual(1);
 			expect(fileList.files.length).toEqual(4);
 			expect($summary.hasClass('hidden')).toEqual(false);
-			expect($summary.find('.info').text()).toEqual("0 folders and 1 file matches 'ee'");
+			expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(true);
+			expect($summary.find('.fileinfo').text()).toEqual('1 file');
+			expect($summary.find('.filter').text()).toEqual(" matches 'ee'");
 			expect($nofilterresults.hasClass('hidden')).toEqual(true);
 
 			fileList.setFilter('eee');
@@ -1007,21 +1022,26 @@ describe('OCA.Files.FileList tests', function() {
 			expect($('#fileList tr:not(.hidden)').length).toEqual(1);
 			expect(fileList.files.length).toEqual(4);
 			expect($summary.hasClass('hidden')).toEqual(false);
-			expect($summary.find('.info').text()).toEqual("0 folders and 1 file matches 'ee'");
+			expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(true);
+			expect($summary.find('.fileinfo').text()).toEqual('1 file');
+			expect($summary.find('.filter').text()).toEqual(" matches 'ee'");
 			expect($nofilterresults.hasClass('hidden')).toEqual(true);
 
 			fileList.setFilter('e');
 			expect($('#fileList tr:not(.hidden)').length).toEqual(3);
 			expect(fileList.files.length).toEqual(4);
 			expect($summary.hasClass('hidden')).toEqual(false);
-			expect($summary.find('.info').text()).toEqual("1 folder and 2 files match 'e'");
+			expect($summary.find('.dirinfo').text()).toEqual('1 folder');
+			expect($summary.find('.fileinfo').text()).toEqual('2 files');
+			expect($summary.find('.filter').text()).toEqual(" match 'e'");
 			expect($nofilterresults.hasClass('hidden')).toEqual(true);
 
 			fileList.setFilter('');
 			expect($('#fileList tr:not(.hidden)').length).toEqual(4);
 			expect(fileList.files.length).toEqual(4);
 			expect($summary.hasClass('hidden')).toEqual(false);
-			expect($summary.find('.info').text()).toEqual("1 folder and 3 files");
+			expect($summary.find('.dirinfo').text()).toEqual('1 folder');
+			expect($summary.find('.fileinfo').text()).toEqual('3 files');
 			expect($nofilterresults.hasClass('hidden')).toEqual(true);
 		});
 		it('filters the list of non-rendered rows using filter()', function() {
@@ -1032,7 +1052,9 @@ describe('OCA.Files.FileList tests', function() {
 			fileList.setFilter('63');
 			expect($('#fileList tr:not(.hidden)').length).toEqual(1);
 			expect($summary.hasClass('hidden')).toEqual(false);
-			expect($summary.find('.info').text()).toEqual("0 folders and 1 file matches '63'");
+			expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(true);
+			expect($summary.find('.fileinfo').text()).toEqual('1 file');
+			expect($summary.find('.filter').text()).toEqual(" matches '63'");
 			expect($nofilterresults.hasClass('hidden')).toEqual(true);
 		});
 		it('hides the emptyfiles notice when using filter()', function() {
@@ -1654,6 +1676,18 @@ describe('OCA.Files.FileList tests', function() {
 			$('#fileList tr td.filename input:checkbox').click();
 			expect($('.select-all').prop('checked')).toEqual(false);
 		});
+		it('Selecting all files also selects hidden files when invisible', function() {
+			filesConfig.set('showhidden', false);
+			var $tr = fileList.add(new FileInfo({
+				name: '.hidden',
+				type: 'dir',
+				mimetype: 'httpd/unix-directory',
+				size: 150
+			}));
+			$('.select-all').click();
+			expect($tr.find('td.filename input:checkbox').prop('checked')).toEqual(true);
+			expect(_.pluck(fileList.getSelectedFiles(), 'name')).toContain('.hidden');
+		});
 		it('Clicking "select all" will select/deselect all files', function() {
 			fileList.setFiles(generateFiles(0, 41));
 			$('.select-all').click();
@@ -1731,6 +1765,44 @@ describe('OCA.Files.FileList tests', function() {
 			fileList.findFileEl('One.txt').find('input:checkbox').click().click();
 			expect($summary.text()).toEqual('Name');
 		});
+		it('Displays the number of hidden files in selection summary if hidden files are invisible', function() {
+			filesConfig.set('showhidden', false);
+			var $tr = fileList.add(new FileInfo({
+				name: '.hidden',
+				type: 'dir',
+				mimetype: 'httpd/unix-directory',
+				size: 150
+			}));
+			$('.select-all').click();
+			var $summary = $('#headerName a.name>span:first');
+			expect($summary.text()).toEqual('2 folders and 3 files (including 1 hidden)');
+		});
+		it('Does not displays the number of hidden files in selection summary if hidden files are visible', function() {
+			filesConfig.set('showhidden', true);
+			var $tr = fileList.add(new FileInfo({
+				name: '.hidden',
+				type: 'dir',
+				mimetype: 'httpd/unix-directory',
+				size: 150
+			}));
+			$('.select-all').click();
+			var $summary = $('#headerName a.name>span:first');
+			expect($summary.text()).toEqual('2 folders and 3 files');
+		});
+		it('Toggling hidden file visibility updates selection summary', function() {
+			filesConfig.set('showhidden', false);
+			var $tr = fileList.add(new FileInfo({
+				name: '.hidden',
+				type: 'dir',
+				mimetype: 'httpd/unix-directory',
+				size: 150
+			}));
+			$('.select-all').click();
+			var $summary = $('#headerName a.name>span:first');
+			expect($summary.text()).toEqual('2 folders and 3 files (including 1 hidden)');
+			filesConfig.set('showhidden', true);
+			expect($summary.text()).toEqual('2 folders and 3 files');
+		});
 		it('Select/deselect files shows/hides file actions', function() {
 			var $actions = $('#headerName .selectedActions');
 			var $checkbox = fileList.findFileEl('One.txt').find('input:checkbox');
diff --git a/apps/files/tests/js/filesummarySpec.js b/apps/files/tests/js/filesummarySpec.js
index ec94c28acb6..e3f24d9ad43 100644
--- a/apps/files/tests/js/filesummarySpec.js
+++ b/apps/files/tests/js/filesummarySpec.js
@@ -39,7 +39,8 @@ describe('OCA.Files.FileSummary tests', function() {
 			totalSize: 256000
 		});
 		expect($container.hasClass('hidden')).toEqual(false);
-		expect($container.find('.info').text()).toEqual('5 folders and 2 files');
+		expect($container.find('.dirinfo').text()).toEqual('5 folders');
+		expect($container.find('.fileinfo').text()).toEqual('2 files');
 		expect($container.find('.filesize').text()).toEqual('250 KB');
 	});
 	it('hides summary when no files or folders', function() {
@@ -62,7 +63,8 @@ describe('OCA.Files.FileSummary tests', function() {
 		s.add({type: 'dir', size: 100});
 		s.update();
 		expect($container.hasClass('hidden')).toEqual(false);
-		expect($container.find('.info').text()).toEqual('6 folders and 3 files');
+		expect($container.find('.dirinfo').text()).toEqual('6 folders');
+		expect($container.find('.fileinfo').text()).toEqual('3 files');
 		expect($container.find('.filesize').text()).toEqual('500 KB');
 		expect(s.summary.totalDirs).toEqual(6);
 		expect(s.summary.totalFiles).toEqual(3);
@@ -79,7 +81,8 @@ describe('OCA.Files.FileSummary tests', function() {
 		s.remove({type: 'dir', size: 100});
 		s.update();
 		expect($container.hasClass('hidden')).toEqual(false);
-		expect($container.find('.info').text()).toEqual('4 folders and 1 file');
+		expect($container.find('.dirinfo').text()).toEqual('4 folders');
+		expect($container.find('.fileinfo').text()).toEqual('1 file');
 		expect($container.find('.filesize').text()).toEqual('125 KB');
 		expect(s.summary.totalDirs).toEqual(4);
 		expect(s.summary.totalFiles).toEqual(1);
@@ -95,7 +98,9 @@ describe('OCA.Files.FileSummary tests', function() {
 			filter: 'foo'
 		});
 		expect($container.hasClass('hidden')).toEqual(false);
-		expect($container.find('.info').text()).toEqual('5 folders and 2 files match \'foo\'');
+		expect($container.find('.dirinfo').text()).toEqual('5 folders');
+		expect($container.find('.fileinfo').text()).toEqual('2 files');
+		expect($container.find('.filter').text()).toEqual(' match \'foo\'');
 		expect($container.find('.filesize').text()).toEqual('250 KB');
 	});
 	it('hides filtered summary when no files or folders', function() {
@@ -122,7 +127,9 @@ describe('OCA.Files.FileSummary tests', function() {
 		s.add({name: 'foo', type: 'dir', size: 102});
 		s.update();
 		expect($container.hasClass('hidden')).toEqual(false);
-		expect($container.find('.info').text()).toEqual('6 folders and 3 files match \'foo\'');
+		expect($container.find('.dirinfo').text()).toEqual('6 folders');
+		expect($container.find('.fileinfo').text()).toEqual('3 files');
+		expect($container.find('.filter').text()).toEqual(' match \'foo\'');
 		expect($container.find('.filesize').text()).toEqual('500 KB');
 		expect(s.summary.totalDirs).toEqual(6);
 		expect(s.summary.totalFiles).toEqual(3);
@@ -142,7 +149,9 @@ describe('OCA.Files.FileSummary tests', function() {
 		s.remove({name: 'foo', type: 'dir', size: 98});
 		s.update();
 		expect($container.hasClass('hidden')).toEqual(false);
-		expect($container.find('.info').text()).toEqual('4 folders and 1 file match \'foo\'');
+		expect($container.find('.dirinfo').text()).toEqual('4 folders');
+		expect($container.find('.fileinfo').text()).toEqual('1 file');
+		expect($container.find('.filter').text()).toEqual(' match \'foo\'');
 		expect($container.find('.filesize').text()).toEqual('125 KB');
 		expect(s.summary.totalDirs).toEqual(4);
 		expect(s.summary.totalFiles).toEqual(1);
@@ -158,7 +167,8 @@ describe('OCA.Files.FileSummary tests', function() {
 		s.add({type: 'dir', size: -1});
 		s.update();
 		expect($container.hasClass('hidden')).toEqual(false);
-		expect($container.find('.info').text()).toEqual('1 folder and 0 files');
+		expect($container.find('.dirinfo').text()).toEqual('1 folder');
+		expect($container.find('.fileinfo').hasClass('hidden')).toEqual(true);
 		expect($container.find('.filesize').text()).toEqual('Pending');
 		expect(s.summary.totalDirs).toEqual(1);
 		expect(s.summary.totalFiles).toEqual(0);
@@ -175,10 +185,56 @@ describe('OCA.Files.FileSummary tests', function() {
 		s.remove({type: 'dir', size: -1});
 		s.update();
 		expect($container.hasClass('hidden')).toEqual(true);
-		expect($container.find('.info').text()).toEqual('0 folders and 0 files');
-		expect($container.find('.filesize').text()).toEqual('0 B');
 		expect(s.summary.totalDirs).toEqual(0);
 		expect(s.summary.totalFiles).toEqual(0);
 		expect(s.summary.totalSize).toEqual(0);
 	});
+	describe('hidden files', function() {
+		var config;
+		var summary;
+
+		beforeEach(function() {
+			config = new OC.Backbone.Model();
+			summary = new FileSummary($container, {
+				config: config
+			});
+		});
+
+		it('renders hidden count section when hidden files are hidden', function() {
+			config.set('showhidden', false);
+			summary.add({name: 'abc', type: 'file', size: 256000});
+			summary.add({name: 'def', type: 'dir', size: 100});
+			summary.add({name: '.hidden', type: 'dir', size: 512000});
+			summary.update();
+			expect($container.hasClass('hidden')).toEqual(false);
+			expect($container.find('.dirinfo').text()).toEqual('2 folders');
+			expect($container.find('.fileinfo').text()).toEqual('1 file');
+			expect($container.find('.hiddeninfo').hasClass('hidden')).toEqual(false);
+			expect($container.find('.hiddeninfo').text()).toEqual(' (including 1 hidden)');
+			expect($container.find('.filesize').text()).toEqual('750 KB');
+		});
+		it('does not render hidden count section when hidden files exist but are visible', function() {
+			config.set('showhidden', true);
+			summary.add({name: 'abc', type: 'file', size: 256000});
+			summary.add({name: 'def', type: 'dir', size: 100});
+			summary.add({name: '.hidden', type: 'dir', size: 512000});
+			summary.update();
+			expect($container.hasClass('hidden')).toEqual(false);
+			expect($container.find('.dirinfo').text()).toEqual('2 folders');
+			expect($container.find('.fileinfo').text()).toEqual('1 file');
+			expect($container.find('.hiddeninfo').hasClass('hidden')).toEqual(true);
+			expect($container.find('.filesize').text()).toEqual('750 KB');
+		});
+		it('does not render hidden count section when no hidden files exist', function() {
+			config.set('showhidden', false);
+			summary.add({name: 'abc', type: 'file', size: 256000});
+			summary.add({name: 'def', type: 'dir', size: 100});
+			summary.update();
+			expect($container.hasClass('hidden')).toEqual(false);
+			expect($container.find('.dirinfo').text()).toEqual('1 folder');
+			expect($container.find('.fileinfo').text()).toEqual('1 file');
+			expect($container.find('.hiddeninfo').hasClass('hidden')).toEqual(true);
+			expect($container.find('.filesize').text()).toEqual('250 KB');
+		});
+	});
 });