@synetics/ui 0.7.0-alpha

package/src/showcase/__tests__/e2e/portal-ui.spec.ts

@@ -0,0 +1,135 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Portal UI Demo', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('http://localhost:3004/portal');
+  });
+
+  test('should display page header', async ({ page }) => {
+    // Check for route-specific content instead of layout header
+    await expect(page.locator('text=Portal System')).toBeVisible();
+  });
+
+  test('Modal portal - open button exists', async ({ page }) => {
+    const openBtn = page.getByRole('button', { name: /open|show|modal/i });
+    await expect(openBtn).toBeVisible();
+  });
+
+  test('Modal portal - clicking open shows modal', async ({ page }) => {
+    const openBtn = page.getByRole('button', { name: /open|show|modal/i });
+    await openBtn.click();
+
+    // Modal should appear
+    const modal = page.locator('[role="dialog"]').or(page.locator('.modal'));
+    await expect(modal).toBeVisible();
+  });
+
+  test('Modal portal - modal has close button', async ({ page }) => {
+    const openBtn = page.getByRole('button', { name: /open|show|modal/i });
+    await openBtn.click();
+
+    // Look for close button
+    const closeBtn = page.getByRole('button', { name: /close|dismiss/i });
+    await expect(closeBtn).toBeVisible();
+  });
+
+  test('Modal portal - closing modal removes it from DOM', async ({ page }) => {
+    const openBtn = page.getByRole('button', { name: /open|show|modal/i });
+    await openBtn.click();
+
+    const closeBtn = page.getByRole('button', { name: /close|dismiss/i });
+    await closeBtn.click();
+
+    // Modal should be gone
+    const modal = page.locator('[role="dialog"]');
+    await expect(modal).not.toBeVisible();
+  });
+
+  test('Modal portal - renders outside parent container', async ({ page }) => {
+    const openBtn = page.getByRole('button', { name: /open|show|modal/i });
+    await openBtn.click();
+
+    // Modal should be in document.body or portal root, not nested
+    const modal = page.locator('[role="dialog"]');
+    if (await modal.isVisible()) {
+      const modalRoot = await modal.evaluate((el) => {
+        let parent = el.parentElement;
+        while (parent && parent.tagName !== 'BODY') {
+          parent = parent.parentElement;
+        }
+        return parent?.tagName;
+      });
+      expect(modalRoot).toBe('BODY');
+    }
+  });
+
+  test('Tooltip portal - appears on hover', async ({ page }) => {
+    const trigger = page.locator('text=Hover').or(page.getByRole('button').first());
+
+    if (await trigger.isVisible()) {
+      await trigger.hover();
+
+      // Tooltip should appear
+      const tooltip = page.locator('[role="tooltip"]').or(page.locator('.tooltip'));
+      await expect(tooltip).toBeVisible({ timeout: 2000 });
+    }
+  });
+
+  test('Multiple portals - can render simultaneously', async ({ page }) => {
+    // Open modal
+    const openBtn = page.getByRole('button', { name: /open|show|modal/i });
+    await openBtn.click();
+
+    // Try to show tooltip too
+    const trigger = page.locator('text=Hover');
+    if (await trigger.isVisible()) {
+      await trigger.hover();
+
+      // Both should be visible
+      const modal = page.locator('[role="dialog"]');
+      const modalVisible = await modal.isVisible();
+
+      expect(modalVisible).toBeTruthy();
+    }
+  });
+
+  test('Portal with reactivity - updates propagate to portal', async ({ page }) => {
+    // If there's reactive content in portal
+    const openBtn = page.getByRole('button', { name: /open|show|modal/i });
+    await openBtn.click();
+
+    const modal = page.locator('[role="dialog"]');
+    if (await modal.isVisible()) {
+      const content = await modal.textContent();
+      expect(content).toBeTruthy();
+      expect(content?.length).toBeGreaterThan(0);
+    }
+  });
+
+  test('Demo page has portal container', async ({ page }) => {
+    // Check for portal root in DOM
+    const portalRoot = page.locator('#portal-root').or(page.locator('[data-portal]'));
+
+    // Either explicit portal root exists or body is used
+    const bodyExists = await page.locator('body').isVisible();
+    expect(bodyExists).toBeTruthy();
+  });
+
+  test('Portal cleanup - reopening works correctly', async ({ page }) => {
+    const openBtn = page.getByRole('button', { name: /open|show|modal/i });
+
+    // Open
+    await openBtn.click();
+
+    // Close
+    const closeBtn = page.getByRole('button', { name: /close|dismiss/i });
+    await closeBtn.click();
+
+    // Open again
+    await openBtn.click();
+
+    // Should work second time
+    const modal = page.locator('[role="dialog"]');
+    await expect(modal).toBeVisible();
+  });
+});

