testronaut 1.2.5 → 1.3.1

package/tests/toolsTests/domControl.test.js

@@ -0,0 +1,329 @@
+// tests/toolsTests/domControl.test.js
+/**
+ * domControl.test.js
+ * -------------------
+ * Purpose:
+ *   Unit tests for DOM normalization helpers in domControl.js.
+ *   Ensures we preserve semantic structure/text while stripping noise
+ *   and collapsing long/repetitive content.
+ */
+
+import { describe, it, expect } from 'vitest';
+import * as cheerio from 'cheerio';
+
+import {
+  removeNonContentTags,
+  collapseLongContent,
+  chunkBySection,
+  reduceRepeatedDivs,
+  removeObfuscatedClassNames,
+  removeAutoGeneratedClasses,
+  minifyDomWhitespace,
+} from '../../tools/domControl.js'; // ← adjust path as needed
+
+describe('domControl helpers', () => {
+  describe('removeNonContentTags', () => {
+    it('removes non-content tags and non-whitelisted attributes', async () => {
+      const html = `
+        <html>
+          <head>
+            <meta charset="utf-8">
+            <script>console.log('hi');</script>
+            <style>.foo { color: red; }</style>
+            <link rel="stylesheet" href="style.css" />
+          </head>
+          <body data-theme="dark">
+            <!-- comment -->
+            <div id="main" data-testid="main" onclick="alert('x')">
+              <iframe src="frame.html"></iframe>
+              <canvas></canvas>
+              <svg></svg>
+              <a href="/home" rel="noopener" target="_blank">Home</a>
+              <input id="email" name="email" type="email" data-tracking="abc" />
+            </div>
+          </body>
+        </html>
+      `;
+      const $ = cheerio.load(html);
+
+      await removeNonContentTags($);
+      const result = $.html();
+
+      // Non-content tags removed
+      expect(result).not.toContain('<script');
+      expect(result).not.toContain('<style');
+      expect(result).not.toContain('<meta');
+      expect(result).not.toContain('<link');
+      expect(result).not.toContain('<iframe');
+      expect(result).not.toContain('<canvas');
+      expect(result).not.toContain('<svg');
+      expect(result).not.toContain('<!-- comment -->');
+
+      // Body-level non-whitelisted attribute stripped
+      expect($('body').attr('data-theme')).toBeUndefined();
+
+      // Whitelisted attrs preserved
+      const main = $('#main');
+      expect(main.attr('id')).toBe('main');
+      expect(main.attr('data-testid')).toBeUndefined();
+      expect(main.attr('onclick')).toBeUndefined();
+
+      const input = $('#email');
+      expect(input.attr('id')).toBe('email');
+      expect(input.attr('name')).toBe('email');
+      expect(input.attr('type')).toBe('email');
+      expect(input.attr('data-tracking')).toBeUndefined();
+
+      const link = $('a[href="/home"]');
+      expect(link.attr('href')).toBe('/home');
+      // rel/target should be stripped (not whitelisted)
+      expect(link.attr('rel')).toBeUndefined();
+      expect(link.attr('target')).toBeUndefined();
+    });
+  });
+
+  describe('collapseLongContent', () => {
+    it('collapses long lists and appends a truncated marker', async () => {
+      const html = `
+        <ul id="list">
+          <li>Item 1</li>
+          <li>Item 2</li>
+          <li>Item 3</li>
+          <li>Item 4</li>
+        </ul>
+        <div id="cards">
+          <div class="card">A</div>
+          <div class="card">B</div>
+          <div class="card">C</div>
+          <div class="card">D</div>
+        </div>
+      `;
+      const $ = cheerio.load(html);
+
+      await collapseLongContent($, 2);
+
+      const listItems = $('#list').children('li');
+      expect(listItems.length).toBe(3); // 2 kept + 1 truncated
+      expect(listItems.eq(0).text()).toBe('Item 1');
+      expect(listItems.eq(1).text()).toBe('Item 2');
+      expect(listItems.eq(2).attr('data-collapsed')).toBe('true');
+
+      const cardChildren = $('#cards').children();
+      expect(cardChildren.length).toBe(3); // 2 cards + truncated div
+      expect(cardChildren.eq(0).hasClass('card')).toBe(true);
+      expect(cardChildren.eq(1).hasClass('card')).toBe(true);
+      expect(cardChildren.eq(2).attr('data-collapsed')).toBe('true');
+    });
+  });
+
+  describe('chunkBySection', () => {
+    it('returns section HTML for header/nav/main/footer/aside/body', async () => {
+      const html = `
+        <html>
+          <body>
+            <header><h1>Title</h1></header>
+            <nav><a href="/a">A</a></nav>
+            <main><p>Content</p></main>
+            <aside><p>Side</p></aside>
+            <footer><p>Foot</p></footer>
+          </body>
+        </html>
+      `;
+      const $ = cheerio.load(html);
+
+      const chunks = await chunkBySection($);
+
+      expect(chunks.header).toContain('Title');
+      expect(chunks.nav).toContain('href="/a"');
+      expect(chunks.main).toContain('Content');
+      expect(chunks.aside).toContain('Side');
+      expect(chunks.footer).toContain('Foot');
+      expect(chunks.body).toContain('<header>');
+    });
+
+    it('honors the focus list and only returns requested keys', async () => {
+      const html = `
+        <body>
+          <header>H</header>
+          <main>M</main>
+          <footer>F</footer>
+        </body>
+      `;
+      const $ = cheerio.load(html);
+
+      const chunks = await chunkBySection($, ['main', 'footer']);
+
+      expect(Object.keys(chunks).sort()).toEqual(['footer', 'main']);
+      expect(chunks.main).toContain('M');
+      expect(chunks.footer).toContain('F');
+    });
+  });
+
+  describe('reduceRepeatedDivs', () => {
+    it('reduces repeated divs by class and appends a collapsed marker', () => {
+      const html = `
+        <div id="root">
+          <div class="card">1</div>
+          <div class="card">2</div>
+          <div class="card">3</div>
+          <div class="card">4</div>
+          <div class="other">X</div>
+        </div>
+      `;
+      const $ = cheerio.load(html);
+
+      reduceRepeatedDivs($, 2);
+
+      const rootChildren = $('#root').children('div');
+      const cardDivs = $('#root').children('div.card');
+      const collapsedMarkers = $('#root').children('div[data-collapsed="true"]');
+
+      // Only 2 card divs should remain
+      expect(cardDivs.length).toBe(2);
+      expect(cardDivs.eq(0).text()).toBe('1');
+      expect(cardDivs.eq(1).text()).toBe('2');
+
+      // One collapsed marker added for the "card" class
+      expect(collapsedMarkers.length).toBe(1);
+      expect(collapsedMarkers.attr('data-class')).toBe('card');
+
+      // "other" div should still be present
+      const other = $('#root').children('div.other');
+      expect(other.length).toBe(1);
+      expect(other.text().trim()).toBe('X');
+
+      // Total children: 2 cards + 1 other + 1 marker
+      expect(rootChildren.length).toBe(4);
+    });
+  });
+
+  describe('removeObfuscatedClassNames', () => {
+    it('removes short and hashed-looking class names', () => {
+      const html = `
+        <div id="foo" class="btn a abcd12 AbCdE1 custom-class"></div>
+      `;
+      const $ = cheerio.load(html);
+
+      removeObfuscatedClassNames($);
+
+      const classAttr = $('#foo').attr('class') || '';
+      const classes = classAttr.split(/\s+/).filter(Boolean);
+
+      // 'btn' + 'custom-class' should remain, short "a" and hashed ones removed
+      expect(classes).toContain('btn');
+      expect(classes).toContain('custom-class');
+      expect(classes).not.toContain('a');
+      expect(classes).not.toContain('abcd12');
+      expect(classes).not.toContain('AbCdE1');
+    });
+
+    it('removes class attribute entirely if nothing remains', () => {
+      const html = `<div id="bar" class="a abcd12 AbCdE1"></div>`;
+      const $ = cheerio.load(html);
+
+      removeObfuscatedClassNames($);
+
+      expect($('#bar').attr('class')).toBeUndefined();
+    });
+  });
+
+  describe('removeAutoGeneratedClasses', () => {
+    it('removes known utility classes while keeping semantic ones', () => {
+      const html = `
+        <button
+          id="btn"
+          class="text-sm bg-red-500 hover:bg-red-600 flex items-center btn-primary custom-class"
+        >
+          Click
+        </button>
+      `;
+      const $ = cheerio.load(html);
+
+      removeAutoGeneratedClasses($);
+
+      const classAttr = $('#btn').attr('class') || '';
+      const classes = classAttr.split(/\s+/).filter(Boolean);
+
+      // Utility classes should be gone
+      expect(classes).not.toContain('text-sm');
+      expect(classes).not.toContain('bg-red-500');
+      expect(classes).not.toContain('hover:bg-red-600');
+      expect(classes).not.toContain('flex');
+      expect(classes).not.toContain('items-center');
+
+      // Semantic classes should remain
+      expect(classes).toContain('btn-primary');
+      expect(classes).toContain('custom-class');
+    });
+
+    it('removes class attribute entirely if all classes are utilities', () => {
+      const html = `<div id="box" class="flex items-center text-sm"></div>`;
+      const $ = cheerio.load(html);
+
+      removeAutoGeneratedClasses($);
+
+      expect($('#box').attr('class')).toBeUndefined();
+    });
+  });
+
+  describe('minifyDomWhitespace', () => {
+    it('collapses whitespace in text nodes while preserving words', () => {
+      const html = `
+        <div id="content">
+          Hello
+          world,
+          this   is
+          a   test.
+        </div>
+      `;
+      const $ = cheerio.load(html);
+
+      minifyDomWhitespace($);
+
+      const text = $('#content').text();
+      // We only care that internal runs are collapsed and words are separated
+      expect(text).toContain('Hello world, this is a test.');
+      // No stray newlines or multiple spaces
+      expect(/\s{2,}/.test(text)).toBe(false);
+    });
+
+    it('preserves whitespace inside pre/code/textarea', () => {
+      const html = `
+        <pre id="code-block">
+          line 1
+              line 2    with   spaces
+        </pre>
+        <textarea id="ta">
+line A
+    line B
+        </textarea>
+      `;
+      const $ = cheerio.load(html);
+
+      const beforePre = $('#code-block').text();
+      const beforeTa = $('#ta').text();
+
+      minifyDomWhitespace($);
+
+      const afterPre = $('#code-block').text();
+      const afterTa = $('#ta').text();
+
+      expect(afterPre).toBe(beforePre);
+      expect(afterTa).toBe(beforeTa);
+    });
+
+    it('keeps at least one space for pure-whitespace text nodes', () => {
+      const html = `<p>Foo <span>bar</span> baz</p>`;
+      const $ = cheerio.load(html);
+
+      minifyDomWhitespace($);
+
+      const text = $('p').text();
+      // We don’t want "Foobarbaz"
+      expect(text.includes('Foo')).toBe(true);
+      expect(text.includes('bar')).toBe(true);
+      expect(text.includes('baz')).toBe(true);
+      expect(text).toMatch(/Foo.*bar.*baz/);
+    });
+  });
+});

