@nutin/cli 1.3.0 → 2.0.0

package/templates/base/src/core/base-classes/base-component/helpers/dom.helper.test.js.hbs

@@ -0,0 +1,145 @@
+import { DomHelper } from '#root/dist/src/core/base-classes/base-component/helpers/dom.helper.js';
+
+describe('DomHelper', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    container.id = 'mount-target';
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+    container = null;
+  });
+
+  it('mountElement appends the element into a string selector target', () => {
+    const el = document.createElement('span');
+    DomHelper.mountElement(el, '#mount-target');
+    expect(container.contains(el)).toBe(true);
+  });
+
+  it('mountElement does nothing when the string selector target is not found', () => {
+    const el = document.createElement('span');
+    DomHelper.mountElement(el, '#does-not-exist');
+    expect(el.parentElement).toBe(null);
+  });
+
+  it('mountElement replaces an HTMLElement target with the element', () => {
+    const placeholder = document.createElement('div');
+    placeholder.className = 'placeholder';
+    container.appendChild(placeholder);
+
+    const el = document.createElement('span');
+    el.className = 'replacement';
+    DomHelper.mountElement(el, placeholder);
+
+    expect(container.contains(placeholder)).toBe(false);
+    expect(container.contains(el)).toBe(true);
+  });
+
+  it('createElement creates an element with the given tag name', () => {
+    const el = DomHelper.createElement('section');
+    expect(el.tagName).toBe('SECTION');
+  });
+
+  it('createElement sets sanitized innerHTML from the template', () => {
+    const el = DomHelper.createElement('div', '<p>hi</p><script>alert(1)</script>');
+    expect(el.innerHTML).toBe('<p>hi</p>');
+  });
+
+  it('createElement respects the trustLevel when sanitizing', () => {
+    const template = '<script>alert(1)</script>';
+    const el = DomHelper.createElement('div', template, 'trusted');
+    expect(el.innerHTML).toBe(template);
+  });
+
+  it('cleanupOptionalContent removes an optional img with no src', () => {
+    container.innerHTML = '<img data-optional>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('img')).toBe(null);
+  });
+
+  it('cleanupOptionalContent keeps an optional img that has a src', () => {
+    container.innerHTML = '<img data-optional src="pic.png">';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('img')).toBeDefined();
+  });
+
+  it('cleanupOptionalContent removes an optional input with no value', () => {
+    container.innerHTML = '<input data-optional>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('input')).toBe(null);
+  });
+
+  it('cleanupOptionalContent keeps an optional input that has a value', () => {
+    container.innerHTML = '<input data-optional value="hi">';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('input')).toBeDefined();
+  });
+
+  it('cleanupOptionalContent removes an optional textarea with no value', () => {
+    container.innerHTML = '<textarea data-optional></textarea>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('textarea')).toBe(null);
+  });
+
+  it('cleanupOptionalContent removes an optional source element with no src', () => {
+    container.innerHTML = '<video><source data-optional></video>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('source')).toBe(null);
+  });
+
+  it('cleanupOptionalContent keeps an optional source element that has a src', () => {
+    container.innerHTML = '<video><source data-optional src="movie.mp4"></video>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('source')).toBeDefined();
+  });
+
+  it('cleanupOptionalContent removes an optional element with empty textContent', () => {
+    container.innerHTML = '<span data-optional>   </span>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('span')).toBe(null);
+  });
+
+  it('cleanupOptionalContent removes an optional element whose textContent is the literal string "undefined"', () => {
+    container.innerHTML = '<span data-optional>undefined</span>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('span')).toBe(null);
+  });
+
+  it('cleanupOptionalContent keeps an optional element with real textContent', () => {
+    container.innerHTML = '<span data-optional>hello</span>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('span')).toBeDefined();
+  });
+
+  it('cleanupOptionalContent removes an element whose data-optional value is the literal string "undefined" or "null"', () => {
+    container.innerHTML = `
+      <span data-optional="undefined">has content</span>
+      <span data-optional="null">has content</span>
+    `;
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelectorAll('span').length).toBe(0);
+  });
+
+  it('cleanupOptionalContent keeps an element with data-optional="" and non-empty content — a bare/empty data-optional is a plain marker deferred to isEmpty(el), not a forced-removal signal', () => {
+    container.innerHTML = '<span data-optional="">has content</span>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelectorAll('span').length).toBe(1);
+  });
+
+  it('cleanupOptionalContent removes an element whose data-optional value is whitespace-only, even with real content', () => {
+    container.innerHTML = '<span data-optional="   ">has content</span>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelectorAll('span').length).toBe(0);
+  });
+
+  it('cleanupOptionalContent always strips the data-optional attribute from surviving elements', () => {
+    container.innerHTML = '<span data-optional>hello</span>';
+    DomHelper.cleanupOptionalContent();
+    const span = container.querySelector('span');
+    expect(span.hasAttribute('data-optional')).toBe(false);
+  });
+});

