@synetics/ui 0.7.0-alpha

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

@@ -0,0 +1,137 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Context UI Demo', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('http://localhost:3004/context');
+  });
+
+  test('should display page header', async ({ page }) => {
+    // Check for route-specific header instead of layout header
+    await expect(page.locator('text=Context API & Dependency Injection')).toBeVisible();
+  });
+
+  test('Theme context - should show initial theme', async ({ page }) => {
+    const themeSection = page.locator('text=1️⃣ Theme Context').locator('..').locator('..');
+    await expect(themeSection).toBeVisible();
+
+    // Check theme display
+    await expect(themeSection).toContainText('Theme Mode:');
+    await expect(themeSection).toContainText('Light');
+  });
+
+  test('Theme context - light/dark buttons are visible', async ({ page }) => {
+    const themeSection = page.locator('text=1️⃣ Theme Context').locator('..').locator('..');
+
+    // Check theme buttons exist
+    const lightBtn = themeSection.getByRole('button', { name: /light/i });
+    const darkBtn = themeSection.getByRole('button', { name: /dark/i });
+
+    await expect(lightBtn).toBeVisible();
+    await expect(darkBtn).toBeVisible();
+  });
+
+  test('Theme context - clicking dark button changes theme', async ({ page }) => {
+    const themeSection = page.locator('text=1️⃣ Theme Context').locator('..').locator('..');
+
+    const darkBtn = themeSection.getByRole('button', { name: /dark/i });
+    await darkBtn.click();
+
+    // Check theme updated in DOM
+    await expect(themeSection).toContainText('dark');
+  });
+
+  test('Theme context - color buttons are visible', async ({ page }) => {
+    const themeSection = page.locator('text=1️⃣ Theme Context').locator('..').locator('..');
+
+    // Check color buttons
+    await expect(themeSection.getByRole('button', { name: /blue/i })).toBeVisible();
+    await expect(themeSection.getByRole('button', { name: /green/i })).toBeVisible();
+  });
+
+  test('Theme context - themed box displays theme info', async ({ page }) => {
+    const themeSection = page.locator('text=1️⃣ Theme Context').locator('..').locator('..');
+
+    // Look for themed component
+    await expect(themeSection).toContainText('Theme:');
+    await expect(themeSection).toContainText('Color:');
+  });
+
+  test('User context - should show initial state', async ({ page }) => {
+    const userSection = page.locator('text=2️⃣ User Context').locator('..').locator('..');
+    await expect(userSection).toBeVisible();
+
+    // Check initial state (not logged in)
+    await expect(userSection).toContainText('Not logged in');
+  });
+
+  test('User context - login buttons are visible', async ({ page }) => {
+    const userSection = page.locator('text=2️⃣ User Context').locator('..').locator('..');
+
+    // Should have login options
+    const buttons = userSection.getByRole('button');
+    const count = await buttons.count();
+    expect(count).toBeGreaterThan(0);
+  });
+
+  test('User context - clicking login button logs in user', async ({ page }) => {
+    const userSection = page.locator('text=2️⃣ User Context').locator('..').locator('..');
+
+    // Click first login button
+    const loginBtn = userSection.getByRole('button').first();
+    await loginBtn.click();
+
+    // Should show user name (not "Not logged in")
+    const content = await userSection.textContent();
+    expect(content).not.toContain('Not logged in');
+  });
+
+  test('Multiple contexts - deeply nested component visible', async ({ page }) => {
+    const multiSection = page.locator('text=3️⃣ Multiple Contexts').locator('..').locator('..');
+
+    if (await multiSection.isVisible()) {
+      await expect(multiSection).toContainText('Deeply Nested Component');
+    }
+  });
+
+  test('Multiple contexts - nested component shows context values', async ({ page }) => {
+    const nestedComponent = page
+      .locator('text=Deeply Nested Component')
+      .locator('..')
+      .locator('..');
+
+    if (await nestedComponent.isVisible()) {
+      const content = await nestedComponent.textContent();
+
+      // Should show context values
+      expect(content).toBeTruthy();
+      expect(content?.length).toBeGreaterThan(50); // Has substantial content
+    }
+  });
+
+  test('Context propagation - child components receive context', async ({ page }) => {
+    // Both UserProfile and UserControls should be able to access UserContext
+    const userProfile = page.locator('text=User:').locator('..');
+    const userControls = page.locator('text=Login').locator('..');
+
+    // At least one should be visible
+    const profileVisible = await userProfile.isVisible();
+    const controlsVisible = await userControls.isVisible();
+
+    expect(profileVisible || controlsVisible).toBeTruthy();
+  });
+
+  test('Settings context - font size control', async ({ page }) => {
+    // Look for settings/font size controls
+    const settingsControl = page.locator('input[type="range"]');
+
+    if (await settingsControl.isVisible()) {
+      const initial = await settingsControl.inputValue();
+      expect(initial).toBeTruthy();
+    }
+  });
+
+  test('All context demos visible', async ({ page }) => {
+    await expect(page.locator('text=1️⃣ Theme Context')).toBeVisible();
+    await expect(page.locator('text=2️⃣ User Context')).toBeVisible();
+  });
+});

