zero-query 0.6.3 → 0.7.5

package/tests/http.test.js

@@ -0,0 +1,181 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { http } from '../src/http.js';
+
+
+// ---------------------------------------------------------------------------
+// Mock fetch
+// ---------------------------------------------------------------------------
+let fetchSpy;
+
+function mockFetch(response = {}, ok = true, status = 200) {
+  const body = typeof response === 'string' ? response : JSON.stringify(response);
+  const contentType = typeof response === 'string' ? 'text/plain' : 'application/json';
+
+  fetchSpy = vi.fn(() =>
+    Promise.resolve({
+      ok,
+      status,
+      statusText: ok ? 'OK' : 'Error',
+      headers: {
+        get: (h) => h.toLowerCase() === 'content-type' ? contentType : null,
+        entries: () => [[`content-type`, contentType]],
+      },
+      json: () => Promise.resolve(typeof response === 'object' ? response : JSON.parse(response)),
+      text: () => Promise.resolve(body),
+      blob: () => Promise.resolve(new Blob([body])),
+    })
+  );
+  globalThis.fetch = fetchSpy;
+}
+
+beforeEach(() => {
+  http.configure({ baseURL: '', headers: { 'Content-Type': 'application/json' }, timeout: 30000 });
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+
+// ---------------------------------------------------------------------------
+// GET requests
+// ---------------------------------------------------------------------------
+
+describe('http.get', () => {
+  it('makes a GET request', async () => {
+    mockFetch({ users: [] });
+    const result = await http.get('https://api.test.com/users');
+    expect(fetchSpy).toHaveBeenCalledOnce();
+    expect(result.data).toEqual({ users: [] });
+    expect(result.ok).toBe(true);
+    expect(result.status).toBe(200);
+  });
+
+  it('appends query params for GET', async () => {
+    mockFetch({});
+    await http.get('https://api.test.com/search', { q: 'hello', page: '1' });
+    const url = fetchSpy.mock.calls[0][0];
+    expect(url).toContain('q=hello');
+    expect(url).toContain('page=1');
+  });
+
+  it('uses baseURL', async () => {
+    http.configure({ baseURL: 'https://api.test.com' });
+    mockFetch({});
+    await http.get('/users');
+    expect(fetchSpy.mock.calls[0][0]).toBe('https://api.test.com/users');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// POST requests
+// ---------------------------------------------------------------------------
+
+describe('http.post', () => {
+  it('sends JSON body', async () => {
+    mockFetch({ id: 1 });
+    const result = await http.post('https://api.test.com/users', { name: 'Tony' });
+    const opts = fetchSpy.mock.calls[0][1];
+    expect(opts.method).toBe('POST');
+    expect(opts.body).toBe(JSON.stringify({ name: 'Tony' }));
+    expect(result.data).toEqual({ id: 1 });
+  });
+
+  it('handles FormData body', async () => {
+    mockFetch({});
+    const form = new FormData();
+    form.append('file', 'data');
+    await http.post('https://api.test.com/upload', form);
+    const opts = fetchSpy.mock.calls[0][1];
+    expect(opts.body).toBe(form);
+    // Content-Type should be removed for FormData
+    expect(opts.headers['Content-Type']).toBeUndefined();
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Error handling
+// ---------------------------------------------------------------------------
+
+describe('http — error handling', () => {
+  it('throws on non-ok response', async () => {
+    mockFetch({ error: 'Not Found' }, false, 404);
+    await expect(http.get('https://api.test.com/missing')).rejects.toThrow('HTTP 404');
+  });
+
+  it('error includes response data', async () => {
+    mockFetch({ message: 'Unauthorized' }, false, 401);
+    try {
+      await http.get('https://api.test.com/protected');
+    } catch (err) {
+      expect(err.response).toBeDefined();
+      expect(err.response.status).toBe(401);
+    }
+  });
+
+  it('throws on invalid URL', async () => {
+    await expect(http.get(null)).rejects.toThrow('requires a URL string');
+    await expect(http.get(undefined)).rejects.toThrow('requires a URL string');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// PUT / PATCH / DELETE
+// ---------------------------------------------------------------------------
+
+describe('http — other methods', () => {
+  it('PUT sends correct method', async () => {
+    mockFetch({});
+    await http.put('https://api.test.com/users/1', { name: 'Updated' });
+    expect(fetchSpy.mock.calls[0][1].method).toBe('PUT');
+  });
+
+  it('PATCH sends correct method', async () => {
+    mockFetch({});
+    await http.patch('https://api.test.com/users/1', { name: 'Patched' });
+    expect(fetchSpy.mock.calls[0][1].method).toBe('PATCH');
+  });
+
+  it('DELETE sends correct method', async () => {
+    mockFetch({});
+    await http.delete('https://api.test.com/users/1');
+    expect(fetchSpy.mock.calls[0][1].method).toBe('DELETE');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// configure
+// ---------------------------------------------------------------------------
+
+describe('http.configure', () => {
+  it('sets baseURL', async () => {
+    http.configure({ baseURL: 'https://example.com/api' });
+    mockFetch({});
+    await http.get('/data');
+    expect(fetchSpy.mock.calls[0][0]).toBe('https://example.com/api/data');
+  });
+
+  it('merges headers', async () => {
+    http.configure({ headers: { Authorization: 'Bearer token' } });
+    mockFetch({});
+    await http.get('https://api.test.com/me');
+    expect(fetchSpy.mock.calls[0][1].headers.Authorization).toBe('Bearer token');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Text response
+// ---------------------------------------------------------------------------
+
+describe('http — text response', () => {
+  it('parses text response', async () => {
+    mockFetch('Hello World');
+    const result = await http.get('https://api.test.com/text');
+    expect(result.data).toBe('Hello World');
+  });
+});

package/tests/reactive.test.js

@@ -0,0 +1,191 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { reactive, Signal, signal, computed, effect } from '../src/reactive.js';
+
+
+// ---------------------------------------------------------------------------
+// reactive()
+// ---------------------------------------------------------------------------
+
+describe('reactive', () => {
+  it('triggers onChange when a property is set', () => {
+    const fn = vi.fn();
+    const obj = reactive({ count: 0 }, fn);
+    obj.count = 5;
+    expect(fn).toHaveBeenCalledWith('count', 5, 0);
+  });
+
+  it('does not trigger onChange when value is the same', () => {
+    const fn = vi.fn();
+    const obj = reactive({ count: 0 }, fn);
+    obj.count = 0;
+    expect(fn).not.toHaveBeenCalled();
+  });
+
+  it('returns non-objects as-is', () => {
+    expect(reactive(42, vi.fn())).toBe(42);
+    expect(reactive('hello', vi.fn())).toBe('hello');
+    expect(reactive(null, vi.fn())).toBe(null);
+  });
+
+  it('supports deep nested property access', () => {
+    const fn = vi.fn();
+    const obj = reactive({ user: { name: 'Tony' } }, fn);
+    obj.user.name = 'Sam';
+    expect(fn).toHaveBeenCalledWith('name', 'Sam', 'Tony');
+  });
+
+  it('tracks __isReactive and __raw', () => {
+    const fn = vi.fn();
+    const raw = { x: 1 };
+    const obj = reactive(raw, fn);
+    expect(obj.__isReactive).toBe(true);
+    expect(obj.__raw).toBe(raw);
+  });
+
+  it('triggers onChange on deleteProperty', () => {
+    const fn = vi.fn();
+    const obj = reactive({ x: 1 }, fn);
+    delete obj.x;
+    expect(fn).toHaveBeenCalledWith('x', undefined, 1);
+  });
+
+  it('caches child proxies (same reference on repeated access)', () => {
+    const fn = vi.fn();
+    const obj = reactive({ nested: { a: 1 } }, fn);
+    const first = obj.nested;
+    const second = obj.nested;
+    expect(first).toBe(second);
+  });
+
+  it('handles onChange gracefully when onChange is not a function', () => {
+    // Should not throw — error is reported and a no-op is used
+    expect(() => {
+      const obj = reactive({ x: 1 }, 'not a function');
+      obj.x = 2;
+    }).not.toThrow();
+  });
+
+  it('does not crash when onChange callback throws', () => {
+    const bad = vi.fn(() => { throw new Error('boom'); });
+    const obj = reactive({ x: 1 }, bad);
+    expect(() => { obj.x = 2; }).not.toThrow();
+    expect(bad).toHaveBeenCalled();
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Signal
+// ---------------------------------------------------------------------------
+
+describe('Signal', () => {
+  it('stores and retrieves a value', () => {
+    const s = new Signal(10);
+    expect(s.value).toBe(10);
+  });
+
+  it('notifies subscribers on value change', () => {
+    const s = new Signal(0);
+    const fn = vi.fn();
+    s.subscribe(fn);
+    s.value = 1;
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it('does not notify when value is the same', () => {
+    const s = new Signal(5);
+    const fn = vi.fn();
+    s.subscribe(fn);
+    s.value = 5;
+    expect(fn).not.toHaveBeenCalled();
+  });
+
+  it('subscribe returns an unsubscribe function', () => {
+    const s = new Signal(0);
+    const fn = vi.fn();
+    const unsub = s.subscribe(fn);
+    unsub();
+    s.value = 1;
+    expect(fn).not.toHaveBeenCalled();
+  });
+
+  it('peek() returns value without tracking', () => {
+    const s = new Signal(42);
+    expect(s.peek()).toBe(42);
+  });
+
+  it('toString() returns string representation of value', () => {
+    const s = new Signal(123);
+    expect(s.toString()).toBe('123');
+  });
+
+  it('does not crash when a subscriber throws', () => {
+    const s = new Signal(0);
+    s.subscribe(() => { throw new Error('oops'); });
+    expect(() => { s.value = 1; }).not.toThrow();
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// signal() factory
+// ---------------------------------------------------------------------------
+
+describe('signal()', () => {
+  it('returns a Signal instance', () => {
+    const s = signal(0);
+    expect(s).toBeInstanceOf(Signal);
+    expect(s.value).toBe(0);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// computed()
+// ---------------------------------------------------------------------------
+
+describe('computed()', () => {
+  it('derives value from other signals', () => {
+    const count = signal(2);
+    const doubled = computed(() => count.value * 2);
+    expect(doubled.value).toBe(4);
+  });
+
+  it('updates when dependency changes', () => {
+    const a = signal(1);
+    const b = signal(2);
+    const sum = computed(() => a.value + b.value);
+    expect(sum.value).toBe(3);
+    a.value = 10;
+    expect(sum.value).toBe(12);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// effect()
+// ---------------------------------------------------------------------------
+
+describe('effect()', () => {
+  it('runs the effect function immediately', () => {
+    const fn = vi.fn();
+    effect(fn);
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it('re-runs when a tracked signal changes', () => {
+    const s = signal(0);
+    const log = vi.fn();
+    effect(() => { log(s.value); });
+    expect(log).toHaveBeenCalledWith(0);
+    s.value = 1;
+    expect(log).toHaveBeenCalledWith(1);
+    expect(log).toHaveBeenCalledTimes(2);
+  });
+
+  it('does not crash when effect function throws', () => {
+    expect(() => {
+      effect(() => { throw new Error('fail'); });
+    }).not.toThrow();
+  });
+});

package/tests/router.test.js

@@ -0,0 +1,332 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { createRouter, getRouter } from '../src/router.js';
+import { component } from '../src/component.js';
+
+// Register stub components used in route definitions so mount() doesn't throw
+component('home-page', { render: () => '<p>home</p>' });
+component('about-page', { render: () => '<p>about</p>' });
+component('user-page', { render: () => '<p>user</p>' });
+component('docs-page', { render: () => '<p>docs</p>' });
+
+
+// ---------------------------------------------------------------------------
+// Router creation and basic API
+// ---------------------------------------------------------------------------
+
+describe('Router — creation', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>';
+  });
+
+  it('creates a router and retrieves it with getRouter', () => {
+    const router = createRouter({
+      el: '#app',
+      mode: 'hash',
+      routes: [
+        { path: '/', component: 'home-page' },
+      ],
+    });
+    expect(getRouter()).toBe(router);
+  });
+
+  it('defaults to history mode (unless file:// protocol)', () => {
+    const router = createRouter({
+      routes: [{ path: '/', component: 'home-page' }],
+    });
+    expect(router._mode).toBe('history');
+  });
+
+  it('resolves base path from config', () => {
+    const router = createRouter({
+      base: '/app',
+      routes: [],
+    });
+    expect(router.base).toBe('/app');
+  });
+
+  it('strips trailing slash from base', () => {
+    const router = createRouter({
+      base: '/app/',
+      routes: [],
+    });
+    expect(router.base).toBe('/app');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Route matching
+// ---------------------------------------------------------------------------
+
+describe('Router — route matching', () => {
+  it('compiles path params', () => {
+    const router = createRouter({
+      mode: 'hash',
+      routes: [
+        { path: '/user/:id', component: 'user-page' },
+      ],
+    });
+    const route = router._routes[0];
+    expect(route._regex.test('/user/42')).toBe(true);
+    expect(route._keys).toEqual(['id']);
+  });
+
+  it('adds fallback route alias', () => {
+    const router = createRouter({
+      mode: 'hash',
+      routes: [
+        { path: '/docs/:section', fallback: '/docs', component: 'docs-page' },
+      ],
+    });
+    // Should have two routes: the original + fallback alias
+    expect(router._routes.length).toBe(2);
+    expect(router._routes[1]._regex.test('/docs')).toBe(true);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Navigation
+// ---------------------------------------------------------------------------
+
+describe('Router — navigation', () => {
+  let router;
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>';
+    window.location.hash = '#/';
+    router = createRouter({
+      el: '#app',
+      mode: 'hash',
+      routes: [
+        { path: '/', component: 'home-page' },
+        { path: '/about', component: 'about-page' },
+      ],
+    });
+  });
+
+  it('navigate changes hash', () => {
+    router.navigate('/about');
+    expect(window.location.hash).toBe('#/about');
+  });
+
+  it('replace changes hash without pushing history', () => {
+    router.replace('/about');
+    expect(window.location.hash).toBe('#/about');
+  });
+
+  it('navigate interpolates :param placeholders from options.params', () => {
+    router.navigate('/user/:id', { params: { id: 42 } });
+    expect(window.location.hash).toBe('#/user/42');
+  });
+
+  it('navigate interpolates multiple :param placeholders', () => {
+    router.navigate('/post/:postId/comment/:cid', { params: { postId: 5, cid: 99 } });
+    expect(window.location.hash).toBe('#/post/5/comment/99');
+  });
+
+  it('navigate leaves unmatched :params as-is', () => {
+    router.navigate('/user/:id', { params: { name: 'Alice' } });
+    expect(window.location.hash).toBe('#/user/:id');
+  });
+
+  it('navigate URI-encodes param values', () => {
+    router.navigate('/search/:query', { params: { query: 'hello world' } });
+    expect(window.location.hash).toBe('#/search/hello%20world');
+  });
+
+  it('replace interpolates :param placeholders from options.params', () => {
+    router.replace('/user/:id', { params: { id: 7 } });
+    expect(window.location.hash).toBe('#/user/7');
+  });
+
+  it('navigate without params option works as before', () => {
+    router.navigate('/about');
+    expect(window.location.hash).toBe('#/about');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// _interpolateParams
+// ---------------------------------------------------------------------------
+
+describe('Router — _interpolateParams', () => {
+  let router;
+
+  beforeEach(() => {
+    router = createRouter({ mode: 'hash', routes: [] });
+  });
+
+  it('replaces single :param', () => {
+    expect(router._interpolateParams('/user/:id', { id: 42 })).toBe('/user/42');
+  });
+
+  it('replaces multiple :params', () => {
+    expect(router._interpolateParams('/post/:pid/comment/:cid', { pid: 1, cid: 5 }))
+      .toBe('/post/1/comment/5');
+  });
+
+  it('leaves unmatched :params in place', () => {
+    expect(router._interpolateParams('/user/:id', {})).toBe('/user/:id');
+  });
+
+  it('URI-encodes param values', () => {
+    expect(router._interpolateParams('/tag/:name', { name: 'foo bar' }))
+      .toBe('/tag/foo%20bar');
+  });
+
+  it('returns path unchanged when params is null', () => {
+    expect(router._interpolateParams('/about', null)).toBe('/about');
+  });
+
+  it('converts numbers to strings', () => {
+    expect(router._interpolateParams('/user/:id', { id: 123 })).toBe('/user/123');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// z-link-params
+// ---------------------------------------------------------------------------
+
+describe('Router — z-link-params', () => {
+  let router;
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>';
+    window.location.hash = '#/';
+    router = createRouter({
+      el: '#app',
+      mode: 'hash',
+      routes: [
+        { path: '/', component: 'home-page' },
+        { path: '/user/:id', component: 'user-page' },
+      ],
+    });
+  });
+
+  it('interpolates params from z-link-params attribute on click', () => {
+    document.body.innerHTML += '<a z-link="/user/:id" z-link-params=\'{"id": "42"}\'>User</a>';
+    const link = document.querySelector('[z-link]');
+    link.click();
+    expect(window.location.hash).toBe('#/user/42');
+  });
+
+  it('works without z-link-params (plain z-link)', () => {
+    document.body.innerHTML += '<a z-link="/about">About</a>';
+    const link = document.querySelector('a[z-link="/about"]');
+    link.click();
+    expect(window.location.hash).toBe('#/about');
+  });
+
+  it('ignores malformed z-link-params JSON gracefully', () => {
+    document.body.innerHTML += '<a z-link="/user/fallback" z-link-params="not json">User</a>';
+    const link = document.querySelector('a[z-link="/user/fallback"]');
+    link.click();
+    expect(window.location.hash).toBe('#/user/fallback');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Guards
+// ---------------------------------------------------------------------------
+
+describe('Router — guards', () => {
+  it('beforeEach registers a guard', () => {
+    const router = createRouter({
+      mode: 'hash',
+      routes: [{ path: '/', component: 'home-page' }],
+    });
+    const guard = vi.fn();
+    router.beforeEach(guard);
+    expect(router._guards.before).toContain(guard);
+  });
+
+  it('afterEach registers a guard', () => {
+    const router = createRouter({
+      mode: 'hash',
+      routes: [{ path: '/', component: 'home-page' }],
+    });
+    const guard = vi.fn();
+    router.afterEach(guard);
+    expect(router._guards.after).toContain(guard);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// onChange listener
+// ---------------------------------------------------------------------------
+
+describe('Router — onChange', () => {
+  it('onChange registers and returns unsubscribe', () => {
+    const router = createRouter({
+      mode: 'hash',
+      routes: [],
+    });
+    const fn = vi.fn();
+    const unsub = router.onChange(fn);
+    expect(router._listeners.has(fn)).toBe(true);
+    unsub();
+    expect(router._listeners.has(fn)).toBe(false);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Path normalization
+// ---------------------------------------------------------------------------
+
+describe('Router — path normalization', () => {
+  it('normalizes relative paths', () => {
+    const router = createRouter({
+      mode: 'hash',
+      base: '/app',
+      routes: [],
+    });
+    expect(router._normalizePath('docs')).toBe('/docs');
+    expect(router._normalizePath('/docs')).toBe('/docs');
+  });
+
+  it('strips base prefix from path', () => {
+    const router = createRouter({
+      mode: 'hash',
+      base: '/app',
+      routes: [],
+    });
+    expect(router._normalizePath('/app/docs')).toBe('/docs');
+    expect(router._normalizePath('/app')).toBe('/');
+  });
+
+  it('resolve() adds base prefix', () => {
+    const router = createRouter({
+      mode: 'hash',
+      base: '/app',
+      routes: [],
+    });
+    expect(router.resolve('/docs')).toBe('/app/docs');
+    expect(router.resolve('about')).toBe('/app/about');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Destroy
+// ---------------------------------------------------------------------------
+
+describe('Router — destroy', () => {
+  it('clears routes, guards, and listeners', () => {
+    const router = createRouter({
+      mode: 'hash',
+      routes: [{ path: '/', component: 'home-page' }],
+    });
+    router.beforeEach(() => {});
+    router.onChange(() => {});
+    router.destroy();
+    expect(router._routes.length).toBe(0);
+    expect(router._guards.before.length).toBe(0);
+    expect(router._listeners.size).toBe(0);
+  });
+});