package/src/showcase/__tests__/e2e/reactivity-ui.spec.ts

@@ -0,0 +1,81 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Reactivity UI Demo', () => {
+  test.beforeEach(async ({ page }) => {
+    // Capture console logs
+    page.on('console', (msg) => {
+      if (msg.text().includes('[Router]')) {
+        console.log('BROWSER:', msg.text());
+      }
+    });
+
+    await page.goto('http://localhost:3004/reactivity');
+    await page.waitForTimeout(2000); // Wait for router to initialize
+  });
+
+  test('should display page header correctly', async ({ page }) => {
+    // Wait for page to load
+    await page.waitForTimeout(1000);
+
+    // The app has TWO h1s: layout header "Synetics framework" and route header "Core Reactivity"
+    // Check that route content is present (not just layout)
+    await expect(page.locator('text=Core Reactivity')).toBeVisible();
+    await expect(page.locator('text=Testing signals, effects, memos')).toBeVisible();
+  });
+
+  test('Signal Demo - should show initial count and update on click', async ({ page }) => {
+    // Look for the signal section using more specific selector - check actual content
+    await expect(page.locator('text=First Name:')).toBeVisible();
+    await expect(page.locator('text=Last Name:')).toBeVisible();
+    await expect(page.locator('text=Age:')).toBeVisible();
+
+    // Check for initial values - use more specific selectors to avoid strict mode violations
+    await expect(page.locator('div:has-text("First Name:"):has-text("John")').first()).toBeVisible();
+    await expect(page.locator('div:has-text("Last Name:"):has-text("Doe")').first()).toBeVisible();
+    await expect(page.locator('div:has-text("Age:"):has-text("25")').first()).toBeVisible();
+  });
+
+  test('Signal controls should work', async ({ page }) => {
+    // Click the Alice button and check if first name changes
+    await page.click('button:has-text("Set First: Alice")');
+    await expect(page.locator('div:has-text("First Name:"):has-text("Alice")').first()).toBeVisible();
+
+    // Click the Johnson button and check if last name changes
+    await page.click('button:has-text("Set Last: Johnson")');
+    await expect(page.locator('div:has-text("Last Name:"):has-text("Johnson")').first()).toBeVisible();
+
+    // Click increment age and check if age increases
+    await page.click('button:has-text("Increment Age")');
+    await expect(page.locator('div:has-text("Age:"):has-text("26")').first()).toBeVisible();
+  });
+
+  test('Memo section should be visible', async ({ page }) => {
+    // Check for computed values section - use first() to get the h3 heading
+    await expect(page.locator('h3:has-text("Computed Values")')).toBeVisible();
+
+    // Check memo values that should be derived from signals
+    await expect(page.locator('text=Full Name (computed):')).toBeVisible();
+    await expect(page.locator('text=John Doe')).toBeVisible();
+    await expect(page.locator('text=Is Adult (computed):')).toBeVisible();
+    await expect(page.locator('text=✅ Yes')).toBeVisible();
+  });
+
+  test('Effect section should be visible', async ({ page }) => {
+    // Check for side effects section heading
+    await expect(page.locator('h3:has-text("Side Effects (createEffect)")')).toBeVisible();
+    
+    // Check for effect demo content
+    await expect(page.locator('text=Open browser console to see effect logs')).toBeVisible();
+    await expect(page.locator('text=console.log: Effect runs on fullName() changes')).toBeVisible();
+  });
+
+  test('Batch section should be visible', async ({ page }) => {
+    // Check for batch updates section heading  
+    await expect(page.locator('h3:has-text("Batched Updates")')).toBeVisible();
+    
+    // Check for batch demo content
+    await expect(page.locator('text=Effect Run Count:')).toBeVisible();
+    await expect(page.locator('button:has-text("Update All (Batched)")')).toBeVisible();
+    await expect(page.locator('button:has-text("Reset All")')).toBeVisible();
+  });
+});

package/src/showcase/__tests__/e2e/resource-debug.spec.ts