package/src/showcase/__tests__/e2e/control-flow-ui.spec.ts

@@ -0,0 +1,149 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Control Flow UI Demo', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('http://localhost:3004/control-flow');
+  });
+
+  test('should display page header', async ({ page }) => {
+    // Check for route-specific content instead of layout header
+    await expect(page.locator('text=Control Flow Primitives')).toBeVisible();
+  });
+
+  test('Show component - should toggle visibility', async ({ page }) => {
+    const showSection = page
+      .locator('text=👁️ Conditional Rendering (Show)')
+      .locator('..')
+      .locator('..');
+    await expect(showSection).toBeVisible();
+
+    // Check initial state - should show content
+    const toggleBtn = showSection.getByRole('button', { name: /toggle/i });
+
+    // Content should be visible initially
+    await expect(showSection).toContainText('This content is visible!');
+
+    // Toggle off
+    await toggleBtn.click();
+
+    // Content should be hidden
+    await expect(showSection.locator('text=This content is visible!')).not.toBeVisible();
+  });
+
+  test('Show component - toggle multiple times', async ({ page }) => {
+    const showSection = page
+      .locator('text=👁️ Conditional Rendering (Show)')
+      .locator('..')
+      .locator('..');
+    const toggleBtn = showSection.getByRole('button', { name: /toggle/i });
+
+    // Toggle off
+    await toggleBtn.click();
+    await expect(showSection.locator('text=This content is visible!')).not.toBeVisible();
+
+    // Toggle on
+    await toggleBtn.click();
+    await expect(showSection).toContainText('This content is visible!');
+
+    // Toggle off again
+    await toggleBtn.click();
+    await expect(showSection.locator('text=This content is visible!')).not.toBeVisible();
+  });
+
+  test('For component - should render list items', async ({ page }) => {
+    const forSection = page.locator('text=🔁 List Rendering (For)').locator('..').locator('..');
+    await expect(forSection).toBeVisible();
+
+    // Check initial list items are visible
+    await expect(forSection).toContainText('Apple');
+    await expect(forSection).toContainText('Banana');
+    await expect(forSection).toContainText('Cherry');
+  });
+
+  test('For component - add item button works', async ({ page }) => {
+    const forSection = page.locator('text=🔁 List Rendering (For)').locator('..').locator('..');
+
+    // Find add button
+    const addBtn = forSection.getByRole('button', { name: /add/i });
+    await addBtn.click();
+
+    // Check new item appears in DOM
+    const items = forSection.locator('[class*="item"]');
+    const count = await items.count();
+    expect(count).toBeGreaterThan(3); // More than initial 3 items
+  });
+
+  test('For component - remove item button works', async ({ page }) => {
+    const forSection = page.locator('text=🔁 List Rendering (For)').locator('..').locator('..');
+
+    // Find first remove button
+    const removeBtn = forSection.getByRole('button', { name: /remove/i }).first();
+    await removeBtn.click();
+
+    // Apple should be gone
+    await expect(forSection.locator('text=Apple')).not.toBeVisible();
+  });
+
+  test('Index component - should render with indices', async ({ page }) => {
+    const indexSection = page.locator('text=🔢 Indexed List').locator('..').locator('..');
+    await expect(indexSection).toBeVisible();
+
+    // Check items show with index
+    await expect(indexSection).toContainText('0:');
+    await expect(indexSection).toContainText('1:');
+    await expect(indexSection).toContainText('2:');
+  });
+
+  test('Switch/Match - should show correct option', async ({ page }) => {
+    const switchSection = page
+      .locator('text=🔀 Multiple Conditions (Switch/Match)')
+      .locator('..')
+      .locator('..');
+    await expect(switchSection).toBeVisible();
+
+    // Should show one of the status options
+    const hasLoading = await switchSection.locator('text=Loading...').isVisible();
+    const hasSuccess = await switchSection.locator('text=Success').isVisible();
+    const hasError = await switchSection.locator('text=Error').isVisible();
+
+    expect(hasLoading || hasSuccess || hasError).toBeTruthy();
+  });
+
+  test('Switch/Match - switches between states', async ({ page }) => {
+    const switchSection = page
+      .locator('text=🔀 Multiple Conditions (Switch/Match)')
+      .locator('..')
+      .locator('..');
+
+    // Find button to change state
+    const buttons = switchSection.getByRole('button');
+    const count = await buttons.count();
+
+    if (count > 0) {
+      await buttons.first().click();
+
+      // Something should be displayed
+      const content = await switchSection.textContent();
+      expect(content).toBeTruthy();
+      expect(content?.length).toBeGreaterThan(0);
+    }
+  });
+
+  test('Nested control flow - Show + For combination', async ({ page }) => {
+    // Look for section with both Show and For
+    const nestedSection = page.locator('text=Nested').locator('..').locator('..');
+
+    if (await nestedSection.isVisible()) {
+      // Should have toggle and list
+      const hasToggle = await nestedSection.getByRole('button', { name: /toggle/i }).isVisible();
+      const hasItems = await nestedSection.textContent();
+
+      expect(hasToggle || (hasItems && hasItems.length > 0)).toBeTruthy();
+    }
+  });
+
+  test('All control flow demos visible', async ({ page }) => {
+    await expect(page.locator('text=👁️ Conditional Rendering (Show)')).toBeVisible();
+    await expect(page.locator('text=🔁 List Rendering (For)')).toBeVisible();
+  });
+});

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

