clean: use eslint on oddname + use encodeFilePath

- use generateUrl to automatically encode the basename.
- Properly test if the error page is not shown

Signed-off-by: Robbert Gurdeep Singh <[email protected]>

Author: beardhatcode

cypress/integration/oddname.spec.js

@@ -21,138 +21,137 @@
  *
  */
 
-import { randHash } from "../utils/";
+import { randHash } from '../utils/'
 
 /**
  * Make a name aimed to break the viewer in case of escaping errors
  *
- * @param {String} realName
+ * @param {String} realName original name of the file
  * @returns {String} a name for the file to be uploaded as
  */
 function naughtyFileName(realName) {
-	const ext = realName.split(".").pop();
+	const ext = realName.split('.').pop()
 	return (
-		"~⛰️ shot of a ${big} mountain`, " +
-		"realy #1's " +
-		'" #_+="%2520%27%22%60%25%21%23 was this called ' +
-		realName +
-		"in the" +
-		"☁️" +
-		"👩‍💻" +
-		"? :* ." +
-		ext.toUpperCase()
-	);
+		'~⛰️ shot of a ${big} mountain`, '
+		+ "realy #1's "
+		+ '" #_+="%2520%27%22%60%25%21%23 was this called '
+		+ realName
+		+ 'in % the'
+		+ '☁️'
+		+ '👩‍💻'
+		+ '? :* .'
+		+ ext.toUpperCase()
+	)
 }
 
