Fix loading of subresources with Unicode filenames

domenic · domenic · commit 974131176b7f · 2021-03-07T17:20:58.000-05:00
Closes #3016. Closes #3027.
diff --git a/lib/jsdom/browser/resources/resource-loader.js b/lib/jsdom/browser/resources/resource-loader.js
@@ -1,5 +1,6 @@
 "use strict";
 const fs = require("fs");
+const { fileURLToPath } = require("url");
 const { parseURL } = require("whatwg-url");
 const dataURLFromRecord = require("data-urls").fromURLRecord;
 const request = require("request-promise-native");
@@ -107,13 +108,11 @@ module.exports = class ResourceLoader {
       }
 
       case "file": {
-        // TODO: Improve the URL => file algorithm. See https://github.com/jsdom/jsdom/pull/2279#discussion_r199977987
-        const filePath = urlString
-          .replace(/^file:\/\//, "")
-          .replace(/^\/([a-z]):\//i, "$1:/")
-          .replace(/%20/g, " ");
-
-        return this._readFile(filePath);
+        try {
+          return this._readFile(fileURLToPath(urlString));
+        } catch (e) {
+          return Promise.reject(e);
+        }
       }
 
       default: {
diff --git a/test/api/fixtures/from-file/unicode-진 シーン-i 🥰 you.css b/test/api/fixtures/from-file/unicode-진 シーン-i 🥰 you.css
@@ -0,0 +1,3 @@
+p {
+  color: red;
+}
diff --git a/test/api/fixtures/from-file/unicode-진 シーン-i 🥰 you.html b/test/api/fixtures/from-file/unicode-진 シーン-i 🥰 you.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Unicode filenames test</title>
+<link rel="stylesheet" href="unicode-진 シーン-i 🥰 you.css">
+
+<p>This should be red
diff --git a/test/api/from-file.js b/test/api/from-file.js
@@ -26,6 +26,16 @@ describe("API: JSDOM.fromFile()", { skipIfBrowser: true }, () => {
     });
   });
 
+  it("should work even for Unicode main resource and subresource filenames (GH-3016)", async () => {
+    const dom = await fromFixtureFile("unicode-진 シーン-i 🥰 you.html", { resources: "usable" });
+
+    await new Promise(resolve => {
+      dom.window.onload = resolve;
+    });
+
+    assert.strictEqual(dom.window.getComputedStyle(dom.window.document.querySelector("p")).color, "red");
+  });
+
   describe("contentType option defaulting", () => {
     it("should default to text/html Content-Type even with no file extension", () => {
       return fromFixtureFile("no-extension").then(dom => {