@@ -0,0 +1,13 @@
+import { test } from '@playwright/test';
+
+test('Debug compiled JS', async ({ page }) => {
+  // Intercept the JS request for context-test
+  const jsResponse = await page.waitForResponse(
+    (response) => response.url().includes('context-test') && response.url().includes('.js')
+  );
+
+  const jsContent = await jsResponse.text();
+  console.log('[COMPILED JS]:', jsContent.substring(0, 2000), '...');
+
+  await page.goto('http://localhost:3004/');
+});

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

@@ -0,0 +1,20 @@
+import { expect, test } from '@playwright/test';
+
+test('Debug - Check page state', async ({ page }) => {
+  await page.goto('http://localhost:3004/reactivity');
+  await page.waitForLoadState('domcontentloaded');
+  await page.waitForTimeout(3000); // Wait for debug div
+
+  // Take screenshot
+  await page.screenshot({ path: 'debug-screenshot.png', fullPage: true });
+  console.log('Screenshot saved to: debug-screenshot.png');
+
+  // Get visible text
+  const bodyText = await page.textContent('body');
+  console.log('Body text length:', bodyText?.length);
+  console.log('Body contains "ROUTER DEBUG":', bodyText?.includes('ROUTER DEBUG'));
+  console.log('Body contains "Core Reactivity":', bodyText?.includes('Core Reactivity'));
+  console.log('Body contains "Synetics framework":', bodyText?.includes('Synetics framework'));
+
+  expect(true).toBe(true);
+});

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

