@tkeron/html-parser 0.1.2 → 0.1.4

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();