thanh-kit 2.5.0 → 2.5.2

package/templates/skills/markdown-novel-viewer/scripts/tests/server.test.cjs

@@ -0,0 +1,283 @@
+#!/usr/bin/env node
+
+/**
+ * Tests for markdown-novel-viewer
+ * Run: node scripts/tests/server.test.cjs
+ */
+
+const fs = require('fs');
+const path = require('path');
+const http = require('http');
+
+const { isPortAvailable, findAvailablePort, DEFAULT_PORT } = require('../lib/port-finder.cjs');
+const { writePidFile, readPidFile, removePidFile, findRunningInstances } = require('../lib/process-mgr.cjs');
+const { getMimeType, MIME_TYPES, isPathSafe, sanitizeErrorMessage } = require('../lib/http-server.cjs');
+const { resolveImages, addHeadingIds, generateTOC, renderTOCHtml } = require('../lib/markdown-renderer.cjs');
+const { detectPlan, parsePlanTable, getNavigationContext, generateNavSidebar } = require('../lib/plan-navigator.cjs');
+
+// Test utilities
+let passed = 0;
+let failed = 0;
+
+function test(name, fn) {
+  try {
+    fn();
+    passed++;
+    console.log(`  ✓ ${name}`);
+  } catch (err) {
+    failed++;
+    console.log(`  ✗ ${name}`);
+    console.log(`    Error: ${err.message}`);
+  }
+}
+
+function assertEqual(actual, expected, message) {
+  if (actual !== expected) {
+    throw new Error(`${message}: expected "${expected}", got "${actual}"`);
+  }
+}
+
+function assertTrue(value, message) {
+  if (!value) {
+    throw new Error(`${message}: expected truthy value`);
+  }
+}
+
+function assertFalse(value, message) {
+  if (value) {
+    throw new Error(`${message}: expected falsy value`);
+  }
+}
+
+function assertIncludes(str, substr, message) {
+  if (!str.includes(substr)) {
+    throw new Error(`${message}: expected to include "${substr}"`);
+  }
+}
+
+// Test suites
+console.log('\n--- Port Finder Tests ---');
+
+test('DEFAULT_PORT is 3456', () => {
+  assertEqual(DEFAULT_PORT, 3456, 'Default port');
+});
+
+test('isPortAvailable returns boolean', () => {
+  // Sync test - function exists
+  assertTrue(typeof isPortAvailable === 'function', 'Should be function');
+});
+
+test('findAvailablePort returns number', () => {
+  // Sync test - actual async behavior tested in integration
+  assertTrue(typeof findAvailablePort === 'function', 'Should be function');
+});
+
+console.log('\n--- Process Manager Tests ---');
+
+test('writePidFile and readPidFile work correctly', () => {
+  const testPort = 9876;
+  const testPid = 12345;
+
+  writePidFile(testPort, testPid);
+  const readPid = readPidFile(testPort);
+  assertEqual(readPid, testPid, 'PID should match');
+
+  removePidFile(testPort);
+  const afterRemove = readPidFile(testPort);
+  assertEqual(afterRemove, null, 'Should be null after remove');
+});
+
+test('findRunningInstances returns array', () => {
+  const instances = findRunningInstances();
+  assertTrue(Array.isArray(instances), 'Should return array');
+});
+
+console.log('\n--- HTTP Server Tests ---');
+
+test('getMimeType returns correct types', () => {
+  assertEqual(getMimeType('test.html'), 'text/html', 'HTML type');
+  assertEqual(getMimeType('test.css'), 'text/css', 'CSS type');
+  assertEqual(getMimeType('test.js'), 'application/javascript', 'JS type');
+  assertEqual(getMimeType('test.png'), 'image/png', 'PNG type');
+  assertEqual(getMimeType('test.jpg'), 'image/jpeg', 'JPG type');
+  assertEqual(getMimeType('test.unknown'), 'application/octet-stream', 'Unknown type');
+});
+
+test('MIME_TYPES has common extensions', () => {
+  assertTrue(MIME_TYPES['.html'], 'Has .html');
+  assertTrue(MIME_TYPES['.css'], 'Has .css');
+  assertTrue(MIME_TYPES['.js'], 'Has .js');
+  assertTrue(MIME_TYPES['.png'], 'Has .png');
+  assertTrue(MIME_TYPES['.md'], 'Has .md');
+});
+
+console.log('\n--- Security Tests ---');
+
+test('isPathSafe blocks path traversal', () => {
+  assertFalse(isPathSafe('/etc/../etc/passwd', ['/home']), 'Should block .. traversal');
+  assertFalse(isPathSafe('/path\0/file', ['/path']), 'Should block null bytes');
+});
+
+test('isPathSafe allows valid paths', () => {
+  assertTrue(isPathSafe('/tmp/test.md', ['/tmp']), 'Should allow path in allowed dir');
+});
+
+test('sanitizeErrorMessage removes paths', () => {
+  const sanitized = sanitizeErrorMessage('Error: /etc/passwd not found');
+  assertFalse(sanitized.includes('/etc/passwd'), 'Should not contain path');
+  assertIncludes(sanitized, '[path]', 'Should replace with placeholder');
+});
+
+console.log('\n--- Markdown Renderer Tests ---');
+
+test('resolveImages converts relative paths', () => {
+  const md = '![Alt](./image.png)';
+  const resolved = resolveImages(md, '/base/path');
+  assertIncludes(resolved, '/file/', 'Should include /file/ route');
+  assertIncludes(resolved, '/base/path', 'Should include base path');
+});
+
+test('resolveImages preserves absolute URLs', () => {
+  const md = '![Alt](https://example.com/image.png)';
+  const resolved = resolveImages(md, '/base/path');
+  assertEqual(resolved, md, 'Should preserve absolute URL');
+});
+
+test('resolveImages handles reference-style definitions', () => {
+  const md = '![Step 1 Initial]\n\n[Step 1 Initial]: ./screenshots/step1.png';
+  const resolved = resolveImages(md, '/base/path');
+  assertIncludes(resolved, '/file/', 'Should include /file/ route in ref definition');
+  assertIncludes(resolved, '/base/path/screenshots/step1.png', 'Should resolve relative path');
+});
+
+test('resolveImages handles reference-style with titles', () => {
+  const md = '[logo]: ./images/logo.png "Company Logo"';
+  const resolved = resolveImages(md, '/project');
+  assertIncludes(resolved, '/file/project/images/logo.png', 'Should resolve path with title');
+});
+
+test('resolveImages handles inline images with titles', () => {
+  const md = '![Alt](./image.png "Title text")';
+  const resolved = resolveImages(md, '/base');
+  assertIncludes(resolved, '/file/base/image.png', 'Should resolve inline with title');
+});
+
+test('addHeadingIds adds id attributes', () => {
+  const html = '<h1>Test Heading</h1><h2>Another</h2>';
+  const withIds = addHeadingIds(html);
+  assertIncludes(withIds, 'id="test-heading"', 'Should add id to h1');
+  assertIncludes(withIds, 'id="another"', 'Should add id to h2');
+});
+
+test('addHeadingIds handles duplicates', () => {
+  const html = '<h1>Test</h1><h2>Test</h2>';
+  const withIds = addHeadingIds(html);
+  assertIncludes(withIds, 'id="test"', 'Should have first id');
+  assertIncludes(withIds, 'id="test-1"', 'Should have unique second id');
+});
+
+test('generateTOC extracts headings', () => {
+  const html = '<h1 id="one">One</h1><h2 id="two">Two</h2><h3 id="three">Three</h3>';
+  const toc = generateTOC(html);
+  assertEqual(toc.length, 3, 'Should find 3 headings');
+  assertEqual(toc[0].level, 1, 'First should be h1');
+  assertEqual(toc[0].id, 'one', 'First id should be "one"');
+});
+
+test('renderTOCHtml generates list', () => {
+  const toc = [{ level: 1, id: 'test', text: 'Test' }];
+  const html = renderTOCHtml(toc);
+  assertIncludes(html, '<ul', 'Should have ul');
+  assertIncludes(html, 'href="#test"', 'Should have anchor');
+  assertIncludes(html, 'Test', 'Should have text');
+});
+
+test('renderTOCHtml handles empty array', () => {
+  const html = renderTOCHtml([]);
+  assertEqual(html, '', 'Should return empty string');
+});
+
+console.log('\n--- Plan Navigator Tests ---');
+
+// Create temp plan structure for testing
+const testPlanDir = '/tmp/test-novel-viewer-plan';
+const testPlanFile = path.join(testPlanDir, 'plan.md');
+const testPhaseFile = path.join(testPlanDir, 'phase-01-test.md');
+
+function setupTestPlan() {
+  if (!fs.existsSync(testPlanDir)) {
+    fs.mkdirSync(testPlanDir, { recursive: true });
+  }
+
+  fs.writeFileSync(testPlanFile, `# Test Plan
+
+| Phase | Name | Status | Link |
+|-------|------|--------|------|
+| 1 | Test Phase | Pending | [phase-01-test.md](./phase-01-test.md) |
+`);
+
+  fs.writeFileSync(testPhaseFile, `# Phase 1: Test Phase
+
+Content here.
+`);
+}
+
+function cleanupTestPlan() {
+  if (fs.existsSync(testPlanDir)) {
+    fs.rmSync(testPlanDir, { recursive: true });
+  }
+}
+
+setupTestPlan();
+
+test('detectPlan identifies plan directory', () => {
+  const result = detectPlan(testPlanFile);
+  assertTrue(result.isPlan, 'Should detect as plan');
+  assertEqual(result.planDir, testPlanDir, 'Should have correct dir');
+  assertTrue(result.phases.length >= 1, 'Should find phases');
+});
+
+test('detectPlan returns false for non-plan', () => {
+  const result = detectPlan('/tmp/random-file.md');
+  assertFalse(result.isPlan, 'Should not be plan');
+});
+
+test('parsePlanTable extracts phases', () => {
+  const phases = parsePlanTable(testPlanFile);
+  assertTrue(phases.length >= 1, 'Should find phases');
+  assertEqual(phases[0].phase, 1, 'First phase number');
+  assertEqual(phases[0].name, 'Test Phase', 'Phase name');
+  assertEqual(phases[0].status, 'pending', 'Status should be lowercase');
+});
+
+test('getNavigationContext returns correct structure', () => {
+  const ctx = getNavigationContext(testPlanFile);
+  assertTrue(ctx.planInfo.isPlan, 'Should be plan');
+  assertTrue(ctx.allPhases.length >= 1, 'Should have phases');
+  assertEqual(ctx.currentIndex, 0, 'Plan.md should be index 0');
+});
+
+test('generateNavSidebar returns HTML', () => {
+  const html = generateNavSidebar(testPlanFile);
+  assertIncludes(html, '<nav', 'Should have nav element');
+  assertIncludes(html, 'phase-list', 'Should have phase list');
+});
+
+test('generateNavSidebar returns empty for non-plan', () => {
+  const html = generateNavSidebar('/tmp/random.md');
+  assertEqual(html, '', 'Should return empty string');
+});
+
+cleanupTestPlan();
+
+// Summary
+console.log('\n--- Test Results ---');
+console.log(`Passed: ${passed}`);
+console.log(`Failed: ${failed}`);
+console.log(`Total: ${passed + failed}`);
+
+if (failed > 0) {
+  process.exit(1);
+}
+
+console.log('\nAll tests passed!');

