@noego/app 0.0.7 → 0.0.10

package/test/path-resolution.test.js

@@ -0,0 +1,164 @@
+import { test } from 'node:test';
+import assert from 'node:assert';
+import path from 'node:path';
+
+/**
+ * These are the SAME functions used in bootstrap.js
+ * We're testing them in isolation with real project data
+ */
+function calculateComponentPaths(config) {
+  if (!config.client?.componentDir_abs) {
+    return {
+      component_dir: '.app/ssr',
+      componentDir_abs: '.app/ssr',
+      component_suffix: null
+    };
+  }
+
+  const uiRootAbs = config.client.main_abs ? path.dirname(config.client.main_abs) : config.root;
+  const relativeFromUiRoot = path.relative(uiRootAbs, config.client.componentDir_abs);
+
+  return {
+    component_dir: path.join('.app/ssr', relativeFromUiRoot),
+    componentDir_abs: path.join('.app/ssr', relativeFromUiRoot),
+    component_suffix: relativeFromUiRoot || null
+  };
+}
+
+function calculateAssetFallback(componentSuffix) {
+  if (!componentSuffix) {
+    return null;
+  }
+  return path.join('.app/assets', componentSuffix);
+}
+
+/**
+ * Test with REAL project configurations
+ */
+test('markdown_view: componentDir in subfolder', () => {
+  // Actual values from markdown_view/hammer.config.yml
+  const config = {
+    root: '/Users/shavauhngabay/dev/markdown_view',
+    client: {
+      main_abs: '/Users/shavauhngabay/dev/markdown_view/frontend/frontend.ts',
+      componentDir_abs: '/Users/shavauhngabay/dev/markdown_view/frontend/components'
+    }
+  };
+
+  const result = calculateComponentPaths(config);
+  const assetFallback = calculateAssetFallback(result.component_suffix);
+
+  console.log('markdown_view result:', result);
+  console.log('markdown_view asset fallback:', assetFallback);
+
+  // Expected: components are nested in 'components' subfolder
+  assert.strictEqual(result.component_dir, '.app/ssr/components', 'component_dir should be .app/ssr/components');
+  assert.strictEqual(result.component_suffix, 'components', 'component_suffix should be components');
+  assert.strictEqual(assetFallback, '.app/assets/components', 'asset fallback should be .app/assets/components');
+});
+
+test('noblelaw/liftlog: no explicit componentDir', () => {
+  // When componentDir is not explicitly set, it defaults to UI root
+  const config = {
+    root: '/Users/shavauhngabay/dev/noblelaw',
+    client: {
+      main_abs: '/Users/shavauhngabay/dev/noblelaw/ui/main.ts',
+      componentDir_abs: null
+    }
+  };
+
+  const result = calculateComponentPaths(config);
+  const assetFallback = calculateAssetFallback(result.component_suffix);
+
+  console.log('noblelaw result:', result);
+  console.log('noblelaw asset fallback:', assetFallback);
+
+  // Expected: no suffix, components at root
+  assert.strictEqual(result.component_dir, '.app/ssr', 'component_dir should be .app/ssr');
+  assert.strictEqual(result.component_suffix, null, 'component_suffix should be null');
+  assert.strictEqual(assetFallback, null, 'asset fallback should be null');
+});
+
+test('deeply nested componentDir', () => {
+  // Edge case: deeply nested component directory
+  const config = {
+    root: '/Users/test/project',
+    client: {
+      main_abs: '/Users/test/project/src/ui/main.ts',
+      componentDir_abs: '/Users/test/project/src/ui/components/shared'
+    }
+  };
+
+  const result = calculateComponentPaths(config);
+  const assetFallback = calculateAssetFallback(result.component_suffix);
+
+  console.log('nested result:', result);
+  console.log('nested asset fallback:', assetFallback);
+
+  // Expected: preserves nested structure
+  assert.strictEqual(result.component_dir, '.app/ssr/components/shared', 'component_dir should preserve nested path');
+  assert.strictEqual(result.component_suffix, 'components/shared', 'component_suffix should be components/shared');
+  assert.strictEqual(assetFallback, '.app/assets/components/shared', 'asset fallback should match nested structure');
+});
+
+/**
+ * Test the ACTUAL bug: verify that when we pass component_dir to client.js,
+ * we can extract the suffix without complex string manipulation
+ */
+test('verify simple suffix extraction', () => {
+  const testCases = [
+    { component_dir: '.app/ssr/components', expected: 'components' },
+    { component_dir: '.app/ssr', expected: null },
+    { component_dir: '.app/ssr/components/shared', expected: 'components/shared' }
+  ];
+
+  testCases.forEach(({ component_dir, expected }) => {
+    // This is what we should store in the config
+    const suffix = component_dir.replace('.app/ssr', '').replace(/^\//, '') || null;
+
+    console.log(`component_dir: ${component_dir} → suffix: ${suffix}`);
+
+    assert.strictEqual(
+      suffix,
+      expected,
+      `component_dir ${component_dir} should extract suffix ${expected}`
+    );
+  });
+});
+
+/**
+ * Integration test: Full pipeline from config → bootstrap → runtime
+ */
+test('full pipeline: markdown_view', () => {
+  // Step 1: Config input
+  const configInput = {
+    root: '/Users/shavauhngabay/dev/markdown_view',
+    client: {
+      main_abs: '/Users/shavauhngabay/dev/markdown_view/frontend/frontend.ts',
+      componentDir_abs: '/Users/shavauhngabay/dev/markdown_view/frontend/components'
+    }
+  };
+
+  // Step 2: Bootstrap calculation
+  const bootstrapResult = calculateComponentPaths(configInput);
+
+  // Step 3: Runtime usage (what client.js needs)
+  const runtimeAssetFallback = calculateAssetFallback(bootstrapResult.component_suffix);
+
+  console.log('=== Full Pipeline Test ===');
+  console.log('Config input:', configInput.client);
+  console.log('Bootstrap result:', bootstrapResult);
+  console.log('Runtime asset fallback:', runtimeAssetFallback);
+
+  // Verify the entire flow
+  assert.strictEqual(bootstrapResult.component_dir, '.app/ssr/components');
+  assert.strictEqual(bootstrapResult.component_suffix, 'components');
+  assert.strictEqual(runtimeAssetFallback, '.app/assets/components');
+
+  // This is what we need to mount in Express
+  console.log('\n✅ Express should mount:');
+  console.log('  Primary: .app/assets at /assets');
+  console.log(`  Fallback: ${runtimeAssetFallback} at /assets`);
+  console.log('\n✅ This allows browser to request: /assets/layout/root.js');
+  console.log(`   And Express finds it at: ${runtimeAssetFallback}/layout/root.js`);
+});