@synetics/ui 0.7.0-alpha

package/src/showcase/__tests__/unit/context.test.ts

@@ -0,0 +1,122 @@
+/**
+ * Unit Tests: Context Showcase Components
+ * Tests theme and user context providers
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+describe('Context Unit Tests', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  describe('Theme Context', () => {
+    it('should toggle between light and dark themes', () => {
+      const [theme, setTheme] = createSignal<'light' | 'dark'>('dark');
+
+      expect(theme()).toBe('dark');
+
+      setTheme('light');
+      expect(theme()).toBe('light');
+
+      setTheme('dark');
+      expect(theme()).toBe('dark');
+    });
+
+    it('should apply theme colors', () => {
+      const getThemeColors = (theme: 'light' | 'dark') => {
+        return theme === 'light'
+          ? { bg: '#ffffff', text: '#000000' }
+          : { bg: '#1a1a1a', text: '#ffffff' };
+      };
+
+      const lightColors = getThemeColors('light');
+      expect(lightColors.bg).toBe('#ffffff');
+      expect(lightColors.text).toBe('#000000');
+
+      const darkColors = getThemeColors('dark');
+      expect(darkColors.bg).toBe('#1a1a1a');
+      expect(darkColors.text).toBe('#ffffff');
+    });
+  });
+
+  describe('User Context', () => {
+    it('should store user information', () => {
+      const [user, setUser] = createSignal({
+        name: 'John Doe',
+        email: 'john@example.com',
+        role: 'user',
+      });
+
+      expect(user().name).toBe('John Doe');
+      expect(user().email).toBe('john@example.com');
+      expect(user().role).toBe('user');
+    });
+
+    it('should update user name', () => {
+      const [user, setUser] = createSignal({
+        name: 'John Doe',
+        email: 'john@example.com',
+      });
+
+      setUser({ ...user(), name: 'Jane Smith' });
+      expect(user().name).toBe('Jane Smith');
+      expect(user().email).toBe('john@example.com');
+    });
+
+    it('should toggle user authentication', () => {
+      const [isLoggedIn, setIsLoggedIn] = createSignal(false);
+
+      expect(isLoggedIn()).toBe(false);
+
+      setIsLoggedIn(true);
+      expect(isLoggedIn()).toBe(true);
+    });
+  });
+
+  describe('Settings Context', () => {
+    it('should manage application settings', () => {
+      const [settings, setSettings] = createSignal({
+        notifications: true,
+        sound: false,
+        language: 'en',
+      });
+
+      expect(settings().notifications).toBe(true);
+      expect(settings().sound).toBe(false);
+      expect(settings().language).toBe('en');
+    });
+
+    it('should toggle individual settings', () => {
+      const [notifications, setNotifications] = createSignal(true);
+
+      setNotifications(!notifications());
+      expect(notifications()).toBe(false);
+
+      setNotifications(!notifications());
+      expect(notifications()).toBe(true);
+    });
+  });
+
+  describe('Nested Context', () => {
+    it('should handle multiple context providers', () => {
+      const [theme, setTheme] = createSignal('dark');
+      const [user, setUser] = createSignal({ name: 'John' });
+
+      expect(theme()).toBe('dark');
+      expect(user().name).toBe('John');
+
+      setTheme('light');
+      expect(theme()).toBe('light');
+      expect(user().name).toBe('John'); // Should not affect user context
+    });
+  });
+});

package/src/showcase/__tests__/unit/control-flow.test.ts

@@ -0,0 +1,167 @@
+/**
+ * Unit Tests: Control Flow Showcase Components
+ * Tests Show, For, and Index components
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+describe('Control Flow Unit Tests', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  describe('Show Component', () => {
+    it('should render children when condition is true', () => {
+      const [show, setShow] = createSignal(true);
+
+      const element = document.createElement('div');
+      if (show()) {
+        const child = document.createElement('span');
+        child.textContent = 'Visible';
+        element.appendChild(child);
+      }
+      container.appendChild(element);
+
+      expect(element.textContent).toBe('Visible');
+    });
+
+    it('should not render children when condition is false', () => {
+      const [show, setShow] = createSignal(false);
+
+      const element = document.createElement('div');
+      if (show()) {
+        const child = document.createElement('span');
+        child.textContent = 'Hidden';
+        element.appendChild(child);
+      }
+      container.appendChild(element);
+
+      expect(element.textContent).toBe('');
+    });
+
+    it('should toggle between shown and hidden states', () => {
+      const [show, setShow] = createSignal(true);
+
+      const element = document.createElement('div');
+      const updateElement = () => {
+        element.innerHTML = '';
+        if (show()) {
+          const child = document.createElement('span');
+          child.textContent = 'Visible';
+          element.appendChild(child);
+        }
+      };
+
+      updateElement();
+      expect(element.textContent).toBe('Visible');
+
+      setShow(false);
+      updateElement();
+      expect(element.textContent).toBe('');
+
+      setShow(true);
+      updateElement();
+      expect(element.textContent).toBe('Visible');
+    });
+  });
+
+  describe('For Component', () => {
+    it('should render list items', () => {
+      const items = [
+        { id: 1, name: 'Item 1' },
+        { id: 2, name: 'Item 2' },
+        { id: 3, name: 'Item 3' },
+      ];
+
+      const list = document.createElement('ul');
+      items.forEach((item) => {
+        const li = document.createElement('li');
+        li.textContent = item.name;
+        li.dataset.id = String(item.id);
+        list.appendChild(li);
+      });
+      container.appendChild(list);
+
+      expect(list.children.length).toBe(3);
+      expect(list.children[0].textContent).toBe('Item 1');
+      expect(list.children[2].textContent).toBe('Item 3');
+    });
+
+    it('should handle empty list', () => {
+      const items: any[] = [];
+
+      const list = document.createElement('div');
+      if (items.length === 0) {
+        const fallback = document.createElement('p');
+        fallback.textContent = 'No items';
+        list.appendChild(fallback);
+      }
+      container.appendChild(list);
+
+      expect(list.textContent).toBe('No items');
+    });
+
+    it('should add items dynamically', () => {
+      const [items, setItems] = createSignal([{ id: 1, name: 'Item 1', price: 10 }]);
+
+      const renderList = () => {
+        const list = document.createElement('div');
+        items().forEach((item) => {
+          const div = document.createElement('div');
+          div.textContent = `${item.name} - $${item.price}`;
+          list.appendChild(div);
+        });
+        return list;
+      };
+
+      let list = renderList();
+      container.appendChild(list);
+      expect(list.children.length).toBe(1);
+
+      // Add item
+      setItems([...items(), { id: 2, name: 'Item 2', price: 20 }]);
+      container.innerHTML = '';
+      list = renderList();
+      container.appendChild(list);
+      expect(list.children.length).toBe(2);
+    });
+
+    it('should remove items by id', () => {
+      const [items, setItems] = createSignal([
+        { id: 1, name: 'Item 1', price: 10 },
+        { id: 2, name: 'Item 2', price: 20 },
+        { id: 3, name: 'Item 3', price: 30 },
+      ]);
+
+      setItems(items().filter((item) => item.id !== 2));
+      expect(items().length).toBe(2);
+      expect(items().find((item) => item.id === 2)).toBeUndefined();
+    });
+  });
+
+  describe('Index Component', () => {
+    it('should provide index to render function', () => {
+      const items = ['A', 'B', 'C'];
+      const list = document.createElement('div');
+
+      items.forEach((item, index) => {
+        const div = document.createElement('div');
+        div.textContent = `${index}: ${item}`;
+        list.appendChild(div);
+      });
+      container.appendChild(list);
+
+      expect(list.children[0].textContent).toBe('0: A');
+      expect(list.children[1].textContent).toBe('1: B');
+      expect(list.children[2].textContent).toBe('2: C');
+    });
+  });
+});

package/src/showcase/__tests__/unit/error-boundary.test.ts

@@ -0,0 +1,116 @@
+/**
+ * Unit Tests: Error Boundary Showcase Components
+ * Tests Tryer/Catcher error handling
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+describe('Error Boundary Unit Tests', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  describe('Basic Error Handling', () => {
+    it('should catch thrown errors', () => {
+      const errorMessage = 'Test error';
+      let caughtError: Error | null = null;
+
+      try {
+        throw new Error(errorMessage);
+      } catch (error) {
+        caughtError = error as Error;
+      }
+
+      expect(caughtError).not.toBeNull();
+      expect(caughtError?.message).toBe(errorMessage);
+    });
+
+    it('should display safe component when no error', () => {
+      const [throwError, setThrowError] = createSignal(false);
+
+      const element = document.createElement('div');
+      if (!throwError()) {
+        element.textContent = 'Safe Component';
+      } else {
+        element.textContent = 'Error!';
+      }
+      container.appendChild(element);
+
+      expect(element.textContent).toBe('Safe Component');
+    });
+
+    it('should handle error toggle', () => {
+      const [throwError, setThrowError] = createSignal(false);
+
+      expect(throwError()).toBe(false);
+
+      setThrowError(true);
+      expect(throwError()).toBe(true);
+
+      setThrowError(false);
+      expect(throwError()).toBe(false);
+    });
+  });
+
+  describe('Error Messages', () => {
+    it('should handle custom error messages', () => {
+      const [errorMessage, setErrorMessage] = createSignal('Default error');
+
+      expect(errorMessage()).toBe('Default error');
+
+      setErrorMessage('Custom error message');
+      expect(errorMessage()).toBe('Custom error message');
+    });
+
+    it('should display error message in UI', () => {
+      const message = 'Something went wrong!';
+      const errorDisplay = document.createElement('div');
+      errorDisplay.className = 'error';
+      errorDisplay.textContent = message;
+      container.appendChild(errorDisplay);
+
+      expect(errorDisplay.textContent).toBe(message);
+      expect(errorDisplay.className).toBe('error');
+    });
+  });
+
+  describe('Reset Functionality', () => {
+    it('should reset error state', () => {
+      const [hasError, setHasError] = createSignal(true);
+
+      const reset = () => {
+        setHasError(false);
+      };
+
+      expect(hasError()).toBe(true);
+      reset();
+      expect(hasError()).toBe(false);
+    });
+  });
+
+  describe('Error Component State', () => {
+    it('should track componentDidThrow state', () => {
+      const [componentDidThrow, setComponentDidThrow] = createSignal(false);
+
+      const simulateError = () => {
+        try {
+          throw new Error('Component error');
+        } catch (error) {
+          setComponentDidThrow(true);
+        }
+      };
+
+      expect(componentDidThrow()).toBe(false);
+      simulateError();
+      expect(componentDidThrow()).toBe(true);
+    });
+  });
+});

package/src/showcase/__tests__/unit/portal.test.ts

@@ -0,0 +1,122 @@
+/**
+ * Unit Tests: Portal Showcase Components
+ * Tests portal rendering and positioning
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+describe('Portal Unit Tests', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    container.id = 'test-container';
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    // Clean up any portaled elements
+    const portals = document.querySelectorAll('[data-portal]');
+    portals.forEach((portal) => portal.remove());
+  });
+
+  describe('Basic Portal', () => {
+    it('should render portal content outside parent', () => {
+      const portalContent = document.createElement('div');
+      portalContent.dataset.portal = 'true';
+      portalContent.textContent = 'Portaled Content';
+      document.body.appendChild(portalContent);
+
+      expect(document.body.contains(portalContent)).toBe(true);
+      expect(container.contains(portalContent)).toBe(false);
+    });
+
+    it('should toggle portal visibility', () => {
+      const [showPortal, setShowPortal] = createSignal(false);
+
+      expect(showPortal()).toBe(false);
+
+      setShowPortal(true);
+      expect(showPortal()).toBe(true);
+
+      if (showPortal()) {
+        const portal = document.createElement('div');
+        portal.dataset.portal = 'true';
+        document.body.appendChild(portal);
+        expect(document.querySelector('[data-portal]')).not.toBeNull();
+      }
+    });
+
+    it('should mount to custom element', () => {
+      const customMount = document.createElement('div');
+      customMount.id = 'custom-mount';
+      document.body.appendChild(customMount);
+
+      const portalContent = document.createElement('div');
+      portalContent.textContent = 'Portal in custom mount';
+      customMount.appendChild(portalContent);
+
+      expect(customMount.contains(portalContent)).toBe(true);
+
+      customMount.remove();
+    });
+  });
+
+  describe('Modal Portal', () => {
+    it('should create modal overlay', () => {
+      const overlay = document.createElement('div');
+      overlay.style.position = 'fixed';
+      overlay.style.top = '0';
+      overlay.style.left = '0';
+      overlay.style.right = '0';
+      overlay.style.bottom = '0';
+      overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+      document.body.appendChild(overlay);
+
+      expect(overlay.style.position).toBe('fixed');
+      expect(overlay.style.backgroundColor).toBe('rgba(0, 0, 0, 0.5)');
+
+      overlay.remove();
+    });
+
+    it('should center modal content', () => {
+      const modal = document.createElement('div');
+      modal.style.position = 'fixed';
+      modal.style.top = '50%';
+      modal.style.left = '50%';
+      modal.style.transform = 'translate(-50%, -50%)';
+
+      expect(modal.style.position).toBe('fixed');
+      expect(modal.style.top).toBe('50%');
+      expect(modal.style.left).toBe('50%');
+    });
+  });
+
+  describe('Tooltip Portal', () => {
+    it('should position tooltip near trigger', () => {
+      const tooltip = document.createElement('div');
+      tooltip.style.position = 'absolute';
+      tooltip.style.top = '100px';
+      tooltip.style.left = '200px';
+
+      expect(tooltip.style.position).toBe('absolute');
+      expect(tooltip.style.top).toBe('100px');
+      expect(tooltip.style.left).toBe('200px');
+    });
+  });
+
+  describe('Portal Cleanup', () => {
+    it('should remove portal content on unmount', () => {
+      const portal = document.createElement('div');
+      portal.dataset.portal = 'test';
+      document.body.appendChild(portal);
+
+      expect(document.querySelector('[data-portal="test"]')).not.toBeNull();
+
+      portal.remove();
+      expect(document.querySelector('[data-portal="test"]')).toBeNull();
+    });
+  });
+});

package/src/showcase/__tests__/unit/reactivity.test.ts

@@ -0,0 +1,152 @@
+/**
+ * Unit Tests: Reactivity Showcase Components
+ * Tests signal, memo, effect, and batch demos
+ */
+
+import {
+  $REGISTRY,
+  batch,
+  createEffect,
+  createMemo,
+  createSignal,
+} from '@synetics/synetics.dev';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+describe('Reactivity Unit Tests', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    $REGISTRY.reset();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    $REGISTRY.reset();
+  });
+
+  describe('Signal Demo', () => {
+    it('should update UI when signal changes', () => {
+      const [count, setCount] = createSignal(0);
+
+      const element = document.createElement('div');
+      element.textContent = `Count: ${count()}`;
+      container.appendChild(element);
+
+      expect(element.textContent).toBe('Count: 0');
+
+      setCount(5);
+      element.textContent = `Count: ${count()}`;
+      expect(element.textContent).toBe('Count: 5');
+    });
+
+    it('should handle multiple signals independently', () => {
+      const [firstName, setFirstName] = createSignal('John');
+      const [lastName, setLastName] = createSignal('Doe');
+
+      expect(firstName()).toBe('John');
+      expect(lastName()).toBe('Doe');
+
+      setFirstName('Jane');
+      expect(firstName()).toBe('Jane');
+      expect(lastName()).toBe('Doe');
+    });
+
+    it('should handle numeric signal increments', () => {
+      const [age, setAge] = createSignal(25);
+
+      setAge(age() + 1);
+      expect(age()).toBe(26);
+
+      setAge(age() + 5);
+      expect(age()).toBe(31);
+    });
+  });
+
+  describe('Memo Demo', () => {
+    it('should compute derived values from signals', () => {
+      const [count, setCount] = createSignal(5);
+      const doubled = createMemo(() => count() * 2);
+
+      expect(doubled()).toBe(10);
+
+      setCount(10);
+      expect(doubled()).toBe(20);
+    });
+
+    it('should memoize computations', () => {
+      let computeCount = 0;
+      const [value, setValue] = createSignal(10);
+
+      const expensive = createMemo(() => {
+        computeCount++;
+        return value() * 2;
+      });
+
+      // First access triggers computation
+      expect(expensive()).toBe(20);
+      expect(computeCount).toBe(1);
+
+      // Repeated access without signal change should not recompute
+      expect(expensive()).toBe(20);
+      expect(computeCount).toBe(1);
+
+      // Changing signal triggers recomputation
+      setValue(20);
+      expect(expensive()).toBe(40);
+      expect(computeCount).toBe(2);
+    });
+  });
+
+  describe('Effect Demo', () => {
+    it('should run effect when dependencies change', async () => {
+      const [count, setCount] = createSignal(0);
+      let effectRuns = 0;
+      let lastValue = -1;
+
+      createEffect(() => {
+        effectRuns++;
+        lastValue = count();
+      });
+
+      // Wait for initial effect
+      await new Promise((resolve) => setTimeout(resolve, 10));
+      expect(effectRuns).toBeGreaterThan(0);
+      expect(lastValue).toBe(0);
+
+      const initialRuns = effectRuns;
+      setCount(5);
+
+      await new Promise((resolve) => setTimeout(resolve, 10));
+      expect(effectRuns).toBeGreaterThan(initialRuns);
+      expect(lastValue).toBe(5);
+    });
+  });
+
+  describe('Batch Demo', () => {
+    it('should batch multiple signal updates', () => {
+      const [firstName, setFirstName] = createSignal('John');
+      const [lastName, setLastName] = createSignal('Doe');
+      let effectCount = 0;
+
+      createEffect(() => {
+        firstName();
+        lastName();
+        effectCount++;
+      });
+
+      const initialCount = effectCount;
+
+      // Without batch, this would trigger effect twice
+      batch(() => {
+        setFirstName('Jane');
+        setLastName('Smith');
+      });
+
+      // With batch, effect should only run once for all updates
+      expect(firstName()).toBe('Jane');
+      expect(lastName()).toBe('Smith');
+    });
+  });
+});