@@ -0,0 +1,130 @@
+import { test } from '@playwright/test';
+
+test('Deep debug - Context theme toggle', async ({ page }) => {
+  // Capture ALL console messages
+  page.on('console', (msg) => {
+    console.log(`[BROWSER ${msg.type()}]:`, msg.text());
+  });
+
+  // Capture page errors
+  page.on('pageerror', (error) => {
+    console.log('[PAGE ERROR]:', error.message);
+  });
+
+  await page.goto('http://localhost:5173/');
+  await page.waitForTimeout(1000);
+
+  // Navigate to Context page
+  await page.getByText('Context API', { exact: true }).click();
+  await page.waitForTimeout(1000);
+
+  // Verify we are on the context page
+  if (!(await page.getByText('Context API & Dependency Injection').isVisible())) {
+    console.log('[TEST] Navigation failed, forcing URL');
+    await page.goto('http://localhost:5173/context');
+  }
+  await page.waitForTimeout(2000);
+
+  // Evaluate in browser - check context state
+  const initialCheck = await page.evaluate(() => {
+    return {
+      bodyText: document.body.textContent?.slice(0, 500),
+      hasThemeSection: document.body.textContent?.includes('Theme Mode'),
+      hasDarkButton: document.body.textContent?.includes('Dark'),
+    };
+  });
+  console.log('[INITIAL STATE]:', initialCheck);
+
+  // Find and click dark button
+  const darkBtn = page.locator('button').filter({ hasText: 'Dark' }).first();
+  const exists = await darkBtn.count();
+  console.log('[DARK BUTTON EXISTS]:', exists > 0);
+
+  if (exists > 0) {
+    // Check if button is actually clickable
+    const isVisible = await darkBtn.isVisible();
+    const isEnabled = await darkBtn.isEnabled();
+    console.log('[BUTTON VISIBLE]:', isVisible);
+    console.log('[BUTTON ENABLED]:', isEnabled);
+
+    // Click it
+    await darkBtn.click();
+    console.log('[CLICKED DARK BUTTON]');
+
+    // Wait a bit
+    await page.waitForTimeout(1000);
+
+    // Check state after click
+    const afterClick = await page.evaluate(() => {
+      return {
+        bodyText: document.body.textContent?.slice(0, 500),
+        themeText: document.body.innerHTML.includes('dark') ? 'has dark' : 'no dark',
+      };
+    });
+    console.log('[AFTER CLICK]:', afterClick);
+
+    // Try to find the themed component that should show theme value
+    const themedComponent = await page.textContent('body');
+    console.log(
+      '[THEMED COMPONENT INCLUDES "Theme: dark"]:',
+      themedComponent.includes('Theme: dark')
+    );
+    console.log(
+      '[THEMED COMPONENT INCLUDES "Theme: light"]:',
+      themedComponent.includes('Theme: light')
+    );
+  }
+});
+
+test('Deep debug - Image gallery', async ({ page }) => {
+  page.on('console', (msg) => {
+    console.log(`[BROWSER ${msg.type()}]:`, msg.text());
+  });
+
+  page.on('pageerror', (error) => {
+    console.log('[PAGE ERROR]:', error.message);
+  });
+
+  await page.goto('http://localhost:5173/');
+  await page.waitForTimeout(1000);
+
+  // Navigate to Resources page
+  await page.getByText('Resources', { exact: true }).click();
+  await page.waitForTimeout(1000);
+
+  // If navigation failed, force URL
+  if (!(await page.getByText('Resources').first().isVisible())) {
+    console.log('[TEST] Navigation failed, forcing URL');
+    await page.goto('http://localhost:5173/resources');
+  }
+  await page.waitForTimeout(2000);
+
+  console.log('[PAGE LOADED]');
+
+  // Click load gallery button
+  const galleryBtn = page
+    .locator('button')
+    .filter({ hasText: /Load Gallery|Run Demo/ })
+    .first();
+  if ((await galleryBtn.count()) > 0) {
+    console.log('[FOUND GALLERY BUTTON]');
+    await galleryBtn.click();
+    console.log('[CLICKED GALLERY BUTTON]');
+
+    await page.waitForTimeout(5000); // Increased wait time
+
+    // Check for images
+    const imgCount = await page.locator('img').count();
+    console.log('[IMAGE COUNT]:', imgCount);
+
+    // Check for loading states
+    const bodyText = await page.textContent('body');
+    console.log('[HAS "Loading"]:', bodyText.includes('Loading'));
+    console.log('[HAS "Error"]:', bodyText.includes('Error'));
+    console.log('[HAS "Success"]:', bodyText.includes('Success'));
+
+    // Check progress counter
+    const progressMatch = bodyText.match(/Progress:.*?(\d+)\s*\/\s*6/);
+    console.log('[PROGRESS]:', progressMatch ? progressMatch[1] : 'not found');
+  }
+});

