fix(client): Enable loading different file types when running in pare…

…nt mode without iframe Back in karma-runner#2542, a third option to run tests without iframe is implemented, mostly for lightweight browser. It only allows script element to be loaded dynamically. This fix includes file type like .css to be loaded properly.
chan1cyrus2 · Mar 20, 2019 · cd0bf3c · cd0bf3c
1 parent c7ebf0b
commit cd0bf3c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/client/karma.js b/client/karma.js
@@ -66,8 +66,24 @@ function Karma (socket, iframe, opener, navigator, location) {
       } else if (url !== 'about:blank') {
         var loadScript = function (idx) {
           if (idx < window.__karma__.scriptUrls.length) {
-            var ele = document.createElement('script')
-            ele.src = window.__karma__.scriptUrls[idx]
+            var parser = new DOMParser()
+            // Browsers don't like character <> in string when assigning
+            // stringify json into a variable, so we replace them with escape
+            // hex
+            var string = window.__karma__.scriptUrls[idx]
+              .replace(/\\x3C/g, '<')
+              .replace(/\\x3E/g, '>')
+            var doc = parser.parseFromString(string, 'text/html')
+            var ele = doc.head.firstChild || doc.body.firstChild
+            // script elements created by DomParser is marked as unexecutable,
+            // create a new script element manually and copy necessary properties
+            // so it is executable
+            if (ele.tagName && ele.tagName.toLowerCase() === 'script') {
+              var tmp = ele
+              ele = document.createElement('script')
+              ele.src = tmp.src
+              ele.crossOrigin = tmp.crossorigin
+            }
             ele.onload = function () {
               loadScript(idx + 1)
             }

diff --git a/lib/middleware/karma.js b/lib/middleware/karma.js
@@ -192,8 +192,6 @@ function createKarmaMiddleware (
               }
             }
 
-            scriptUrls.push(filePath)
-
             if (fileType === 'css') {
               scriptTags.push(`<link type="text/css" href="${filePath}" rel="stylesheet">`)
             } else if (fileType === 'dom') {
@@ -206,6 +204,9 @@ function createKarmaMiddleware (
               scriptTags.push(`<script type="${scriptType}" src="${filePath}" ${crossOriginAttribute}></script>`)
             }
           }
+          for (const script of scriptTags) {
+            scriptUrls.push(script.replace(/</g, '\\x3C').replace(/>/g, '\\x3E'))
+          }
 
           const mappings = data.includes('%MAPPINGS%') ? files.served.map((file) => {
             const filePath = filePathToUrlPath(file.path, basePath, urlRoot, proxyPath)