package/templates/base/src/core/base-classes/base-component/helpers/dom.helper.ts.hbs

@@ -24,6 +24,46 @@ export class DomHelper {
     element.innerHTML = SecurityHelper.sanitizeTemplate(template, trustLevel);
     return element;
   }
+  
+  public static cleanupOptionalContent(): void {
+    const isEmpty = (el: HTMLElement): boolean => {
+      if (el instanceof HTMLImageElement) {
+        return !el.src || el.src.trim() === "";
+      }
+
+      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+        return !el.value?.trim();
+      }
+
+      if (el instanceof HTMLMediaElement || el instanceof HTMLSourceElement) {
+        return !el.getAttribute("src");
+      }
+
+      const content = el.textContent?.trim();
+      return !content || content === "undefined";
+    };
+
+    const isValueUndefined = (el: HTMLElement): boolean => {
+      const value = el.getAttribute("data-optional");
+      /*
+      A bare/empty data-optional (getAttribute returns "") is a plain marker and
+      defers entirely to isEmpty(el) below rather than forcing removal itself.
+      Only a present-but-blank value (whitespace) or the literal string produced
+      by interpolating an undefined/null expression counts as "value undefined".
+      */
+      if (!value) return false;
+      return (
+        value.trim() === '' ||
+        value === "undefined" ||
+        value === "null"
+      );
+    }
+
+    document.querySelectorAll<HTMLElement>("[data-optional]").forEach(el => {
+      if (isValueUndefined(el) || isEmpty(el)) el.remove();
+      el.removeAttribute("data-optional");
+    });
+  }
 
   private static appendOrReplace(config: DomElementConfig) {
     if (config.target instanceof HTMLElement) {
@@ -35,7 +75,7 @@ export class DomHelper {
         config.target.replaceWith(config.element);
       }
     } else {
-      console.warn('Mount target not found:', config.mountTarget);
+      return;
     }
   }
 }

package/templates/base/src/core/base-classes/base-component/helpers/event.helper.test.js.hbs

