test example with html and JS

karma.conf.js

@@ -18,7 +18,8 @@ module.exports = function(config) {
       "js/lib/async.js",
       "js/rectangle.js",
       "test/*.js",
-      "test/**/*.js"
+      "test/**/*.js",
+      "test/fixtures/**/*.html",
     ],
 
     // list of files to exclude
@@ -31,7 +32,8 @@ module.exports = function(config) {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
-      "js/**/*.js": ["coverage"]
+      "js/**/*.js": ["coverage"],
+      "test/fixtures/**/*.html": ["html2js"],
     },
 
     // test results reporter to use

package.json

@@ -17,6 +17,7 @@
     "chai": "^3.2.0",
     "chai-as-promised": "^5.1.0",
     "codeclimate-test-reporter": "^0.1.0",
+    "html2js": "^0.2.0",
     "jscs": "^2.1.0",
     "jshint": "^2.8.0",
     "karma": "~0.13",
@@ -25,6 +26,7 @@
     "karma-coverage": "^0.5.0",
     "karma-coveralls": "^1.1.2",
     "karma-firefox-launcher": "~0.1",
+    "karma-html2js-preprocessor": "^0.1.0",
     "karma-mocha": "^0.2.0",
     "karma-requirejs": "^0.2.2",
     "mocha": "^2.2.5",

test/fixtures/script_test_example.html

@@ -0,0 +1 @@
+<div id="element-exists"></div>

test/script_test_example.js

@@ -0,0 +1,28 @@
+/* globals __html__, expect */
+/* jshint -W030 */
+"use strict";
+describe("use of HTML fixtures and JS", () => {
+  it("should load an html fixture", () => {
+    document.body.innerHTML = __html__["test/fixtures/script_test_example.html"];
+    var elem = document.querySelector("#element-exists");
+    expect(elem).to.be.ok;
+    expect(elem.textContent).to.equal("");
+  });
+
+  it("should be able to run scripts", () => {
+    document.body.innerHTML = __html__["test/fixtures/script_test_example.html"];
+    var elem = document.querySelector("#element-exists");
+    expect(elem).to.be.ok;
+    expect(elem.textContent).to.equal("");
+
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript;version=1.8");
+    script.textContent = `
+      let elem = document.querySelector("#element-exists");
+      elem.textContent = "Hello World";
+    `;
+    document.body.appendChild(script);
+
+    expect(elem.textContent).to.equal("Hello World");
+  });
+});