@tkeron/html-parser 0.1.3 → 0.1.4

package/bun.lock

@@ -1,9 +1,9 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
+  "configVersion": 1,
   "workspaces": {
     "": {
-      "name": "html-parser",
+      "name": "@tkeron/html-parser",
       "devDependencies": {
         "@types/bun": "^1.3.4",
       },
@@ -15,12 +15,12 @@
   "packages": {
     "@types/bun": ["@types/bun@1.3.4", "", { "dependencies": { "bun-types": "1.3.4" } }, "sha512-EEPTKXHP+zKGPkhRLv+HI0UEX8/o+65hqARxLy8Ov5rIxMBPNTjeZww00CIihrIQGEQBYg+0roO5qOnS/7boGA=="],
 
-    "@types/node": ["@types/node@24.0.4", "", { "dependencies": { "undici-types": "~7.8.0" } }, "sha512-ulyqAkrhnuNq9pB76DRBTkcS6YsmDALy6Ua63V8OhrOBgbcYt6IOdzpw5P1+dyRIyMerzLkeYWBeOXPpA9GMAA=="],
+    "@types/node": ["@types/node@25.0.3", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA=="],
 
     "bun-types": ["bun-types@1.3.4", "", { "dependencies": { "@types/node": "*" } }, "sha512-5ua817+BZPZOlNaRgGBpZJOSAQ9RQ17pkwPD0yR7CfJg+r8DgIILByFifDTa+IPDDxzf5VNhtNlcKqFzDgJvlQ=="],
 
     "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
 
-    "undici-types": ["undici-types@7.8.0", "", {}, "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw=="],
+    "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tkeron/html-parser",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A fast and lightweight HTML parser for Bun",
   "main": "index.js",
   "module": "index.ts",

package/tests/cloneNode-bug-reproduction.test.ts

@@ -0,0 +1,325 @@
+import { describe, it, expect } from "vitest";
+import { parseHTML } from "../index.js";
+
+/**
+ * Tests específicos para reproducir el problema reportado:
+ * "Cuando se clona un nodo con cloneNode(true), el nodo clonado 
+ * pierde su contenido interno (_internalInnerHTML y estructura de hijos)."
+ * 
+ * Estos tests intentan reproducir el problema exacto descrito.
+ */
+describe("cloneNode - Bug Reproduction Tests", () => {
+  
+  it("REPRODUCCIÓN: debe copiar _internalInnerHTML correctamente", () => {
+    const html = `
+      <div id="container">
+        <h1>Título Principal</h1>
+        <p>Este es un párrafo con <strong>texto en negrita</strong>.</p>
+        <ul>
+          <li>Item 1</li>
+          <li>Item 2</li>
+          <li>Item 3</li>
+        </ul>
+      </div>
+    `;
+    
+    const doc = parseHTML(html);
+    const container = doc.querySelector("#container")!;
+    
+    // Verificar estado ANTES del clonado
+    console.log("=== ANTES DEL CLONADO ===");
+    console.log("Original innerHTML:", container.innerHTML);
+    console.log("Original _internalInnerHTML:", (container as any)._internalInnerHTML);
+    console.log("Original childNodes.length:", container.childNodes.length);
+    console.log("Original children.length:", container.children.length);
+    
+    // Realizar el clonado
+    const cloned = container.cloneNode(true);
+    
+    // Verificar estado DESPUÉS del clonado
+    console.log("\n=== DESPUÉS DEL CLONADO ===");
+    console.log("Clonado innerHTML:", cloned.innerHTML);
+    console.log("Clonado _internalInnerHTML:", (cloned as any)._internalInnerHTML);
+    console.log("Clonado childNodes.length:", cloned.childNodes.length);
+    console.log("Clonado children.length:", cloned.children.length);
+    
+    // VERIFICACIONES CRÍTICAS
+    
+    // 1. innerHTML no debe estar vacío
+    expect(cloned.innerHTML).toBeTruthy();
+    expect(cloned.innerHTML.length).toBeGreaterThan(0);
+    
+    // 2. Debe contener los elementos esperados
+    expect(cloned.innerHTML).toContain("Título Principal");
+    expect(cloned.innerHTML).toContain("<strong>texto en negrita</strong>");
+    expect(cloned.innerHTML).toContain("<li>Item 1</li>");
+    
+    // 3. childNodes debe tener contenido
+    expect(cloned.childNodes.length).toBeGreaterThan(0);
+    expect(cloned.childNodes.length).toBe(container.childNodes.length);
+    
+    // 4. children debe tener los elementos
+    expect(cloned.children.length).toBe(3); // h1, p, ul
+    expect(cloned.children.length).toBe(container.children.length);
+    
+    // 5. Los elementos deben ser accesibles mediante querySelector
+    expect(cloned.querySelector("h1")).toBeTruthy();
+    expect(cloned.querySelector("p")).toBeTruthy();
+    expect(cloned.querySelector("ul")).toBeTruthy();
+    expect(cloned.querySelectorAll("li").length).toBe(3);
+  });
+
+  it("REPRODUCCIÓN: debe mantener la estructura completa de hijos", () => {
+    const html = `
+      <div id="parent">
+        <div class="level-1">
+          <div class="level-2">
+            <div class="level-3">
+              Contenido profundo
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    
+    const doc = parseHTML(html);
+    const parent = doc.querySelector("#parent")!;
+    
+    console.log("\n=== ESTRUCTURA DE HIJOS ANTES ===");
+    console.log("Parent childNodes:", parent.childNodes.length);
+    console.log("Level-1 existe:", !!parent.querySelector(".level-1"));
+    console.log("Level-2 existe:", !!parent.querySelector(".level-2"));
+    console.log("Level-3 existe:", !!parent.querySelector(".level-3"));
+    
+    const cloned = parent.cloneNode(true);
+    
+    console.log("\n=== ESTRUCTURA DE HIJOS DESPUÉS ===");
+    console.log("Clonado childNodes:", cloned.childNodes.length);
+    console.log("Level-1 existe:", !!cloned.querySelector(".level-1"));
+    console.log("Level-2 existe:", !!cloned.querySelector(".level-2"));
+    console.log("Level-3 existe:", !!cloned.querySelector(".level-3"));
+    
+    // VERIFICAR que la estructura se mantiene
+    expect(cloned.childNodes.length).toBe(parent.childNodes.length);
+    expect(cloned.querySelector(".level-1")).toBeTruthy();
+    expect(cloned.querySelector(".level-2")).toBeTruthy();
+    expect(cloned.querySelector(".level-3")).toBeTruthy();
+    expect(cloned.querySelector(".level-3")?.textContent).toContain("Contenido profundo");
+  });
+
+  it("REPRODUCCIÓN: debe copiar atributos Y contenido simultáneamente", () => {
+    const html = `
+      <div 
+        id="complex" 
+        class="container main" 
+        data-id="123" 
+        data-type="test"
+        aria-label="Complex element"
+      >
+        <header>
+          <h1>Header Title</h1>
+        </header>
+        <main>
+          <p>Main content</p>
+        </main>
+        <footer>
+          <p>Footer content</p>
+        </footer>
+      </div>
+    `;
+    
+    const doc = parseHTML(html);
+    const complex = doc.querySelector("#complex")!;
+    
+    console.log("\n=== ANTES: ATRIBUTOS Y CONTENIDO ===");
+    console.log("Atributos:", JSON.stringify(complex.attributes, null, 2));
+    console.log("innerHTML length:", complex.innerHTML.length);
+    console.log("Hijos:", complex.children.length);
+    
+    const cloned = complex.cloneNode(true);
+    
+    console.log("\n=== DESPUÉS: ATRIBUTOS Y CONTENIDO ===");
+    console.log("Atributos clonados:", JSON.stringify(cloned.attributes, null, 2));
+    console.log("innerHTML length clonado:", cloned.innerHTML.length);
+    console.log("Hijos clonados:", cloned.children.length);
+    
+    // VERIFICAR atributos
+    expect(cloned.getAttribute("id")).toBe("complex");
+    expect(cloned.getAttribute("class")).toBe("container main");
+    expect(cloned.getAttribute("data-id")).toBe("123");
+    expect(cloned.getAttribute("data-type")).toBe("test");
+    expect(cloned.getAttribute("aria-label")).toBe("Complex element");
+    
+    // VERIFICAR contenido
+    expect(cloned.innerHTML.length).toBeGreaterThan(0);
+    expect(cloned.children.length).toBe(3); // header, main, footer
+    expect(cloned.querySelector("header h1")?.textContent).toBe("Header Title");
+    expect(cloned.querySelector("main p")?.textContent).toBe("Main content");
+    expect(cloned.querySelector("footer p")?.textContent).toBe("Footer content");
+  });
+
+  it("REPRODUCCIÓN: comparar original vs clonado lado a lado", () => {
+    const html = `
+      <article id="article">
+        <h1>Artículo de Prueba</h1>
+        <p class="intro">Introducción del artículo.</p>
+        <section>
+          <h2>Sección 1</h2>
+          <p>Contenido de la sección 1.</p>
+        </section>
+        <section>
+          <h2>Sección 2</h2>
+          <p>Contenido de la sección 2.</p>
+        </section>
+      </article>
+    `;
+    
+    const doc = parseHTML(html);
+    const original = doc.querySelector("#article")!;
+    const cloned = original.cloneNode(true);
+    
+    console.log("\n=== COMPARACIÓN ORIGINAL VS CLONADO ===");
+    
+    const comparison = {
+      nodeName: {
+        original: original.nodeName,
+        cloned: cloned.nodeName,
+        match: original.nodeName === cloned.nodeName
+      },
+      id: {
+        original: original.getAttribute("id"),
+        cloned: cloned.getAttribute("id"),
+        match: original.getAttribute("id") === cloned.getAttribute("id")
+      },
+      childNodesLength: {
+        original: original.childNodes.length,
+        cloned: cloned.childNodes.length,
+        match: original.childNodes.length === cloned.childNodes.length
+      },
+      childrenLength: {
+        original: original.children.length,
+        cloned: cloned.children.length,
+        match: original.children.length === cloned.children.length
+      },
+      innerHTMLLength: {
+        original: original.innerHTML.length,
+        cloned: cloned.innerHTML.length,
+        match: original.innerHTML.length === cloned.innerHTML.length
+      },
+      textContentLength: {
+        original: original.textContent.length,
+        cloned: cloned.textContent.length,
+        match: original.textContent.length === cloned.textContent.length
+      }
+    };
+    
+    console.table(comparison);
+    
+    // VERIFICAR que todos coinciden
+    expect(comparison.nodeName.match).toBe(true);
+    expect(comparison.id.match).toBe(true);
+    expect(comparison.childNodesLength.match).toBe(true);
+    expect(comparison.childrenLength.match).toBe(true);
+    expect(comparison.innerHTMLLength.match).toBe(true);
+    expect(comparison.textContentLength.match).toBe(true);
+    
+    // Verificar contenido específico
+    expect(cloned.querySelector("h1")?.textContent).toBe("Artículo de Prueba");
+    expect(cloned.querySelector(".intro")?.textContent).toBe("Introducción del artículo.");
+    expect(cloned.querySelectorAll("section").length).toBe(2);
+    expect(cloned.querySelectorAll("h2").length).toBe(2);
+  });
+
+  it("REPRODUCCIÓN: verificar que innerHTML NO está vacío después de clonar", () => {
+    const testCases = [
+      {
+        name: "Elemento simple con texto",
+        html: `<div>Texto simple</div>`
+      },
+      {
+        name: "Elemento con un hijo",
+        html: `<div><span>Un hijo</span></div>`
+      },
+      {
+        name: "Elemento con múltiples hijos",
+        html: `<div><p>P1</p><p>P2</p><p>P3</p></div>`
+      },
+      {
+        name: "Elemento con anidación profunda",
+        html: `<div><div><div><div>Profundo</div></div></div></div>`
+      },
+      {
+        name: "Lista compleja",
+        html: `<ul><li>A</li><li>B<ul><li>B1</li><li>B2</li></ul></li><li>C</li></ul>`
+      }
+    ];
+    
+    console.log("\n=== VERIFICANDO innerHTML EN MÚLTIPLES CASOS ===");
+    
+    testCases.forEach(({ name, html }) => {
+      const doc = parseHTML(html);
+      const root = doc.body || doc;
+      const element = root.querySelector("div") || root.querySelector("ul")!;
+      const cloned = element.cloneNode(true);
+      
+      const result = {
+        caso: name,
+        originalInnerHTML_vacio: !element.innerHTML || element.innerHTML.length === 0,
+        clonedInnerHTML_vacio: !cloned.innerHTML || cloned.innerHTML.length === 0,
+        originalLength: element.innerHTML.length,
+        clonedLength: cloned.innerHTML.length,
+        match: element.innerHTML.length === cloned.innerHTML.length
+      };
+      
+      console.log(JSON.stringify(result, null, 2));
+      
+      // VERIFICAR que ningún innerHTML está vacío (excepto elementos sin hijos)
+      if (element.children.length > 0) {
+        expect(cloned.innerHTML).toBeTruthy();
+        expect(cloned.innerHTML.length).toBeGreaterThan(0);
+        expect(cloned.innerHTML.length).toBe(element.innerHTML.length);
+      }
+    });
+  });
+
+  it("REPRODUCCIÓN: acceder a childNodes inmediatamente después de clonar", () => {
+    const html = `
+      <div id="test">
+        Texto inicial
+        <span>Span 1</span>
+        Texto intermedio
+        <span>Span 2</span>
+        Texto final
+      </div>
+    `;
+    
+    const doc = parseHTML(html);
+    const test = doc.querySelector("#test")!;
+    
+    console.log("\n=== ACCESO A childNodes ===");
+    console.log("Original childNodes.length:", test.childNodes.length);
+    
+    const cloned = test.cloneNode(true);
+    
+    console.log("Clonado childNodes.length INMEDIATAMENTE:", cloned.childNodes.length);
+    
+    // Verificar inmediatamente después del clonado
+    expect(cloned.childNodes).toBeTruthy();
+    expect(cloned.childNodes.length).toBeGreaterThan(0);
+    expect(cloned.childNodes.length).toBe(test.childNodes.length);
+    
+    // Verificar que podemos iterar los childNodes
+    console.log("\nIterando childNodes del clon:");
+    for (let i = 0; i < cloned.childNodes.length; i++) {
+      const node = cloned.childNodes[i];
+      console.log(`  ${i}: nodeType=${node.nodeType}, nodeName=${node.nodeName}, content="${node.textContent?.substring(0, 20)}"`);
+      expect(node).toBeTruthy();
+    }
+    
+    // Verificar que los spans son accesibles
+    const spans = cloned.querySelectorAll("span");
+    expect(spans.length).toBe(2);
+    expect(spans[0]?.textContent).toBe("Span 1");
+    expect(spans[1]?.textContent).toBe("Span 2");
+  });
+});

package/tests/cloneNode-interactive.ts

@@ -0,0 +1,235 @@
+#!/usr/bin/env bun
+
+/**
+ * Script interactivo para probar cloneNode manualmente
+ * 
+ * Uso:
+ *   bun run tests/cloneNode-interactive.ts
+ * 
+ * Este script permite probar cloneNode con diferentes HTML inputs
+ * y ver en detalle qué sucede durante el clonado.
+ */
+
+import { parseHTML } from "../index.js";
+
+// Colores para la consola
+const colors = {
+  reset: "\x1b[0m",
+  bright: "\x1b[1m",
+  green: "\x1b[32m",
+  blue: "\x1b[34m",
+  yellow: "\x1b[33m",
+  red: "\x1b[31m",
+  cyan: "\x1b[36m",
+};
+
+function log(color: string, ...args: any[]) {
+  console.log(color + args.join(" ") + colors.reset);
+}
+
+function separator() {
+  console.log("\n" + "=".repeat(70) + "\n");
+}
+
+function testCloneNode(html: string, selector: string, testName: string) {
+  separator();
+  log(colors.bright + colors.blue, `🧪 TEST: ${testName}`);
+  console.log();
+
+  log(colors.cyan, "📝 HTML Input:");
+  console.log(html);
+  console.log();
+
+  // Parse HTML
+  const doc = parseHTML(html);
+  const element = doc.querySelector(selector);
+
+  if (!element) {
+    log(colors.red, "❌ ERROR: No se encontró elemento con selector:", selector);
+    return;
+  }
+
+  log(colors.yellow, "🔍 Elemento original encontrado:");
+  console.log("  - nodeName:", element.nodeName);
+  console.log("  - id:", element.getAttribute("id"));
+  console.log("  - childNodes.length:", element.childNodes.length);
+  console.log("  - children.length:", element.children.length);
+  console.log("  - innerHTML.length:", element.innerHTML.length);
+  console.log("  - textContent.length:", element.textContent.length);
+  console.log();
+
+  log(colors.bright, "⚙️  Clonando con cloneNode(true)...");
+  const cloned = element.cloneNode(true);
+  console.log();
+
+  log(colors.yellow, "🔍 Elemento clonado:");
+  console.log("  - nodeName:", cloned.nodeName);
+  console.log("  - id:", cloned.getAttribute("id"));
+  console.log("  - childNodes.length:", cloned.childNodes.length);
+  console.log("  - children.length:", cloned.children.length);
+  console.log("  - innerHTML.length:", cloned.innerHTML.length);
+  console.log("  - textContent.length:", cloned.textContent.length);
+  console.log();
+
+  // Comparación
+  log(colors.bright + colors.cyan, "📊 Comparación:");
+  const checks = {
+    "nodeName coincide":
+      element.nodeName === cloned.nodeName ? "✅" : "❌",
+    "childNodes.length coincide":
+      element.childNodes.length === cloned.childNodes.length ? "✅" : "❌",
+    "children.length coincide":
+      element.children.length === cloned.children.length ? "✅" : "❌",
+    "innerHTML.length coincide":
+      element.innerHTML.length === cloned.innerHTML.length ? "✅" : "❌",
+    "innerHTML no vacío":
+      cloned.innerHTML.length > 0 ? "✅" : "❌",
+    "childNodes no vacío":
+      cloned.childNodes.length > 0 ? "✅" : "❌",
+  };
+
+  for (const [check, result] of Object.entries(checks)) {
+    console.log(`  ${result} ${check}`);
+  }
+  console.log();
+
+  // Mostrar innerHTML
+  log(colors.cyan, "📄 Original innerHTML:");
+  console.log(element.innerHTML);
+  console.log();
+
+  log(colors.cyan, "📄 Clonado innerHTML:");
+  console.log(cloned.innerHTML);
+  console.log();
+
+  // Verificar querySelector en el clon
+  log(colors.bright + colors.cyan, "🔍 Pruebas de querySelector en el clon:");
+  const queries = [
+    "div",
+    "p",
+    "span",
+    "h1, h2, h3",
+    "ul",
+    "li",
+    "[id]",
+    "[class]",
+  ];
+
+  for (const query of queries) {
+    const result = cloned.querySelector(query);
+    console.log(
+      `  ${result ? "✅" : "⚪"} querySelector("${query}"): ${
+        result ? result.nodeName : "no encontrado"
+      }`
+    );
+  }
+
+  const allDone = Object.values(checks).every((v) => v === "✅");
+  console.log();
+  log(
+    allDone ? colors.green : colors.red,
+    allDone ? "✅ TEST PASÓ" : "❌ TEST FALLÓ"
+  );
+}
+
+// ============================================================================
+// TESTS
+// ============================================================================
+
+console.clear();
+log(
+  colors.bright + colors.green,
+  "\n🧬 cloneNode Interactive Test Suite\n"
+);
+
+// Test 1: Simple element
+testCloneNode(
+  `<div id="simple">Hello World</div>`,
+  "#simple",
+  "Elemento simple con texto"
+);
+
+// Test 2: Nested elements
+testCloneNode(
+  `
+  <div id="nested">
+    <h1>Title</h1>
+    <p>Paragraph with <strong>bold</strong> text</p>
+    <ul>
+      <li>Item 1</li>
+      <li>Item 2</li>
+    </ul>
+  </div>
+  `,
+  "#nested",
+  "Elementos anidados múltiples niveles"
+);
+
+// Test 3: Complex structure
+testCloneNode(
+  `
+  <article id="article">
+    <header>
+      <h1>Article Title</h1>
+      <p class="meta">By Author Name</p>
+    </header>
+    <section class="content">
+      <p>First paragraph</p>
+      <p>Second paragraph</p>
+      <div class="callout">
+        <strong>Important:</strong> This is a callout
+      </div>
+    </section>
+    <footer>
+      <a href="#">Read more</a>
+    </footer>
+  </article>
+  `,
+  "#article",
+  "Estructura compleja tipo artículo"
+);
+
+// Test 4: Form elements
+testCloneNode(
+  `
+  <form id="form">
+    <input type="text" name="username" value="john" />
+    <input type="email" name="email" value="test@example.com" />
+    <textarea name="bio">User bio</textarea>
+    <button type="submit">Submit</button>
+  </form>
+  `,
+  "#form",
+  "Formulario con inputs"
+);
+
+// Test 5: Table
+testCloneNode(
+  `
+  <table id="table">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Age</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>John</td>
+        <td>30</td>
+      </tr>
+      <tr>
+        <td>Jane</td>
+        <td>25</td>
+      </tr>
+    </tbody>
+  </table>
+  `,
+  "#table",
+  "Tabla HTML"
+);
+
+separator();
+log(colors.bright + colors.green, "✅ Todos los tests interactivos completados");
+log(colors.cyan, "\n💡 TIP: Modifica este archivo para agregar tus propios tests");
+console.log();

package/tests/cloneNode.test.ts

@@ -0,0 +1,587 @@
+import { describe, it, expect } from "vitest";
+import { parseHTML } from "../index.js";
+import { NodeType } from "../src/dom-simulator.js";
+
+describe("cloneNode functionality", () => {
+  describe("cloneNode(true) - deep cloning", () => {
+    it("should clone a simple element with text content", () => {
+      const html = `<div id="original">Hello World</div>`;
+      const doc = parseHTML(html);
+      const original = doc.querySelector("#original")!;
+
+      const cloned = original.cloneNode(true);
+
+      // Verificar que el nodo clonado existe
+      expect(cloned).toBeTruthy();
+      expect(cloned.nodeName).toBe("DIV");
+
+      // Verificar que los atributos se copian
+      expect(cloned.getAttribute("id")).toBe("original");
+
+      // Verificar que el contenido de texto se copia
+      expect(cloned.textContent).toBe("Hello World");
+
+      // Verificar que tiene los hijos correctos
+      expect(cloned.childNodes.length).toBeGreaterThan(0);
+    });
+
+    it("should clone nested elements with multiple levels", () => {
+      const html = `
+        <div id="parent">
+          <div class="child">
+            <span>Nested Text</span>
+          </div>
+        </div>
+      `;
+      const doc = parseHTML(html);
+      const parent = doc.querySelector("#parent")!;
+
+      const cloned = parent.cloneNode(true);
+
+      // Verificar estructura básica
+      expect(cloned.nodeName).toBe("DIV");
+      expect(cloned.getAttribute("id")).toBe("parent");
+
+      // Verificar que los hijos se clonaron
+      expect(cloned.childNodes.length).toBeGreaterThan(0);
+      
+      // Verificar que el hijo div está presente
+      const childDiv = cloned.querySelector(".child");
+      expect(childDiv).toBeTruthy();
+      expect(childDiv?.nodeName).toBe("DIV");
+      expect(childDiv?.getAttribute("class")).toBe("child");
+
+      // Verificar el nieto span
+      const span = cloned.querySelector("span");
+      expect(span).toBeTruthy();
+      expect(span?.textContent).toBe("Nested Text");
+    });
+
+    it("should clone element with multiple children", () => {
+      const html = `
+        <ul id="list">
+          <li>Item 1</li>
+          <li>Item 2</li>
+          <li>Item 3</li>
+        </ul>
+      `;
+      const doc = parseHTML(html);
+      const list = doc.querySelector("#list")!;
+
+      const cloned = list.cloneNode(true);
+
+      // Verificar que todos los items se clonaron
+      const items = cloned.querySelectorAll("li");
+      expect(items.length).toBe(3);
+      expect(items[0]?.textContent).toBe("Item 1");
+      expect(items[1]?.textContent).toBe("Item 2");
+      expect(items[2]?.textContent).toBe("Item 3");
+    });
+
+    it("should preserve innerHTML after cloning", () => {
+      const html = `
+        <div id="container">
+          <h1>Title</h1>
+          <p>Paragraph 1</p>
+          <p>Paragraph 2</p>
+        </div>
+      `;
+      const doc = parseHTML(html);
+      const container = doc.querySelector("#container")!;
+
+      // Guardar innerHTML original
+      const originalInnerHTML = container.innerHTML;
+      expect(originalInnerHTML).toBeTruthy();
+      expect(originalInnerHTML.length).toBeGreaterThan(0);
+
+      const cloned = container.cloneNode(true);
+
+      // Verificar que innerHTML del clon no esté vacío
+      expect(cloned.innerHTML).toBeTruthy();
+      expect(cloned.innerHTML.length).toBeGreaterThan(0);
+
+      // Verificar que el contenido es similar
+      expect(cloned.innerHTML).toContain("<h1>Title</h1>");
+      expect(cloned.innerHTML).toContain("<p>Paragraph 1</p>");
+      expect(cloned.innerHTML).toContain("<p>Paragraph 2</p>");
+    });
+
+    it("should clone element with mixed content (elements and text nodes)", () => {
+      const html = `<div id="mixed">Text before<strong>bold text</strong>Text after</div>`;
+      const doc = parseHTML(html);
+      const mixed = doc.querySelector("#mixed")!;
+
+      // Verificar estructura original
+      const originalChildCount = mixed.childNodes.length;
+      expect(originalChildCount).toBeGreaterThan(0);
+
+      const cloned = mixed.cloneNode(true);
+
+      // Verificar que tiene la misma cantidad de hijos
+      expect(cloned.childNodes.length).toBe(originalChildCount);
+
+      // Verificar contenido completo
+      expect(cloned.textContent).toBe("Text beforebold textText after");
+
+      // Verificar que el elemento strong existe
+      const strong = cloned.querySelector("strong");
+      expect(strong).toBeTruthy();
+      expect(strong?.textContent).toBe("bold text");
+    });
+
+    it("should clone all attributes including custom ones", () => {
+      const html = `<div id="attrs" class="test" data-value="123" data-custom="abc">Content</div>`;
+      const doc = parseHTML(html);
+      const element = doc.querySelector("#attrs")!;
+
+      const cloned = element.cloneNode(true);
+
+      // Verificar todos los atributos
+      expect(cloned.getAttribute("id")).toBe("attrs");
+      expect(cloned.getAttribute("class")).toBe("test");
+      expect(cloned.getAttribute("data-value")).toBe("123");
+      expect(cloned.getAttribute("data-custom")).toBe("abc");
+      expect(cloned.textContent).toBe("Content");
+    });
+
+    it("should clone complex structure with different node types", () => {
+      const html = `
+        <article id="article">
+          <h2>Article Title</h2>
+          <!-- This is a comment -->
+          <p>First paragraph</p>
+          <div class="highlight">
+            <span>Highlighted</span> text
+          </div>
+          <p>Last paragraph</p>
+        </article>
+      `;
+      const doc = parseHTML(html);
+      const article = doc.querySelector("#article")!;
+
+      const cloned = article.cloneNode(true);
+
+      // Verificar estructura
+      expect(cloned.nodeName).toBe("ARTICLE");
+      expect(cloned.getAttribute("id")).toBe("article");
+
+      // Verificar elementos
+      expect(cloned.querySelector("h2")?.textContent).toBe("Article Title");
+      
+      const paragraphs = cloned.querySelectorAll("p");
+      expect(paragraphs.length).toBe(2);
+      expect(paragraphs[0]?.textContent).toBe("First paragraph");
+      expect(paragraphs[1]?.textContent).toBe("Last paragraph");
+
+      // Verificar div anidado
+      const highlight = cloned.querySelector(".highlight");
+      expect(highlight).toBeTruthy();
+      expect(highlight?.querySelector("span")?.textContent).toBe("Highlighted");
+
+      // Verificar que se copió el comentario
+      const hasComment = Array.from(cloned.childNodes).some(
+        (node: any) => node.nodeType === NodeType.COMMENT_NODE
+      );
+      expect(hasComment).toBe(true);
+    });
+
+    it("should clone element with empty children", () => {
+      const html = `<div id="container"><p></p><span></span></div>`;
+      const doc = parseHTML(html);
+      const container = doc.querySelector("#container")!;
+
+      const cloned = container.cloneNode(true);
+
+      expect(cloned.querySelector("p")).toBeTruthy();
+      expect(cloned.querySelector("span")).toBeTruthy();
+    });
+
+    it("should maintain outerHTML structure in cloned node", () => {
+      const html = `<section class="main"><h1>Title</h1><p>Text</p></section>`;
+      const doc = parseHTML(html);
+      const section = doc.querySelector("section")!;
+
+      const cloned = section.cloneNode(true);
+
+      // Verificar outerHTML
+      expect(cloned.outerHTML).toBeTruthy();
+      expect(cloned.outerHTML).toContain("section");
+      expect(cloned.outerHTML).toContain("class=\"main\"");
+      expect(cloned.outerHTML).toContain("<h1>Title</h1>");
+      expect(cloned.outerHTML).toContain("<p>Text</p>");
+    });
+  });
+
+  describe("cloneNode(false) - shallow cloning", () => {
+    it("should clone element without children when deep is false", () => {
+      const html = `<div id="parent"><p>Child</p></div>`;
+      const doc = parseHTML(html);
+      const parent = doc.querySelector("#parent")!;
+
+      const cloned = parent.cloneNode(false);
+
+      // Debe copiar el elemento pero no los hijos
+      expect(cloned.nodeName).toBe("DIV");
+      expect(cloned.getAttribute("id")).toBe("parent");
+      expect(cloned.childNodes.length).toBe(0);
+      expect(cloned.querySelector("p")).toBeNull();
+    });
+
+    it("should preserve attributes in shallow clone", () => {
+      const html = `<div id="test" class="container" data-value="123"><span>Content</span></div>`;
+      const doc = parseHTML(html);
+      const element = doc.querySelector("#test")!;
+
+      const cloned = element.cloneNode(false);
+
+      // Atributos deben copiarse
+      expect(cloned.getAttribute("id")).toBe("test");
+      expect(cloned.getAttribute("class")).toBe("container");
+      expect(cloned.getAttribute("data-value")).toBe("123");
+
+      // Hijos NO deben copiarse
+      expect(cloned.childNodes.length).toBe(0);
+      expect(cloned.innerHTML).toBe("");
+    });
+  });
+
+  describe("cloneNode independence", () => {
+    it("cloned node should be independent from original", () => {
+      const html = `<div id="original">Original</div>`;
+      const doc = parseHTML(html);
+      const original = doc.querySelector("#original")!;
+
+      const cloned = original.cloneNode(true);
+
+      // Modificar el clon no debe afectar el original
+      cloned.setAttribute("id", "cloned");
+      cloned.setAttribute("data-modified", "true");
+
+      expect(original.getAttribute("id")).toBe("original");
+      expect(original.hasAttribute("data-modified")).toBe(false);
+      expect(cloned.getAttribute("id")).toBe("cloned");
+      expect(cloned.getAttribute("data-modified")).toBe("true");
+    });
+
+    it("modifying cloned children should not affect original", () => {
+      const html = `<div id="parent"><p id="child">Text</p></div>`;
+      const doc = parseHTML(html);
+      const parent = doc.querySelector("#parent")!;
+
+      const cloned = parent.cloneNode(true);
+      const clonedChild = cloned.querySelector("#child");
+      
+      expect(clonedChild).toBeTruthy();
+      
+      // Modificar hijo del clon
+      clonedChild?.setAttribute("data-cloned", "yes");
+
+      // El hijo original no debe verse afectado
+      const originalChild = parent.querySelector("#child");
+      expect(originalChild?.hasAttribute("data-cloned")).toBe(false);
+    });
+  });
+
+  describe("cloneNode edge cases", () => {
+    it("should handle cloning of self-closing tags", () => {
+      const html = `<div><img src="test.jpg" alt="Test" /><br /></div>`;
+      const doc = parseHTML(html);
+      const div = doc.querySelector("div")!;
+
+      const cloned = div.cloneNode(true);
+
+      const img = cloned.querySelector("img");
+      expect(img).toBeTruthy();
+      expect(img?.getAttribute("src")).toBe("test.jpg");
+      expect(img?.getAttribute("alt")).toBe("Test");
+    });
+
+    it("should clone elements with special characters in content", () => {
+      const html = `<div id="special">Text with &amp; &lt; &gt; entities</div>`;
+      const doc = parseHTML(html);
+      const element = doc.querySelector("#special")!;
+
+      const cloned = element.cloneNode(true);
+
+      expect(cloned.textContent).toBeTruthy();
+      expect(cloned.textContent.length).toBeGreaterThan(0);
+    });
+
+    it("should handle deeply nested structures", () => {
+      const html = `
+        <div id="level1">
+          <div id="level2">
+            <div id="level3">
+              <div id="level4">
+                <div id="level5">Deep Content</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+      const doc = parseHTML(html);
+      const level1 = doc.querySelector("#level1")!;
+
+      const cloned = level1.cloneNode(true);
+
+      // Verificar todos los niveles
+      expect(cloned.querySelector("#level2")).toBeTruthy();
+      expect(cloned.querySelector("#level3")).toBeTruthy();
+      expect(cloned.querySelector("#level4")).toBeTruthy();
+      const level5 = cloned.querySelector("#level5");
+      expect(level5).toBeTruthy();
+      expect(level5?.textContent).toBe("Deep Content");
+    });
+  });
+
+  describe("cloneNode internal properties", () => {
+    it("should verify _internalInnerHTML is properly set in clone", () => {
+      const html = `<div id="container"><p>Paragraph 1</p><p>Paragraph 2</p></div>`;
+      const doc = parseHTML(html);
+      const container = doc.querySelector("#container")!;
+
+      // Acceder a innerHTML para asegurar que _internalInnerHTML esté establecido
+      const originalInnerHTML = container.innerHTML;
+      expect(originalInnerHTML).toBeTruthy();
+
+      const cloned = container.cloneNode(true);
+
+      // Verificar que innerHTML funciona en el clon
+      const clonedInnerHTML = cloned.innerHTML;
+      expect(clonedInnerHTML).toBeTruthy();
+      expect(clonedInnerHTML.length).toBeGreaterThan(0);
+
+      // Verificar que contiene el mismo contenido
+      expect(clonedInnerHTML).toContain("<p>Paragraph 1</p>");
+      expect(clonedInnerHTML).toContain("<p>Paragraph 2</p>");
+
+      // Verificar que el accessor de innerHTML funciona correctamente
+      expect(typeof cloned.innerHTML).toBe("string");
+    });
+
+    it("should maintain proper childNodes structure after clone", () => {
+      const html = `<div id="parent">Text<span>Span</span>More text</div>`;
+      const doc = parseHTML(html);
+      const parent = doc.querySelector("#parent")!;
+
+      const originalChildCount = parent.childNodes.length;
+      expect(originalChildCount).toBeGreaterThan(0);
+
+      const cloned = parent.cloneNode(true);
+
+      // Verificar que childNodes tiene la misma estructura
+      expect(cloned.childNodes.length).toBe(originalChildCount);
+      
+      // Verificar que podemos acceder a cada hijo
+      for (let i = 0; i < cloned.childNodes.length; i++) {
+        expect(cloned.childNodes[i]).toBeTruthy();
+        expect(cloned.childNodes[i].nodeType).toBeDefined();
+      }
+    });
+
+    it("should properly initialize children array in cloned element", () => {
+      const html = `<div id="container"><span>1</span><span>2</span><span>3</span></div>`;
+      const doc = parseHTML(html);
+      const container = doc.querySelector("#container")!;
+
+      const cloned = container.cloneNode(true);
+
+      // Verificar que el array children está correctamente poblado
+      expect(cloned.children).toBeTruthy();
+      expect(Array.isArray(cloned.children)).toBe(true);
+      expect(cloned.children.length).toBe(3);
+
+      // Verificar que todos son elementos
+      for (const child of cloned.children) {
+        expect(child.nodeType).toBe(NodeType.ELEMENT_NODE);
+      }
+    });
+
+    it("should clone and maintain firstChild and lastChild references", () => {
+      const html = `<ul id="list"><li>First</li><li>Middle</li><li>Last</li></ul>`;
+      const doc = parseHTML(html);
+      const list = doc.querySelector("#list")!;
+
+      const cloned = list.cloneNode(true);
+
+      // Verificar referencias firstChild y lastChild
+      expect(cloned.firstChild).toBeTruthy();
+      expect(cloned.lastChild).toBeTruthy();
+      
+      // En DOM real, firstChild puede ser un nodo de texto (whitespace)
+      // pero debemos asegurar que existen
+      expect(cloned.firstElementChild).toBeTruthy();
+      expect(cloned.lastElementChild).toBeTruthy();
+      
+      const firstLi = cloned.firstElementChild;
+      const lastLi = cloned.lastElementChild;
+      
+      expect(firstLi?.textContent).toContain("First");
+      expect(lastLi?.textContent).toContain("Last");
+    });
+  });
+
+  describe("cloneNode with innerHTML manipulation", () => {
+    it("should clone element after innerHTML was modified", () => {
+      const html = `<div id="dynamic"></div>`;
+      const doc = parseHTML(html);
+      const dynamic = doc.querySelector("#dynamic")!;
+
+      // Modificar innerHTML antes de clonar
+      dynamic.innerHTML = "<p>Dynamic content</p><span>More content</span>";
+
+      const cloned = dynamic.cloneNode(true);
+
+      // Verificar que el contenido modificado se clonó
+      expect(cloned.querySelector("p")).toBeTruthy();
+      expect(cloned.querySelector("p")?.textContent).toBe("Dynamic content");
+      expect(cloned.querySelector("span")).toBeTruthy();
+      expect(cloned.querySelector("span")?.textContent).toBe("More content");
+    });
+
+    it("should clone element and allow innerHTML manipulation on clone", () => {
+      const html = `<div id="original"><p>Original</p></div>`;
+      const doc = parseHTML(html);
+      const original = doc.querySelector("#original")!;
+
+      const cloned = original.cloneNode(true);
+
+      // Verificar contenido clonado
+      expect(cloned.querySelector("p")?.textContent).toBe("Original");
+
+      // Modificar innerHTML del clon
+      cloned.innerHTML = "<span>Modified</span>";
+
+      // Original no debe cambiar
+      expect(original.querySelector("p")?.textContent).toBe("Original");
+      expect(original.querySelector("span")).toBeNull();
+
+      // Clon debe tener el nuevo contenido
+      expect(cloned.querySelector("span")?.textContent).toBe("Modified");
+      expect(cloned.querySelector("p")).toBeNull();
+    });
+  });
+
+  describe("cloneNode real-world scenarios", () => {
+    it("should clone a complete card component", () => {
+      const html = `
+        <div class="card" data-id="123">
+          <div class="card-header">
+            <h3 class="card-title">Card Title</h3>
+            <button class="close">×</button>
+          </div>
+          <div class="card-body">
+            <p>This is the card content with <strong>bold</strong> text.</p>
+            <ul>
+              <li>Item 1</li>
+              <li>Item 2</li>
+            </ul>
+          </div>
+          <div class="card-footer">
+            <button class="btn-primary">Save</button>
+            <button class="btn-secondary">Cancel</button>
+          </div>
+        </div>
+      `;
+      const doc = parseHTML(html);
+      const card = doc.querySelector(".card")!;
+
+      const cloned = card.cloneNode(true);
+
+      // Verificar estructura completa
+      expect(cloned.getAttribute("data-id")).toBe("123");
+      expect(cloned.querySelector(".card-header")).toBeTruthy();
+      expect(cloned.querySelector(".card-body")).toBeTruthy();
+      expect(cloned.querySelector(".card-footer")).toBeTruthy();
+
+      // Verificar contenido específico
+      expect(cloned.querySelector(".card-title")?.textContent).toBe("Card Title");
+      expect(cloned.querySelector("strong")?.textContent).toBe("bold");
+      
+      const items = cloned.querySelectorAll("li");
+      expect(items.length).toBe(2);
+      
+      const buttons = cloned.querySelectorAll("button");
+      expect(buttons.length).toBe(3); // close, save, cancel
+    });
+
+    it("should clone a form with various input types", () => {
+      const html = `
+        <form id="user-form">
+          <input type="text" name="username" value="john" />
+          <input type="email" name="email" value="john@example.com" />
+          <textarea name="bio">User bio</textarea>
+          <select name="country">
+            <option value="us">USA</option>
+            <option value="uk" selected>UK</option>
+          </select>
+        </form>
+      `;
+      const doc = parseHTML(html);
+      const form = doc.querySelector("#user-form")!;
+
+      const cloned = form.cloneNode(true);
+
+      // Verificar que todos los inputs se clonaron
+      const textInput = cloned.querySelector('[name="username"]');
+      expect(textInput).toBeTruthy();
+      expect(textInput?.getAttribute("value")).toBe("john");
+
+      const emailInput = cloned.querySelector('[name="email"]');
+      expect(emailInput).toBeTruthy();
+      expect(emailInput?.getAttribute("value")).toBe("john@example.com");
+
+      const textarea = cloned.querySelector("textarea");
+      expect(textarea).toBeTruthy();
+      expect(textarea?.textContent).toBe("User bio");
+
+      const select = cloned.querySelector("select");
+      expect(select).toBeTruthy();
+      const options = select?.querySelectorAll("option");
+      expect(options?.length).toBe(2);
+    });
+
+    it("should clone a table structure", () => {
+      const html = `
+        <table id="data-table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Age</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>John</td>
+              <td>30</td>
+            </tr>
+            <tr>
+              <td>Jane</td>
+              <td>25</td>
+            </tr>
+          </tbody>
+        </table>
+      `;
+      const doc = parseHTML(html);
+      const table = doc.querySelector("#data-table")!;
+
+      const cloned = table.cloneNode(true);
+
+      expect(cloned.querySelector("thead")).toBeTruthy();
+      expect(cloned.querySelector("tbody")).toBeTruthy();
+      
+      const headers = cloned.querySelectorAll("th");
+      expect(headers.length).toBe(2);
+      expect(headers[0]?.textContent).toBe("Name");
+      expect(headers[1]?.textContent).toBe("Age");
+
+      const rows = cloned.querySelectorAll("tbody tr");
+      expect(rows.length).toBe(2);
+      
+      const firstRowCells = rows[0]?.querySelectorAll("td");
+      expect(firstRowCells?.length).toBe(2);
+      expect(firstRowCells?.[0]?.textContent).toBe("John");
+      expect(firstRowCells?.[1]?.textContent).toBe("30");
+    });
+  });
+});