@@ -0,0 +1,88 @@
+import { EventHelper } from '#root/dist/src/core/base-classes/base-component/helpers/event.helper.js';
+
+describe('EventHelper', () => {
+  let container;
+  let eventListeners;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    eventListeners = [];
+  });
+
+  afterEach(() => {
+    container.remove();
+    container = null;
+  });
+
+  it('binds a handler resolved from data-event and calls it with `this` set to the component', () => {
+    container.innerHTML = '<button data-event="click:handleClick"></button>';
+    const button = container.querySelector('button');
+
+    let calledWith = null;
+    const component = {
+      handleClick(...args) {
+        calledWith = { self: this, args };
+      },
+    };
+
+    EventHelper.bindEvents(component, container, eventListeners);
+    click(button);
+
+    expect(calledWith.self).toBe(component);
+    expect(calledWith.args.length).toBe(0);
+  });
+
+  it('resolves comma-separated raw args via TokenHelper before invoking the handler', () => {
+    container.innerHTML = '<button data-event="click:handleClick:1,\'hi\'" id="btn"></button>';
+    const button = container.querySelector('button');
+
+    let received = null;
+    const component = {
+      handleClick(...args) { received = args; },
+    };
+
+    EventHelper.bindEvents(component, container, eventListeners);
+    click(button);
+
+    expect(received[0]).toBe(1);
+    expect(received[1]).toBe('hi');
+  });
+
+  it('does nothing when the handler name is missing', () => {
+    container.innerHTML = '<button data-event="click:"></button>';
+    const component = {};
+    EventHelper.bindEvents(component, container, eventListeners);
+    expect(eventListeners.length).toBe(0);
+  });
+
+  it('does nothing when the referenced handler does not exist or is not a function', () => {
+    container.innerHTML = '<button data-event="click:missingHandler"></button>';
+    const component = { missingHandler: 'not-a-function' };
+    EventHelper.bindEvents(component, container, eventListeners);
+    expect(eventListeners.length).toBe(0);
+  });
+
+  it('tracks each bound listener in the eventListeners array', () => {
+    container.innerHTML = '<button data-event="click:handleClick"></button>';
+    const component = { handleClick() {} };
+
+    EventHelper.bindEvents(component, container, eventListeners);
+
+    expect(eventListeners.length).toBe(1);
+    expect(eventListeners[0][1]).toBe('click');
+  });
+
+  it('destroyEvents removes every tracked listener', () => {
+    container.innerHTML = '<button data-event="click:handleClick"></button>';
+    const button = container.querySelector('button');
+    let callCount = 0;
+    const component = { handleClick() { callCount++; } };
+
+    EventHelper.bindEvents(component, container, eventListeners);
+    EventHelper.destroyEvents(eventListeners);
+
+    click(button);
+    expect(callCount).toBe(0);
+  });
+});

package/templates/base/src/core/base-classes/base-component/helpers/event.helper.ts.hbs