-for (let [file, type] of [
-	["audio.mp3", "audio/mpeg"],
-	["audio.ogg", "audio/mpeg"],
-	["audio.ogg", "audio/ogg"],
-	["image1.jpg", "image/jpeg"],
-	["image.gif", "image/gif"],
-	["image.heic", "image/heic"],
-	["image.png", "image/png"],
-	["image-small.png", "image/png"],
-	["image.svg", "image/svg"],
-	["image.webp", "image/webp"],
-	["video1.mp4", "video/mp4"],
-	["video.mkv", "video/mkv"],
-	["video.ogv", "video/ogv"],
-	["video.webm", "video/webm"],
+// Make this test fail faster
+let failsLeft = 5
+Cypress.on('fail', (error, runnable) => {
+	failsLeft--
+	throw error // throw error to have test still fail
+})
+
+for (const [file, type] of [
+	['audio.mp3', 'audio/mpeg'],
+	['audio.ogg', 'audio/mpeg'],
+	['audio.ogg', 'audio/ogg'],
+	['image-small.png', 'image/png'],
+	['image.gif', 'image/gif'],
+	['image.heic', 'image/heic'],
+	['image.png', 'image/png'],
+	['image.svg', 'image/svg'],
+	['image.webp', 'image/webp'],
+	['image1.jpg', 'image/jpeg'],
+	['video.mkv', 'video/mkv'],
+	['video.ogv', 'video/ogv'],
+	['video.webm', 'video/webm'],
+	['video1.mp4', 'video/mp4'],
 ]) {
-	const placedName = naughtyFileName(file);
+	const placedName = naughtyFileName(file)
 
 	// We'll escape all the characters in the name to match it with css
-	const placedNameCss = CSS.escape(placedName);
+	const placedNameCss = CSS.escape(placedName)
 
 	// fresh user for each file
-	const randUser = randHash() + "@-" + randHash(); // @ is allowed, so use it
+	const randUser = randHash() + '@-' + randHash() // @ is allowed, so use it
 
-	const folderName =
-		'Nextcloud "%27%22%60%25%21%23" >`⛰️<' + file + "><` e*'rocks!#?#%~";
+	const folderName
+		= 'Nextcloud "%27%22%60%25%21%23" >`⛰️<' + file + "><` e*'rocks!#?#%~"
+
+	describe(`Open ${file} in viewer with a naughty name`, function() {
+		before(function() {
+			// fail fast
+			if (failsLeft < 0) {
+				throw new Error('Too many previous tests failed')
+			}
 
-	describe(`Open ${file} in viewer with a naughty name`, function () {
-		before(function () {
 			// Init user
-			cy.nextcloudCreateUser(randUser, "password");
-			cy.login(randUser, "password");
+			cy.nextcloudCreateUser(randUser, 'password')
+			cy.login(randUser, 'password')
 
 			// Upload test files
-			cy.createFolder(folderName);
-			cy.uploadFile(file, type, "/" + folderName, placedName);
-			cy.visit("/apps/files");
+			cy.createFolder(folderName)
+			cy.uploadFile(file, type, '/' + folderName, placedName)
+			cy.visit('/apps/files')
 
 			// wait a bit for things to be settled
-			cy.wait(1000);
-			cy.openFile(folderName);
-			cy.wait(1000);
-		});
-		after(function () {
+			cy.wait(1000)
+			cy.openFile(folderName)
+			cy.wait(1000)
+		})
+		after(function() {
 			// no need to log out we do this in the test to check the public link
-		});
-
-		it(`See ${file} as ${placedName} in the list`, function () {
+		})
+
+		function noLoadingAnimation() {
+			cy.get('body > .viewer', { timeout: 10000 })
+				.should('be.visible')
+				.and('have.class', 'modal-mask')
+				.and('not.have.class', 'icon-loading')
+		}
+
+		function menuOk() {
+			cy.get('body > .viewer .icon-error').should('not.exist')
+			cy.get('body > .viewer .modal-title').should('contain', placedName)
+			cy.get('body > .viewer .modal-header button.icon-close').should(
+				'be.visible'
+			)
+		}
+
+		function arrowsOK() {
+			cy.get('body > .viewer a.prev').should('not.be.visible')
+			cy.get('body > .viewer a.next').should('not.be.visible')
+		}
+
+		it(`See ${file} as ${placedName} in the list`, function() {
 			cy.get(`#fileList tr[data-file="${placedNameCss}"]`, {
 				timeout: 10000,
-			}).should("contain", placedName);
-		});
-
-		it("Open the viewer on file click", function () {
-			cy.openFile(placedName);
-			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("See the menu icon and title on the viewer header", function () {
-			cy.get("body > .viewer .modal-title").should("contain", placedName);
-			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("Share the folder with a share link and access the share link", function () {
+			}).should('contain', placedName)
+		})
+
+		it('Open the viewer on file click', function() {
+			cy.openFile(placedName)
+			cy.get('body > .viewer').should('be.visible')
+		})
+
+		it('Does not see a loading animation', noLoadingAnimation)
+		it('See the menu icon and title on the viewer header', menuOk)
+		it('Does not see navigation arrows', arrowsOK)
+
+		it('Share the folder with a share link and access the share link', function() {
 			cy.createLinkShare(folderName).then((token) => {
-				cy.logout();
-				cy.visit(`/s/${token}`);
-			});
-		});
-
-		it("Open the viewer on file click (public)", function () {
-			cy.openFile(placedName);
-			cy.get("body > .viewer").should("be.visible");
-		});
-
-		it("Does not see a loading animation (public)", function () {
-			cy.get("body > .viewer", { timeout: 10000 })
-				.should("be.visible")
-				.and("have.class", "modal-mask")
-				.and("not.have.class", "icon-loading");
-		});
-
-		it("See the menu icon and title on the viewer header (public)", function () {
-			cy.get("body > .viewer .modal-title").should("contain", placedName);
-			cy.get("body > .viewer .modal-header button.icon-close").should(
-				"be.visible"
-			);
-		});
-
-		it("Does not see navigation arrows (public)", function () {
-			cy.get("body > .viewer a.prev").should("not.be.visible");
-			cy.get("body > .viewer a.next").should("not.be.visible");
-		});
-	});
+				cy.logout()
+				cy.visit(`/s/${token}`)
+			})
+		})
+
+		it('Open the viewer on file click (public)', function() {
+			cy.openFile(placedName)
+			cy.get('body > .viewer').should('be.visible')
+		})
+
+		it('Does not see a loading animation (public)', noLoadingAnimation)
+		it('See the menu icon and title on the viewer header (public)', menuOk)
+		it('Does not see navigation arrows (public)', arrowsOK)
+	})
 }

js/viewer-main.js

@@ -132,9 +132,10 @@ const getDavPath = function({ filename, basename }) {
 	// TODO: allow proper dav access without the need of basic auth
 	// https://github.com/nextcloud/server/issues/19700
 	if (isPublic()) {
-		return generateUrl(`/s/${getToken()}/download?path=${encodeURIComponent(dirname(filename))}&files=${encodeURIComponent(basename)}`)
+		return generateUrl(`/s/${getToken()}/download?path={dirname}&files={basename}`,
+			{ dirname: dirname(filename), basename })
 	}
-	return getRootPath() + filename.split('/').map((x) => encodeURIComponent(x)).join('/')
+	return getRootPath() + encodeFilePath(filename)
 }
 
 export { encodeFilePath, extractFilePaths, sortCompare, genFileInfo, getDavPath }