From fd5f35fd6a50895bd1b97b6c268b35e7789ee9d2 Mon Sep 17 00:00:00 2001
From: johnjbarton <johnjbarton@johnjbarton.com>
Date: Fri, 12 Oct 2018 09:31:50 -0700
Subject: [PATCH] feat(server): .dom files include HTML tags in page.

Add support for .dom extension files, insert the content of the file into the test HTML
document. This allows 'component' tests where JS interacts with HTML. Provides a simpler
alternative to solutions that use JS to embed HTML in JS then write it into the DOM.
Limited to cases where the DOM fragments from different tests do not interfere.
---
 docs/config/02-files.md            | 18 ++++++-----
 lib/middleware/karma.js            | 22 ++++++++++++--
 lib/server.js                      |  2 ++
 lib/web-server.js                  | 23 ++++++++++++--
 test/unit/middleware/karma.spec.js | 48 ++++++++++++++++++++++++++++++
 test/unit/web-server.spec.js       |  4 ++-
 6 files changed, 105 insertions(+), 12 deletions(-)

diff --git a/docs/config/02-files.md b/docs/config/02-files.md
index 7cd632082..91de57174 100644
--- a/docs/config/02-files.md
+++ b/docs/config/02-files.md
@@ -34,6 +34,10 @@ Each pattern is either a simple string or an object with the following propertie
   * `js`
   * `dart`
   * `module`
+  * `dom`
+* **Description.** The type determines the mechanism for including the file. The `css` and `html` types
+create `link` elements; the `js`, `dart`, and `module` elements create `script` elements. The `dom` type
+includes the file content in the page, used, for example, to test components combinging HTML and JS.
 
 ### `watched`
 * **Type.** Boolean
@@ -46,17 +50,17 @@ Each pattern is either a simple string or an object with the following propertie
 * **Description.** Should the files be included in the browser using
     `<script>` tag? Use `false` if you want to load them manually, eg.
     using [Require.js](../plus/requirejs.html).
-    
+
     If a file is covered by multiple patterns with different `include` properties, the most specific pattern takes
     precedence over the other.
-    
-    The specificity of the pattern is defined as a six-tuple, where larger tuple implies lesser specificity: 
+
+    The specificity of the pattern is defined as a six-tuple, where larger tuple implies lesser specificity:
     *(n<sub>glob parts</sub>, n<sub>glob star</sub>, n<sub>star</sub>, n<sub>ext glob</sub>, n<sub>range</sub>, n<sub>optional</sub>)*.
-    Tuples are compared lexicographically. 
-    
-    The *n<sub>glob parts</sub>* is the number of patterns after the bracket sections are expanded. E.g. the 
+    Tuples are compared lexicographically.
+
+    The *n<sub>glob parts</sub>* is the number of patterns after the bracket sections are expanded. E.g. the
     the pattern *{0...9}* will yield *n<sub>glob parts</sub>=10*. The rest of the tuple is decided as the least
-    specific of each expanded pattern. 
+    specific of each expanded pattern.
 
 ### `served`
 * **Type.** Boolean