@@ -3,13 +3,13 @@ import { TokenHelper } from './token.helper.js';
 
 export class EventHelper {
   public static bindEvents(
-    component: BaseComponent, 
-    element: HTMLElement, 
-    eventListeners: Array<[string, EventListener]>
+    component: BaseComponent,
+    element: HTMLElement,
+    eventListeners: Array<[EventTarget, string, EventListener]>
   ): void {
     element.querySelectorAll('[data-event]').forEach(el => {
-      const parts = el.getAttribute('data-event')!.split(':');
-      const [eventName, handlerName, argsString] = parts;
+      const [eventName, handlerName, ...argParts] = el.getAttribute('data-event')!.split(':');
+      const argsString = argParts.length ? argParts.join(':') : '';
 
       if (!handlerName || !eventName) return;
 
@@ -24,11 +24,10 @@ export class EventHelper {
   }
 
   public static destroyEvents(
-    element: HTMLElement, 
-    eventListeners: Array<[string, EventListener]>
+    eventListeners: Array<[EventTarget, string, EventListener]>
   ): void {
-    eventListeners.forEach(([event, listener]) => {
-      element.removeEventListener(event, listener);
+    eventListeners.forEach(([target, event, listener]) => {
+      target.removeEventListener(event, listener);
     });
   }
 
@@ -46,12 +45,12 @@ export class EventHelper {
   }
 
   private static addEvent(
-    target: EventTarget, 
-    event: string, 
-    listener: EventListener, 
-    eventListeners: Array<[string, EventListener]>
+    target: EventTarget,
+    event: string,
+    listener: EventListener,
+    eventListeners: Array<[EventTarget, string, EventListener]>
   ): void {
     target.addEventListener(event, listener);
-    eventListeners.push([event, listener]);
+    eventListeners.push([target, event, listener]);
   }
 }

package/templates/base/src/core/base-classes/base-component/helpers/i18n.helper.test.js.hbs

@@ -0,0 +1,62 @@
+import { I18nHelper } from '#root/dist/src/core/base-classes/base-component/helpers/i18n.helper.js';
+import { I18nService } from '#root/dist/src/core/services/index.js';
+
+describe('I18nHelper', () => {
+  let container;
+  let originalTranslate;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    originalTranslate = I18nService.translate;
+  });
+
+  afterEach(() => {
+    I18nService.translate = originalTranslate;
+    container.remove();
+    container = null;
+  });
+
+  it('sets the placeholder of an input element to the translated value', () => {
+    I18nService.translate = (key) => key === 'greeting' ? 'Hello' : key;
+    container.innerHTML = '<input data-i18n="greeting">';
+
+    I18nHelper.parseI18nAttributes(container);
+
+    const input = container.querySelector('input');
+    expect(input.placeholder).toBe('Hello');
+  });
+
+  it('sets the textContent of a non-input element to the translated value', () => {
+    I18nService.translate = (key) => key === 'greeting' ? 'Hello' : key;
+    container.innerHTML = '<span data-i18n="greeting"></span>';
+
+    I18nHelper.parseI18nAttributes(container);
+
+    const span = container.querySelector('span');
+    expect(span.textContent).toBe('Hello');
+  });
+
+  it('passes the element textContent as the fallback to translate', () => {
+    const calls = [];
+    I18nService.translate = (key, fallback) => { calls.push({ key, fallback }); return fallback; };
+    container.innerHTML = '<span data-i18n="missing.key">fallback text</span>';
+
+    I18nHelper.parseI18nAttributes(container);
+
+    expect(calls[0].key).toBe('missing.key');
+    expect(calls[0].fallback).toBe('fallback text');
+    expect(container.querySelector('span').textContent).toBe('fallback text');
+  });
+
+  it('processes every element with a data-i18n attribute', () => {
+    I18nService.translate = (key) => `[${key}]`;
+    container.innerHTML = '<span data-i18n="a"></span><span data-i18n="b"></span>';
+
+    I18nHelper.parseI18nAttributes(container);
+
+    const spans = container.querySelectorAll('span');
+    expect(spans[0].textContent).toBe('[a]');
+    expect(spans[1].textContent).toBe('[b]');
+  });
+});

package/templates/base/src/core/base-classes/base-component/helpers/pipe.helper.test.js.hbs

@@ -0,0 +1,82 @@
+import { PipeHelper } from '#root/dist/src/core/base-classes/base-component/helpers/pipe.helper.js';
+import { AppPipeRegistry } from '#root/dist/src/core/services/index.js';
+
+describe('PipeHelper', () => {
+  let container;
+
+  beforeAll(() => {
+    AppPipeRegistry.register('upper', (value) => String(value).toUpperCase());
+    AppPipeRegistry.register('suffix', (value, suffix) => `${value}${suffix}`);
+    AppPipeRegistry.register('join', (value, a, b) => `${value}-${a}-${b}`);
+  });
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+    container = null;
+  });
+
+  it('reads from textContent and writes the piped result back to textContent for a plain element', () => {
+    container.innerHTML = '<span data-pipe="upper">hi</span>';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('span').textContent).toBe('HI');
+  });
+
+  it('reads from .value and writes the piped result back to .value for an input element', () => {
+    container.innerHTML = '<input data-pipe="upper" value="hi">';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('input').value).toBe('HI');
+  });
+
+  it('reads from .value for a textarea element', () => {
+    container.innerHTML = '<textarea data-pipe="upper">hi</textarea>';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('textarea').value).toBe('HI');
+  });
+
+  it('prefers data-pipe-source over the element value when present', () => {
+    container.innerHTML = '<span data-pipe="upper" data-pipe-source="from source">ignored</span>';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('span').textContent).toBe('FROM SOURCE');
+  });
+
+  it('chains multiple pipes separated by |', () => {
+    container.innerHTML = '<span data-pipe="upper|suffix:!">hi</span>';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('span').textContent).toBe('HI!');
+  });
+
+  it('passes comma-separated arguments to the pipe function', () => {
+    container.innerHTML = '<span data-pipe="join:x,y">hi</span>';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('span').textContent).toBe('hi-x-y');
+  });
+
+  it('does nothing when the element has no data-pipe attribute', () => {
+    container.innerHTML = '<span>hi</span>';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('span').textContent).toBe('hi');
+  });
+
+  it('does nothing when the data-pipe attribute is empty', () => {
+    container.innerHTML = '<span data-pipe="">hi</span>';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('span').textContent).toBe('hi');
+  });
+
+  it('prefers data-pipe-source over .value for an input element', () => {
+    container.innerHTML = '<input data-pipe="upper" data-pipe-source="from source" value="ignored">';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('input').value).toBe('FROM SOURCE');
+  });
+
+  it('stops processing pipes when a pipe segment resolves to an empty name', () => {
+    container.innerHTML = '<span data-pipe=":arg">hi</span>';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('span').textContent).toBe('hi');
+  });
+});

