meno-core 1.0.53 → 1.1.0

package/lib/client/scripts/ScriptExecutor.test.ts

@@ -1,10 +1,10 @@
-import { test, expect, describe, beforeEach, afterEach, mock, spyOn } from "bun:test";
-import { ScriptExecutor } from "./ScriptExecutor";
-import { ComponentRegistry } from "../componentRegistry";
-import { ElementRegistry } from "../elementRegistry";
-import type { ComponentDefinition } from "../../shared/types";
+import { test, expect, describe, beforeEach, afterEach, mock, spyOn } from 'bun:test';
+import { ScriptExecutor } from './ScriptExecutor';
+import { ComponentRegistry } from '../componentRegistry';
+import { ElementRegistry } from '../elementRegistry';
+import type { ComponentDefinition } from '../../shared/types';
 
-describe("ScriptExecutor", () => {
+describe('ScriptExecutor', () => {
   let componentRegistry: ComponentRegistry;
   let elementRegistry: ElementRegistry;
   let scriptExecutor: ScriptExecutor;
@@ -23,7 +23,7 @@ describe("ScriptExecutor", () => {
     // Track executed code by intercepting Function constructor
     executedCode = [];
     originalFunction = global.Function;
-    functionSpy = spyOn(global, "Function").mockImplementation(((...args: any[]) => {
+    functionSpy = spyOn(global, 'Function').mockImplementation(((...args: any[]) => {
       if (args.length > 0 && typeof args[args.length - 1] === 'string') {
         const code = args[args.length - 1];
         // Only track ScriptExecutor calls (they contain "Component:" comment)
@@ -41,8 +41,8 @@ describe("ScriptExecutor", () => {
     executedCode = [];
   });
 
-  describe("constructor", () => {
-    test("should create instance", () => {
+  describe('constructor', () => {
+    test('should create instance', () => {
       const executor = new ScriptExecutor({
         componentRegistry,
         elementRegistry,
@@ -51,63 +51,63 @@ describe("ScriptExecutor", () => {
     });
   });
 
-  describe("execute", () => {
-    test("should skip components without JavaScript", () => {
+  describe('execute', () => {
+    test('should skip components without JavaScript', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
       scriptExecutor.execute();
 
       expect(executedCode.length).toBe(0);
     });
 
-    test("should execute JavaScript without templates once", () => {
+    test('should execute JavaScript without templates once', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: "console.log('test');",
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
       scriptExecutor.execute();
 
       expect(executedCode.length).toBe(1);
-      expect(executedCode[0]).toContain("Component: TestComponent");
+      expect(executedCode[0]).toContain('Component: TestComponent');
       expect(executedCode[0]).toContain("console.log('test');");
     });
 
     // Template-based tests require full ElementRegistry from @meno/studio
-    test.skip("should execute JavaScript with templates per instance (requires @meno/studio ElementRegistry)", () => {
+    test.skip('should execute JavaScript with templates per instance (requires @meno/studio ElementRegistry)', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: "console.log('{{name}}');",
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
       // Register component instances with props
-      const mockElement1 = document.createElement("div");
-      const mockElement2 = document.createElement("div");
-      elementRegistry.register([0], mockElement1, "TestComponent", true, {
-        name: "Instance1",
+      const mockElement1 = document.createElement('div');
+      const mockElement2 = document.createElement('div');
+      elementRegistry.register([0], mockElement1, 'TestComponent', true, {
+        name: 'Instance1',
       });
-      elementRegistry.register([1], mockElement2, "TestComponent", true, {
-        name: "Instance2",
+      elementRegistry.register([1], mockElement2, 'TestComponent', true, {
+        name: 'Instance2',
       });
 
       scriptExecutor.execute();
@@ -116,61 +116,61 @@ describe("ScriptExecutor", () => {
       expect(executedCode.length).toBe(2);
     });
 
-    test("should execute JavaScript without templates only once for multiple instances", () => {
+    test('should execute JavaScript without templates only once for multiple instances', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: "console.log('test');",
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
       // Register multiple instances
-      const mockElement1 = document.createElement("div");
-      const mockElement2 = document.createElement("div");
-      elementRegistry.register([0], mockElement1, "TestComponent", true, {
-        name: "Instance1",
+      const mockElement1 = document.createElement('div');
+      const mockElement2 = document.createElement('div');
+      elementRegistry.register([0], mockElement1, 'TestComponent', true, {
+        name: 'Instance1',
       });
-      elementRegistry.register([1], mockElement2, "TestComponent", true, {
-        name: "Instance2",
+      elementRegistry.register([1], mockElement2, 'TestComponent', true, {
+        name: 'Instance2',
       });
 
       scriptExecutor.execute();
 
       // Should only execute once (no templates - executes once per component type)
       expect(executedCode.length).toBe(1);
-      expect(executedCode[0]).toContain("Component: TestComponent");
+      expect(executedCode[0]).toContain('Component: TestComponent');
       expect(executedCode[0]).toContain("console.log('test');");
     });
 
-    test.skip("should handle multiple components with mixed template/non-template JavaScript (requires @meno/studio ElementRegistry)", () => {
+    test.skip('should handle multiple components with mixed template/non-template JavaScript (requires @meno/studio ElementRegistry)', () => {
       const componentDef1: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: "console.log('Component1');",
         },
       };
 
       const componentDef2: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: "console.log('{{name}}');",
         },
       };
 
-      componentRegistry.register("Component1", componentDef1);
-      componentRegistry.register("Component2", componentDef2);
+      componentRegistry.register('Component1', componentDef1);
+      componentRegistry.register('Component2', componentDef2);
 
-      const mockElement = document.createElement("div");
-      elementRegistry.register([0], mockElement, "Component2", true, {
-        name: "Component2Instance",
+      const mockElement = document.createElement('div');
+      elementRegistry.register([0], mockElement, 'Component2', true, {
+        name: 'Component2Instance',
       });
 
       scriptExecutor.execute();
@@ -180,17 +180,17 @@ describe("ScriptExecutor", () => {
       expect(executedCode.length).toBe(2);
     });
 
-    test("should handle fallback for components without instances", () => {
+    test('should handle fallback for components without instances', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: "console.log('fallback');",
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
       // No instances registered
       scriptExecutor.execute();
@@ -201,21 +201,21 @@ describe("ScriptExecutor", () => {
       expect(() => scriptExecutor.execute()).not.toThrow();
     });
 
-    test("should handle template processing errors gracefully", () => {
+    test('should handle template processing errors gracefully', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: "console.log('{{invalid.prop}}');",
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
-      const mockElement = document.createElement("div");
-      elementRegistry.register([0], mockElement, "TestComponent", true, {
-        name: "test",
+      const mockElement = document.createElement('div');
+      elementRegistry.register([0], mockElement, 'TestComponent', true, {
+        name: 'test',
       });
 
       const consoleErrorSpy = mock(() => {});
@@ -229,17 +229,17 @@ describe("ScriptExecutor", () => {
       console.error = originalConsoleError;
     });
 
-    test("should handle JavaScript execution errors gracefully", () => {
+    test('should handle JavaScript execution errors gracefully', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: "throw new Error('test error');",
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
       const consoleErrorSpy = mock(() => {});
       const originalConsoleError = console.error;
@@ -252,21 +252,21 @@ describe("ScriptExecutor", () => {
       console.error = originalConsoleError;
     });
 
-    test("should handle missing component props gracefully", () => {
+    test('should handle missing component props gracefully', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: "console.log('{{name}}');",
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
       // Register element without props
-      const mockElement = document.createElement("div");
-      elementRegistry.register([0], mockElement, "TestComponent", true);
+      const mockElement = document.createElement('div');
+      elementRegistry.register([0], mockElement, 'TestComponent', true);
 
       const consoleErrorSpy = mock(() => {});
       const originalConsoleError = console.error;
@@ -279,11 +279,11 @@ describe("ScriptExecutor", () => {
       console.error = originalConsoleError;
     });
 
-    test("should handle errors during execution", () => {
+    test('should handle errors during execution', () => {
       // Force an error by making getAll throw
       const originalGetAll = componentRegistry.getAll.bind(componentRegistry);
       componentRegistry.getAll = mock(() => {
-        throw new Error("Test error");
+        throw new Error('Test error');
       }) as any;
 
       // Should not throw - handles error gracefully
@@ -293,157 +293,157 @@ describe("ScriptExecutor", () => {
       componentRegistry.getAll = originalGetAll;
     });
 
-    test("should wrap JavaScript in IIFE for scoping", () => {
+    test('should wrap JavaScript in IIFE for scoping', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
-          javascript: "const x = 1;",
+          structure: { type: 'node', tag: 'div' },
+          javascript: 'const x = 1;',
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
       scriptExecutor.execute();
 
       expect(executedCode.length).toBe(1);
-      expect(executedCode[0]).toContain("(function()");
-      expect(executedCode[0]).toContain("})();");
+      expect(executedCode[0]).toContain('(function()');
+      expect(executedCode[0]).toContain('})();');
     });
   });
 
-  describe("executeForComponent", () => {
-    test("should execute JavaScript for specific component", () => {
+  describe('executeForComponent', () => {
+    test('should execute JavaScript for specific component', () => {
       const componentDef1: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: "console.log('Component1');",
         },
       };
 
       const componentDef2: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: "console.log('Component2');",
         },
       };
 
-      componentRegistry.register("Component1", componentDef1);
-      componentRegistry.register("Component2", componentDef2);
+      componentRegistry.register('Component1', componentDef1);
+      componentRegistry.register('Component2', componentDef2);
 
-      scriptExecutor.executeForComponent("Component1");
+      scriptExecutor.executeForComponent('Component1');
 
       // Only Component1 should be executed
       expect(executedCode.length).toBe(1);
-      expect(executedCode[0]).toContain("Component: Component1");
+      expect(executedCode[0]).toContain('Component: Component1');
       expect(executedCode[0]).toContain("console.log('Component1');");
     });
 
-    test.skip("should execute JavaScript with templates for specific component (requires @meno/studio ElementRegistry)", () => {
+    test.skip('should execute JavaScript with templates for specific component (requires @meno/studio ElementRegistry)', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: "console.log('{{name}}');",
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
-      const mockElement1 = document.createElement("div");
-      const mockElement2 = document.createElement("div");
-      elementRegistry.register([0], mockElement1, "TestComponent", true, {
-        name: "Instance1",
+      const mockElement1 = document.createElement('div');
+      const mockElement2 = document.createElement('div');
+      elementRegistry.register([0], mockElement1, 'TestComponent', true, {
+        name: 'Instance1',
       });
-      elementRegistry.register([1], mockElement2, "TestComponent", true, {
-        name: "Instance2",
+      elementRegistry.register([1], mockElement2, 'TestComponent', true, {
+        name: 'Instance2',
       });
 
-      scriptExecutor.executeForComponent("TestComponent");
+      scriptExecutor.executeForComponent('TestComponent');
 
       // Each instance gets its own execution
       expect(executedCode.length).toBe(2);
     });
 
-    test("should skip if component has no JavaScript", () => {
+    test('should skip if component has no JavaScript', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
-      scriptExecutor.executeForComponent("TestComponent");
+      scriptExecutor.executeForComponent('TestComponent');
 
       expect(executedCode.length).toBe(0);
     });
 
-    test("should handle non-existent component gracefully", () => {
+    test('should handle non-existent component gracefully', () => {
       const consoleErrorSpy = mock(() => {});
       const originalConsoleError = console.error;
       console.error = consoleErrorSpy as any;
 
-      expect(() => scriptExecutor.executeForComponent("NonExistent")).not.toThrow();
+      expect(() => scriptExecutor.executeForComponent('NonExistent')).not.toThrow();
 
       // Restore
       console.error = originalConsoleError;
     });
 
-    test("should handle errors during execution for specific component", () => {
+    test('should handle errors during execution for specific component', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: "throw new Error('test');",
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
       const consoleErrorSpy = mock(() => {});
       const originalConsoleError = console.error;
       console.error = consoleErrorSpy as any;
 
-      expect(() => scriptExecutor.executeForComponent("TestComponent")).not.toThrow();
+      expect(() => scriptExecutor.executeForComponent('TestComponent')).not.toThrow();
 
       // Restore
       console.error = originalConsoleError;
     });
   });
 
-  describe("per-element bind dedup (defineVars path)", () => {
+  describe('per-element bind dedup (defineVars path)', () => {
     // Helper: counter on window that the executed user JS bumps. Reset between
     // tests so cross-test pollution can't mask a stuck observer / repeated bind.
-    const COUNTER_KEY = "__bindCounter";
+    const COUNTER_KEY = '__bindCounter';
     const win = window as unknown as Record<string, unknown>;
 
     beforeEach(() => {
       win[COUNTER_KEY] = 0;
-      document.body.innerHTML = "";
+      document.body.innerHTML = '';
     });
 
     afterEach(() => {
       delete win[COUNTER_KEY];
       delete (window as unknown as { __menoShouldBind?: unknown }).__menoShouldBind;
-      document.body.innerHTML = "";
+      document.body.innerHTML = '';
     });
 
-    const registerCounterComponent = (name = "BoundComp") => {
+    const registerCounterComponent = (name = 'BoundComp') => {
       const def: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: `window.${COUNTER_KEY} = (window.${COUNTER_KEY} || 0) + 1;`,
           defineVars: true,
         },
@@ -453,16 +453,16 @@ describe("ScriptExecutor", () => {
     };
 
     const mountInstance = (componentName: string, propsByComponent: Record<string, unknown> = {}) => {
-      const el = document.createElement("div");
-      el.setAttribute("data-component", componentName);
-      el.setAttribute("data-props", JSON.stringify({ [componentName]: propsByComponent }));
+      const el = document.createElement('div');
+      el.setAttribute('data-component', componentName);
+      el.setAttribute('data-props', JSON.stringify({ [componentName]: propsByComponent }));
       document.body.appendChild(el);
       return el;
     };
 
-    test("re-executing execute() does not re-run JS on the same element", () => {
+    test('re-executing execute() does not re-run JS on the same element', () => {
       registerCounterComponent();
-      mountInstance("BoundComp");
+      mountInstance('BoundComp');
       // ScriptExecutor under test is the one from outer beforeEach — it
       // installed its host hook on window during construction.
 
@@ -475,47 +475,47 @@ describe("ScriptExecutor", () => {
 
     test("a newly mounted element binds on the next execute(), already-bound ones don't re-run", () => {
       registerCounterComponent();
-      mountInstance("BoundComp");
+      mountInstance('BoundComp');
 
       scriptExecutor.execute();
       expect(win[COUNTER_KEY]).toBe(1);
 
       // Simulate a structural commit that added another instance of the same component.
-      mountInstance("BoundComp");
+      mountInstance('BoundComp');
       scriptExecutor.execute();
 
       // Only the new element should have run; the original is already bound.
       expect(win[COUNTER_KEY]).toBe(2);
     });
 
-    test("two component names on the same element each bind once independently", () => {
+    test('two component names on the same element each bind once independently', () => {
       // Register A and B, each with defineVars and its own counter.
       const defA: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: `window.__counterA = (window.__counterA || 0) + 1;`,
           defineVars: true,
         },
       };
       const defB: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: `window.__counterB = (window.__counterB || 0) + 1;`,
           defineVars: true,
         },
       };
-      componentRegistry.register("A", defA);
-      componentRegistry.register("B", defB);
+      componentRegistry.register('A', defA);
+      componentRegistry.register('B', defB);
 
       // Compose A and B on a single element via the space-separated data-component
       // token list. querySelectorAll('[data-component~="A"]') matches this too.
-      const el = document.createElement("div");
-      el.setAttribute("data-component", "A B");
-      el.setAttribute("data-props", JSON.stringify({ A: {}, B: {} }));
+      const el = document.createElement('div');
+      el.setAttribute('data-component', 'A B');
+      el.setAttribute('data-props', JSON.stringify({ A: {}, B: {} }));
       document.body.appendChild(el);
 
       scriptExecutor.execute();
@@ -529,9 +529,9 @@ describe("ScriptExecutor", () => {
       delete (window as unknown as { __counterB?: unknown }).__counterB;
     });
 
-    test("executeForElement bypasses the bind dedup (prop-edit reactivity must still re-run)", () => {
+    test('executeForElement bypasses the bind dedup (prop-edit reactivity must still re-run)', () => {
       registerCounterComponent();
-      const el = mountInstance("BoundComp");
+      const el = mountInstance('BoundComp');
 
       scriptExecutor.execute();
       expect(win[COUNTER_KEY]).toBe(1);
@@ -539,20 +539,20 @@ describe("ScriptExecutor", () => {
       // Prop edit on the same element — the editor calls executeForElement
       // to push fresh props. It MUST run the body again even though
       // boundElements already marks (el, "BoundComp") as bound.
-      scriptExecutor.executeForElement("BoundComp", el, {});
+      scriptExecutor.executeForElement('BoundComp', el, {});
       expect(win[COUNTER_KEY]).toBe(2);
 
-      scriptExecutor.executeForElement("BoundComp", el, {});
+      scriptExecutor.executeForElement('BoundComp', el, {});
       expect(win[COUNTER_KEY]).toBe(3);
     });
 
-    test("with no host hook installed the wrapper binds on every execute() (legacy fallback)", () => {
+    test('with no host hook installed the wrapper binds on every execute() (legacy fallback)', () => {
       // Tear down the host hook the constructor installed. This is what
       // direct-browser / non-runtime contexts look like — no editor host.
       delete (window as unknown as { __menoShouldBind?: unknown }).__menoShouldBind;
 
       registerCounterComponent();
-      mountInstance("BoundComp");
+      mountInstance('BoundComp');
 
       scriptExecutor.execute();
       scriptExecutor.execute();
@@ -564,37 +564,37 @@ describe("ScriptExecutor", () => {
     });
   });
 
-  describe("integration", () => {
-    test.skip("should handle full execution cycle with multiple components and instances (requires @meno/studio ElementRegistry)", () => {
+  describe('integration', () => {
+    test.skip('should handle full execution cycle with multiple components and instances (requires @meno/studio ElementRegistry)', () => {
       const componentDef1: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: "console.log('Static1');",
         },
       };
 
       const componentDef2: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
           javascript: "console.log('{{id}}');",
         },
       };
 
-      componentRegistry.register("StaticComponent", componentDef1);
-      componentRegistry.register("DynamicComponent", componentDef2);
+      componentRegistry.register('StaticComponent', componentDef1);
+      componentRegistry.register('DynamicComponent', componentDef2);
 
       // Register multiple instances of dynamic component
-      const mockElement1 = document.createElement("div");
-      const mockElement2 = document.createElement("div");
-      elementRegistry.register([0], mockElement1, "DynamicComponent", true, {
-        id: "1",
+      const mockElement1 = document.createElement('div');
+      const mockElement2 = document.createElement('div');
+      elementRegistry.register([0], mockElement1, 'DynamicComponent', true, {
+        id: '1',
       });
-      elementRegistry.register([1], mockElement2, "DynamicComponent", true, {
-        id: "2",
+      elementRegistry.register([1], mockElement2, 'DynamicComponent', true, {
+        id: '2',
       });
 
       scriptExecutor.execute();
@@ -605,4 +605,3 @@ describe("ScriptExecutor", () => {
     });
   });
 });
-