@3fn/core 14.1.0 → 15.0.0

package/src/__tests__/__mocks__/styleMock.js

@@ -1,18 +0,0 @@
-/**
- * Jest Style Mock
- * 
- * Mocks CSS file imports for Jest tests. When web components import CSS files
- * as strings (for browser bundle compatibility), Jest needs to handle these
- * imports. This mock returns an empty string, which is sufficient for most
- * tests since they focus on component behavior rather than styling.
- * 
- * For tests that need to verify CSS content, use the actual CSS file content
- * or create specific test fixtures.
- * 
- * @see jest.config.js moduleNameMapper configuration
- * @see src/types/css.d.ts for TypeScript declaration
- * @see scripts/esbuild-css-plugin.js for build-time transformation
- * @see Requirements: 8.2, 8.3 (components render correctly in browser bundles)
- */
-
-module.exports = '';

package/src/__tests__/browser-distribution/build-error-handling.test.ts

@@ -1,143 +0,0 @@
-/**
- * @category evergreen
- * @purpose Verify build error handling for browser bundle generation
- */
-
-/**
- * Build Error Handling Tests
- *
- * Tests that the build script correctly handles errors and provides
- * descriptive error messages when bundle generation fails.
- *
- * This test uses static analysis of the build script to verify error handling
- * logic exists, rather than spawning subprocesses which cause Jest timeouts.
- *
- * @see .kiro/specs/028-web-component-browser-distribution/design.md
- * @see Requirements: 7.4
- */
-
-import * as fs from 'fs';
-import * as path from 'path';
-
-describe('Build Error Handling', () => {
-  const BUILD_SCRIPT_PATH = path.join(
-    process.cwd(),
-    'scripts',
-    'build-browser-bundles.js'
-  );
-
-  let buildScript: string;
-
-  beforeAll(() => {
-    // Verify build script exists and load it once
-    if (!fs.existsSync(BUILD_SCRIPT_PATH)) {
-      throw new Error(
-        'Build script not found. Ensure scripts/build-browser-bundles.js exists.'
-      );
-    }
-    buildScript = fs.readFileSync(BUILD_SCRIPT_PATH, 'utf-8');
-  });
-
-  describe('Error Handling Logic', () => {
-    it('should have try-catch error handling in build script', () => {
-      // Check for try-catch block
-      expect(buildScript).toContain('try {');
-      expect(buildScript).toContain('} catch (error)');
-    });
-
-    it('should output descriptive error message on failure', () => {
-      // Check for error message output
-      expect(buildScript).toContain('Browser bundle build failed');
-      expect(buildScript).toContain('error.message');
-    });
-
-    it('should exit with non-zero code on failure', () => {
-      // Check for process.exit(1) in catch block
-      expect(buildScript).toContain('process.exit(1)');
-    });
-
-    it('should clean up partial outputs on failure', () => {
-      // Check for cleanup logic in catch block
-      expect(buildScript).toContain('Clean up partial outputs');
-      expect(buildScript).toContain('fs.unlinkSync');
-    });
-  });
-
-  describe('Error Message Format', () => {
-    it('should include error indicator emoji in failure message', () => {
-      // Check for error indicator
-      expect(buildScript).toContain('❌');
-    });
-
-    it('should include the actual error message in output', () => {
-      // Check that error.message is logged
-      expect(buildScript).toMatch(/console\.error.*error\.message/);
-    });
-  });
-
-  describe('Error Scenario Coverage', () => {
-    // These tests verify the script structure handles various error scenarios
-    // without actually triggering errors (which would be destructive)
-
-    it('should handle missing entry point gracefully', () => {
-      // The script should have error handling that would catch missing entry point
-      // esbuild throws an error if entry point doesn't exist
-      expect(buildScript).toContain('entryPoints');
-      expect(buildScript).toContain('catch (error)');
-    });
-
-    it('should handle esbuild errors', () => {
-      // The script uses async/await with esbuild.build
-      // Errors from esbuild will be caught by the try-catch
-      expect(buildScript).toContain('await esbuild.build');
-      expect(buildScript).toContain('catch (error)');
-    });
-
-    it('should use async function for proper error propagation', () => {
-      // Async errors need to be in an async context to be caught
-      expect(buildScript).toMatch(/async function main\(\)/);
-    });
-  });
-
-  describe('Cleanup Behavior', () => {
-    it('should only clean up designerpunk.* files on failure', () => {
-      // Check that cleanup targets only designerpunk.* files
-      expect(buildScript).toContain("file.startsWith('designerpunk.')");
-    });
-
-    it('should preserve tokens.css on failure', () => {
-      // The cleanup logic only removes files starting with 'designerpunk.'
-      // This means tokens.css would be preserved
-      const cleanupSection = buildScript.match(
-        /Clean up partial outputs[\s\S]*?process\.exit\(1\)/
-      );
-      expect(cleanupSection).toBeTruthy();
-
-      // Verify it doesn't remove tokens.css
-      expect(cleanupSection![0]).not.toContain('tokens.css');
-    });
-
-    it('should handle cleanup errors gracefully', () => {
-      // Cleanup should not throw if files don't exist
-      // The script iterates over existing files in the directory,
-      // so it only attempts to delete files that exist
-      const cleanupSection = buildScript.match(
-        /Clean up partial outputs[\s\S]*?process\.exit\(1\)/
-      );
-      expect(cleanupSection).toBeTruthy();
-
-      // Should iterate over readdirSync results (only existing files)
-      expect(cleanupSection![0]).toContain('readdirSync');
-    });
-  });
-
-  describe('Success Path', () => {
-    it('should output success message on completion', () => {
-      expect(buildScript).toContain('Browser bundles built successfully');
-    });
-
-    it('should include success indicator emoji', () => {
-      expect(buildScript).toContain('✅');
-    });
-  });
-});

