Added test for interpolation in HTML component

formio · Apr 9, 2024 · 213b6a1 · 213b6a1
1 parent 080d67c
commit 213b6a1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/src/components/html/HTML.unit.js b/src/components/html/HTML.unit.js
@@ -33,15 +33,27 @@ describe('HTML Component', () => {
     });
   });
 
-  it('Should not execute scripts inside HTML component', (done) => {
+  it('Should not execute scripts inside HTML component, but execute interpolation properly', (done) => {
     const formElement = document.createElement('div');
     const form = new Webform(formElement);
 
     const alert = sinon.spy(window, 'alert');
     form.setForm(comp3).then(() => {
       setTimeout(() => {
         assert.equal(alert.callCount, 0);
-        done();
+        const div = form.element.querySelector('.myClass');
+        assert.equal(div.innerHTML.trim(), 'No Text');
+
+        const textField = form.getComponent(['textField']);
+        textField.setValue('apple', { modified: true });
+
+        setTimeout(() => {
+          const div = form.element.querySelector('.myClass');
+
+          assert.equal(div.innerHTML.trim(), 'apple');
+          assert.equal(div.className, 'myClass apple-class');
+          done();
+        }, 400);
       }, 200);
     })
       .catch(done);

diff --git a/src/components/html/fixtures/comp3.js b/src/components/html/fixtures/comp3.js
@@ -2,6 +2,14 @@ export default {
   type: 'form',
   display: 'form',
   components: [
+    {
+      label: 'Text Field',
+      applyMaskOn: 'change',
+      tableView: true,
+      key: 'textField',
+      type: 'textfield',
+      input: true,
+    },
     {
       label: 'HTML',
       attrs: [
@@ -10,8 +18,9 @@ export default {
           value: '',
         },
       ],
-      content: '<img src=1 onerror=alert("htmlContent")>',
-      refreshOnChange: false,
+      content: '<img src=1 onerror=alert("htmlContent")>\n<div class="myClass {{data.textField + \'-class\'}}">{{' +
+        ' data.textField ? data.textField : \'No Text\'}}</div>',
+      refreshOnChange: true,
       key: 'html',
       type: 'htmlelement',
       input: false,