@@ -0,0 +1,37 @@
+import { test } from '@playwright/test';
+
+test('Debug Resources Page', async ({ page }) => {
+  page.on('console', (msg) => {
+    console.log(`[BROWSER ${msg.type()}]:`, msg.text());
+  });
+
+  await page.goto('http://localhost:3004/resources');
+  await page.waitForTimeout(2000);
+
+  // Click Load Gallery
+  const loadButton = page.getByText('Load Gallery');
+  if (await loadButton.isVisible()) {
+    console.log('[TEST] Clicking Load Gallery button');
+    await loadButton.click();
+    await page.waitForTimeout(3000);
+  } else {
+    console.log('[TEST] Load Gallery button not found');
+  }
+
+  // Check for images
+  const images = await page.evaluate(() => {
+    return Array.from(document.querySelectorAll('img')).map((img) => ({
+      src: img.src,
+      width: img.width,
+      height: img.height,
+      complete: img.complete,
+      naturalWidth: img.naturalWidth,
+    }));
+  });
+  console.log('[IMAGES]:', images);
+
+  // Check resource state if possible (look for loading indicators or error messages)
+  const content = await page.content();
+  if (content.includes('Loading...')) console.log('[STATE] Loading indicator found');
+  if (content.includes('Error')) console.log('[STATE] Error message found');
+});

package/src/showcase/__tests__/e2e/visual-debug.spec.ts

@@ -0,0 +1,147 @@
+import { test } from '@playwright/test';
+
+test.describe('Visual Debug - Check Demo Functionality', () => {
+  test('Portal Demo - Modal functionality', async ({ page }) => {
+    const errors: string[] = [];
+    page.on('console', (msg) => {
+      if (msg.type() === 'error') {
+        errors.push(msg.text());
+      }
+    });
+
+    await page.goto('http://localhost:3004/portal');
+    await page.waitForTimeout(2000);
+
+    // Take screenshot
+    await page.screenshot({ path: 'test-results/portal-initial.png', fullPage: true });
+
+    // Look for modal buttons
+    const modalButtons = await page.locator('button').all();
+    console.log(`Found ${modalButtons.length} buttons on portal page`);
+
+    // Try to find and click modal button
+    const modalBtn = page.locator('button:has-text("Open Modal")');
+    if ((await modalBtn.count()) > 0) {
+      console.log('Found "Open Modal" button');
+      await modalBtn.first().click();
+      await page.waitForTimeout(1000);
+      await page.screenshot({ path: 'test-results/portal-after-click.png', fullPage: true });
+    } else {
+      console.log('No "Open Modal" button found');
+      // Log all button text
+      for (const btn of modalButtons) {
+        const text = await btn.textContent();
+        console.log(`Button: "${text}"`);
+      }
+    }
+
+    // Log errors
+    if (errors.length > 0) {
+      console.log('Console errors:', errors);
+    }
+
+    // Get page HTML
+    const html = await page.content();
+    console.log('Page has portal content:', html.includes('Portal'));
+  });
+
+  test('Resource Demo - Image loading', async ({ page }) => {
+    const errors: string[] = [];
+    page.on('console', (msg) => {
+      if (msg.type() === 'error') {
+        errors.push(msg.text());
+      }
+    });
+
+    await page.goto('http://localhost:3004/resources');
+    await page.waitForTimeout(2000);
+
+    await page.screenshot({ path: 'test-results/resources-initial.png', fullPage: true });
+
+    // Look for image gallery buttons
+    const galleryBtn = page.locator('button:has-text("Load Gallery")');
+    if ((await galleryBtn.count()) > 0) {
+      console.log('Found "Load Gallery" button');
+      await galleryBtn.first().click();
+      await page.waitForTimeout(3000);
+      await page.screenshot({ path: 'test-results/resources-after-click.png', fullPage: true });
+
+      // Check for images
+      const images = await page.locator('img').all();
+      console.log(`Found ${images.length} images after loading`);
+    }
+
+    if (errors.length > 0) {
+      console.log('Console errors:', errors);
+    }
+  });
+
+  test('Context Demo - Theme toggle', async ({ page }) => {
+    const errors: string[] = [];
+    page.on('console', (msg) => {
+      if (msg.type() === 'error') {
+        errors.push(msg.text());
+      }
+    });
+
+    await page.goto('http://localhost:3004/context');
+    await page.waitForTimeout(2000);
+
+    await page.screenshot({ path: 'test-results/context-initial.png', fullPage: true });
+
+    // Try to toggle theme
+    const darkBtn = page.locator('button:has-text("Dark")');
+    if ((await darkBtn.count()) > 0) {
+      console.log('Found "Dark" button');
+      const beforeClick = await page.textContent('body');
+      await darkBtn.first().click();
+      await page.waitForTimeout(500);
+      const afterClick = await page.textContent('body');
+      console.log('Theme changed:', beforeClick !== afterClick);
+      await page.screenshot({
+        path: 'test-results/context-after-theme-toggle.png',
+        fullPage: true,
+      });
+    }
+
+    // Try to login
+    const loginBtn = page.locator('button').filter({ hasText: 'Login' }).first();
+    if ((await loginBtn.count()) > 0) {
+      console.log('Found login button');
+      await loginBtn.click();
+      await page.waitForTimeout(500);
+      await page.screenshot({ path: 'test-results/context-after-login.png', fullPage: true });
+    }
+
+    if (errors.length > 0) {
+      console.log('Console errors:', errors);
+    }
+  });
+
+  test('Control Flow Demo - Show/Hide toggle', async ({ page }) => {
+    const errors: string[] = [];
+    page.on('console', (msg) => {
+      if (msg.type() === 'error') {
+        errors.push(msg.text());
+      }
+    });
+
+    await page.goto('http://localhost:3004/control-flow');
+    await page.waitForTimeout(2000);
+
+    await page.screenshot({ path: 'test-results/control-flow-initial.png', fullPage: true });
+
+    // Look for toggle buttons
+    const buttons = await page.locator('button').all();
+    console.log(`Found ${buttons.length} buttons`);
+
+    for (const btn of buttons.slice(0, 5)) {
+      const text = await btn.textContent();
+      console.log(`Button: "${text}"`);
+    }
+
+    if (errors.length > 0) {
+      console.log('Console errors:', errors);
+    }
+  });
+});