package/templates/skills/markdown-novel-viewer/tests/dashboard-assets.test.cjs

@@ -0,0 +1,340 @@
+/**
+ * Tests for dashboard assets
+ * HTML template structure, CSS syntax, JS functions
+ */
+
+const fs = require('fs');
+const path = require('path');
+const assert = require('assert');
+
+const assetsDir = path.join(__dirname, '..', 'assets');
+const templatePath = path.join(assetsDir, 'dashboard-template.html');
+const cssPath = path.join(assetsDir, 'dashboard.css');
+const jsPath = path.join(assetsDir, 'dashboard.js');
+
+describe('dashboard-template.html', () => {
+  let htmlContent;
+
+  before(() => {
+    assert(fs.existsSync(templatePath), `Template file not found: ${templatePath}`);
+    htmlContent = fs.readFileSync(templatePath, 'utf8');
+  });
+
+  it('should be valid HTML5', () => {
+    assert(htmlContent.includes('<!DOCTYPE html'));
+    assert(htmlContent.includes('<html'));
+    assert(htmlContent.includes('</html>'));
+  });
+
+  it('should have proper head section', () => {
+    assert(htmlContent.includes('<head>'));
+    assert(htmlContent.includes('<meta charset="UTF-8">'));
+    assert(htmlContent.includes('<meta name="viewport"'));
+    assert(htmlContent.includes('</head>'));
+  });
+
+  it('should have title element', () => {
+    assert(htmlContent.includes('<title>'));
+    assert(htmlContent.includes('Plans Dashboard'));
+  });
+
+  it('should link required CSS files', () => {
+    assert(htmlContent.includes('novel-theme.css'));
+    assert(htmlContent.includes('dashboard.css'));
+  });
+
+  it('should have main content area', () => {
+    assert(htmlContent.includes('<main'));
+    assert(htmlContent.includes('role="main"'));
+    assert(htmlContent.includes('aria-label="Plans Dashboard"'));
+  });
+
+  it('should have dashboard header', () => {
+    assert(htmlContent.includes('class="dashboard-header"'));
+    assert(htmlContent.includes('<h1>Plans Dashboard</h1>'));
+  });
+
+  it('should have theme toggle button', () => {
+    assert(htmlContent.includes('id="theme-toggle"'));
+    assert(htmlContent.includes('aria-label="Toggle theme"'));
+  });
+
+  it('should have search input', () => {
+    assert(htmlContent.includes('id="plan-search"'));
+    assert(htmlContent.includes('type="search"'));
+    assert(htmlContent.includes('placeholder="Search plans..."'));
+  });
+
+  it('should have sort select', () => {
+    assert(htmlContent.includes('id="sort-select"'));
+    assert(htmlContent.includes('value="date-desc"'));
+    assert(htmlContent.includes('value="name-asc"'));
+  });
+
+  it('should have filter pills', () => {
+    assert(htmlContent.includes('class="filter-pills"'));
+    assert(htmlContent.includes('data-filter="all"'));
+    assert(htmlContent.includes('data-filter="completed"'));
+    assert(htmlContent.includes('data-filter="in-progress"'));
+    assert(htmlContent.includes('data-filter="pending"'));
+  });
+
+  it('should have plans grid section', () => {
+    assert(htmlContent.includes('class="plans-grid"'));
+    assert(htmlContent.includes('aria-label="Plans list"'));
+  });
+
+  it('should have template placeholders', () => {
+    assert(htmlContent.includes('{{plans-grid}}'));
+    assert(htmlContent.includes('{{plan-count}}'));
+    assert(htmlContent.includes('{{plans-json}}'));
+    assert(htmlContent.includes('{{empty-state}}'));
+  });
+
+  it('should have loading skeleton', () => {
+    assert(htmlContent.includes('class="loading-skeleton"'));
+    assert(htmlContent.includes('class="skeleton-card"'));
+  });
+
+  it('should have screen reader announcements', () => {
+    assert(htmlContent.includes('id="sr-announce"'));
+    assert(htmlContent.includes('aria-live="polite"'));
+  });
+
+  it('should embed plans JSON', () => {
+    assert(htmlContent.includes('window.__plans'));
+  });
+
+  it('should load dashboard.js', () => {
+    assert(htmlContent.includes('src="/assets/dashboard.js"'));
+  });
+
+  it('should have proper closing tags', () => {
+    const openMain = (htmlContent.match(/<main/g) || []).length;
+    const closeMain = (htmlContent.match(/<\/main>/g) || []).length;
+    assert.strictEqual(openMain, closeMain, 'Mismatched main tags');
+
+    const openBody = (htmlContent.match(/<body/g) || []).length;
+    const closeBody = (htmlContent.match(/<\/body>/g) || []).length;
+    assert.strictEqual(openBody, closeBody, 'Mismatched body tags');
+  });
+
+  it('should have data-theme attribute on html', () => {
+    assert(htmlContent.includes('data-theme='));
+  });
+});
+
+describe('dashboard.css', () => {
+  let cssContent;
+
+  before(() => {
+    assert(fs.existsSync(cssPath), `CSS file not found: ${cssPath}`);
+    cssContent = fs.readFileSync(cssPath, 'utf8');
+  });
+
+  it('should have valid CSS syntax', () => {
+    // Basic check: should have selectors and properties
+    assert(cssContent.includes('{'));
+    assert(cssContent.includes('}'));
+  });
+
+  it('should define dashboard-view class', () => {
+    assert(cssContent.includes('.dashboard-view'));
+  });
+
+  it('should define dashboard-header styles', () => {
+    assert(cssContent.includes('.dashboard-header'));
+  });
+
+  it('should define plan-card styles', () => {
+    assert(cssContent.includes('.plan-card'));
+  });
+
+  it('should define progress-ring styles', () => {
+    assert(cssContent.includes('.progress-ring'));
+  });
+
+  it('should define progress-bar styles', () => {
+    assert(cssContent.includes('.progress-bar'));
+  });
+
+  it('should define empty-state styles', () => {
+    assert(cssContent.includes('.empty-state'));
+  });
+
+  it('should have responsive media queries', () => {
+    assert(cssContent.includes('@media'));
+  });
+
+  it('should define animations', () => {
+    assert(cssContent.includes('@keyframes'));
+  });
+
+  it('should have accessibility classes', () => {
+    assert(cssContent.includes('.visually-hidden'));
+  });
+
+  it('should have focus styles', () => {
+    assert(cssContent.includes(':focus'));
+    assert(cssContent.includes(':focus-visible'));
+  });
+
+  it('should support reduced motion', () => {
+    assert(cssContent.includes('prefers-reduced-motion'));
+  });
+
+  it('should define color variables or hex values', () => {
+    // Check for color definitions
+    assert(cssContent.includes('var(--') || cssContent.includes('#') || cssContent.includes('rgb'));
+  });
+
+  it('should not have CSS syntax errors (basic check)', () => {
+    // Check for unclosed braces
+    const openBraces = (cssContent.match(/{/g) || []).length;
+    const closeBraces = (cssContent.match(/}/g) || []).length;
+    assert.strictEqual(openBraces, closeBraces, 'Unmatched CSS braces');
+  });
+
+  it('should define filter pills styling', () => {
+    assert(cssContent.includes('.filter-pill'));
+  });
+
+  it('should define search box styling', () => {
+    assert(cssContent.includes('.search-box'));
+  });
+
+  it('should define status count styling', () => {
+    assert(cssContent.includes('.status-count'));
+  });
+});
+
+describe('dashboard.js', () => {
+  let jsContent;
+
+  before(() => {
+    assert(fs.existsSync(jsPath), `JS file not found: ${jsPath}`);
+    jsContent = fs.readFileSync(jsPath, 'utf8');
+  });
+
+  it('should be valid JavaScript', () => {
+    // Check for syntax errors by looking for basic patterns
+    assert(jsContent.includes('function') || jsContent.includes('const') || jsContent.includes('let'));
+  });
+
+  it('should have IIFE pattern for encapsulation', () => {
+    assert(jsContent.includes('(function()'));
+    assert(jsContent.includes('})()'));
+  });
+
+  it('should initialize state object', () => {
+    assert(jsContent.includes('const state'));
+    assert(jsContent.includes('sort:'));
+    assert(jsContent.includes('filter:'));
+    assert(jsContent.includes('search:'));
+  });
+
+  it('should have init function', () => {
+    assert(jsContent.includes('function init()'));
+  });
+
+  it('should bind events', () => {
+    assert(jsContent.includes('function bindEvents()'));
+  });
+
+  it('should apply filters and sort', () => {
+    assert(jsContent.includes('function applyFiltersAndSort()'));
+  });
+
+  it('should render grid', () => {
+    assert(jsContent.includes('renderGrid'));
+    assert(jsContent.includes('.plans-grid'));
+  });
+
+  it('should parse URL parameters', () => {
+    assert(jsContent.includes('parseURL'));
+    assert(jsContent.includes('URLSearchParams'));
+  });
+
+  it('should update URL', () => {
+    assert(jsContent.includes('updateURL'));
+    assert(jsContent.includes('history.replaceState'));
+  });
+
+  it('should handle search input', () => {
+    assert(jsContent.includes('plan-search'));
+    assert(jsContent.includes('addEventListener'));
+  });
+
+  it('should handle sort select', () => {
+    assert(jsContent.includes('sort-select'));
+    assert(jsContent.includes('change'));
+  });
+
+  it('should handle filter pills', () => {
+    assert(jsContent.includes('.filter-pill'));
+  });
+
+  it('should handle card click navigation', () => {
+    assert(jsContent.includes('.plan-card'));
+    assert(jsContent.includes('.view-btn'));
+  });
+
+  it('should have keyboard navigation', () => {
+    assert(jsContent.includes('setupKeyboardNav'));
+    assert(jsContent.includes('ArrowRight') || jsContent.includes('ArrowDown'));
+  });
+
+  it('should have theme toggle setup', () => {
+    assert(jsContent.includes('setupThemeToggle'));
+    assert(jsContent.includes('theme-toggle'));
+    assert(jsContent.includes('localStorage'));
+  });
+
+  it('should announce to screen readers', () => {
+    assert(jsContent.includes('announce'));
+    assert(jsContent.includes('sr-announce'));
+  });
+
+  it('should use window.__plans data', () => {
+    assert(jsContent.includes('window.__plans'));
+  });
+
+  it('should initialize on DOM ready', () => {
+    assert(jsContent.includes('DOMContentLoaded'));
+  });
+
+  it('should have strict mode', () => {
+    assert(jsContent.includes("'use strict'"));
+  });
+
+  it('should check for required DOM elements', () => {
+    assert(jsContent.includes('document.querySelector'));
+    assert(jsContent.includes('.plans-grid'));
+    assert(jsContent.includes('.result-count'));
+    assert(jsContent.includes('.empty-state'));
+  });
+
+  it('should validate syntax with basic checks', () => {
+    // Check for unclosed strings
+    const singleQuotes = (jsContent.match(/'/g) || []).length;
+    const doubleQuotes = (jsContent.match(/"/g) || []).length;
+    // Both should be even (pairs)
+    assert.strictEqual(singleQuotes % 2, 0, 'Unmatched single quotes');
+    assert.strictEqual(doubleQuotes % 2, 0, 'Unmatched double quotes');
+  });
+
+  it('should have debounce for search input', () => {
+    assert(jsContent.includes('debounce'));
+    assert(jsContent.includes('setTimeout'));
+  });
+
+  it('should support sort options', () => {
+    assert(jsContent.includes('date-desc'));
+    assert(jsContent.includes('name-asc'));
+    assert(jsContent.includes('progress-desc'));
+  });
+});
+
+console.log('\n' + '='.repeat(60));
+console.log('Dashboard Assets Tests');
+console.log('='.repeat(60));