fix(client): Includes attributes like type in script tags when runnin…

…g in parent mode without iframe Back in karma-runner#2542, a third option to run tests without iframe is implemented, mostly for lightweight browser. This fix is to include file type so files like .css would able to load properly.
chan1cyrus2 · Mar 20, 2019 · d39167c · d39167c
1 parent c7ebf0b
commit d39167c
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)