package/src/showcase/__tests__/integration/context-provider-consumer.test.ts

@@ -0,0 +1,114 @@
+/**
+ * Integration Tests: Context Provider-Consumer
+ * Tests context propagation through component tree
+ */
+
+import { beforeEach, describe, expect, it } from 'vitest';
+import { ContextTestPage } from '../../context/context-test.syn';
+
+describe('Context Provider-Consumer Integration', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  describe('Multi-Context Propagation', () => {
+    it('should provide all contexts to nested components', () => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      const nested = Array.from(container.querySelectorAll('div')).find((div) =>
+        div.textContent?.includes('Deeply Nested Component')
+      );
+
+      expect(nested).toBeTruthy();
+      expect(nested?.textContent).toContain('Theme:');
+      expect(nested?.textContent).toContain('User:');
+      expect(nested?.textContent).toContain('Font Size:');
+    });
+
+    it('should update all consumers when provider value changes', (done) => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      const lightBtn = Array.from(container.querySelectorAll('button')).find((btn) =>
+        btn.textContent?.includes('Light')
+      );
+
+      lightBtn?.click();
+
+      setTimeout(() => {
+        // All themed components should reflect change
+        const themedBoxes = Array.from(container.querySelectorAll('div')).filter((div) =>
+          div.textContent?.includes('Themed Component')
+        );
+
+        expect(themedBoxes.length).toBeGreaterThan(0);
+
+        // Nested component should also update
+        const nested = Array.from(container.querySelectorAll('div')).find((div) =>
+          div.textContent?.includes('Deeply Nested Component')
+        );
+        expect(nested?.textContent).toContain('Theme: light');
+
+        done();
+      }, 50);
+    });
+  });
+
+  describe('Independent Context Updates', () => {
+    it('should update user context without affecting theme', (done) => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      const initialTheme = container.textContent?.includes('Theme: dark');
+
+      const adminBtn = Array.from(container.querySelectorAll('button')).find((btn) =>
+        btn.textContent?.includes('Login as Admin')
+      );
+
+      adminBtn?.click();
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('Welcome, Alice!');
+        expect(container.textContent).toContain('Theme: dark'); // Unchanged
+        done();
+      }, 50);
+    });
+
+    it('should update settings context without affecting others', (done) => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      const slider = container.querySelector('input[type="range"]') as HTMLInputElement;
+      slider.value = '20';
+      slider.dispatchEvent(new Event('input', { bubbles: true }));
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('Font: 20px');
+        expect(container.textContent).toContain('Theme: dark'); // Unchanged
+        expect(container.textContent).toContain('User: Guest'); // Unchanged
+        done();
+      }, 50);
+    });
+  });
+
+  describe('Cross-Context Dependencies', () => {
+    it('should access multiple contexts in single component', () => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      const nested = Array.from(container.querySelectorAll('div')).find((div) =>
+        div.textContent?.includes('Deeply Nested Component')
+      );
+
+      // Should list all three context values
+      const nestedContent = nested?.textContent || '';
+      expect(nestedContent).toContain('Theme:');
+      expect(nestedContent).toContain('User:');
+      expect(nestedContent).toContain('Font Size:');
+    });
+  });
+});