package/templates/base/src/core/base-classes/base-component/helpers/security.helper.test.js.hbs

@@ -0,0 +1,142 @@
+import { SecurityHelper } from '#root/dist/src/core/base-classes/base-component/helpers/security.helper.js';
+
+describe('SecurityHelper', () => {
+  it('sanitizeTemplate returns an empty string for null and undefined', () => {
+    expect(SecurityHelper.sanitizeTemplate(null)).toBe('');
+    expect(SecurityHelper.sanitizeTemplate(undefined)).toBe('');
+  });
+
+  it('sanitizeTemplate stringifies non-string values before sanitizing', () => {
+    expect(SecurityHelper.sanitizeTemplate(42)).toBe('42');
+    expect(SecurityHelper.sanitizeTemplate(true)).toBe('true');
+  });
+
+  it('sanitizeTemplate defaults to the "normal" trust level', () => {
+    const result = SecurityHelper.sanitizeTemplate('<div><script>alert(1)</script></div>');
+    expect(result).toBe('<div></div>');
+  });
+
+  it('sanitizeTemplate "trusted" level leaves the template completely unchanged', () => {
+    const template = '<script>alert(1)</script><div onclick="x()">hi</div>';
+    expect(SecurityHelper.sanitizeTemplate(template, 'trusted')).toBe(template);
+  });
+
+  it('sanitizeTemplate "normal" level strips <script> tags', () => {
+    const result = SecurityHelper.sanitizeTemplate('<p>hi</p><script>alert(1)</script>', 'normal');
+    expect(result).toBe('<p>hi</p>');
+  });
+
+  it('sanitizeTemplate "normal" level strips inline on* event handlers', () => {
+    const result = SecurityHelper.sanitizeTemplate('<button onclick="doBad()">Click</button>', 'normal');
+    expect(result).toContain('<button');
+    expect(result.includes('onclick')).toBe(false);
+  });
+
+  it('sanitizeTemplate "normal" level keeps iframes (only "strict" removes them)', () => {
+    const result = SecurityHelper.sanitizeTemplate('<iframe src="https://example.com"></iframe>', 'normal');
+    expect(result).toContain('<iframe');
+  });
+
+  it('sanitizeTemplate "strict" level also strips iframe, object and embed tags', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<iframe src="x"></iframe><object data="x"></object><embed src="x">',
+      'strict'
+    );
+    expect(result.includes('<iframe')).toBe(false);
+    expect(result.includes('<object')).toBe(false);
+    expect(result.includes('<embed')).toBe(false);
+  });
+
+  it('sanitizeTemplate "strict" level strips javascript: hrefs and data: srcs', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<a href="javascript:alert(1)">link</a><img src="data:text/html,evil">',
+      'strict'
+    );
+    expect(result.includes('javascript:')).toBe(false);
+    expect(result.includes('src="data:')).toBe(false);
+  });
+
+  it('sanitizeTemplate "strict" level still strips scripts and inline handlers like normal', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<script>bad()</script><div onmouseover="bad()">hi</div>',
+      'strict'
+    );
+    expect(result.includes('<script>')).toBe(false);
+    expect(result.includes('onmouseover')).toBe(false);
+  });
+
+  it('sanitizeTemplate "normal" level strips unquoted event handler attributes', () => {
+    const result = SecurityHelper.sanitizeTemplate('<img src=x onerror=alert(1)>', 'normal');
+    expect(result.includes('onerror')).toBe(false);
+  });
+
+  it('sanitizeTemplate "normal" level is not fooled by nested-tag script reassembly', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<scr<script></script>ipt>alert(document.domain)</scr<script></script>ipt>',
+      'normal'
+    );
+    // A naive substring check is misleading here: the sanitized output can still
+    // contain the literal text "<script>" as part of an inert malformed tag name
+    // (e.g. "SCR<SCRIPT"), which HTML parsers never re-interpret as a real <script>
+    // element. Re-parse the result and assert no live <script> element exists.
+    const reparsed = document.createElement('template');
+    reparsed.innerHTML = result;
+    expect(reparsed.content.querySelector('script')).toBe(null);
+  });
+
+  it('sanitizeTemplate "normal" level is not fooled by nested-tag event handler reassembly', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<img src=x onerr<script>x</script>or=alert(1)>',
+      'normal'
+    );
+    expect(result.includes('onerror')).toBe(false);
+  });
+
+  it('sanitizeTemplate "strict" level strips whitespace-obfuscated javascript: URLs', () => {
+    const result = SecurityHelper.sanitizeTemplate('<a href="java\tscript:alert(1)">x</a>', 'strict');
+    expect(result.includes('javascript:')).toBe(false);
+  });
+
+  it('sanitizeTemplate "strict" level strips javascript: from action/formaction/poster/background too', () => {
+    const result = SecurityHelper.sanitizeTemplate('<form action="javascript:alert(1)">x</form>', 'strict');
+    expect(result.includes('javascript:')).toBe(false);
+  });
+
+  it('sanitizeInputElement escapes the value of an input element', () => {
+    const input = document.createElement('input');
+    input.value = '<script>alert(1)</script>';
+    expect(SecurityHelper.sanitizeInputElement(input)).toBe('&lt;script&gt;alert(1)&lt;/script&gt;');
+  });
+
+  it('sanitizeInputElement escapes the value of a textarea element', () => {
+    const textarea = document.createElement('textarea');
+    textarea.value = '<b>bold</b>';
+    expect(SecurityHelper.sanitizeInputElement(textarea)).toBe('&lt;b&gt;bold&lt;/b&gt;');
+  });
+
+  it('sanitizeInputElement escapes innerText for contenteditable elements', () => {
+    const div = document.createElement('div');
+    div.setAttribute('contenteditable', 'true');
+    div.innerText = '<i>hi</i>';
+    expect(SecurityHelper.sanitizeInputElement(div)).toBe('&lt;i&gt;hi&lt;/i&gt;');
+  });
+
+  it('sanitizeInputElement returns an empty string for a plain, non-editable element', () => {
+    const div = document.createElement('div');
+    expect(SecurityHelper.sanitizeInputElement(div)).toBe('');
+  });
+
+  it('escapeHtml escapes all special characters', () => {
+    expect(SecurityHelper.escapeHtml(`<div class="a" data='b'>&</div>`))
+      .toBe('&lt;div class=&quot;a&quot; data=&#039;b&#039;&gt;&amp;&lt;/div&gt;');
+  });
+
+  it('escapeHtml returns an empty string for null and undefined', () => {
+    expect(SecurityHelper.escapeHtml(null)).toBe('');
+    expect(SecurityHelper.escapeHtml(undefined)).toBe('');
+  });
+
+  it('escapeHtml stringifies non-string values before escaping', () => {
+    expect(SecurityHelper.escapeHtml(123)).toBe('123');
+  });
+});