Merge pull request #855 from nextcloud/add/image/webp

Add 'image/webp' mime type support

cypress/integration/image.webp.spec.js

@@ -0,0 +1,78 @@
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <[email protected]>
+ *
+ * @author John Molakvoæ <[email protected]>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program 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 program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { randHash } from '../utils/'
+const randUser = randHash()
+
+describe('Open image.webp in viewer', function() {
+	before(function() {
+		// Init user
+		cy.nextcloudCreateUser(randUser, 'password')
+		cy.login(randUser, 'password')
+
+		// Upload test files
+		cy.uploadFile('image.webp', 'image/webp')
+		cy.visit('/apps/files')
+
+		// wait a bit for things to be settled
+		cy.wait(2000)
+	})
+	after(function() {
+		cy.logout()
+	})
+
+	it('See image.webp in the list', function() {
+		cy.get('#fileList tr[data-file="image.webp"]', { timeout: 10000 })
+			.should('contain', 'image.webp')
+	})
+
+	it('Open the viewer on file click', function() {
+		cy.openFile('image.webp')
+		cy.get('body > .viewer').should('be.visible')
+	})
+
+	it('Does not see a loading animation', function() {
+		cy.get('body > .viewer', { timeout: 10000 })
+			.should('be.visible')
+			.and('have.class', 'modal-mask')
+			.and('not.have.class', 'icon-loading')
+	})
+
+	it('Is not in mobile fullscreen mode', function() {
+		cy.get('body > .viewer .modal-wrapper').should('not.have.class', 'modal-wrapper--full')
+	})
+
+	it('See the menu icon and title on the viewer header', function() {
+		cy.get('body > .viewer .modal-title').should('contain', 'image.webp')
+		cy.get('body > .viewer .modal-header button.action-item__menutoggle').should('be.visible')
+		cy.get('body > .viewer .modal-header button.icon-close').should('be.visible')
+	})
+
+	it('Does not see navigation arrows', function() {
+		cy.get('body > .viewer a.prev').should('not.be.visible')
+		cy.get('body > .viewer a.next').should('not.be.visible')
+	})
+
+	it('Does not have any visual regression', function() {
+		cy.matchImageSnapshot()
+	})
+})

src/models/images.js

@@ -33,6 +33,7 @@ export default {
 		'image/x-xbitmap',
 		'image/bmp',
 		'image/svg+xml',
+		'image/webp',
 	],
 	component: Images,
 }