@synetics/ui 0.7.0-alpha

package/src/showcase/pages/__tests__/context-test.test.ts

@@ -0,0 +1,218 @@
+/**
+ * Unit Tests: Context Test Page
+ * Tests createContext, useContext, Provider pattern
+ */
+
+import { beforeEach, describe, expect, it } from 'vitest';
+import { ContextTestPage } from '../context-test.syn';
+
+describe('ContextTestPage', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  describe('Theme Context', () => {
+    it('should render with default dark theme', () => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      expect(container.textContent).toContain('Theme: dark');
+    });
+
+    it('should switch to light theme when clicked', (done) => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      const lightBtn = Array.from(container.querySelectorAll('button')).find((btn) =>
+        btn.textContent?.includes('Light')
+      );
+
+      lightBtn?.click();
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('Theme: light');
+        done();
+      }, 50);
+    });
+
+    it('should update primary color', (done) => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      const colorInput = container.querySelector('input[type="color"]') as HTMLInputElement;
+      colorInput.value = '#ff0000';
+      colorInput.dispatchEvent(new Event('input', { bubbles: true }));
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('#ff0000');
+        done();
+      }, 50);
+    });
+
+    it('should apply theme to all themed components', (done) => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      const lightBtn = Array.from(container.querySelectorAll('button')).find((btn) =>
+        btn.textContent?.includes('Light')
+      );
+
+      lightBtn?.click();
+
+      setTimeout(() => {
+        const themedBoxes = Array.from(container.querySelectorAll('div')).filter((div) =>
+          div.textContent?.includes('Themed Component')
+        );
+
+        expect(themedBoxes.length).toBeGreaterThanOrEqual(3);
+        done();
+      }, 50);
+    });
+  });
+
+  describe('User Context', () => {
+    it('should show not logged in state initially', () => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      expect(container.textContent).toContain('Not logged in');
+    });
+
+    it('should login as admin', (done) => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      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('Role: admin');
+        done();
+      }, 50);
+    });
+
+    it('should login as user', (done) => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      const userBtn = Array.from(container.querySelectorAll('button')).find((btn) =>
+        btn.textContent?.includes('Login as User')
+      );
+
+      userBtn?.click();
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('Welcome, Bob!');
+        expect(container.textContent).toContain('Role: user');
+        done();
+      }, 50);
+    });
+
+    it('should logout', (done) => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      const adminBtn = Array.from(container.querySelectorAll('button')).find((btn) =>
+        btn.textContent?.includes('Login as Admin')
+      );
+      adminBtn?.click();
+
+      setTimeout(() => {
+        const logoutBtn = Array.from(container.querySelectorAll('button')).find(
+          (btn) => btn.textContent === 'Logout'
+        );
+        logoutBtn?.click();
+
+        setTimeout(() => {
+          expect(container.textContent).toContain('Not logged in');
+          done();
+        }, 50);
+      }, 50);
+    });
+  });
+
+  describe('Settings Context', () => {
+    it('should render default font size', () => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      expect(container.textContent).toContain('Font: 16px');
+    });
+
+    it('should adjust font size with slider', (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');
+        done();
+      }, 50);
+    });
+
+    it('should toggle notifications', (done) => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      const notifBtn = Array.from(container.querySelectorAll('button')).find(
+        (btn) =>
+          btn.textContent === 'ON' &&
+          btn.previousElementSibling?.textContent?.includes('Notifications')
+      );
+
+      notifBtn?.click();
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('Notifications: OFF');
+        done();
+      }, 50);
+    });
+
+    it('should change language', (done) => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      const select = container.querySelector('select') as HTMLSelectElement;
+      select.value = 'es';
+      select.dispatchEvent(new Event('change', { bubbles: true }));
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('Language: es');
+        done();
+      }, 50);
+    });
+  });
+
+  describe('Deeply Nested Access', () => {
+    it('should access all contexts from nested component', () => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      expect(container.textContent).toContain('Deeply Nested Component');
+      expect(container.textContent).toContain('Can access all contexts');
+    });
+
+    it('should display context values in nested component', () => {
+      const page = ContextTestPage();
+      container.appendChild(page);
+
+      const nestedDiv = Array.from(container.querySelectorAll('div')).find((div) =>
+        div.textContent?.includes('Deeply Nested Component')
+      );
+
+      expect(nestedDiv?.textContent).toContain('Theme: dark');
+      expect(nestedDiv?.textContent).toContain('User: Guest');
+      expect(nestedDiv?.textContent).toContain('Font Size: 16px');
+    });
+  });
+});

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

