Add DomWordReplacer tests; change 'alt' to 'title'

mooeypoo · Apr 18, 2021 · 836e778 · 836e778
1 parent af3f622
commit 836e778
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 10 deletions.
diff --git a/src/DomManager.js b/src/DomManager.js
@@ -125,7 +125,7 @@ class DomManager {
           const props = [];
           const cssClasses = [this.termClass];
           if (this.showOriginalTerm) {
-            props.push(`alt="${match}"`);
+            props.push(`title="${match}"`);
           }
           if (replacementData.ambiguous) {
             cssClasses.push(this.ambiguousClass);

diff --git a/src/DomWordReplacer.js b/src/DomWordReplacer.js
@@ -15,7 +15,7 @@ class DomWordReplacer {
    */
   constructor(dictDefinition, config) {
     this.manager = new DomManager(
-      new Dictionary(dictDefinition.name, dictDefinition),
+      new Dictionary(dictDefinition.name, dictDefinition.terms),
       config
     );
   }

diff --git a/test/DomManager.spec.js b/test/DomManager.spec.js
@@ -6,7 +6,7 @@ const wrapHtmlResult = str => {
   return `<html xmlns="http://www.w3.org/1999/xhtml"><head/><body>${str}</body></html>`
 };
 
-describe('DomWordReplacer test', () => {
+describe('DomManager test', () => {
   describe('HTML replacements', () => {
     const definition = [
       {
@@ -45,35 +45,35 @@ describe('DomWordReplacer test', () => {
       {
         msg: 'Single replacement in h1 tag',
         input: '<h1>Title with term1!</h1>',
-        expected: '<h1>Title with <span class="replaced-term" alt="term1">flippedterm1</span>!</h1>'
+        expected: '<h1>Title with <span class="replaced-term" title="term1">flippedterm1</span>!</h1>'
       },
       {
         msg: 'Multiple replacements in the same tag',
         input: '<p>Text with term1 and term3 together</p>',
-        expected: '<p>Text with <span class="replaced-term" alt="term1">flippedterm1</span> and <span class="replaced-term" alt="term3">flippedterm3</span> together</p>'
+        expected: '<p>Text with <span class="replaced-term" title="term1">flippedterm1</span> and <span class="replaced-term" title="term3">flippedterm3</span> together</p>'
       },
       {
         msg: 'Multiple replacements in hierarchical tags',
         input: '<div>Text with term1 <p>and term3</p> inside</div>',
-        expected: '<div>Text with <span class="replaced-term" alt="term1">flippedterm1</span> <p>and <span class="replaced-term" alt="term3">flippedterm3</span></p> inside</div>',
+        expected: '<div>Text with <span class="replaced-term" title="term1">flippedterm1</span> <p>and <span class="replaced-term" title="term3">flippedterm3</span></p> inside</div>',
       },
       {
         msg: 'Ambiguous replacement with multiple replacement options',
         input: '<p>This term term4amb is ambiguous</p>',
         expected: [
-          '<p>This term <span class="replaced-term ambiguous-term" alt="term4amb">flippedterm4ambopt1</span> is ambiguous</p>',
-          '<p>This term <span class="replaced-term ambiguous-term" alt="term4amb">flippedterm4ambopt2</span> is ambiguous</p>'
+          '<p>This term <span class="replaced-term ambiguous-term" title="term4amb">flippedterm4ambopt1</span> is ambiguous</p>',
+          '<p>This term <span class="replaced-term ambiguous-term" title="term4amb">flippedterm4ambopt2</span> is ambiguous</p>'
         ]
       },
       {
         msg: 'Multiple matches, with already-existing replacement class',
         input: '<div><span class="replaced-term">Text with term1</span> <p>and term3</p></div>',
-        expected: '<div><span class="replaced-term">Text with term1</span> <p>and <span class="replaced-term" alt="term3">flippedterm3</span></p></div>'
+        expected: '<div><span class="replaced-term">Text with term1</span> <p>and <span class="replaced-term" title="term3">flippedterm3</span></p></div>'
       },
       {
         msg: 'Skipping replacements inside tag properties',
         input: '<div>The term1 is replaced but <img title="this term3 should not be replaced"/> and this term3 is replaced.</div>',
-        expected: '<div>The <span class="replaced-term" alt="term1">flippedterm1</span> is replaced but <img title="this term3 should not be replaced"/> and this <span class="replaced-term" alt="term3">flippedterm3</span> is replaced.</div>',
+        expected: '<div>The <span class="replaced-term" title="term1">flippedterm1</span> is replaced but <img title="this term3 should not be replaced"/> and this <span class="replaced-term" title="term3">flippedterm3</span> is replaced.</div>',
       }
     ];
     testCases.forEach(t => {

diff --git a/test/DomWordReplacer.spec.js b/test/DomWordReplacer.spec.js
@@ -0,0 +1,46 @@
+import { expect } from 'chai';
+import DomWordReplacer from '../src/DomWordReplacer.js';
+
+const wrapHtmlResult = str => {
+  return `<html xmlns="http://www.w3.org/1999/xhtml"><head/><body>${str}</body></html>`
+};
+
+describe('DomWordReplacer test', () => {
+  const definition = {
+    "name": "Test dictionary",
+    "terms": [
+      {
+        "category": "Terminology",
+        "terms": {
+          "dict1": ["terminology"],
+          "dict2": ["reverseterminology"]
+        }
+      },
+      {
+        "category": "Terminology (Adj)",
+        "ambiguous": "dict1",
+        "terms": {
+          "dict1": ["adjective"],
+          "dict2": ["reverseadjective"]
+        }
+      }
+    ]
+  };
+  const replacer = new DomWordReplacer(definition, {
+    termClass: 'customClass',
+    ambiguousClass: 'customAmbiguousClass'
+  });
+
+  it('Replaces html fully', () => {
+    expect(replacer.replace(
+      '<p>terminology to replace and ambiguous adjective</p>',
+      'dict1',
+      'dict2'
+    )).to.equal(
+      wrapHtmlResult(
+        '<p><span class="customClass" title="terminology">reverseterminology</span>' +
+        ' to replace and ambiguous <span class="customClass customAmbiguousClass" title="adjective">reverseadjective</span></p>'
+      )
+    )
+  });
+});