package/src/showcase/__tests__/integration/context-ui.test.ts

@@ -0,0 +1,150 @@
+/**
+ * Integration Tests: Context + UI Components
+ * Tests context providers with theme and user controls
+ */
+
+import { $REGISTRY, createSignal } from '@synetics/synetics.dev';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+describe('Context + UI Component Integration', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    $REGISTRY.reset();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    $REGISTRY.reset();
+  });
+
+  describe('Theme Provider + Themed Components', () => {
+    it('should apply theme to all child components', () => {
+      const [theme, setTheme] = createSignal<'light' | 'dark'>('dark');
+
+      const getThemeStyles = () => {
+        return theme() === 'light'
+          ? { bg: '#ffffff', text: '#000000' }
+          : { bg: '#1a1a1a', text: '#ffffff' };
+      };
+
+      const styles = getThemeStyles();
+      expect(styles.bg).toBe('#1a1a1a');
+      expect(styles.text).toBe('#ffffff');
+
+      setTheme('light');
+      const lightStyles = getThemeStyles();
+      expect(lightStyles.bg).toBe('#ffffff');
+      expect(lightStyles.text).toBe('#000000');
+    });
+
+    it('should update multiple components when theme changes', () => {
+      const [theme, setTheme] = createSignal('dark');
+      type Component = { type: string; theme: string };
+      const components: Component[] = [
+        { type: 'header', theme: theme() },
+        { type: 'body', theme: theme() },
+        { type: 'footer', theme: theme() },
+      ];
+
+      expect(components.every((c) => c.theme === 'dark')).toBe(true);
+
+      setTheme('light');
+      components.forEach((c) => (c.theme = theme()));
+      expect(components.every((c) => c.theme === 'light')).toBe(true);
+    });
+  });
+
+  describe('User Context + Profile Display', () => {
+    it('should display user information across components', () => {
+      const [user, setUser] = createSignal({
+        name: 'John Doe',
+        email: 'john@example.com',
+        role: 'admin',
+      });
+
+      const renderUserCard = () => {
+        const card = document.createElement('div');
+        card.innerHTML = `
+          <div class="name">${user().name}</div>
+          <div class="email">${user().email}</div>
+          <div class="role">${user().role}</div>
+        `;
+        return card;
+      };
+
+      const card = renderUserCard();
+      expect(card.querySelector('.name')?.textContent).toBe('John Doe');
+      expect(card.querySelector('.email')?.textContent).toBe('john@example.com');
+      expect(card.querySelector('.role')?.textContent).toBe('admin');
+    });
+
+    it('should update user info across multiple components', () => {
+      const [user, setUser] = createSignal({
+        name: 'John Doe',
+        avatar: '/avatar1.jpg',
+      });
+
+      const components = {
+        header: user().name,
+        sidebar: user().name,
+        profile: user(),
+      };
+
+      expect(components.header).toBe('John Doe');
+      expect(components.sidebar).toBe('John Doe');
+
+      setUser({ ...user(), name: 'Jane Smith' });
+      const updated = {
+        header: user().name,
+        sidebar: user().name,
+        profile: user(),
+      };
+
+      expect(updated.header).toBe('Jane Smith');
+      expect(updated.sidebar).toBe('Jane Smith');
+      expect(updated.profile.name).toBe('Jane Smith');
+    });
+  });
+
+  describe('Nested Context Providers', () => {
+    it('should handle multiple nested contexts', () => {
+      const [theme, setTheme] = createSignal('dark');
+      const [user, setUser] = createSignal({ name: 'John' });
+      const [settings, setSettings] = createSignal({ notifications: true });
+
+      // All contexts should be independent
+      expect(theme()).toBe('dark');
+      expect(user().name).toBe('John');
+      expect(settings().notifications).toBe(true);
+
+      setTheme('light');
+      expect(theme()).toBe('light');
+      expect(user().name).toBe('John'); // Other contexts unaffected
+      expect(settings().notifications).toBe(true);
+    });
+  });
+
+  describe('Context + Control Flow', () => {
+    it('should render components conditionally based on context', () => {
+      const [isLoggedIn, setIsLoggedIn] = createSignal(false);
+      const [user, setUser] = createSignal({ name: '' });
+
+      const render = () => {
+        if (isLoggedIn()) {
+          return `Welcome, ${user().name}!`;
+        } else {
+          return 'Please log in';
+        }
+      };
+
+      expect(render()).toBe('Please log in');
+
+      setIsLoggedIn(true);
+      setUser({ name: 'John' });
+      expect(render()).toBe('Welcome, John!');
+    });
+  });
+});