create-elit 3.6.5 → 3.6.7

package/dist/templates/src/pages/HomePage.test.ts

@@ -1,601 +0,0 @@
-/**
- * HomePage Component Unit Tests
- */
-
-// CRITICAL: Set up ALL mocks BEFORE importing HomePage component
-// The component reads localStorage during import, so mocks must be set up first
-
-// Simple mock function to track calls
-function mockFn() {
-  const calls: any[] = [];
-  const fn = (...args: any[]) => {
-    calls.push(args);
-    return undefined;
-  };
-  fn.calls = calls;
-  fn.mockClear = () => {
-    calls.length = 0;
-  };
-  return fn;
-}
-
-// Mock localStorage
-const localStorageMock = (() => {
-  let store: Record<string, string> = {};
-  return {
-    getItem: (key: string): string | null => store[key] || null,
-    setItem: (key: string, value: string): void => {
-      store[key] = value;
-    },
-    removeItem: (key: string): void => {
-      delete store[key];
-    },
-    clear: (): void => {
-      store = {};
-    },
-    get length(): number {
-      return Object.keys(store).length;
-    },
-    key: (index: number): string | null => {
-      return Object.keys(store)[index] || null;
-    }
-  };
-})();
-
-// Mock window.addEventListener
-const eventListeners: Record<string, Function[]> = {};
-const addEventListenerMock = (event: string, handler: Function) => {
-  if (!eventListeners[event]) {
-    eventListeners[event] = [];
-  }
-  eventListeners[event].push(handler);
-};
-
-// Mock requestAnimationFrame
-let rafId = 0;
-const rafCallbacks: Map<number, FrameRequestCallback> = new Map();
-const mockRequestAnimationFrame = (callback: FrameRequestCallback) => {
-  const id = ++rafId;
-  rafCallbacks.set(id, callback);
-  return id;
-};
-
-const mockCancelAnimationFrame = (id: number) => {
-  rafCallbacks.delete(id);
-};
-
-// Trigger a RAF callback
-const triggerRAF = () => {
-  for (const [id, callback] of rafCallbacks) {
-    try {
-      callback(performance.now() as any);
-    } catch (e) {
-      // Ignore errors
-    }
-  }
-  rafCallbacks.clear();
-};
-
-// Mock router
-const mockRouter = {
-  push: mockFn() as any,
-  replace: mockFn() as any,
-  go: mockFn() as any,
-  back: mockFn() as any,
-  forward: mockFn() as any,
-  currentPath: '/',
-  currentState: null
-};
-
-// SETUP GLOBALS BEFORE IMPORT
-// Clear real localStorage if it exists
-if (typeof localStorage !== 'undefined') {
-  localStorage.clear();
-}
-
-// Set up global mocks
-(global as any).localStorage = localStorageMock;
-(globalThis as any).localStorage = localStorageMock;
-(global as any).window = {
-  addEventListener: addEventListenerMock,
-  removeEventListener: mockFn(),
-  localStorage: localStorageMock
-};
-(globalThis as any).window = (global as any).window;
-(global as any).requestAnimationFrame = mockRequestAnimationFrame;
-(global as any).cancelAnimationFrame = mockCancelAnimationFrame;
-(globalThis as any).requestAnimationFrame = mockRequestAnimationFrame;
-(globalThis as any).cancelAnimationFrame = mockCancelAnimationFrame;
-
-// NOW import the component (after mocks are set up)
-import { HomePage } from './HomePage';
-import type { VNode } from 'elit/types';
-
-// Helper function to render VNode to HTML string
-function renderToString(vNode: VNode | string | number | undefined | null): string {
-  if (vNode == null || vNode === false) return '';
-  if (typeof vNode !== 'object') return String(vNode);
-
-  const { tagName, props, children } = vNode;
-  const attrs = props ? Object.entries(props)
-    .filter(([k, v]) => v != null && v !== false && k !== 'children' && k !== 'ref' && !k.startsWith('on'))
-    .map(([k, v]) => {
-      if (k === 'className' || k === 'class') return `class="${Array.isArray(v) ? v.join(' ') : v}"`;
-      if (k === 'style') return `style="${typeof v === 'string' ? v : Object.entries(v).map(([sk, sv]) => `${sk.replace(/([A-Z])/g, '-$1').toLowerCase()}:${sv}`).join(';')}"`;
-      if (v === true) return k;
-      return `${k}="${v}"`;
-    })
-    .join(' ') : '';
-
-  const childrenStr = children && children.length > 0
-    ? children.map(c => renderToString(c as any)).join('')
-    : '';
-
-  return `<${tagName}${attrs ? ' ' + attrs : ''}>${childrenStr}</${tagName}>`;
-}
-
-// Helper function to find child by tag name
-function findChildByTagName(vNode: VNode, tagName: string): VNode | null {
-  if (vNode && typeof vNode === 'object' && 'tagName' in vNode) {
-    if (vNode.tagName === tagName) {
-      return vNode;
-    }
-    if (vNode.children) {
-      for (const child of vNode.children) {
-        if (typeof child === 'object' && child !== null) {
-          const found = findChildByTagName(child as VNode, tagName);
-          if (found) return found;
-        }
-      }
-    }
-  }
-  return null;
-}
-
-// Helper function to find children by tag name
-function findChildrenByTagName(vNode: VNode, tagName: string): VNode[] {
-  const results: VNode[] = [];
-
-  function search(node: VNode | string | number | null | undefined) {
-    if (node && typeof node === 'object' && 'tagName' in node) {
-      if (node.tagName === tagName) {
-        results.push(node);
-      }
-      if (node.children) {
-        for (const child of node.children) {
-          search(child as any);
-        }
-      }
-    }
-  }
-
-  search(vNode);
-  return results;
-}
-
-describe('HomePage Component', () => {
-  // Clear REAL browser localStorage before any tests run
-  beforeAll(() => {
-    if (typeof localStorage !== 'undefined') {
-      localStorage.clear();
-    }
-  });
-
-  beforeEach(() => {
-    // Clear RAF callbacks FIRST
-    rafCallbacks.clear();
-    rafId = 0;
-
-    // Clear localStorage before each test
-    localStorageMock.clear();
-
-    // Also clear REAL browser localStorage
-    if (typeof localStorage !== 'undefined') {
-      localStorage.clear();
-    }
-
-    // Reset mock router
-    (mockRouter.push as any).mockClear();
-    (mockRouter.replace as any).mockClear();
-  });
-
-  afterEach(() => {
-    // Clean up event listeners after each test
-    Object.keys(eventListeners).forEach(key => {
-      delete eventListeners[key];
-    });
-
-    // Clear RAF callbacks after each test
-    rafCallbacks.clear();
-    rafId = 0;
-
-    // Clear REAL browser localStorage after each test
-    if (typeof localStorage !== 'undefined') {
-      localStorage.clear();
-    }
-  });
-
-  describe('page structure', () => {
-    it('should render home-page', () => {
-      const page = HomePage(mockRouter as any);
-
-      expect(page).toBeDefined();
-      expect(page.tagName).toBe('div');
-      expect(page.props?.className).toBe('home-page');
-    });
-
-    it('should render hero-section', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('hero-section');
-    });
-
-    it('should render hero-content', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('hero-content');
-    });
-
-    it('should render hero-visual', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('hero-visual');
-    });
-  });
-
-  describe('when not logged in', () => {
-    it('should render hero badge', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('hero-badge');
-      expect(html).toContain('✨ New Features Available');
-    });
-
-    it('should render hero section capability', () => {
-      const page = HomePage(mockRouter as any);
-      // Hero content is reactive and shows different content based on login state
-      expect(page).toBeDefined();
-      expect(page.props?.className).toBe('home-page');
-    });
-
-    it('should render hero description capability', () => {
-      const page = HomePage(mockRouter as any);
-      // Hero description is reactive
-      expect(page).toBeDefined();
-    });
-
-    it('should have button capability', () => {
-      const page = HomePage(mockRouter as any);
-      // Buttons are reactive and show different content based on login state
-      const html = renderToString(page);
-      expect(html).toContain('btn-primary');
-      expect(html).toContain('btn-outline');
-    });
-
-    it('should have CTA section capability', () => {
-      const page = HomePage(mockRouter as any);
-      // CTA section is reactive and only shows for non-logged-in users
-      expect(page).toBeDefined();
-    });
-  });
-
-  describe('when logged in', () => {
-    beforeEach(() => {
-      localStorageMock.setItem('token', 'fake-token');
-      localStorageMock.setItem('user', JSON.stringify({ id: '123', name: 'Test User', email: 'test@example.com', bio: 'Test bio', avatar: '' }));
-    });
-
-    it('should render welcome message with user name', () => {
-      const page = HomePage(mockRouter as any);
-
-      // Trigger RAF to update reactive state
-      triggerRAF();
-
-      const html = renderToString(page);
-
-      expect(html).toContain('Welcome back');
-      expect(html).toContain('Test User');
-    });
-
-    it('should render Go to Messages button', () => {
-      const page = HomePage(mockRouter as any);
-
-      // Trigger RAF to update reactive state
-      triggerRAF();
-
-      const html = renderToString(page);
-
-      expect(html).toContain('Go to Messages');
-    });
-
-    it('should render View Profile button', () => {
-      const page = HomePage(mockRouter as any);
-
-      // Trigger RAF to update reactive state
-      triggerRAF();
-
-      const html = renderToString(page);
-
-      expect(html).toContain('View Profile');
-    });
-
-    it('should not render CTA section', () => {
-      const page = HomePage(mockRouter as any);
-
-      // Trigger RAF to update reactive state
-      triggerRAF();
-
-      const html = renderToString(page);
-
-      // CTA section should not be present for logged in users
-      expect(html).toBeDefined();
-    });
-  });
-
-  describe('hero stats', () => {
-    it('should render hero stats', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('hero-stats');
-    });
-
-    it('should render 10K+ Developers stat', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('10K+');
-      expect(html).toContain('Developers');
-    });
-
-    it('should render 50K+ Projects stat', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('50K+');
-      expect(html).toContain('Projects');
-    });
-
-    it('should render 99.9% Uptime stat', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('99.9%');
-      expect(html).toContain('Uptime');
-    });
-  });
-
-  describe('hero visual', () => {
-    it('should render hero-card-preview', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('hero-card-preview');
-    });
-
-    it('should render preview-header', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('preview-header');
-    });
-
-    it('should render preview dots', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('preview-dots');
-      expect(html).toContain('preview-dot');
-    });
-
-    it('should render preview-body', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('preview-body');
-    });
-
-    it('should render preview lines', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('preview-line');
-    });
-
-    it('should render preview grid', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('preview-grid');
-      expect(html).toContain('preview-grid-item');
-    });
-  });
-
-  describe('features section', () => {
-    it('should render features-section', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('features-section');
-    });
-
-    it('should render section title', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('Everything You Need');
-    });
-
-    it('should render section subtitle', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('Powerful features to help you build better applications');
-    });
-
-    it('should render features-grid', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('features-grid');
-    });
-  });
-
-  describe('feature items', () => {
-    it('should render Lightning Fast feature', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('⚡');
-      expect(html).toContain('Lightning Fast');
-    });
-
-    it('should render Secure feature', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('🔒');
-      expect(html).toContain('Secure');
-    });
-
-    it('should render Responsive feature', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('📱');
-      expect(html).toContain('Responsive');
-    });
-
-    it('should render Customizable feature', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('🎨');
-      expect(html).toContain('Customizable');
-    });
-
-    it('should render Developer Friendly feature', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('🔧');
-      expect(html).toContain('Developer Friendly');
-    });
-
-    it('should render Easy Deployment feature', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('🚀');
-      expect(html).toContain('Easy Deployment');
-    });
-  });
-
-  describe('CTA section', () => {
-    it('should render CTA section capability', () => {
-      const page = HomePage(mockRouter as any);
-      // CTA section is reactive and only shows for non-logged-in users
-      expect(page).toBeDefined();
-    });
-
-    it('should have CTA content capability', () => {
-      const page = HomePage(mockRouter as any);
-      // CTA content is reactive
-      expect(page).toBeDefined();
-    });
-
-    it('should have CTA button capability', () => {
-      const page = HomePage(mockRouter as any);
-      // CTA button is reactive
-      expect(page).toBeDefined();
-    });
-  });
-
-  describe('CSS classes', () => {
-    it('should have correct CSS classes', () => {
-      const page = HomePage(mockRouter as any);
-      const html = renderToString(page);
-
-      expect(html).toContain('home-page');
-      expect(html).toContain('hero-section');
-      expect(html).toContain('hero-content');
-      expect(html).toContain('hero-badge');
-      expect(html).toContain('hero-title');
-      expect(html).toContain('hero-highlight');
-      expect(html).toContain('hero-description');
-      expect(html).toContain('hero-buttons');
-    });
-  });
-
-  describe('event listeners', () => {
-    it('should register storage event listeners', () => {
-      HomePage(mockRouter as any);
-
-      expect(eventListeners['storage']).toBeDefined();
-      expect(eventListeners['storage'].length).toBeGreaterThan(0);
-      expect(eventListeners['elit:storage']).toBeDefined();
-      expect(eventListeners['elit:storage'].length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('component consistency', () => {
-    it('should always return the same structure', () => {
-      const page1 = HomePage(mockRouter as any);
-      const page2 = HomePage(mockRouter as any);
-
-      expect(page1.tagName).toBe(page2.tagName);
-      expect(page1.props?.className).toBe(page2.props?.className);
-    });
-
-    it('should render without errors', () => {
-      expect(() => {
-        const page = HomePage(mockRouter as any);
-        renderToString(page);
-      }).not.toThrow();
-    });
-
-    it('should have h1 element', () => {
-      const page = HomePage(mockRouter as any);
-      const h1Elements = findChildrenByTagName(page, 'h1');
-
-      expect(h1Elements.length).toBeGreaterThan(0);
-    });
-
-    it('should have h2 elements', () => {
-      const page = HomePage(mockRouter as any);
-      const h2Elements = findChildrenByTagName(page, 'h2');
-
-      expect(h2Elements.length).toBeGreaterThan(0);
-    });
-
-    it('should have h3 elements', () => {
-      const page = HomePage(mockRouter as any);
-      const h3Elements = findChildrenByTagName(page, 'h3');
-
-      expect(h3Elements.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('reactive state', () => {
-    it('should have isLoggedIn state', () => {
-      const page = HomePage(mockRouter as any);
-      expect(page).toBeDefined();
-    });
-
-    it('should have user state', () => {
-      const page = HomePage(mockRouter as any);
-      expect(page).toBeDefined();
-    });
-
-    it('should respond to storage changes', () => {
-      HomePage(mockRouter as any);
-
-      expect(eventListeners['storage']).toBeDefined();
-      expect(eventListeners['elit:storage']).toBeDefined();
-    });
-  });
-});