package/tests/toolsTests/generateHtmlReport.test.js

@@ -0,0 +1,90 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
+
+import { generateHtmlReport } from '../../tools/generateHtmlReport.js';
+
+let tmpDir;
+
+beforeEach(() => {
+  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'testronaut-report-'));
+});
+
+afterEach(() => {
+  try {
+    fs.rmSync(tmpDir, { recursive: true, force: true });
+  } catch {}
+});
+
+describe('generateHtmlReport', () => {
+  it('writes an HTML report containing mission and retry metadata', () => {
+    const report = {
+      runId: 'run_test',
+      missions: [
+        {
+          missionName: 'Mission A',
+          submissionType: 'mission',
+          submissionName: 'Main',
+          status: 'passed',
+          steps: [
+            {
+              turn: 0,
+              retryAttempt: 2,
+              retryLimit: 5,
+              events: ['did something'],
+              result: '⚠️ Turn Issues',
+              summary: 'Do thing',
+              tokensUsed: 10,
+              totalTokensUsed: 20,
+            },
+          ],
+        },
+      ],
+    };
+
+    const outPath = path.join(tmpDir, 'report.html');
+    const written = generateHtmlReport(report, outPath);
+
+    expect(written).toBe(outPath);
+    expect(fs.existsSync(outPath)).toBe(true);
+    const html = fs.readFileSync(outPath, 'utf8');
+
+    expect(html).toContain('Testronaut Report');
+    expect(html).toContain('Mission A');
+    expect(html).toContain('Turn 1 (re-attempt 1/5)');
+    expect(html).toContain('⚠️ Turn Issues');
+  });
+
+  it('escapes unsafe text in output', () => {
+    const report = {
+      runId: 'run<&>',
+      missions: [
+        {
+          missionName: 'Mission <X>',
+          submissionType: 'mission',
+          submissionName: 'Main',
+          status: 'passed',
+          steps: [
+            {
+              turn: 0,
+              retryAttempt: 1,
+              events: ['<script>alert(1)</script>'],
+              result: '✅ Passed',
+              summary: '<b>bold</b>',
+            },
+          ],
+        },
+      ],
+    };
+
+    const outPath = path.join(tmpDir, 'safe.html');
+    generateHtmlReport(report, outPath);
+    const html = fs.readFileSync(outPath, 'utf8');
+
+    expect(html).toContain('run&lt;&amp;&gt;');
+    expect(html).toContain('Mission &lt;X&gt;');
+    expect(html).toContain('&lt;script&gt;alert(1)&lt;/script&gt;');
+    expect(html).toContain('&lt;b&gt;bold&lt;/b&gt;');
+  });
+});

package/tools/chromeBrowser.js

@@ -17,6 +17,7 @@ import {
   removeAutoGeneratedClasses, 
   removeNonContentTags,
   removeObfuscatedClassNames, 
+  minifyDomWhitespace
 } from './domControl.js';
 import fs from 'fs';
 import path from 'path';
@@ -870,6 +871,9 @@ export class ChromeBrowser {
       // $ = await removeAutoGeneratedClasses($);
     }
 
+    // Minify whitespace *after* structural cleanup
+    $ = minifyDomWhitespace($);
+
     // (Optional: If you'd like to use `focus`, you could filter here by selectors/keywords.)
 
     // --- 5) Return trimmed HTML ---