package/src/__tests__/browser-distribution/bundle-loading.test.ts

@@ -1,353 +0,0 @@
-/**
- * @jest-environment jsdom
- * @category evergreen
- * @purpose Verify browser bundles load without errors in JSDOM environment
- */
-
-/**
- * Browser Bundle Loading Tests
- *
- * Tests that ESM and UMD bundles load correctly in a browser-like environment.
- * Uses JSDOM to simulate browser APIs for custom element registration.
- *
- * @see .kiro/specs/028-web-component-browser-distribution/design.md
- * @see Requirements: 1.1, 2.1
- */
-
-import * as fs from 'fs';
-import * as path from 'path';
-import * as vm from 'vm';
-
-describe('Browser Bundle Loading', () => {
-  const BROWSER_DIST_DIR = path.join(process.cwd(), 'dist', 'browser');
-
-  beforeAll(() => {
-    // Ensure bundles exist before running tests
-    if (!fs.existsSync(BROWSER_DIST_DIR)) {
-      throw new Error(
-        'Browser bundles not found. Run "npm run build:browser" first.'
-      );
-    }
-  });
-
-  describe('ESM Bundle', () => {
-    const ESM_BUNDLE_PATH = path.join(BROWSER_DIST_DIR, 'designerpunk.esm.js');
-
-    it('should exist at expected path', () => {
-      expect(fs.existsSync(ESM_BUNDLE_PATH)).toBe(true);
-    });
-
-    it('should have source map file', () => {
-      const sourceMapPath = `${ESM_BUNDLE_PATH}.map`;
-      expect(fs.existsSync(sourceMapPath)).toBe(true);
-    });
-
-    it('should contain ES module syntax', () => {
-      const bundleContent = fs.readFileSync(ESM_BUNDLE_PATH, 'utf-8');
-
-      // Check for ESM export syntax (esbuild bundles inline, so no import statements)
-      // The bundle should have export statements at the end
-      expect(bundleContent).toMatch(/export\s*\{/);
-    });
-
-    it('should export expected components', () => {
-      const bundleContent = fs.readFileSync(ESM_BUNDLE_PATH, 'utf-8');
-
-      // Check for component exports in the export statement (Stemma System naming)
-      expect(bundleContent).toContain('TextInputField');
-      expect(bundleContent).toContain('ButtonCTA');
-      expect(bundleContent).toContain('IconBaseElement');
-      expect(bundleContent).toContain('ContainerBaseWeb');
-    });
-
-    it('should contain safeDefine function for idempotent registration', () => {
-      const bundleContent = fs.readFileSync(ESM_BUNDLE_PATH, 'utf-8');
-
-      // Check for safeDefine function definition
-      expect(bundleContent).toContain('function safeDefine');
-      expect(bundleContent).toContain('customElements.get');
-    });
-
-    it('should contain token detection warning logic', () => {
-      const bundleContent = fs.readFileSync(ESM_BUNDLE_PATH, 'utf-8');
-
-      // Check for token warning message
-      expect(bundleContent).toContain('[DesignerPunk]');
-      expect(bundleContent).toContain('Design tokens not detected');
-    });
-  });
-
-  describe('UMD Bundle', () => {
-    const UMD_BUNDLE_PATH = path.join(BROWSER_DIST_DIR, 'designerpunk.umd.js');
-
-    it('should exist at expected path', () => {
-      expect(fs.existsSync(UMD_BUNDLE_PATH)).toBe(true);
-    });
-
-    it('should have source map file', () => {
-      const sourceMapPath = `${UMD_BUNDLE_PATH}.map`;
-      expect(fs.existsSync(sourceMapPath)).toBe(true);
-    });
-
-    it('should contain valid JavaScript syntax', () => {
-      const bundleContent = fs.readFileSync(UMD_BUNDLE_PATH, 'utf-8');
-
-      // Should not have syntax errors
-      expect(() => {
-        new Function(bundleContent);
-      }).not.toThrow();
-    });
-
-    it('should contain UMD/IIFE wrapper pattern', () => {
-      const bundleContent = fs.readFileSync(UMD_BUNDLE_PATH, 'utf-8');
-
-      // Check for esbuild's IIFE pattern that assigns to global
-      expect(bundleContent).toContain('var DesignerPunk');
-      expect(bundleContent).toContain('DesignerPunk');
-    });
-
-    it('should contain all component classes', () => {
-      const bundleContent = fs.readFileSync(UMD_BUNDLE_PATH, 'utf-8');
-
-      // Check for component class definitions (Stemma System naming)
-      expect(bundleContent).toContain('TextInputField');
-      expect(bundleContent).toContain('ButtonCTA');
-      expect(bundleContent).toContain('IconBaseElement');
-      expect(bundleContent).toContain('ContainerBaseWeb');
-    });
-  });
-
-  describe('UMD Bundle Execution in JSDOM', () => {
-    const UMD_BUNDLE_PATH = path.join(BROWSER_DIST_DIR, 'designerpunk.umd.js');
-
-    /**
-     * Creates mock dependencies for UMD bundle execution
-     */
-    function createMockDependencies(): Record<string, unknown> {
-      const mockReact = {
-        createElement: jest.fn(),
-        useState: jest.fn(() => [null, jest.fn()]),
-        useEffect: jest.fn(),
-        useRef: jest.fn(() => ({ current: null })),
-        useCallback: jest.fn((fn: unknown) => fn),
-        useMemo: jest.fn((fn: () => unknown) => fn()),
-        forwardRef: jest.fn((component: unknown) => component),
-        memo: jest.fn((component: unknown) => component),
-      };
-
-      const mockJsxRuntime = {
-        jsx: jest.fn(),
-        jsxs: jest.fn(),
-        Fragment: 'Fragment',
-      };
-
-      const mockEmotionReact = {
-        css: jest.fn(() => ''),
-        keyframes: jest.fn(() => ''),
-      };
-
-      return {
-        React: mockReact,
-        jsxRuntime: mockJsxRuntime,
-        emotionReact: mockEmotionReact,
-        document: {
-          documentElement: {},
-          readyState: 'complete', // Simulate DOM already loaded
-          createElement: jest.fn(() => ({
-            attachShadow: jest.fn(() => ({
-              appendChild: jest.fn(),
-            })),
-          })),
-          addEventListener: jest.fn(),
-        },
-        getComputedStyle: jest.fn(() => ({
-          getPropertyValue: jest.fn(() => ''),
-        })),
-        customElements: {
-          get: jest.fn(() => undefined),
-          define: jest.fn(),
-        },
-        console: {
-          warn: jest.fn(),
-          log: jest.fn(),
-          error: jest.fn(),
-        },
-        HTMLElement: class MockHTMLElement {},
-        // Browser animation API - required for token loading check
-        requestAnimationFrame: jest.fn((callback: () => void) => {
-          callback();
-          return 0;
-        }),
-      };
-    }
-
-    it('should load without throwing errors when dependencies are provided', () => {
-      const bundleContent = fs.readFileSync(UMD_BUNDLE_PATH, 'utf-8');
-      const mockWindow = createMockDependencies();
-
-      // Execute the bundle in the mock context
-      expect(() => {
-        const script = new vm.Script(bundleContent);
-        const context = vm.createContext(mockWindow);
-        script.runInContext(context);
-      }).not.toThrow();
-    });
-
-    it('should expose DesignerPunk global with expected exports', () => {
-      const bundleContent = fs.readFileSync(UMD_BUNDLE_PATH, 'utf-8');
-      const mockWindow = createMockDependencies();
-
-      const script = new vm.Script(bundleContent);
-      const context = vm.createContext(mockWindow);
-      script.runInContext(context);
-
-      // Check that DesignerPunk global has expected exports (Stemma System naming)
-      const designerPunk = mockWindow.DesignerPunk as Record<string, unknown>;
-      expect(designerPunk).toBeDefined();
-      expect(designerPunk.TextInputField).toBeDefined();
-      expect(designerPunk.ButtonCTA).toBeDefined();
-      expect(designerPunk.IconBaseElement).toBeDefined();
-      expect(designerPunk.ContainerBaseWeb).toBeDefined();
-    });
-
-    it('should expose utility functions as internal (not exported)', () => {
-      const bundleContent = fs.readFileSync(UMD_BUNDLE_PATH, 'utf-8');
-
-      // Utility functions exist in the bundle but are internal (not exported)
-      // They are used for auto-registration and token detection
-      expect(bundleContent).toContain('function safeDefine');
-      expect(bundleContent).toContain('function checkTokensLoaded');
-    });
-
-    it('should expose alias exports', () => {
-      const bundleContent = fs.readFileSync(UMD_BUNDLE_PATH, 'utf-8');
-      const mockWindow = createMockDependencies();
-
-      const script = new vm.Script(bundleContent);
-      const context = vm.createContext(mockWindow);
-      script.runInContext(context);
-
-      const designerPunk = mockWindow.DesignerPunk as Record<string, unknown>;
-      // Check for alias exports (Icon = IconBaseElement, Container = ContainerBaseWeb)
-      expect(designerPunk.Icon).toBeDefined();
-      expect(designerPunk.IconBase).toBeDefined();
-      expect(designerPunk.Container).toBeDefined();
-      expect(designerPunk.ContainerBase).toBeDefined();
-    });
-
-    it('should have expected export structure', () => {
-      const bundleContent = fs.readFileSync(UMD_BUNDLE_PATH, 'utf-8');
-      const mockWindow = createMockDependencies();
-
-      const script = new vm.Script(bundleContent);
-      const context = vm.createContext(mockWindow);
-      script.runInContext(context);
-
-      const designerPunk = mockWindow.DesignerPunk as Record<string, unknown>;
-      
-      // Verify the export structure matches browser-entry.ts exports (Stemma System naming)
-      const exportKeys = Object.keys(designerPunk);
-      expect(exportKeys).toContain('TextInputField');
-      expect(exportKeys).toContain('ButtonCTA');
-      expect(exportKeys).toContain('IconBaseElement');
-      expect(exportKeys).toContain('ContainerBaseWeb');
-      expect(exportKeys).toContain('Icon');
-      expect(exportKeys).toContain('IconBase');
-      expect(exportKeys).toContain('Container');
-      expect(exportKeys).toContain('ContainerBase');
-    });
-  });
-
-  describe('Bundle File Integrity', () => {
-    it('should have non-empty ESM bundle', () => {
-      const esmPath = path.join(BROWSER_DIST_DIR, 'designerpunk.esm.js');
-      const stats = fs.statSync(esmPath);
-
-      // Bundle should be at least 10KB (reasonable minimum for components)
-      expect(stats.size).toBeGreaterThan(10 * 1024);
-    });
-
-    it('should have non-empty UMD bundle', () => {
-      const umdPath = path.join(BROWSER_DIST_DIR, 'designerpunk.umd.js');
-      const stats = fs.statSync(umdPath);
-
-      // Bundle should be at least 10KB (reasonable minimum for components)
-      expect(stats.size).toBeGreaterThan(10 * 1024);
-    });
-
-    it('should have valid source map references', () => {
-      const esmPath = path.join(BROWSER_DIST_DIR, 'designerpunk.esm.js');
-      const umdPath = path.join(BROWSER_DIST_DIR, 'designerpunk.umd.js');
-
-      const esmContent = fs.readFileSync(esmPath, 'utf-8');
-      const umdContent = fs.readFileSync(umdPath, 'utf-8');
-
-      // Check for sourceMappingURL comment
-      expect(esmContent).toContain('//# sourceMappingURL=');
-      expect(umdContent).toContain('//# sourceMappingURL=');
-    });
-  });
-
-  describe('Minified Bundles', () => {
-    const ESM_MIN_PATH = path.join(BROWSER_DIST_DIR, 'designerpunk.esm.min.js');
-    const UMD_MIN_PATH = path.join(BROWSER_DIST_DIR, 'designerpunk.umd.min.js');
-
-    it('should have minified ESM bundle', () => {
-      expect(fs.existsSync(ESM_MIN_PATH)).toBe(true);
-    });
-
-    it('should have minified UMD bundle', () => {
-      expect(fs.existsSync(UMD_MIN_PATH)).toBe(true);
-    });
-
-    it('should have source maps for minified bundles', () => {
-      expect(fs.existsSync(`${ESM_MIN_PATH}.map`)).toBe(true);
-      expect(fs.existsSync(`${UMD_MIN_PATH}.map`)).toBe(true);
-    });
-
-    it('should have minified ESM bundle smaller than development bundle', () => {
-      const devPath = path.join(BROWSER_DIST_DIR, 'designerpunk.esm.js');
-      const devStats = fs.statSync(devPath);
-      const minStats = fs.statSync(ESM_MIN_PATH);
-
-      // Minified should be smaller
-      expect(minStats.size).toBeLessThan(devStats.size);
-    });
-
-    it('should have minified UMD bundle smaller than development bundle', () => {
-      const devPath = path.join(BROWSER_DIST_DIR, 'designerpunk.umd.js');
-      const devStats = fs.statSync(devPath);
-      const minStats = fs.statSync(UMD_MIN_PATH);
-
-      // Minified should be smaller
-      expect(minStats.size).toBeLessThan(devStats.size);
-    });
-
-    it('should have valid source map references in minified bundles', () => {
-      const esmMinContent = fs.readFileSync(ESM_MIN_PATH, 'utf-8');
-      const umdMinContent = fs.readFileSync(UMD_MIN_PATH, 'utf-8');
-
-      expect(esmMinContent).toContain('//# sourceMappingURL=');
-      expect(umdMinContent).toContain('//# sourceMappingURL=');
-    });
-
-    it('should contain valid JavaScript in minified ESM bundle', () => {
-      const bundleContent = fs.readFileSync(ESM_MIN_PATH, 'utf-8');
-      
-      // Should not have syntax errors (basic check)
-      expect(bundleContent.length).toBeGreaterThan(0);
-      // Should still have export syntax
-      expect(bundleContent).toMatch(/export\s*\{/);
-    });
-
-    it('should contain valid JavaScript in minified UMD bundle', () => {
-      const bundleContent = fs.readFileSync(UMD_MIN_PATH, 'utf-8');
-      
-      // Should not have syntax errors
-      expect(() => {
-        new Function(bundleContent);
-      }).not.toThrow();
-    });
-  });
-
-});