@@ -0,0 +1,184 @@
+/**
+ * Unit Tests: Control Flow Test Page
+ * Tests Show, For, Index components
+ */
+
+import { beforeEach, describe, expect, it } from 'vitest';
+import { ControlFlowTestPage } from '../control-flow-test.syn';
+
+describe('ControlFlowTestPage', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  describe('Show Component', () => {
+    it('should display content when showContent is true', () => {
+      const page = ControlFlowTestPage();
+      container.appendChild(page);
+
+      expect(container.textContent).toContain('Content is visible!');
+    });
+
+    it('should hide content and show fallback when toggled', (done) => {
+      const page = ControlFlowTestPage();
+      container.appendChild(page);
+
+      const toggleBtn = Array.from(container.querySelectorAll('button')).find(
+        (btn) => btn.textContent === 'Toggle Content'
+      );
+
+      toggleBtn?.click();
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('Content is hidden');
+        expect(container.textContent).not.toContain('Content is visible!');
+        done();
+      }, 50);
+    });
+
+    it('should show error when error state is active', (done) => {
+      const page = ControlFlowTestPage();
+      container.appendChild(page);
+
+      const toggleErrorBtn = Array.from(container.querySelectorAll('button')).find(
+        (btn) => btn.textContent === 'Toggle Error'
+      );
+
+      toggleErrorBtn?.click();
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('Error state is active!');
+        done();
+      }, 50);
+    });
+  });
+
+  describe('For Component (Keyed Lists)', () => {
+    it('should render initial items list', () => {
+      const page = ControlFlowTestPage();
+      container.appendChild(page);
+
+      expect(container.textContent).toContain('Apple');
+      expect(container.textContent).toContain('Banana');
+      expect(container.textContent).toContain('Cherry');
+    });
+
+    it('should display item prices', () => {
+      const page = ControlFlowTestPage();
+      container.appendChild(page);
+
+      expect(container.textContent).toContain('$1.99');
+      expect(container.textContent).toContain('$0.99');
+      expect(container.textContent).toContain('$2.49');
+    });
+
+    it('should add new item when Add Item clicked', (done) => {
+      const page = ControlFlowTestPage();
+      container.appendChild(page);
+
+      const addBtn = Array.from(container.querySelectorAll('button')).find(
+        (btn) => btn.textContent === 'Add Item'
+      );
+
+      addBtn?.click();
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('Total Items: 4');
+        done();
+      }, 50);
+    });
+
+    it('should remove item when Remove clicked', (done) => {
+      const page = ControlFlowTestPage();
+      container.appendChild(page);
+
+      const removeBtn = Array.from(container.querySelectorAll('button')).find(
+        (btn) => btn.textContent === 'Remove'
+      );
+
+      removeBtn?.click();
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('Total Items: 2');
+        done();
+      }, 50);
+    });
+
+    it('should sort items by price', (done) => {
+      const page = ControlFlowTestPage();
+      container.appendChild(page);
+
+      const sortBtn = Array.from(container.querySelectorAll('button')).find(
+        (btn) => btn.textContent === 'Sort by Price'
+      );
+
+      sortBtn?.click();
+
+      setTimeout(() => {
+        const items = container.textContent!;
+        const bananaPos = items.indexOf('Banana');
+        const applePos = items.indexOf('Apple');
+        const cherryPos = items.indexOf('Cherry');
+
+        expect(bananaPos).toBeLessThan(applePos);
+        expect(applePos).toBeLessThan(cherryPos);
+        done();
+      }, 50);
+    });
+
+    it('should calculate total cost', () => {
+      const page = ControlFlowTestPage();
+      container.appendChild(page);
+
+      expect(container.textContent).toContain('Total Cost:');
+      expect(container.textContent).toContain('$5.47');
+    });
+  });
+
+  describe('Index Component', () => {
+    it('should render initial colors with indices', () => {
+      const page = ControlFlowTestPage();
+      container.appendChild(page);
+
+      expect(container.textContent).toContain('Red');
+      expect(container.textContent).toContain('Green');
+      expect(container.textContent).toContain('Blue');
+      expect(container.textContent).toContain('Yellow');
+    });
+
+    it('should display index numbers', () => {
+      const page = ControlFlowTestPage();
+      container.appendChild(page);
+
+      expect(container.textContent).toContain('Index: 0');
+      expect(container.textContent).toContain('Index: 1');
+      expect(container.textContent).toContain('Index: 2');
+      expect(container.textContent).toContain('Index: 3');
+    });
+
+    it('should shuffle colors when button clicked', (done) => {
+      const page = ControlFlowTestPage();
+      container.appendChild(page);
+
+      const originalOrder = container.textContent;
+
+      const shuffleBtn = Array.from(container.querySelectorAll('button')).find(
+        (btn) => btn.textContent === 'Shuffle Colors'
+      );
+
+      shuffleBtn?.click();
+
+      setTimeout(() => {
+        // Colors should still exist but may be in different order
+        expect(container.textContent).toContain('Red');
+        expect(container.textContent).toContain('Green');
+        expect(container.textContent).toContain('Blue');
+        expect(container.textContent).toContain('Yellow');
+        done();
+      }, 50);
+    });
+  });
+});

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

