Correctly handle XML in KoralQuery highlighter

Change-Id: Id3f53e8409c2f898c6585e58e0a66563aeec0d13
diff --git a/Changes b/Changes
index 2294ffc..466e752 100755
--- a/Changes
+++ b/Changes
@@ -1,4 +1,4 @@
-0.31 2018-11-20
+0.31 2018-11-30
         - Update to Mojolicious >= 8.06.
         - Made Authentication/Authorization a separated Kalamar::Plugin::Auth
           (deprecated most helpers from Kalamar::Plugin::KalamarUser).
@@ -6,6 +6,7 @@
         - Introduce 'sidebar' content_block.
         - Introduce 'headerButtonGroup' content_block.
         - Added corpusByMatch assistant (#27).
+        - Fixed XML fragment serialization in KQ highlighter.
 
 0.30 2018-11-13
         - Rewrote backend:
diff --git a/dev/js/runner/all.html b/dev/js/runner/all.html
index d2d6f25..124cb76 100644
--- a/dev/js/runner/all.html
+++ b/dev/js/runner/all.html
@@ -41,6 +41,7 @@
         'spec/menuSpec',
         'spec/selectMenuSpec',
         'spec/panelSpec',
+        'spec/kqViewSpec',
         'spec/pluginSpec',
         'spec/queryCreatorSpec',
         'spec/corpusByMatchSpec',
diff --git a/dev/js/spec/kqViewSpec.js b/dev/js/spec/kqViewSpec.js
new file mode 100644
index 0000000..3870324
--- /dev/null
+++ b/dev/js/spec/kqViewSpec.js
@@ -0,0 +1,37 @@
+define(['view/result/koralquery','util'], function (kqClass) {
+  describe('KorAP.View.Result.KoralQuery', function () {
+
+    beforeEach(
+      function () {
+       KorAP.koralQuery = {} 
+      }
+    );
+
+    afterEach(
+      function () {
+        KorAP.koralQuery = {} 
+      }
+    );
+    
+    it('should be initializable', function () {
+      KorAP.koralQuery = {
+        "test" : "cool"
+      };
+      var kq = kqClass.create();
+      var content = kq.element().firstChild.textContent;
+      expect(content).toMatch(/test/);
+      expect(content).toMatch(/cool/);
+    });
+
+    it('should deal with XML fragments', function () {
+      KorAP.koralQuery = {
+        "test" : "Das ist <b>Super!</b>"
+      };
+      var kq = kqClass.create();
+      var content = kq.element().firstChild.textContent;
+      expect(content).toMatch(/test/);
+      expect(content).toMatch(/Das ist <b>Super!<\/b>/);
+    });
+
+  });
+});
diff --git a/dev/js/src/view/result/koralquery.js b/dev/js/src/view/result/koralquery.js
index 6060bb8..c456eee 100644
--- a/dev/js/src/view/result/koralquery.js
+++ b/dev/js/src/view/result/koralquery.js
@@ -18,8 +18,11 @@
       kq.setAttribute('id', 'koralquery');
 
       var kqInner = kq.addE('div');
-      kqInner.innerHTML = JSON.stringify(KorAP.koralQuery || {}, null, '  ');
 
+      kqInner.addT(
+        JSON.stringify(KorAP.koralQuery || {}, null, '  ')
+      );
+      
       // Highlight the view
       hljs.highlightBlock(kqInner);