zero-query 0.9.8 → 1.0.0

package/tests/ssr.test.js

@@ -1,5 +1,6 @@
-import { describe, it, expect } from 'vitest';
-import { createSSRApp, renderToString } from '../src/ssr.js';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { createSSRApp, renderToString, escapeHtml } from '../src/ssr.js';
+import { ZQueryError, ErrorCode, onError } from '../src/errors.js';
 
 
 // ---------------------------------------------------------------------------
@@ -13,6 +14,14 @@ describe('createSSRApp', () => {
     expect(typeof app.component).toBe('function');
     expect(typeof app.renderToString).toBe('function');
     expect(typeof app.renderPage).toBe('function');
+    expect(typeof app.renderBatch).toBe('function');
+    expect(typeof app.has).toBe('function');
+  });
+
+  it('each call returns a fresh instance', () => {
+    const a = createSSRApp();
+    const b = createSSRApp();
+    expect(a).not.toBe(b);
   });
 });
 
@@ -21,7 +30,7 @@ describe('createSSRApp', () => {
 // component registration
 // ---------------------------------------------------------------------------
 
-describe('SSRApp — component', () => {
+describe('SSRApp - component', () => {
   it('registers a component and returns self for chaining', () => {
     const app = createSSRApp();
     const result = app.component('my-comp', {
@@ -30,10 +39,58 @@ describe('SSRApp — component', () => {
     expect(result).toBe(app);
   });
 
-  it('throws when rendering unregistered component', async () => {
+  it('throws ZQueryError when rendering unregistered component', async () => {
     const app = createSSRApp();
+    await expect(app.renderToString('nonexistent')).rejects.toThrow(ZQueryError);
     await expect(app.renderToString('nonexistent')).rejects.toThrow('not registered');
   });
+
+  it('throws ZQueryError for invalid component name (empty string)', () => {
+    const app = createSSRApp();
+    expect(() => app.component('', {})).toThrow(ZQueryError);
+  });
+
+  it('throws ZQueryError for non-string component name', () => {
+    const app = createSSRApp();
+    expect(() => app.component(123, {})).toThrow(ZQueryError);
+  });
+
+  it('throws ZQueryError for invalid definition (null)', () => {
+    const app = createSSRApp();
+    expect(() => app.component('my-comp', null)).toThrow(ZQueryError);
+  });
+
+  it('throws ZQueryError for non-object definition', () => {
+    const app = createSSRApp();
+    expect(() => app.component('my-comp', 'not-an-object')).toThrow(ZQueryError);
+  });
+
+  it('allows re-registering a component (override)', async () => {
+    const app = createSSRApp();
+    app.component('my-comp', { render() { return '<p>v1</p>'; } });
+    app.component('my-comp', { render() { return '<p>v2</p>'; } });
+    const html = await app.renderToString('my-comp');
+    expect(html).toContain('v2');
+    expect(html).not.toContain('v1');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// SSRApp.has()
+// ---------------------------------------------------------------------------
+
+describe('SSRApp - has', () => {
+  it('returns false for unregistered', () => {
+    const app = createSSRApp();
+    expect(app.has('nope')).toBe(false);
+  });
+
+  it('returns true for registered', () => {
+    const app = createSSRApp();
+    app.component('my-comp', { render() { return ''; } });
+    expect(app.has('my-comp')).toBe(true);
+  });
 });
 
 
@@ -41,7 +98,7 @@ describe('SSRApp — component', () => {
 // renderToString (app method)
 // ---------------------------------------------------------------------------
 
-describe('SSRApp — renderToString', () => {
+describe('SSRApp - renderToString', () => {
   it('renders basic component', async () => {
     const app = createSSRApp();
     app.component('my-page', {
@@ -100,6 +157,69 @@ describe('SSRApp — renderToString', () => {
     const html = await app.renderToString('my-comp');
     expect(html).not.toContain('@click');
   });
+
+  it('strips z-on: event bindings', async () => {
+    const app = createSSRApp();
+    app.component('my-comp', {
+      render() { return '<button z-on:click="handle">Click</button>'; }
+    });
+    const html = await app.renderToString('my-comp');
+    expect(html).not.toContain('z-on:');
+  });
+
+  it('renders empty string when no render function', async () => {
+    const app = createSSRApp();
+    app.component('empty', { state: () => ({}) });
+    const html = await app.renderToString('empty');
+    expect(html).toContain('<empty');
+    expect(html).toContain('</empty>');
+  });
+
+  it('fragment mode returns inner HTML only', async () => {
+    const app = createSSRApp();
+    app.component('frag', { render() { return '<p>inner</p>'; } });
+    const html = await app.renderToString('frag', {}, { mode: 'fragment' });
+    expect(html).toBe('<p>inner</p>');
+    expect(html).not.toContain('<frag');
+  });
+
+  it('error in render() produces comment and reports via error system', async () => {
+    const handler = vi.fn();
+    onError(handler);
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    const app = createSSRApp();
+    app.component('bad', {
+      render() { throw new Error('render boom'); }
+    });
+    const html = await app.renderToString('bad');
+    expect(html).toContain('<!-- SSR render error -->');
+    expect(html).not.toContain('render boom');
+    expect(handler).toHaveBeenCalled();
+    const err = handler.mock.calls[0][0];
+    expect(err.code).toBe(ErrorCode.SSR_RENDER);
+
+    spy.mockRestore();
+    onError(null);
+  });
+
+  it('error in init() is reported but does not crash', async () => {
+    const handler = vi.fn();
+    onError(handler);
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    const app = createSSRApp();
+    app.component('bad-init', {
+      init() { throw new Error('init boom'); },
+      render() { return '<div>ok</div>'; }
+    });
+    const html = await app.renderToString('bad-init');
+    expect(html).toContain('<div>ok</div>');
+    expect(handler).toHaveBeenCalled();
+
+    spy.mockRestore();
+    onError(null);
+  });
 });
 
 
@@ -120,6 +240,27 @@ describe('renderToString (standalone)', () => {
     const html = renderToString({ state: {} });
     expect(html).toBe('');
   });
+
+  it('throws ZQueryError for invalid definition', () => {
+    expect(() => renderToString(null)).toThrow(ZQueryError);
+    expect(() => renderToString('string')).toThrow(ZQueryError);
+  });
+
+  it('works with props', () => {
+    const html = renderToString({
+      render() { return `<span>${this.props.x}</span>`; }
+    }, { x: 42 });
+    expect(html).toContain('42');
+  });
+
+  it('props are frozen', () => {
+    let frozen = false;
+    renderToString({
+      init() { frozen = Object.isFrozen(this.props); },
+      render() { return ''; }
+    }, { a: 1 });
+    expect(frozen).toBe(true);
+  });
 });
 
 
@@ -127,7 +268,7 @@ describe('renderToString (standalone)', () => {
 // State factory
 // ---------------------------------------------------------------------------
 
-describe('SSR — state factory', () => {
+describe('SSR - state factory', () => {
   it('calls state function for initial state', async () => {
     const app = createSSRApp();
     let callCount = 0;
@@ -149,6 +290,38 @@ describe('SSR — state factory', () => {
     const html = await app.renderToString('comp');
     expect(html).toContain('1');
   });
+
+  it('each render gets fresh state from factory', async () => {
+    const app = createSSRApp();
+    app.component('comp', {
+      state: () => ({ count: 0 }),
+      init() { this.state.count++; },
+      render() { return `<p>${this.state.count}</p>`; }
+    });
+    const html1 = await app.renderToString('comp');
+    const html2 = await app.renderToString('comp');
+    expect(html1).toContain('<p>1</p>');
+    expect(html2).toContain('<p>1</p>');
+  });
+
+  it('has __raw property on state', () => {
+    let hasRaw = false;
+    renderToString({
+      init() { hasRaw = this.state.__raw === this.state; },
+      render() { return ''; }
+    });
+    expect(hasRaw).toBe(true);
+  });
+
+  it('__raw is non-enumerable', () => {
+    let keys = [];
+    renderToString({
+      state: () => ({ a: 1 }),
+      init() { keys = Object.keys(this.state); },
+      render() { return ''; }
+    });
+    expect(keys).not.toContain('__raw');
+  });
 });
 
 
@@ -156,7 +329,7 @@ describe('SSR — state factory', () => {
 // Computed properties
 // ---------------------------------------------------------------------------
 
-describe('SSR — computed', () => {
+describe('SSR - computed', () => {
   it('computes derived values', async () => {
     const app = createSSRApp();
     app.component('comp', {
@@ -169,6 +342,67 @@ describe('SSR — computed', () => {
     const html = await app.renderToString('comp');
     expect(html).toContain('Jane Doe');
   });
+
+  it('computed has access to this context', async () => {
+    const app = createSSRApp();
+    app.component('comp', {
+      state: () => ({ items: [1, 2, 3] }),
+      computed: {
+        count() { return this.state.items.length; }
+      },
+      render() { return `<p>${this.computed.count}</p>`; }
+    });
+    const html = await app.renderToString('comp');
+    expect(html).toContain('<p>3</p>');
+  });
+
+  it('error in computed is reported and returns undefined', async () => {
+    const handler = vi.fn();
+    onError(handler);
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    const app = createSSRApp();
+    app.component('comp', {
+      state: () => ({}),
+      computed: {
+        broken() { throw new Error('computed boom'); }
+      },
+      render() { return `<p>${this.computed.broken}</p>`; }
+    });
+    const html = await app.renderToString('comp');
+    expect(html).toContain('undefined');
+    expect(handler).toHaveBeenCalled();
+
+    spy.mockRestore();
+    onError(null);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// User methods
+// ---------------------------------------------------------------------------
+
+describe('SSR - user methods', () => {
+  it('binds user methods and they can be called in render', async () => {
+    const app = createSSRApp();
+    app.component('comp', {
+      state: () => ({ items: ['a', 'b'] }),
+      getCount() { return this.state.items.length; },
+      render() { return `<p>${this.getCount()}</p>`; }
+    });
+    const html = await app.renderToString('comp');
+    expect(html).toContain('<p>2</p>');
+  });
+
+  it('does not bind reserved keys', () => {
+    let hasMounted = false;
+    renderToString({
+      mounted() { hasMounted = true; },
+      render() { return ''; }
+    });
+    expect(hasMounted).toBe(false);
+  });
 });
 
 
@@ -176,7 +410,7 @@ describe('SSR — computed', () => {
 // Init lifecycle
 // ---------------------------------------------------------------------------
 
-describe('SSR — init lifecycle', () => {
+describe('SSR - init lifecycle', () => {
   it('calls init() during construction', () => {
     let initCalled = false;
     renderToString({
@@ -185,6 +419,74 @@ describe('SSR — init lifecycle', () => {
     });
     expect(initCalled).toBe(true);
   });
+
+  it('init can modify state before render', async () => {
+    const app = createSSRApp();
+    app.component('comp', {
+      state: () => ({ msg: 'before' }),
+      init() { this.state.msg = 'after'; },
+      render() { return `<p>${this.state.msg}</p>`; }
+    });
+    const html = await app.renderToString('comp');
+    expect(html).toContain('after');
+  });
+
+  it('init has access to props', () => {
+    let receivedProps = null;
+    renderToString({
+      init() { receivedProps = this.props; },
+      render() { return ''; }
+    }, { x: 42 });
+    expect(receivedProps.x).toBe(42);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// {{expression}} interpolation
+// ---------------------------------------------------------------------------
+
+describe('SSR - expression interpolation', () => {
+  it('interpolates {{state.key}} patterns', () => {
+    const html = renderToString({
+      state: () => ({ name: 'World' }),
+      render() { return '<p>Hello {{name}}</p>'; }
+    });
+    expect(html).toContain('Hello World');
+  });
+
+  it('escapes HTML in interpolated values', () => {
+    const html = renderToString({
+      state: () => ({ xss: '<script>alert(1)</script>' }),
+      render() { return '<p>{{xss}}</p>'; }
+    });
+    expect(html).not.toContain('<script>');
+    expect(html).toContain('&lt;script&gt;');
+  });
+
+  it('renders empty string for null/undefined expressions', () => {
+    const html = renderToString({
+      state: () => ({ x: null }),
+      render() { return '<p>{{x}}</p>'; }
+    });
+    expect(html).toContain('<p></p>');
+  });
+
+  it('expression error is reported and produces empty string', () => {
+    const handler = vi.fn();
+    onError(handler);
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    const html = renderToString({
+      state: () => ({}),
+      render() { return '<p>{{nonexistent.deep.path}}</p>'; }
+    });
+    // Should still produce valid HTML (empty interpolation)
+    expect(html).toContain('<p>');
+
+    spy.mockRestore();
+    onError(null);
+  });
 });
 
 
@@ -192,7 +494,7 @@ describe('SSR — init lifecycle', () => {
 // XSS sanitization via _escapeHtml
 // ---------------------------------------------------------------------------
 
-describe('SSR — XSS sanitization', () => {
+describe('SSR - XSS sanitization', () => {
   it('escapes HTML in renderPage title', async () => {
     const app = createSSRApp();
     const html = await app.renderPage({ title: '<script>alert("xss")</script>' });
@@ -217,6 +519,20 @@ describe('SSR — XSS sanitization', () => {
     const html = await app.renderPage({ bodyAttrs: 'data-x="javascript:void(0)"' });
     expect(html).not.toContain('javascript:');
   });
+
+  it('escapes description in meta tag', async () => {
+    const app = createSSRApp();
+    const html = await app.renderPage({ description: '"><script>xss</script>' });
+    expect(html).toContain('&quot;');
+    expect(html).not.toContain('"><script>');
+  });
+
+  it('escapes OG tag values', async () => {
+    const app = createSSRApp();
+    const html = await app.renderPage({ head: { og: { title: '"><script>xss</script>' } } });
+    expect(html).toContain('og:title');
+    expect(html).not.toContain('"><script>');
+  });
 });
 
 
@@ -224,7 +540,7 @@ describe('SSR — XSS sanitization', () => {
 // renderPage
 // ---------------------------------------------------------------------------
 
-describe('SSRApp — renderPage', () => {
+describe('SSRApp - renderPage', () => {
   it('renders a full HTML page', async () => {
     const app = createSSRApp();
     app.component('page', { render() { return '<h1>Home</h1>'; } });
@@ -258,4 +574,122 @@ describe('SSRApp — renderPage', () => {
     const html = await app.renderPage({ scripts: ['app.js'] });
     expect(html).toContain('src="app.js"');
   });
+
+  it('includes meta description when provided', async () => {
+    const app = createSSRApp();
+    const html = await app.renderPage({ description: 'A cool page' });
+    expect(html).toContain('<meta name="description" content="A cool page">');
+  });
+
+  it('includes canonical URL', async () => {
+    const app = createSSRApp();
+    const html = await app.renderPage({ head: { canonical: 'https://example.com/' } });
+    expect(html).toContain('<link rel="canonical" href="https://example.com/">');
+  });
+
+  it('includes Open Graph tags', async () => {
+    const app = createSSRApp();
+    const html = await app.renderPage({
+      head: { og: { title: 'My Page', image: 'https://example.com/img.png' } }
+    });
+    expect(html).toContain('property="og:title"');
+    expect(html).toContain('content="My Page"');
+    expect(html).toContain('property="og:image"');
+  });
+
+  it('gracefully handles render failure in renderPage', async () => {
+    const handler = vi.fn();
+    onError(handler);
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    const app = createSSRApp();
+    app.component('bad-page', { render() { throw new Error('page boom'); } });
+    const html = await app.renderPage({ component: 'bad-page', title: 'Oops' });
+    expect(html).toContain('<!DOCTYPE html>');
+    expect(html).toContain('<!-- SSR render error -->');
+    expect(html).not.toContain('page boom');
+    expect(handler).toHaveBeenCalled();
+
+    spy.mockRestore();
+    onError(null);
+  });
+
+  it('has correct structure: doctype, html, head, body', async () => {
+    const app = createSSRApp();
+    const html = await app.renderPage({});
+    expect(html).toMatch(/^<!DOCTYPE html>/);
+    expect(html).toContain('<html');
+    expect(html).toContain('<head>');
+    expect(html).toContain('</head>');
+    expect(html).toContain('<body');
+    expect(html).toContain('</body>');
+    expect(html).toContain('</html>');
+  });
+
+  it('defaults lang to "en"', async () => {
+    const app = createSSRApp();
+    const html = await app.renderPage({});
+    expect(html).toContain('lang="en"');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// renderBatch
+// ---------------------------------------------------------------------------
+
+describe('SSRApp - renderBatch', () => {
+  it('renders multiple components at once', async () => {
+    const app = createSSRApp();
+    app.component('header-el', { render() { return '<header>Head</header>'; } });
+    app.component('footer-el', { render() { return '<footer>Foot</footer>'; } });
+
+    const results = await app.renderBatch([
+      { name: 'header-el' },
+      { name: 'footer-el' }
+    ]);
+    expect(results).toHaveLength(2);
+    expect(results[0]).toContain('Head');
+    expect(results[1]).toContain('Foot');
+  });
+
+  it('passes props per entry', async () => {
+    const app = createSSRApp();
+    app.component('greeting', {
+      render() { return `<span>${this.props.msg}</span>`; }
+    });
+    const results = await app.renderBatch([
+      { name: 'greeting', props: { msg: 'Hello' } },
+      { name: 'greeting', props: { msg: 'Bye' } }
+    ]);
+    expect(results[0]).toContain('Hello');
+    expect(results[1]).toContain('Bye');
+  });
+
+  it('rejects if any component is unregistered', async () => {
+    const app = createSSRApp();
+    app.component('ok-comp', { render() { return '<p>ok</p>'; } });
+    await expect(
+      app.renderBatch([{ name: 'ok-comp' }, { name: 'missing' }])
+    ).rejects.toThrow('not registered');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// escapeHtml (exported utility)
+// ---------------------------------------------------------------------------
+
+describe('escapeHtml (exported)', () => {
+  it('escapes all dangerous characters', () => {
+    expect(escapeHtml('&<>"\'')).toBe('&amp;&lt;&gt;&quot;&#39;');
+  });
+
+  it('leaves safe strings unchanged', () => {
+    expect(escapeHtml('hello world')).toBe('hello world');
+  });
+
+  it('coerces numbers to string', () => {
+    expect(escapeHtml(42)).toBe('42');
+  });
 });