diff --git a/lib/middleware/karma.js b/lib/middleware/karma.js
index f00fa9014..b527156fe 100644
--- a/lib/middleware/karma.js
+++ b/lib/middleware/karma.js
@@ -30,7 +30,8 @@ const FILE_TYPES = [
   'html',
   'js',
   'dart',
-  'module'
+  'module',
+  'dom'
 ]
 
 function filePathToUrlPath (filePath, basePath, urlRoot, proxyPath) {
@@ -64,6 +65,7 @@ function createKarmaMiddleware (
   filesPromise,
   serveStaticFile,
   serveFile,
+  readFilePromise,
   injector,
   basePath,
   urlRoot,
@@ -133,8 +135,21 @@ function createKarmaMiddleware (
     const isRequestingContextFile = requestUrl === '/context.html'
     const isRequestingDebugFile = requestUrl === '/debug.html'
     const isRequestingClientContextFile = requestUrl === '/client_with_context.html'
+    const includedContent = new Map() // file.path -> content
     if (isRequestingContextFile || isRequestingDebugFile || isRequestingClientContextFile) {
-      return filesPromise.then(function (files) {
+      return filesPromise.then((files) => {
+        // Read any files.included that will be directly written into HTML before HTML is read.
+        const contentReads = []
+        for (const file of files.included) {
+          const fileType = file.type || path.extname(file.path).substring(1)
+          if (fileType === 'dom') {
+            contentReads.push(
+              readFilePromise(file.path).then((content) => includedContent.set(file.path, content))
+            )
+          }
+        }
+        return Promise.all(contentReads).then(() => files)
+      }).then(function (files) {
         let fileServer
         let requestedFileUrl
         log.debug('custom files', customContextFile, customDebugFile, customClientContextFile)
@@ -181,6 +196,8 @@ function createKarmaMiddleware (
 
             if (fileType === 'css') {
               scriptTags.push(`<link type="text/css" href="${filePath}" rel="stylesheet">`)
+            } else if (fileType === 'dom') {
+              scriptTags.push(includedContent.get(file.path))
             } else if (fileType === 'html') {
               scriptTags.push(`<link href="${filePath}" rel="import">`)
             } else {
@@ -224,6 +241,7 @@ createKarmaMiddleware.$inject = [
   'filesPromise',
   'serveStaticFile',
   'serveFile',
+  'readFilePromise',
   'injector',
   'config.basePath',
   'config.urlRoot',
diff --git a/lib/server.js b/lib/server.js
index dacfdc095..72466064c 100644
--- a/lib/server.js
+++ b/lib/server.js
@@ -21,6 +21,7 @@ const plugin = require('./plugin')
 const createServeFile = require('./web-server').createServeFile
 const createServeStaticFile = require('./web-server').createServeStaticFile
 const createFilesPromise = require('./web-server').createFilesPromise
+const createReadFilePromise = require('./web-server').createReadFilePromise
 const createWebServer = require('./web-server').createWebServer
 const preprocessor = require('./preprocessor')
 const Launcher = require('./launcher').Launcher
@@ -78,6 +79,7 @@ class Server extends KarmaEventEmitter {
       serveFile: ['factory', createServeFile],
       serveStaticFile: ['factory', createServeStaticFile],
       filesPromise: ['factory', createFilesPromise],
+      readFilePromise: ['factory', createReadFilePromise],
       socketServer: ['factory', createSocketIoServer],
       executor: ['factory', Executor.factory],
       // TODO(vojta): remove
diff --git a/lib/web-server.js b/lib/web-server.js
index 3bda89827..bb57289d5 100644
--- a/lib/web-server.js
+++ b/lib/web-server.js
@@ -38,7 +38,25 @@ function createFilesPromise (emitter, fileList) {
 
   return filesPromise
 }
-createFilesPromise.$inject = ['emitter', 'fileList']
+
+// Bind the filesystem into the injectable file reader function
+function createReadFilePromise () {
+  return (filepath) => {
+    return new Promise((resolve, reject) => {
+      fs.readFile(filepath, 'utf8', function (error, data) {
+        if (error) {
+          reject(new Error(`Cannot read ${filepath}, got: ${error}`))
+        } else if (!data) {
+          reject(new Error(`No content at ${filepath}`))
+        } else {
+          resolve(data.split('\n'))
+        }
+      })
+    })
+  }
+}
+
+createReadFilePromise.$inject = []
 
 function createServeStaticFile (config) {
   return common.createServeFile(fs, path.normalize(path.join(__dirname, '/../static')), config)
@@ -106,5 +124,6 @@ module.exports = {
   createWebServer,
   createServeFile,
   createServeStaticFile,
-  createFilesPromise
+  createFilesPromise,
+  createReadFilePromise
 }
diff --git a/test/unit/middleware/karma.spec.js b/test/unit/middleware/karma.spec.js
index 6440511e0..18a8ec953 100644
--- a/test/unit/middleware/karma.spec.js
+++ b/test/unit/middleware/karma.spec.js
@@ -12,6 +12,7 @@ const HttpRequestMock = mocks.http.ServerRequest
 
 describe('middleware.karma', () => {
   let serveFile
+  let readFilesDeferred
   let filesDeferred
   let nextSpy
   let response
@@ -63,6 +64,7 @@ describe('middleware.karma', () => {
       filesDeferred.promise,
       serveFile,
       null,
+      null,
       injector,
       '/base/path',
       '/__karma__/',
@@ -119,10 +121,12 @@ describe('middleware.karma', () => {
   })
 
   it('should serve client.html', (done) => {
+    readFilesDeferred = helper.defer()
     handler = createKarmaMiddleware(
       null,
       serveFile,
       null,
+      readFilesDeferred.promise,
       injector,
       '/base',
       '/'
@@ -138,10 +142,12 @@ describe('middleware.karma', () => {
   })
 
   it('should serve /?id=xxx', (done) => {
+    readFilesDeferred = helper.defer()
     handler = createKarmaMiddleware(
       null,
       serveFile,
       null,
+      readFilesDeferred.promise,
       injector,
       '/base',
       '/'
@@ -157,10 +163,13 @@ describe('middleware.karma', () => {
   })
 
   it('should serve /?x-ua-compatible with replaced values', (done) => {
+    readFilesDeferred = helper.defer()
+
     handler = createKarmaMiddleware(
       null,
       serveFile,
       null,
+      readFilesDeferred.promise,
       injector,
       '/base',
       '/'
@@ -268,6 +277,43 @@ describe('middleware.karma', () => {
     callHandlerWith('/__karma__/context.html')
   })
 
+  it('should serve context.html with included DOM content', (done) => {
+    const readFilePromise = (path) => {
+      const cases = {
+        '/some/abc/a.dom': 'a',
+        '/some/abc/b_test_dom.html': 'b',
+        '/some/abc/c': 'c',
+        '/some/abc/d_test_dom.html': 'd'
+      }
+      return Promise.resolve(cases[path] || '?unknown ' + path)
+    }
+
+    filesDeferred = helper.defer()
+    handler = createKarmaMiddleware(
+      filesDeferred.promise,
+      serveFile,
+      null,
+      readFilePromise,
+      injector,
+      '/base',
+      '/'
+    )
+
+    includedFiles([
+      new MockFile('/some/abc/a.dom', 'sha1'),
+      new MockFile('/some/abc/b_test_dom.html', 'sha2', 'dom'),
+      new MockFile('/some/abc/c', 'sha3', 'dom')
+    ])
+
+    response.once('end', () => {
+      expect(nextSpy).not.to.have.been.called
+      expect(response).to.beServedAs(200, 'CONTEXT\na\nb\nc')
+      done()
+    })
+
+    callHandlerWith('/context.html')
+  })
+
   it('should serve context.json with the correct paths for all files', (done) => {
     includedFiles([
       new MockFile('/some/abc/a.css', 'sha1'),
@@ -422,10 +468,12 @@ describe('middleware.karma', () => {
 
   it('should update handle updated configs', (done) => {
     let i = 0
+    readFilesDeferred = helper.defer()
     handler = createKarmaMiddleware(
       filesDeferred.promise,
       serveFile,
       null,
+      readFilesDeferred.promise,
       {
         get (val) {
           if (val === 'config.client') {
diff --git a/test/unit/web-server.spec.js b/test/unit/web-server.spec.js
index 0959748b7..fdae27d37 100644
--- a/test/unit/web-server.spec.js
+++ b/test/unit/web-server.spec.js
@@ -63,6 +63,7 @@ describe('web-server', () => {
         filesPromise: ['factory', m.createFilesPromise],
         serveStaticFile: ['factory', m.createServeStaticFile],
         serveFile: ['factory', m.createServeFile],
+        readFilePromise: ['factory', m.createReadFilePromise],
         capturedBrowsers: ['value', null],
         reporter: ['value', null],
         executor: ['value', null],
@@ -232,7 +233,7 @@ describe('web-server', () => {
         filesPromise: ['factory', m.createFilesPromise],
         serveStaticFile: ['factory', m.createServeStaticFile],
         serveFile: ['factory', m.createServeFile],
-
+        readFilePromise: ['factory', m.createReadFilePromise],
         capturedBrowsers: ['value', null],
         reporter: ['value', null],
         executor: ['value', null],
@@ -277,6 +278,7 @@ describe('web-server', () => {
         filesPromise: ['factory', m.createFilesPromise],
         serveStaticFile: ['factory', m.createServeStaticFile],
         serveFile: ['factory', m.createServeFile],
+        readFilePromise: ['factory', m.createReadFilePromise],
         capturedBrowsers: ['value', null],
         reporter: ['value', null],
         executor: ['value', null],