package/src/showcase/__tests__/e2e/error-boundary-ui.spec.ts

@@ -0,0 +1,113 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Error Boundary UI Demo', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('http://localhost:3004/error-boundary');
+  });
+
+  test('should display page header', async ({ page }) => {
+    // Check for route-specific content instead of layout header
+    await expect(page.locator('text=Error Boundary')).toBeVisible();
+  });
+
+  test('Error boundary - working component displays correctly', async ({ page }) => {
+    // Look for working component section
+    const workingSection = page.locator('text=Working Component').locator('..').locator('..');
+
+    if (await workingSection.isVisible()) {
+      const content = await workingSection.textContent();
+      expect(content).toBeTruthy();
+      expect(content?.length).toBeGreaterThan(0);
+    }
+  });
+
+  test('Error boundary - error trigger button exists', async ({ page }) => {
+    // Look for button that triggers error
+    const errorBtn = page.getByRole('button', { name: /throw|error|break/i });
+
+    if (await errorBtn.isVisible()) {
+      await expect(errorBtn).toBeVisible();
+    }
+  });
+
+  test('Error boundary - shows fallback UI on error', async ({ page }) => {
+    // Look for error trigger
+    const errorBtn = page.getByRole('button', { name: /throw|error|break/i });
+
+    if (await errorBtn.isVisible()) {
+      await errorBtn.click();
+
+      // Should show error fallback
+      await expect(page.locator('text=Error')).toBeVisible();
+    }
+  });
+
+  test('Error boundary - reset button appears after error', async ({ page }) => {
+    const errorBtn = page.getByRole('button', { name: /throw|error|break/i });
+
+    if (await errorBtn.isVisible()) {
+      await errorBtn.click();
+
+      // Look for reset/retry button
+      const resetBtn = page.getByRole('button', { name: /reset|retry|recover/i });
+      await expect(resetBtn).toBeVisible();
+    }
+  });
+
+  test('Error boundary - reset restores working state', async ({ page }) => {
+    const errorBtn = page.getByRole('button', { name: /throw|error|break/i });
+
+    if (await errorBtn.isVisible()) {
+      await errorBtn.click();
+
+      const resetBtn = page.getByRole('button', { name: /reset|retry|recover/i });
+      if (await resetBtn.isVisible()) {
+        await resetBtn.click();
+
+        // Should be back to working state
+        await expect(page.locator('text=Working Component')).toBeVisible();
+      }
+    }
+  });
+
+  test('Nested error boundaries - isolates errors', async ({ page }) => {
+    // Look for nested boundaries section
+    const nestedSection = page.locator('text=Nested').locator('..').locator('..');
+
+    if (await nestedSection.isVisible()) {
+      const content = await nestedSection.textContent();
+      expect(content).toBeTruthy();
+    }
+  });
+
+  test('Error boundary - page still functional after error', async ({ page }) => {
+    const errorBtn = page.getByRole('button', { name: /throw|error|break/i });
+
+    if (await errorBtn.isVisible()) {
+      await errorBtn.click();
+
+      // Other parts of page should still work
+      const header = page.locator('h1');
+      await expect(header).toBeVisible();
+    }
+  });
+
+  test('Error message contains useful information', async ({ page }) => {
+    const errorBtn = page.getByRole('button', { name: /throw|error|break/i });
+
+    if (await errorBtn.isVisible()) {
+      await errorBtn.click();
+
+      // Error message should be detailed
+      const errorText = await page.locator('text=Error').textContent();
+      expect(errorText).toBeTruthy();
+    }
+  });
+
+  test('Demo page structure intact', async ({ page }) => {
+    // Check basic page structure exists
+    const content = await page.textContent('body');
+    expect(content).toBeTruthy();
+    expect(content?.length).toBeGreaterThan(100);
+  });
+});