@@ -0,0 +1,220 @@
+/**
+ * Unit Tests: Error Boundary Test Page
+ * Tests Tryer/Catcher error boundary pattern
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ErrorBoundaryTestPage } from '../error-boundary-test.syn';
+
+describe('ErrorBoundaryTestPage', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  describe('Basic Error Boundary', () => {
+    it('should render safe component initially', () => {
+      const page = ErrorBoundaryTestPage();
+      container.appendChild(page);
+
+      expect(container.textContent).toContain('This component is safe');
+    });
+
+    it('should catch error when triggered', (done) => {
+      const page = ErrorBoundaryTestPage();
+      container.appendChild(page);
+
+      const triggerBtn = Array.from(container.querySelectorAll('button')).find(
+        (btn) => btn.textContent === 'Trigger Error'
+      );
+
+      triggerBtn?.click();
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('Error Caught');
+        expect(container.textContent).toContain('Critical render error!');
+        done();
+      }, 50);
+    });
+
+    it('should display custom error message', (done) => {
+      const page = ErrorBoundaryTestPage();
+      container.appendChild(page);
+
+      const input = container.querySelector(
+        'input[placeholder*="Custom error"]'
+      ) as HTMLInputElement;
+      input.value = 'My custom error message';
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+
+      const triggerBtn = Array.from(container.querySelectorAll('button')).find(
+        (btn) => btn.textContent === 'Trigger Error'
+      );
+      triggerBtn?.click();
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('My custom error message');
+        done();
+      }, 50);
+    });
+
+    it('should reset boundary when reset clicked', (done) => {
+      const page = ErrorBoundaryTestPage();
+      container.appendChild(page);
+
+      const triggerBtn = Array.from(container.querySelectorAll('button')).find(
+        (btn) => btn.textContent === 'Trigger Error'
+      );
+      triggerBtn?.click();
+
+      setTimeout(() => {
+        const resetBtn = Array.from(container.querySelectorAll('button')).find((btn) =>
+          btn.textContent?.includes('Reset Boundary')
+        );
+        resetBtn?.click();
+
+        setTimeout(() => {
+          expect(container.textContent).toContain('This component is safe');
+          done();
+        }, 50);
+      }, 50);
+    });
+  });
+
+  describe('Multiple Independent Boundaries', () => {
+    it('should isolate errors to single section', (done) => {
+      const page = ErrorBoundaryTestPage();
+      container.appendChild(page);
+
+      const toggleBtns = Array.from(container.querySelectorAll('button')).filter(
+        (btn) => btn.textContent === 'Toggle Error'
+      );
+
+      toggleBtns[0]?.click(); // Section 1
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('Section 1 failed');
+        expect(container.textContent).not.toContain('Section 2 failed');
+        expect(container.textContent).not.toContain('Section 3 failed');
+        done();
+      }, 50);
+    });
+
+    it('should allow multiple sections to error simultaneously', (done) => {
+      const page = ErrorBoundaryTestPage();
+      container.appendChild(page);
+
+      const toggleBtns = Array.from(container.querySelectorAll('button')).filter(
+        (btn) => btn.textContent === 'Toggle Error'
+      );
+
+      toggleBtns[0]?.click(); // Section 1
+      toggleBtns[1]?.click(); // Section 2
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('Section 1 failed');
+        expect(container.textContent).toContain('Section 2 failed');
+        done();
+      }, 50);
+    });
+  });
+
+  describe('Nested Boundaries', () => {
+    it('should render healthy state initially', () => {
+      const page = ErrorBoundaryTestPage();
+      container.appendChild(page);
+
+      expect(container.textContent).toContain('All components healthy');
+    });
+
+    it('should catch inner error with inner boundary', (done) => {
+      const page = ErrorBoundaryTestPage();
+      container.appendChild(page);
+
+      const innerBtn = Array.from(container.querySelectorAll('button')).find(
+        (btn) => btn.textContent === 'Toggle Inner Error'
+      );
+
+      innerBtn?.click();
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('Inner boundary caught');
+        expect(container.textContent).toContain('Inner component failed');
+        expect(container.textContent).not.toContain('Outer boundary caught');
+        done();
+      }, 50);
+    });
+
+    it('should catch outer error with outer boundary', (done) => {
+      const page = ErrorBoundaryTestPage();
+      container.appendChild(page);
+
+      const outerBtn = Array.from(container.querySelectorAll('button')).find(
+        (btn) => btn.textContent === 'Toggle Outer Error'
+      );
+
+      outerBtn?.click();
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('Outer boundary caught');
+        expect(container.textContent).toContain('Outer component failed');
+        done();
+      }, 50);
+    });
+  });
+
+  describe('Error Recovery Pattern', () => {
+    it('should fail on first attempt', () => {
+      const page = ErrorBoundaryTestPage();
+      container.appendChild(page);
+
+      expect(container.textContent).toContain('Attempt 1');
+      expect(container.textContent).toContain('Service temporarily unavailable');
+    });
+
+    it('should track retry attempts', (done) => {
+      const page = ErrorBoundaryTestPage();
+      container.appendChild(page);
+
+      const retryBtn = Array.from(container.querySelectorAll('button')).find(
+        (btn) => btn.textContent === 'Retry'
+      );
+
+      retryBtn?.click();
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('Attempts: 1 / 3');
+        done();
+      }, 50);
+    });
+
+    it('should succeed after 3 attempts', (done) => {
+      const page = ErrorBoundaryTestPage();
+      container.appendChild(page);
+
+      const retryBtn = Array.from(container.querySelectorAll('button')).find(
+        (btn) => btn.textContent === 'Retry'
+      );
+
+      retryBtn?.click();
+      setTimeout(() => {
+        retryBtn?.click();
+        setTimeout(() => {
+          const finalBtn = Array.from(container.querySelectorAll('button')).find(
+            (btn) => btn.textContent === 'Final Attempt'
+          );
+          finalBtn?.click();
+
+          setTimeout(() => {
+            expect(container.textContent).toContain('Success!');
+            expect(container.textContent).toContain('after 3 retries');
+            done();
+          }, 50);
+        }, 50);
+      }, 50);
+    });
+  });
+});

package/src/showcase/pages/__tests__/home.test.ts

@@ -0,0 +1,54 @@
+/**
+ * Unit Tests: Home Page
+ * Tests the Counter component integration
+ */
+
+import { beforeEach, describe, expect, it } from 'vitest';
+import { HomePage } from '../home.syn';
+
+describe('HomePage', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  describe('Rendering', () => {
+    it('should render welcome heading', () => {
+      const page = HomePage();
+      container.appendChild(page);
+
+      const heading = container.querySelector('h2');
+      expect(heading).toBeTruthy();
+      expect(heading?.textContent).toContain('Welcome to Synetics framework');
+    });
+
+    it('should render description text', () => {
+      const page = HomePage();
+      container.appendChild(page);
+
+      const description = container.querySelector('p');
+      expect(description).toBeTruthy();
+      expect(description?.textContent).toContain('reactive UI framework');
+    });
+
+    it('should render Counter component', () => {
+      const page = HomePage();
+      container.appendChild(page);
+
+      // Counter should be present with its specific ID
+      const counter = container.querySelector('[id*="counter"]');
+      expect(counter).toBeTruthy();
+    });
+  });
+
+  describe('Structure', () => {
+    it('should have proper section layout', () => {
+      const page = HomePage();
+      container.appendChild(page);
+
+      expect(container.querySelector('div')).toBeTruthy();
+    });
+  });
+});