append loaded html to body instead of full reload

MichalBryxi · Apr 22, 2015 · ba62f60 · ba62f60
1 parent 7202475
commit ba62f60
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 51 deletions.
diff --git a/spec/domvas.spec.js b/spec/domvas.spec.js
@@ -8,23 +8,30 @@ describe('domvas', function () {
     });
 
     it('should render simple css correctly', function (done) {
-        loadHtml('regression-simple.html').then(function (html) {
-            document.write(html);
+        loadHtml('regression-simple.html').then(function () {
             var dom_node = $('#dom-node')[0];
             console.log('hey! ' + dom_node);
             done();
         });
     });
 
-    function loadHtml(path) {
-        return new Promise(function (resolve) {
+    function loadHtml(fileName) {
+        return new Promise(function (resolve, reject) {
+            var url = '/base/spec/resources/' + fileName;
             var request = new XMLHttpRequest();
             console.log('request ' + request);
-            request.open('GET', '/base/spec/resources/' + path, true);
+            request.open('GET', url, true);
             request.responseType = 'text/html';
+
             request.onload = function () {
-                if (this.status == 200) resolve(request.response.toString());
+                if (this.status == 200) {
+                    var content = document.createElement('div');
+                    content.innerHTML = request.response.toString();
+                    $('body')[0].appendChild(content);
+                    resolve();
+                };
             };
+
             request.send();
         });
     }

diff --git a/spec/resources/regression-simple.html b/spec/resources/regression-simple.html
@@ -1,49 +1,37 @@
-<!DOCTYPE html>
-<html>
+<style>
+* {
+    box-sizing: border-box;
+}
 
-<head lang="en">
-    <meta charset="UTF-8">
-    <style>
-    * {
-        box-sizing: border-box;
-    }
-
-    #dom-node {
-        border: 1px solid black;
-        height: 100px;
-        width: 100px;
-    }
-
-    .red {
-        background-color: red;
-    }
-
-    .green {
-        background-color: green;
-    }
-
-    .blue {
-        background-color: blue;
-    }
-
-    .red,
-    .green,
-    .blue {
-        height: 33.333333%;
-        width: 100%;
-        border: 1px solid lightgrey;
-        border-radius: 6px;
-    }
+#dom-node {
+    border: 1px solid black;
+    height: 100px;
+    width: 100px;
+}
 
-    </style>
-</head>
+.red {
+    background-color: red;
+}
 
-<body>
-    <div id="dom-node">
-        <div class="red"></div>
-        <div class="green"></div>
-        <div class="blue"></div>
-    </div>
-</body>
+.green {
+    background-color: green;
+}
 
-</html>
+.blue {
+    background-color: blue;
+}
+
+.red,
+.green,
+.blue {
+    height: 33.333333%;
+    width: 100%;
+    border: 1px solid lightgrey;
+    border-radius: 6px;
+}
+</style>
+<div id="dom-node">
+    <div class="red"></div>
+    <div class="green"></div>
+    <div class="blue"></div>
+</div>