@shohojdhara/atomix 0.5.0 → 0.5.2

package/scripts/cli/__tests__/integration.test.js

@@ -1,938 +0,0 @@
-/**
- * CLI Integration Tests
- * Comprehensive test coverage for generate command with options, validation, and edge cases
- */
-
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { mkdtemp, rm, writeFile, mkdir, readFile } from 'fs/promises';
-import { existsSync, readFileSync } from 'fs';
-import { join, resolve } from 'path';
-import { tmpdir } from 'os';
-import { execSync } from 'child_process';
-
-// Mock console to avoid noise in tests
-const originalConsole = global.console;
-
-describe('CLI Integration Tests', () => {
-  let tempDir;
-
-  beforeEach(async () => {
-    tempDir = await mkdtemp(join(tmpdir(), 'atomix-cli-test-'));
-    
-    // Create project structure with React indicators for proper framework detection
-    await mkdir(join(tempDir, 'src/styles/01-settings'), { recursive: true });
-    await mkdir(join(tempDir, 'src/lib/composables'), { recursive: true });
-    await mkdir(join(tempDir, 'src/lib/types'), { recursive: true });
-    await writeFile(join(tempDir, 'package.json'), JSON.stringify({ 
-      name: 'test-app', 
-      version: '1.0.0',
-      dependencies: { 
-        react: '^18.0.0'
-      }
-    }));
-    
-    // Mock console methods
-    global.console = {
-      ...originalConsole,
-      log: vi.fn(),
-      error: vi.fn(),
-      warn: vi.fn()
-    };
-  });
-
-  afterEach(async () => {
-    await rm(tempDir, { recursive: true, force: true });
-    global.console = originalConsole;
-    vi.clearAllMocks();
-  });
-
-  describe('atomix generate component', () => {
-    it('should generate a basic component', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component TestButton`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentDir = join(tempDir, 'src', 'components', 'TestButton');
-      expect(existsSync(componentDir)).toBe(true);
-      const hasComponentFile = existsSync(join(componentDir, 'TestButton.tsx')) ||
-        existsSync(join(componentDir, 'TestButton.jsx')) ||
-        existsSync(join(componentDir, 'TestButton.html'));
-      expect(hasComponentFile).toBe(true);
-    });
-
-    it('should reject invalid component names', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      let threw = false;
-      try {
-        execSync(`node ${cliPath} generate component 123Invalid`, {
-          cwd: tempDir,
-          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-          stdio: 'pipe'
-        });
-      } catch {
-        threw = true;
-      }
-      expect(threw).toBe(true);
-    });
-
-    it('should create component directory when generating', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      execSync(`node ${cliPath} generate component DuplicateButton`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-      const componentDir = join(tempDir, 'src', 'components', 'DuplicateButton');
-      expect(existsSync(componentDir)).toBe(true);
-    });
-  });
-
-  describe('atomix generate component --complexity', () => {
-    it('should generate simple component', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component SimpleInput --complexity simple`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentDir = join(tempDir, 'src', 'components', 'SimpleInput');
-      expect(existsSync(componentDir)).toBe(true);
-    });
-
-    it('should generate complex component', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component ComplexCard --complexity complex`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentDir = join(tempDir, 'src', 'components', 'ComplexCard');
-      expect(existsSync(componentDir)).toBe(true);
-    });
-
-    it('should handle invalid complexity level', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      let threw = false;
-      try {
-        execSync(`node ${cliPath} generate component Test --complexity extreme`, {
-          cwd: tempDir,
-          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-          stdio: 'pipe'
-        });
-      } catch (error) {
-        threw = true;
-        // Verify error message contains helpful suggestions
-        if (error.stderr) {
-          const errorMsg = error.stderr.toString();
-          expect(errorMsg.toLowerCase()).toContain('complexity');
-        }
-      }
-      expect(threw).toBe(true);
-    });
-  });
-
-  describe('atomix generate component --features', () => {
-    it('should generate with storybook by default', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component StoryButton`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentDir = join(tempDir, 'src', 'components', 'StoryButton');
-      expect(existsSync(componentDir)).toBe(true);
-      // Story file should be created by default
-      expect(existsSync(join(componentDir, 'StoryButton.stories.tsx'))).toBe(true);
-    });
-
-    it('should generate with tests when using complexity complex', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component ButtonWithTests --complexity complex`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentDir = join(tempDir, 'src', 'components', 'ButtonWithTests');
-      expect(existsSync(componentDir)).toBe(true);
-      // Complex components may include tests
-      expect(existsSync(join(componentDir, 'ButtonWithTests.test.tsx')) || existsSync(join(componentDir, 'ButtonWithTests.tsx'))).toBe(true);
-    });
-
-    it('should generate hook by default', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component WithHook`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      // Hook is generated by default to composables directory
-      const hookFile = join(tempDir, 'src', 'lib', 'composables', 'useWithHook.ts');
-      expect(existsSync(hookFile)).toBe(true);
-    });
-
-    it('should generate styles by default', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component WithStyles`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      // Styles are generated by default (check for any settings file)
-      const settingsDir = join(tempDir, 'src', 'styles', '01-settings');
-      const hasSettingsFile = existsSync(settingsDir) && 
-        existsSync(join(settingsDir, '_settings.withstyles.scss')) ||
-        existsSync(join(settingsDir, '_settings.with-styles.scss'));
-      expect(hasSettingsFile).toBe(true);
-    });
-  });
-
-  describe('Feature Flag Combinations', () => {
-    it('should generate with default features (storybook, hook, styles)', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component DefaultFeatures`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentDir = join(tempDir, 'src', 'components', 'DefaultFeatures');
-      expect(existsSync(componentDir)).toBe(true);
-      expect(existsSync(join(componentDir, 'DefaultFeatures.tsx'))).toBe(true);
-      expect(existsSync(join(componentDir, 'DefaultFeatures.stories.tsx'))).toBe(true);
-      expect(existsSync(join(tempDir, 'src', 'lib', 'composables', 'useDefaultFeatures.ts'))).toBe(true);
-    });
-
-    it('should support --complexity flag', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component SimpleComponent --complexity simple`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentDir = join(tempDir, 'src', 'components', 'SimpleComponent');
-      expect(existsSync(componentDir)).toBe(true);
-    });
-
-    it('should support --validate flag', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component ValidatedComponent --validate`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentDir = join(tempDir, 'src', 'components', 'ValidatedComponent');
-      expect(existsSync(componentDir)).toBe(true);
-    });
-
-    it('should support --path flag for custom output location', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      const customPath = join(tempDir, 'custom', 'components');
-      
-      execSync(`node ${cliPath} generate component CustomPath --path ${customPath}`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentDir = join(customPath, 'CustomPath');
-      expect(existsSync(componentDir)).toBe(true);
-      expect(existsSync(join(componentDir, 'CustomPath.tsx'))).toBe(true);
-    });
-
-    it('should support --prompt flag for AI generation', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      // This would test AI generation if AI is configured
-      // For now, just verify the flag is accepted
-      let errorOutput = '';
-      try {
-        execSync(`node ${cliPath} generate component AITest --prompt "A simple button"`, {
-          cwd: tempDir,
-          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true', ATOMIX_AI_MOCK: 'true' },
-          stdio: 'pipe'
-        });
-      } catch (error) {
-        errorOutput = error.stderr ? error.stderr.toString() : '';
-      }
-      
-      // May fail if AI not configured, but flag should be recognized
-      expect(errorOutput).not.toMatch(/unknown option.*--prompt/i);
-    });
-  });
-
-  describe('atomix generate component --interactive', () => {
-    it('should generate component via interactive prompts', async () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      // Interactive mode with default selections (pressing Enter for defaults)
-      const mockInput = '\n\n\n';
-      
-      execSync(`echo -e "InteractiveButton${mockInput}" | node ${cliPath} generate component --interactive`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentDir = join(tempDir, 'src', 'components', 'InteractiveButton');
-      expect(existsSync(componentDir)).toBe(true);
-      expect(existsSync(join(componentDir, 'InteractiveButton.tsx'))).toBe(true);
-    });
-
-    it('should validate component name in interactive mode', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      // Invalid name starting with number should be rejected
-      let threw = false;
-      try {
-        execSync(`echo -e "123Invalid\n" | node ${cliPath} generate component --interactive`, {
-          cwd: tempDir,
-          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-          stdio: 'pipe'
-        });
-      } catch (error) {
-        threw = true;
-        if (error.stderr) {
-          const errorMsg = error.stderr.toString();
-          expect(errorMsg.toLowerCase()).toMatch(/(pascalcase|invalid|name)/);
-        }
-      }
-      // May timeout or fail, both are acceptable
-      expect(threw || true).toBe(true);
-    });
-
-    it('should accept complexity selection in interactive mode', async () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      // Select simple complexity (first option)
-      execSync(`echo -e "SimpleComponent\n0\n\n" | node ${cliPath} generate component --interactive`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentDir = join(tempDir, 'src', 'components', 'SimpleComponent');
-      expect(existsSync(componentDir)).toBe(true);
-    });
-
-    it('should allow feature toggling in interactive mode', async () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      // Enable tests feature
-      execSync(`echo -e "ComponentWithTests\n\n \n" | node ${cliPath} generate component --interactive`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentDir = join(tempDir, 'src', 'components', 'ComponentWithTests');
-      expect(existsSync(componentDir)).toBe(true);
-      expect(existsSync(join(componentDir, 'ComponentWithTests.test.tsx'))).toBe(true);
-    });
-  });
-
-  describe('atomix generate token', () => {
-    it('should run generate token (creates component by current implementation)', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      execSync(`node ${cliPath} generate token colors`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-      const componentDir = join(tempDir, 'src', 'components', 'Colors');
-      expect(existsSync(componentDir)).toBe(true);
-    });
-
-    it('should reject invalid token category name for component validation', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      expect(() => {
-        execSync(`node ${cliPath} generate token 123invalid`, {
-          cwd: tempDir,
-          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-          stdio: 'pipe'
-        });
-      }).toThrow();
-    });
-  });
-
-  describe('atomix generate component - Output Quality Verification', () => {
-
-    it('should generate component with TypeScript type definitions', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component TypedButton`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentFile = join(tempDir, 'src', 'components', 'TypedButton', 'TypedButton.tsx');
-      const content = readFileSync(componentFile, 'utf8');
-      
-      // Verify TypeScript types are imported and used
-      expect(content).toMatch(/import\s+type\s+.*TypedButtonProps/);
-      expect(content).toContain('forwardRef<');
-      // Verify type is used in forwardRef generic
-      expect(content).toMatch(/forwardRef<\s*\w+\s*,\s*\w+Props\s*>/);
-    });
-
-    it('should generate component with forwardRef implementation', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component RefForwardingButton`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentFile = join(tempDir, 'src', 'components', 'RefForwardingButton', 'RefForwardingButton.tsx');
-      const content = readFileSync(componentFile, 'utf8');
-      
-      expect(content).toContain('forwardRef');
-      expect(content).toMatch(/forwardRef\s*<\s*\w+/);
-    });
-
-    it('should generate component with displayName property', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component DisplayNamedComponent`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentFile = join(tempDir, 'src', 'components', 'DisplayNamedComponent', 'DisplayNamedComponent.tsx');
-      const content = readFileSync(componentFile, 'utf8');
-      
-      expect(content).toContain('displayName');
-      expect(content).toMatch(/\.displayName\s*=\s*['"]DisplayNamedComponent['"]/);
-    });
-
-    it('should generate component without hardcoded hex colors', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component ThemedComponent`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentFile = join(tempDir, 'src', 'components', 'ThemedComponent', 'ThemedComponent.tsx');
-      const content = readFileSync(componentFile, 'utf8');
-      
-      // Should not contain hex color codes (basic check)
-      expect(content).not.toMatch(/#[0-9a-fA-F]{6}/);
-    });
-
-    it('should generate component with JSDoc documentation', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component DocumentedComponent`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentFile = join(tempDir, 'src', 'components', 'DocumentedComponent', 'DocumentedComponent.tsx');
-      const content = readFileSync(componentFile, 'utf8');
-      
-      expect(content).toContain('/**');
-      expect(content).toContain('*/');
-    });
-
-    it('should generate composable hook with proper typing', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component HookComponent`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const hookFile = join(tempDir, 'src', 'lib', 'composables', 'useHookComponent.ts');
-      const content = readFileSync(hookFile, 'utf8');
-      
-      expect(content).toContain('export function useHookComponent');
-      // Should import and use typed props
-      expect(content).toMatch(/import\s+.*HookComponentProps/);
-      // Should have parameter type annotation
-      expect(content).toMatch(/initialProps\??:\s*Partial<HookComponentProps>/);
-      // Should return typed object
-      expect(content).toMatch(/return\s*\{/);
-    });
-
-    it('should generate Storybook story with args and argTypes', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component StoryComponent`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const storyFile = join(tempDir, 'src', 'components', 'StoryComponent', 'StoryComponent.stories.tsx');
-      const content = readFileSync(storyFile, 'utf8');
-      
-      expect(content).toContain('args:');
-      expect(content).toContain('argTypes:');
-    });
-
-    it('should generate test file with basic structure when complexity is complex', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component TestableComponent --complexity complex`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentDir = join(tempDir, 'src', 'components', 'TestableComponent');
-      expect(existsSync(componentDir)).toBe(true);
-      
-      const testFile = join(componentDir, 'TestableComponent.test.tsx');
-      if (existsSync(testFile)) {
-        const content = readFileSync(testFile, 'utf8');
-        expect(content).toMatch(/(describe|it|test)\s*\(/);
-        expect(content).toContain('TestableComponent');
-      }
-      // Test file may or may not exist depending on complexity level
-      expect(true).toBe(true);
-    });
-  });
-
-  describe('Error Scenarios', () => {
-    it('should handle existing component directory', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      // Generate first component
-      execSync(`node ${cliPath} generate component ExistingComponent`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-      
-      // Try to generate again - should either overwrite or fail gracefully
-      // Current implementation may overwrite, this documents expected behavior
-      expect(() => {
-        execSync(`node ${cliPath} generate component ExistingComponent`, {
-          cwd: tempDir,
-          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-          stdio: 'pipe'
-        });
-      }).not.toThrow();
-    });
-
-    it('should handle permission errors', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      // Create read-only directory (Unix-like systems)
-      const readOnlyDir = join(tempDir, 'readonly');
-      mkdir(readOnlyDir, { recursive: true });
-      
-      // This test is platform-specific and may not work on all systems
-      expect(true).toBe(true);
-    });
-
-    it('should handle invalid output path', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      let threw = false;
-      try {
-        execSync(`node ${cliPath} generate component Test --path /nonexistent/path/that/does/not/exist`, {
-          cwd: tempDir,
-          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-          stdio: 'pipe'
-        });
-      } catch (error) {
-        threw = true;
-        // Verify error message contains helpful suggestions
-        if (error.stderr) {
-          const errorMsg = error.stderr.toString();
-          expect(errorMsg.toLowerCase()).toContain('path');
-        }
-      }
-      expect(threw).toBe(true);
-    });
-
-    it('should display actionable error suggestions', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      let errorOutput = '';
-      try {
-        execSync(`node ${cliPath} generate component 123InvalidName`, {
-          cwd: tempDir,
-          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-          stdio: 'pipe'
-        });
-      } catch (error) {
-        errorOutput = error.stderr ? error.stderr.toString() : '';
-      }
-      
-      // Error output should contain suggestions
-      expect(errorOutput).toBeTruthy();
-      // Suggestions typically include "Use PascalCase" etc.
-      expect(errorOutput.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('atomix generate component - Design Token Integration', () => {
-    beforeEach(async () => {
-      // Create design tokens fixture
-      const tokensDir = join(tempDir, 'design-tokens');
-      await mkdir(tokensDir, { recursive: true });
-      await writeFile(
-        join(tokensDir, 'tokens.json'),
-        JSON.stringify({
-          color: {
-            primary: { value: '#007bff', name: 'Primary Blue' },
-            secondary: { value: '#6c757d', name: 'Secondary Gray' }
-          },
-          spacing: {
-            sm: { value: '8px', name: 'Small Spacing' },
-            md: { value: '16px', name: 'Medium Spacing' },
-            lg: { value: '24px', name: 'Large Spacing' }
-          }
-        })
-      );
-    });
-
-    it('should load and reference design tokens in generated component', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component TokenAwareComponent`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentFile = join(tempDir, 'src', 'components', 'TokenAwareComponent', 'TokenAwareComponent.tsx');
-      const content = readFileSync(componentFile, 'utf8');
-      
-      // Should reference design tokens or CSS variables
-      expect(content).toMatch(/(token\.|var\(--|theme\.|\$[a-zA-Z])/);
-    });
-
-    it('should generate ITCSS settings file with SCSS variables', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component ScssComponent`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const settingsFiles = [
-        join(tempDir, 'src', 'styles', '01-settings', '_settings.scsscomponent.scss'),
-        join(tempDir, 'src', 'styles', '01-settings', '_settings.scss-component.scss'),
-        join(tempDir, 'src', 'styles', '01-settings', '_settings.scss_component.scss')
-      ];
-      
-      const existingFile = settingsFiles.find(f => existsSync(f));
-      expect(existingFile).toBeTruthy();
-      
-      if (existingFile) {
-        const content = readFileSync(existingFile, 'utf8');
-        expect(content).toMatch(/\$[a-zA-Z]/); // SCSS variables
-      }
-    });
-
-    it('should generate ITCSS component styles layer', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component StyledComponent`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentsFiles = [
-        join(tempDir, 'src', 'styles', '06-components', '_components.styledcomponent.scss'),
-        join(tempDir, 'src', 'styles', '06-components', '_components.styled-component.scss'),
-        join(tempDir, 'src', 'styles', '06-components', '_components.styled_component.scss')
-      ];
-      
-      const existingFile = componentsFiles.find(f => existsSync(f));
-      expect(existingFile).toBeTruthy();
-      
-      if (existingFile) {
-        const content = readFileSync(existingFile, 'utf8');
-        // Should contain CSS class definitions
-        expect(content).toMatch(/\.[a-zA-Z]/);
-      }
-    });
-  });
-
-  describe('atomix validate', () => {
-    beforeEach(async () => {
-      const stylesDir = join(tempDir, 'src', 'styles', '01-settings');
-      await mkdir(stylesDir, { recursive: true });
-      await writeFile(join(stylesDir, '_settings.colors.scss'), '$primary: blue !default;\n$secondary: red !default;');
-      await writeFile(join(stylesDir, '_settings.typography.scss'), '$font-base: sans-serif !default;');
-    });
-
-    it('should run full validation audit', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      const result = execSync(`node ${cliPath} validate`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        encoding: 'utf8',
-        stdio: 'pipe'
-      });
-      expect(result).toMatch(/No issues found|Summary:|Quality Audit|issues?/);
-    });
-  });
-
-  describe('atomix doctor', () => {
-    it('should run system diagnostics', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      const result = execSync(`node ${cliPath} doctor`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        encoding: 'utf8',
-        stdio: 'pipe'
-      });
-      expect(result).toContain('Atomix Diagnostic Report');
-    });
-  });
-
-  describe('Error Handling', () => {
-    it('should handle missing command gracefully', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      expect(() => {
-        execSync(`node ${cliPath} non-existent-command`, {
-          cwd: tempDir,
-          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-          stdio: 'pipe'
-        });
-      }).toThrow();
-    });
-
-    it('should show help for --help flag', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      const result = execSync(`node ${cliPath} --help`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        encoding: 'utf8',
-        stdio: 'pipe'
-      });
-
-      expect(result).toContain('Atomix Design System CLI');
-      expect(result).toContain('Commands:');
-    });
-
-    it('should show version for --version flag', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      const result = execSync(`node ${cliPath} --version`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        encoding: 'utf8',
-        stdio: 'pipe'
-      });
-
-      expect(result).toMatch(/\d+\.\d+\.\d+/);
-    });
-  });
-
-  describe('Framework-Specific Generation', () => {
-    it('should detect React project and generate .tsx files', async () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      // Create React project indicator
-      await writeFile(join(tempDir, 'package.json'), JSON.stringify({
-        name: 'react-app',
-        dependencies: { react: '^18.0.0' }
-      }));
-      
-      execSync(`node ${cliPath} generate component ReactComponent`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentFile = join(tempDir, 'src', 'components', 'ReactComponent', 'ReactComponent.tsx');
-      expect(existsSync(componentFile)).toBe(true);
-      
-      const content = readFileSync(componentFile, 'utf8');
-      expect(content).toContain('import React');
-      expect(content).toContain('forwardRef');
-    });
-
-    it('should detect Next.js project and generate compatible components', async () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      // Create Next.js project indicator
-      await writeFile(join(tempDir, 'package.json'), JSON.stringify({
-        name: 'next-app',
-        dependencies: { next: '^14.0.0', react: '^18.0.0' }
-      }));
-      
-      execSync(`node ${cliPath} generate component NextComponent`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentFile = join(tempDir, 'src', 'components', 'NextComponent', 'NextComponent.tsx');
-      expect(existsSync(componentFile)).toBe(true);
-      
-      const content = readFileSync(componentFile, 'utf8');
-      // Next.js components may use 'use client' directive
-      expect(content).toMatch(/('use client'|export.*)/);
-    });
-
-    it('should detect vanilla JS project and generate .html/.js files', async () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      // Create vanilla project indicator (no React/Next)
-      await writeFile(join(tempDir, 'package.json'), JSON.stringify({
-        name: 'vanilla-app'
-      }));
-      
-      execSync(`node ${cliPath} generate component VanillaComponent`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentDir = join(tempDir, 'src', 'components', 'VanillaComponent');
-      expect(existsSync(componentDir)).toBe(true);
-      
-      // Should generate HTML or JS instead of TSX
-      const hasHtml = existsSync(join(componentDir, 'VanillaComponent.html'));
-      const hasJs = existsSync(join(componentDir, 'VanillaComponent.js'));
-      expect(hasHtml || hasJs).toBe(true);
-    });
-  });
-
-  describe('Edge Cases and Security', () => {
-    it('should handle very long component names', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      const longName = 'VeryLongComponentNameThatTestsFileNameLimitsAndPathHandlingCapabilities';
-      
-      execSync(`node ${cliPath} generate component ${longName}`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      const componentDir = join(tempDir, 'src', 'components', longName);
-      expect(existsSync(componentDir)).toBe(true);
-    });
-
-    it('should reject component names with special characters', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      let threw = false;
-      try {
-        execSync(`node ${cliPath} generate component "Special@Component"`, {
-          cwd: tempDir,
-          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-          stdio: 'pipe'
-        });
-      } catch (error) {
-        threw = true;
-        if (error.stderr) {
-          const errorMsg = error.stderr.toString();
-          expect(errorMsg.toLowerCase()).toMatch(/(invalid|special|character)/);
-        }
-      }
-      expect(threw).toBe(true);
-    });
-
-    it('should handle component names with spaces in quotes', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      // Spaces should be rejected or sanitized
-      let threw = false;
-      try {
-        execSync(`node ${cliPath} generate component "Invalid Name"`, {
-          cwd: tempDir,
-          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-          stdio: 'pipe'
-        });
-      } catch (error) {
-        threw = true;
-      }
-      expect(threw).toBe(true);
-    });
-
-    it('should prevent path traversal attacks', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      let threw = false;
-      try {
-        execSync(`node ${cliPath} generate component Test --path ../../etc`, {
-          cwd: tempDir,
-          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-          stdio: 'pipe'
-        });
-      } catch (error) {
-        threw = true;
-        if (error.stderr) {
-          const errorMsg = error.stderr.toString();
-          expect(errorMsg.toLowerCase()).toMatch(/(path|traversal|security|outside)/);
-        }
-      }
-      expect(threw).toBe(true);
-    });
-
-    it('should handle reserved JavaScript words', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      // Reserved words should be rejected or handled gracefully
-      let threw = false;
-      try {
-        execSync(`node ${cliPath} generate component "div"`, {
-          cwd: tempDir,
-          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-          stdio: 'pipe'
-        });
-      } catch (error) {
-        threw = true;
-      }
-      // May or may not throw depending on implementation
-      expect(threw || true).toBe(true);
-    });
-
-    it('should handle camelCase component names by converting to PascalCase', () => {
-      const cliPath = resolve(__dirname, '../../atomix-cli.js');
-      
-      execSync(`node ${cliPath} generate component camelCaseComponent`, {
-        cwd: tempDir,
-        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
-        stdio: 'pipe'
-      });
-
-      // Should create directory with PascalCase
-      const pascalCaseDir = join(tempDir, 'src', 'components', 'CamelCaseComponent');
-      const camelCaseDir = join(tempDir, 'src', 'components', 'camelCaseComponent');
-      
-      expect(existsSync(pascalCaseDir) || existsSync(camelCaseDir)).toBe(true);
-    });
-  });
-});