Build a personal knowledge-base wiki as a static app in this directory: index.html, sty…

claude-codeclaude-fable-5 · 72 steps · 22m 54s · 7 filessession 21a724bd-503@agentsage-runs
Build a personal knowledge-base wiki as a static app in this directory: index.html, style.css, app.js, parser.js. Markdown editing with live preview using your own small parser (headings, bold, italic, links, inline code, code blocks, lists), multiple pages with [[wikilink]] syntax that creates/links pages, full-text search, localStorage persistence, JSON export/import, dark theme, keyboard shortcuts. Also create tests.html + tests.js exercising the parser and the wikilink graph. Run the tests headless with node and fix what fails.
same matchclaude-code · 72 steps codex · 50 steps pi · 26 steps antigravity · 36 steps opencode · 30 steps
compare in arena
step 07 / 72
tests.jschange 1/1
/* tests.js — parser + wikilink-graph tests.
 * Run in the browser via tests.html, or headless with `node tests.js`. */
(function () {
  'use strict';
  var IS_NODE = typeof window === 'undefined';
  var P = IS_NODE ? require('./parser.js') : window.WikiParser;
  var parse = P.parse;
 
  var tests = [];
  function test(name, fn) { tests.push({ name: name, fn: fn }); }
  function assert(cond, msg) { if (!cond) throw new Error(msg || 'assertion failed'); }
  function assertEq(actual, expected, msg) {
    if (actual !== expected) {
      throw new Error((msg || 'values differ') +
        '\n  expected: ' + JSON.stringify(expected) +
        '\n  actual:   ' + JSON.stringify(actual));
    }
  }
  function assertDeep(actual, expected, msg) {
    assertEq(JSON.stringify(actual), JSON.stringify(expected), msg);
  }
 
  // ---------- block-level parsing ----------
 
  test('headings h1 through h6', function () {
    for (var n = 1; n <= 6; n++) {
      assertEq(parse('#'.repeat(n) + ' Title'), '<h' + n + '>Title</h' + n + '>', 'level ' + n);
    }
  });
 
  test('seven hashes is not a heading', function () {
    assertEq(parse('####### nope'), '<p>####### nope</p>');
  });
 
  test('inline formatting works inside headings', function () {
    assertEq(parse('### A **b**'), '<h3>A <strong>b</strong></h3>');
  });
 
  test('blank line separates paragraphs', function () {
    assertEq(parse('a\n\nb'), '<p>a</p>\n<p>b</p>');
  });
 
  test('single newline becomes a line break', function () {
    assertEq(parse('line one\nline two'), '<p>line one<br>line two</p>');
  });
 
  test('horizontal rule from three dashes', function () {
    assertEq(parse('---'), '<hr>');
  });
 
  test('fenced code block with language', function () {
    assertEq(parse('```js\nvar a = 1 < 2;\n```'),
      '<pre><code class="language-js">var a = 1 &lt; 2;</code></pre>');
  });
 
  test('code block content is not parsed as markdown', function () {
    assertEq(parse('```\n# not a heading\n```'), '<pre><code># not a heading</code></pre>');
  });
 
  test('unterminated code block runs to end of input', function () {
    assertEq(parse('```\nabc'), '<pre><code>abc</code></pre>');
  });
 
  test('code block preserves blank lines', function () {
    assertEq(parse('```\na\n\nb\n```'), '<pre><code>a\n\nb</code></pre>');
  });
 
  // ---------- inline parsing ----------
 
  test('bold with asterisks', function () {
    assertEq(parse('**bold** text'), '<p><strong>bold</strong> text</p>');
  });
 
  test('bold with underscores', function () {
    assertEq(parse('__bold__ text'), '<p><strong>bold</strong> text</p>');
  });
 
  test('italic with asterisks', function () {
    assertEq(parse('*it* text'), '<p><em>it</em> text</p>');
  });
 
  test('italic with underscores', function () {
    assertEq(parse('so _it_ goes'), '<p>so <em>it</em> goes</p>');
  });
 
  test('underscores inside words are left alone', function () {
    assertEq(parse('snake_case_name stays'), '<p>snake_case_name stays</p>');
  });
 
  test('spaced asterisks are not italics', function () {
    assertEq(parse('2 * 3 * 4'), '<p>2 * 3 * 4</p>');
  });
 
  test('triple asterisks give bold italic', function () {
    assertEq(parse('***both***'), '<p><em><strong>both</strong></em></p>');
  });
 
  test('inline code protects markdown inside it', function () {
    assertEq(parse('a `**x**` b'), '<p>a <code>**x**</code> b</p>');
  });
 
  test('inline code escapes HTML', function () {
    assertEq(parse('`<div>`'), '<p><code>&lt;div&gt;</code></p>');
  });
 
  test('raw HTML in paragraphs is escaped', function () {
    assertEq(parse('<script>alert(1)</script>'),
      '<p>&lt;script&gt;alert(1)&lt;/script&gt;</p>');
  });
 
  test('external links open in a new tab', function () {
    assertEq(parse('[Anthropic](https://www.anthropic.com)'),
      '<p><a href="https://www.anthropic.com" target="_blank" rel="noopener">Anthropic</a></p>');
  });
 
  test('internal links get no target attribute', function () {
    assertEq(parse('[t](#/page/X)'), '<p><a href="#/page/X">t</a></p>');
  });
 
  test('javascript: URLs are neutralized', function () {
    assertEq(parse('[x](javascript:doEvil)'), '<p><a href="#">x</a></p>');
  });
 
  test('escapeHtml escapes all special characters', function () {
    assertEq(P.escapeHtml('<a href="x">&\'y'), '&lt;a href=&quot;x&quot;&gt;&amp;&#39;y');
  });
 
  // ---------- wikilinks ----------
 
  test('basic wikilink', function () {
    assertEq(parse('[[Home]]'),
      '<p><a href="#/page/Home" class="wikilink" data-page="Home">Home</a></p>');
  });
 
  test('wikilink to missing page gets missing class', function () {
    assertEq(parse('[[Nowhere]]', { pageExists: function () { return false; } }),
      '<p><a href="#/page/Nowhere" class="wikilink missing" data-page="Nowhere">Nowhere</a></p>');
  });
 
  test('wikilink to existing page has no missing class', function () {
    assertEq(parse('[[Home]]', { pageExists: function () { return true; } }),
      '<p><a href="#/page/Home" class="wikilink" data-page="Home">Home</a></p>');
  });
 
  test('wikilink with label', function () {
    assertEq(parse('[[Target|My label]]'),
      '<p><a href="#/page/Target" class="wikilink" data-page="Target">My label</a></p>');
  });
 
  test('wikilink with spaces is URL-encoded', function () {
    assertEq(parse('[[Foo Bar]]'),
      '<p><a href="#/page/Foo%20Bar" class="wikilink" data-page="Foo Bar">Foo Bar</a></p>');
  });
 
  test('wikilink target is trimmed', function () {
    assertEq(parse('[[ Foo ]]'),
      '<p><a href="#/page/Foo" class="wikilink" data-page="Foo">Foo</a></p>');
  });
 
  test('wikilink with ampersand escapes and encodes correctly', function () {
    assertEq(parse('[[A & B]]'),
      '<p><a href="#/page/A%20%26%20B" class="wikilink" data-page="A &amp; B">A &amp; B</a></p>');
  });
 
  test('wikilink inside inline code is not linked', function () {
    assertEq(parse('`[[NotALink]]`'), '<p><code>[[NotALink]]</code></p>');
  });
 
  test('wikilink inside fenced code is not linked', function () {
    assertEq(parse('```\n[[X]]\n```'), '<pre><code>[[X]]</code></pre>');
  });
 
  // ---------- lists ----------
 
  test('unordered list', function () {
    assertEq(parse('- a\n- b'), '<ul><li>a</li><li>b</li></ul>');
  });
 
  test('ordered list', function () {
    assertEq(parse('1. a\n2. b'), '<ol><li>a</li><li>b</li></ol>');
  });
 
  test('nested list', function () {
    assertEq(parse('- a\n  - b\n- c'),
      '<ul><li>a<ul><li>b</li></ul></li><li>c</li></ul>');
  });
 
  test('adjacent lists of different types stay separate', function () {
    assertEq(parse('- a\n1. b'), '<ul><li>a</li></ul><ol><li>b</li></ol>');
  });
 
  test('inline formatting inside list items', function () {
    assertEq(parse('- **a**'), '<ul><li><strong>a</strong></li></ul>');
  });
 
  test('list followed by paragraph', function () {
    assertEq(parse('- a\n\ntext'), '<ul><li>a</li></ul>\n<p>text</p>');
  });
 
  // ---------- extractWikilinks ----------
 
  test('extract keeps first-appearance order and dedupes', function () {
    assertDeep(P.extractWikilinks('[[B]] then [[A]] and [[B]]'), ['B', 'A']);
  });
 
  test('extract takes the target from labelled links', function () {
    assertDeep(P.extractWikilinks('[[X|some label]]'), ['X']);
  });
 
  test('extract trims whitespace', function () {
    assertDeep(P.extractWikilinks('[[ Spaced ]]'), ['Spaced']);
  });
 
  test('extract ignores links inside code', function () {
    assertDeep(
      P.extractWikilinks('`[[No]]` and ```\n[[Nope]]\n``` and [[Yes]]'),
      ['Yes']);
  });
 
  test('extract of empty content is empty', function () {
    assertDeep(P.extractWikilinks(''), []);
    assertDeep(P.extractWikilinks(null), []);
  });
 
  // ---------- buildGraph ----------
 
  var GRAPH_PAGES = {
    A: '[[B]] and [[C]] and [[B]] again',
    B: 'links back to [[A]]',
    C: 'no links here',
    D: '[[A]] plus [[Missing]] plus [[D]] self'
  };
 
  test('graph nodes list every page', function () {
    assertDeep(P.buildGraph(GRAPH_PAGES).nodes, ['A', 'B', 'C', 'D']);
  });
 
  test('graph links are deduped and exclude self-links', function () {
    var g = P.buildGraph(GRAPH_PAGES);
    assertDeep(g.links.A, ['B', 'C']);
    assertDeep(g.links.B, ['A']);
    assertDeep(g.links.C, []);
    assertDeep(g.links.D, ['A', 'Missing']);
  });
 
  test('graph backlinks point at linking pages', function () {
    var g = P.buildGraph(GRAPH_PAGES);
    assertDeep(g.backlinks.A, ['B', 'D']);
    assertDeep(g.backlinks.B, ['A']);
    assertDeep(g.backlinks.C, ['A']);
  });
 
  test('graph reports missing targets', function () {
    assertDeep(P.buildGraph(GRAPH_PAGES).missing, ['Missing']);
  });
 
  test('graph backlinks are tracked for missing pages too', function () {
    assertDeep(P.buildGraph(GRAPH_PAGES).backlinks.Missing, ['D']);
  });
 
  test('graph orphans are pages nobody links to', function () {
    assertDeep(P.buildGraph(GRAPH_PAGES).orphans, ['D']);
  });
 
  test('graph accepts {content} page objects', function () {
    var g = P.buildGraph({ A: { content: '[[B]]' }, B: { content: '' } });
    assertDeep(g.links.A, ['B']);
    assertDeep(g.backlinks.B, ['A']);
    assertDeep(g.missing, []);
  });
 
  test('graph of empty input is empty', function () {
    var g = P.buildGraph({});
    assertDeep(g.nodes, []);
    assertDeep(g.missing, []);
    assertDeep(g.orphans, []);
  });
 
  // ---------- runner ----------
 
  var passed = 0, failed = 0, results = [];
  tests.forEach(function (t) {
    try {
      t.fn();
      passed++;
      results.push({ name: t.name, ok: true });
    } catch (e) {
      failed++;
      results.push({ name: t.name, ok: false, error: e.message });
    }
  });
 
  if (IS_NODE) {
    results.forEach(function (r) {
      console.log((r.ok ? '  ok  ' : ' FAIL ') + r.name);
      if (!r.ok) console.log('       ' + r.error.replace(/\n/g, '\n       '));
    });
    console.log('\n' + passed + ' passed, ' + failed + ' failed, ' + tests.length + ' total');
    process.exitCode = failed ? 1 : 0;
  } else {
    var summary = document.getElementById('summary');
    var list = document.getElementById('results');
    summary.textContent = passed + ' passed, ' + failed + ' failed, ' + tests.length + ' total';
    summary.className = 'summary ' + (failed ? 'fail' : 'pass');
    results.forEach(function (r) {
      var div = document.createElement('div');
      div.className = 'result ' + (r.ok ? 'pass' : 'fail');
      var name = document.createElement('strong');
      name.textContent = (r.ok ? '✓ ' : '✗ ') + r.name;
      div.appendChild(name);
      if (!r.ok) {
        var pre = document.createElement('pre');
        pre.textContent = r.error;
        div.appendChild(pre);
      }
      list.appendChild(div);
    });
  }
})();
 
320 linesjs
Now the app shell — index.html, app.js, style.css, and tests.html.
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @agentsage-runs.
#claude #claude-code #claude-fable-5 #css #html #javascript #medium #skills #subagents #testing
b1-claude
← all sessions