SONAR-7365 Component doesn't highlight usage when it is also a keyword

2 files changed, 13 insertions, 10 deletions

diff --git a/server/sonar-web/src/main/js/components/source-viewer/helpers/code-with-issue-locations-helper.js b/server/sonar-web/src/main/js/components/source-viewer/helpers/code-with-issue-locations-helper.js
index a34f928b998..0345f56563d 100644
--- a/server/sonar-web/src/main/js/components/source-viewer/helpers/code-with-issue-locations-helper.js
+++ b/server/sonar-web/src/main/js/components/source-viewer/helpers/code-with-issue-locations-helper.js
@@ -47,20 +47,23 @@ function part (str, from, to, acc) {
 /**
  * Split a code html into tokens
  * @param {string} code
+ * @param {string} rootClassName
  * @returns {Array}
  */
-function splitByTokens (code) {
+function splitByTokens (code, rootClassName = '') {
   const container = document.createElement('div');
-  const tokens = [];
+  let tokens = [];
   container.innerHTML = code;
   [].forEach.call(container.childNodes, function (node) {
     if (node.nodeType === 1) {
       // ELEMENT NODE
-      tokens.push({ className: node.className, text: node.textContent });
+      const fullClassName = rootClassName ? (rootClassName + ' ' + node.className) : node.className;
+      const innerTokens = splitByTokens(node.innerHTML, fullClassName);
+      tokens = tokens.concat(innerTokens);
     }
     if (node.nodeType === 3) {
       // TEXT NODE
-      tokens.push({ className: '', text: node.nodeValue });
+      tokens.push({ className: rootClassName, text: node.nodeValue });
     }
   });
   return tokens;
diff --git a/server/sonar-web/tests/components/source-viewer-test.js b/server/sonar-web/tests/components/source-viewer-test.js
index 1a8219e6032..1ee6fee310d 100644
--- a/server/sonar-web/tests/components/source-viewer-test.js
+++ b/server/sonar-web/tests/components/source-viewer-test.js
@@ -72,18 +72,18 @@ describe('Source Viewer', function () {
       expect(result).to.equal('<span class="j">#include &lt;stdio.h&gt;</span>');
     });
 
-    // TODO SONAR-7365
-    it.skip('should parse syntax and usage highlighting', function () {
+    it('should parse syntax and usage highlighting', function () {
       var code = '<span class="k"><span class="sym-3 sym">this</span></span>',
+          expected = '<span class="k sym-3 sym">this</span>',
           result = helper(code, []);
-      expect(result).to.equal(code);
+      expect(result).to.equal(expected);
     });
 
-    // TODO SONAR-7365
-    it.skip('should parse nested tags', function () {
+    it('should parse nested tags', function () {
       var code = '<span class="k"><span class="sym-3 sym">this</span> is</span>',
+          expected = '<span class="k sym-3 sym">this</span><span class="k"> is</span>',
           result = helper(code, []);
-      expect(result).to.equal(code);
+      expect(result).to.equal(expected);
     });
   });
 });