@agentskillkit/agent-skills 1.0.1 → 3.2.1

package/tests/scripts/integration/studio-integration.test.js

@@ -0,0 +1,183 @@
+/**
+ * Studio Integration Tests
+ * =========================
+ * End-to-end tests with real CSV data
+ * Verifies the complete search + design system pipeline
+ * 
+ * NOTE: CSV data quality issues exist (inconsistent columns).
+ * Tests are designed to gracefully handle errors.
+ */
+
+import { describe, test, expect } from 'vitest';
+import { search, detectDomain, searchStack } from '../../../.agent/skills/studio/scripts-js/core.js';
+import { formatMasterMd } from '../../../.agent/skills/studio/scripts-js/design_system.js';
+import { detectPageType } from '../../../.agent/skills/studio/scripts-js/utils/page-type-detector.js';
+
+// Timeout for integration tests
+const INTEGRATION_TIMEOUT = 10000;
+
+describe('Studio Integration Tests', () => {
+    
+    describe('Search Function Structure', () => {
+        test('search returns object with results array', async () => {
+            const result = await search('dashboard', 'style', 2);
+            
+            expect(result).toHaveProperty('results');
+            expect(Array.isArray(result.results)).toBe(true);
+        }, INTEGRATION_TIMEOUT);
+
+        test('search handles UX domain', async () => {
+            const result = await search('checkout', 'ux', 2);
+            
+            expect(result).toHaveProperty('results');
+            expect(Array.isArray(result.results)).toBe(true);
+        }, INTEGRATION_TIMEOUT);
+
+        test('search handles landing domain', async () => {
+            const result = await search('marketing', 'landing', 2);
+            
+            expect(result).toHaveProperty('results');
+            expect(Array.isArray(result.results)).toBe(true);
+        }, INTEGRATION_TIMEOUT);
+    });
+
+    describe('Domain Detection', () => {
+        test('detectDomain returns a string', () => {
+            const domain = detectDomain('modern minimalist design for SaaS');
+            expect(typeof domain).toBe('string');
+        });
+
+        test('detectDomain handles various inputs', () => {
+            const inputs = [
+                'dashboard with charts',
+                'ecommerce checkout',
+                'landing page hero section',
+                'user profile settings'
+            ];
+            
+            inputs.forEach(input => {
+                const domain = detectDomain(input);
+                expect(domain).toBeDefined();
+                expect(typeof domain).toBe('string');
+            });
+        });
+    });
+
+    describe('Stack Search', () => {
+        test('searchStack returns results structure', async () => {
+            const result = await searchStack('React Tailwind');
+            
+            expect(result).toBeDefined();
+            // searchStack may return results or empty depending on data availability
+            if (result && result.results) {
+                expect(Array.isArray(result.results)).toBe(true);
+            }
+        }, INTEGRATION_TIMEOUT);
+    });
+
+    describe('formatMasterMd Generation', () => {
+        test('formatMasterMd generates complete markdown', () => {
+            const mockDesignSystem = {
+                project_name: 'Integration Test',
+                style: { 'Style Category': 'Modern Minimal' },
+                colors: {
+                    primary: '#2563EB',
+                    secondary: '#3B82F6',
+                    cta: '#F97316',
+                    background: '#FFFFFF',
+                    text: '#1E293B'
+                },
+                typography: {
+                    'Font Family': 'Inter, sans-serif',
+                    'Body Size': '16px'
+                },
+                pattern: { 'Pattern Title': 'Dashboard Layout' }
+            };
+
+            const output = formatMasterMd(mockDesignSystem);
+            
+            // Verify all major sections present
+            expect(output).toContain('# Design System Master File');
+            expect(output).toContain('## Global Rules');
+            expect(output).toContain('### Color Palette');
+            expect(output).toContain('### Typography');
+            expect(output).toContain('## Component Specs');
+            expect(output).toContain('## Pre-Delivery Checklist');
+        });
+
+        test('formatMasterMd includes CSS custom properties', () => {
+            const mockDesignSystem = {
+                project_name: 'CSS Test',
+                colors: {
+                    primary: '#FF5733',
+                    cta: '#33FF57'
+                }
+            };
+
+            const output = formatMasterMd(mockDesignSystem);
+            
+            expect(output).toContain('--color-primary');
+            expect(output).toContain('#FF5733');
+        });
+
+        test('formatMasterMd handles minimal input', () => {
+            const minimalDesignSystem = {
+                project_name: 'Minimal'
+            };
+
+            const output = formatMasterMd(minimalDesignSystem);
+            
+            expect(output).toContain('# Design System Master File');
+            expect(output).toContain('Minimal');
+        });
+    });
+
+    describe('Page Type Detection with Context', () => {
+        test('detectPageType works with style results', () => {
+            const mockStyleResults = [
+                { 'Style Category': 'Data Visualization', 'Keywords': 'dashboard, analytics' }
+            ];
+            
+            const pageType = detectPageType('admin panel', mockStyleResults);
+            
+            expect(pageType).toBe('Dashboard / Data View');
+        });
+
+        test('detectPageType handles empty style results', () => {
+            const pageType = detectPageType('checkout confirmation', []);
+            
+            expect(pageType).toBe('Checkout / Payment');
+        });
+
+        test('detectPageType returns General for unknown patterns', () => {
+            // Use truly random string without any keyword matches
+            const pageType = detectPageType('zzz qwerty asdfgh', []);
+            
+            expect(pageType).toBe('General');
+        });
+    });
+
+    describe('Error Handling', () => {
+        test('search handles empty query gracefully', async () => {
+            const result = await search('', 'style', 1);
+            
+            expect(result).toHaveProperty('results');
+            expect(Array.isArray(result.results)).toBe(true);
+        }, INTEGRATION_TIMEOUT);
+
+        test('search handles invalid domain gracefully', async () => {
+            const result = await search('test query', 'invalid_domain', 1);
+            
+            // Should return empty results, not throw
+            expect(result).toHaveProperty('results');
+        }, INTEGRATION_TIMEOUT);
+
+        test('formatMasterMd handles undefined colors', () => {
+            const designSystem = {
+                project_name: 'No Colors'
+            };
+
+            expect(() => formatMasterMd(designSystem)).not.toThrow();
+        });
+    });
+});

package/tests/scripts/intelligent-overrides.test.js

@@ -0,0 +1,181 @@
+/**
+ * Intelligent Override Tests - Studio Design System
+ * ==================================================
+ * Unit tests for generateIntelligentOverrides() function
+ */
+
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import { generateIntelligentOverrides } from '../../.agent/skills/studio/scripts-js/utils/intelligent-overrides.js';
+import * as coreModule from '../../.agent/skills/studio/scripts-js/core.js';
+
+// Mock the search function
+vi.mock('../../.agent/skills/studio/scripts-js/core.js', () => ({
+    search: vi.fn()
+}));
+
+describe('generateIntelligentOverrides', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    test('detects dashboard page type and infers data-dense layout', async () => {
+        // Mock search results for dashboard context
+        coreModule.search
+            .mockResolvedValueOnce({
+                // Style search - data-heavy keywords
+                results: [{
+                    'Style Category': 'Data Visualization',
+                    'Keywords': 'dashboard, data, dense, grid',
+                    'Best For': 'Analytics dashboards',
+                    'Effects & Animation': 'Smooth data transitions'
+                }]
+            })
+            .mockResolvedValueOnce({ results: [] }) // UX search
+            .mockResolvedValueOnce({ results: [] }); // Landing search
+
+        const overrides = await generateIntelligentOverrides('dashboard', 'analytics', {});
+
+        expect(overrides.page_type).toBe('Dashboard / Data View');
+        expect(overrides.layout['Max Width']).toBe('1400px or full-width');
+        expect(overrides.layout['Grid']).toBe('12-column grid for data flexibility');
+        expect(overrides.spacing['Content Density']).toBe('High — optimize for information display');
+        expect(overrides.recommendations).toContain('Effects: Smooth data transitions');
+    });
+
+    test('detects minimal style and infers narrow layout', async () => {
+        coreModule.search
+            .mockResolvedValueOnce({
+                results: [{
+                    'Style Category': 'Minimalism',
+                    'Keywords': 'minimal, clean, simple',
+                    'Best For': 'Content-focused pages',
+                    'Effects & Animation': 'Subtle fades'
+                }]
+            })
+            .mockResolvedValueOnce({ results: [] })
+            .mockResolvedValueOnce({ results: [] });
+
+        const overrides = await generateIntelligentOverrides('content', 'blog post', {});
+
+        expect(overrides.layout['Max Width']).toBe('800px (narrow, focused)');
+        expect(overrides.layout['Layout']).toBe('Single column, centered');
+        expect(overrides.spacing['Content Density']).toBe('Low — focus on clarity');
+    });
+
+    test('extracts UX recommendations from search results', async () => {
+        coreModule.search
+            .mockResolvedValueOnce({ results: [] }) // Style
+            .mockResolvedValueOnce({
+                // UX search with guidelines
+                results: [
+                    {
+                        'Category': 'Form UX',
+                        'Do': 'Show field validation inline',
+                        "Don't": 'Hide error messages'
+                    },
+                    {
+                        'Category': 'Navigation',
+                        'Do': 'Keep primary actions visible',
+                        "Don't": 'Bury actions in menus'
+                    }
+                ]
+            })
+            .mockResolvedValueOnce({ results: [] }); // Landing
+
+        const overrides = await generateIntelligentOverrides('checkout', '', {});
+
+        expect(overrides.recommendations).toContain('Form UX: Show field validation inline');
+        expect(overrides.recommendations).toContain('Navigation: Keep primary actions visible');
+        expect(overrides.components).toContain('Avoid: Hide error messages');
+        expect(overrides.components).toContain('Avoid: Bury actions in menus');
+    });
+
+    test('extracts landing pattern info', async () => {
+        coreModule.search
+            .mockResolvedValueOnce({ results: [] })
+            .mockResolvedValueOnce({ results: [] })
+            .mockResolvedValueOnce({
+                // Landing search
+                results: [{
+                    'Section Order': 'Hero > Features > Testimonials > CTA',
+                    'Primary CTA Placement': 'Above fold, right side',
+                    'Color Strategy': 'Bold CTA with neutral background'
+                }]
+            });
+
+        const overrides = await generateIntelligentOverrides('landing', 'marketing page', {});
+
+        expect(overrides.layout['Sections']).toBe('Hero > Features > Testimonials > CTA');
+        expect(overrides.recommendations).toContain('CTA Placement: Above fold, right side');
+        expect(overrides.colors['Strategy']).toBe('Bold CTA with neutral background');
+    });
+
+    test('provides default layout when no search results', async () => {
+        coreModule.search
+            .mockResolvedValue({ results: [] });
+
+        const overrides = await generateIntelligentOverrides('unknown', '', {});
+
+        expect(overrides.layout['Max Width']).toBe('1200px');
+        expect(overrides.layout['Layout']).toBe('Responsive grid');
+        expect(overrides.recommendations).toContain('Refer to MASTER.md for all design rules');
+    });
+
+    test('handles null/undefined inputs gracefully', async () => {
+        coreModule.search
+            .mockResolvedValue({ results: [] });
+
+        const overrides = await generateIntelligentOverrides(null, null, {});
+
+        expect(overrides.page_type).toBe('General');
+        expect(overrides.layout).toBeDefined();
+        expect(overrides.recommendations.length).toBeGreaterThan(0);
+    });
+
+    test('combines page name and query for context', async () => {
+        coreModule.search
+            .mockResolvedValue({ results: [] });
+
+        await generateIntelligentOverrides('dashboard', 'SaaS analytics', {});
+
+        // Verify search was called with combined context
+        expect(coreModule.search).toHaveBeenCalledWith(
+            expect.stringContaining('dashboard'),
+            expect.any(String),
+            expect.any(Number)
+        );
+        expect(coreModule.search).toHaveBeenCalledWith(
+            expect.stringContaining('saas'),
+            expect.any(String),
+            expect.any(Number)
+        );
+    });
+
+    test('calls search for all three domains', async () => {
+        coreModule.search
+            .mockResolvedValue({ results: [] });
+
+        await generateIntelligentOverrides('test', 'page', {});
+
+        expect(coreModule.search).toHaveBeenCalledTimes(3);
+        expect(coreModule.search).toHaveBeenCalledWith(expect.any(String), 'style', 1);
+        expect(coreModule.search).toHaveBeenCalledWith(expect.any(String), 'ux', 3);
+        expect(coreModule.search).toHaveBeenCalledWith(expect.any(String), 'landing', 1);
+    });
+
+    test('returns all expected override categories', async () => {
+        coreModule.search
+            .mockResolvedValue({ results: [] });
+
+        const overrides = await generateIntelligentOverrides('test', '', {});
+
+        expect(overrides).toHaveProperty('page_type');
+        expect(overrides).toHaveProperty('layout');
+        expect(overrides).toHaveProperty('spacing');
+        expect(overrides).toHaveProperty('typography');
+        expect(overrides).toHaveProperty('colors');
+        expect(overrides).toHaveProperty('components');
+        expect(overrides).toHaveProperty('unique_components');
+        expect(overrides).toHaveProperty('recommendations');
+    });
+});

package/tests/scripts/page-override-formatter.test.js

@@ -0,0 +1,227 @@
+/**
+ * Page Override Formatter Tests - Studio Design System
+ * =====================================================
+ * Unit tests for formatPageOverrideMd() function
+ */
+
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import { formatPageOverrideMd } from '../../.agent/skills/studio/scripts-js/utils/page-override-formatter.js';
+import * as intelligentOverridesModule from '../../.agent/skills/studio/scripts-js/utils/intelligent-overrides.js';
+
+// Mock generateIntelligentOverrides
+vi.mock('../../.agent/skills/studio/scripts-js/utils/intelligent-overrides.js', () => ({
+    generateIntelligentOverrides: vi.fn()
+}));
+
+describe('formatPageOverrideMd', () => {
+    const mockDesignSystem = {
+        project_name: 'Test Project'
+    };
+
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    test('generates complete page override file with all sections', async () => {
+        intelligentOverridesModule.generateIntelligentOverrides.mockResolvedValue({
+            page_type: 'Dashboard / Data View',
+            layout: { 'Max Width': '1400px', 'Grid': '12-column' },
+            spacing: { 'Content Density': 'High' },
+            typography: {},
+            colors: { 'Strategy': 'Data-focused' },
+            components: ['Use data tables'],
+            unique_components: ['Chart.js integration'],
+            recommendations: ['Optimize for large datasets', 'Use lazy loading']
+        });
+
+        const output = await formatPageOverrideMd(mockDesignSystem, 'dashboard', 'analytics');
+
+        // Header section
+        expect(output).toContain('# Dashboard Page Overrides');
+        expect(output).toContain('> **PROJECT:** Test Project');
+        expect(output).toContain('> **Page Type:** Dashboard / Data View');
+        expect(output).toContain('> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file');
+
+        // Layout overrides
+        expect(output).toContain('### Layout Overrides');
+        expect(output).toContain('- **Max Width:** 1400px');
+        expect(output).toContain('- **Grid:** 12-column');
+
+        // Spacing overrides
+        expect(output).toContain('### Spacing Overrides');
+        expect(output).toContain('- **Content Density:** High');
+
+        // Color overrides
+        expect(output).toContain('### Color Overrides');
+        expect(output).toContain('- **Strategy:** Data-focused');
+
+        // Component overrides
+        expect(output).toContain('### Component Overrides');
+        expect(output).toContain('- Use data tables');
+
+        // Unique components
+        expect(output).toContain('## Page-Specific Components');
+        expect(output).toContain('- Chart.js integration');
+
+        // Recommendations
+        expect(output).toContain('## Recommendations');
+        expect(output).toContain('- Optimize for large datasets');
+        expect(output).toContain('- Use lazy loading');
+    });
+
+    test('handles empty overrides with fallback messages', async () => {
+        intelligentOverridesModule.generateIntelligentOverrides.mockResolvedValue({
+            page_type: 'General',
+            layout: {},
+            spacing: {},
+            typography: {},
+            colors: {},
+            components: [],
+            unique_components: [],
+            recommendations: ['Refer to MASTER.md']
+        });
+
+        const output = await formatPageOverrideMd(mockDesignSystem, 'generic-page');
+
+        expect(output).toContain('- No overrides — use Master layout');
+        expect(output).toContain('- No overrides — use Master spacing');
+        expect(output).toContain('- No overrides — use Master typography');
+        expect(output).toContain('- No overrides — use Master colors');
+        expect(output).toContain('- No overrides — use Master component specs');
+        expect(output).toContain('- No unique components for this page');
+    });
+
+    test('formats page title correctly from slug', async () => {
+        intelligentOverridesModule.generateIntelligentOverrides.mockResolvedValue({
+            page_type: 'General',
+            layout: {},
+            spacing: {},
+            typography: {},
+            colors: {},
+            components: [],
+            unique_components: [],
+            recommendations: []
+        });
+
+        const output = await formatPageOverrideMd(mockDesignSystem, 'checkout-page');
+        expect(output).toContain('# Checkout Page Page Overrides');
+
+        const output2 = await formatPageOverrideMd(mockDesignSystem, 'user_profile');
+        expect(output2).toContain('# User Profile Page Overrides');
+    });
+
+    test('includes timestamp in ISO format', async () => {
+        intelligentOverridesModule.generateIntelligentOverrides.mockResolvedValue({
+            page_type: 'General',
+            layout: {},
+            spacing: {},
+            typography: {},
+            colors: {},
+            components: [],
+            unique_components: [],
+            recommendations: []
+        });
+
+        const output = await formatPageOverrideMd(mockDesignSystem, 'test');
+        expect(output).toMatch(/> \*\*Generated:\*\* \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/);
+    });
+
+    test('passes page query to intelligent overrides', async () => {
+        intelligentOverridesModule.generateIntelligentOverrides.mockResolvedValue({
+            page_type: 'General',
+            layout: {},
+            spacing: {},
+            typography: {},
+            colors: {},
+            components: [],
+            unique_components: [],
+            recommendations: []
+        });
+
+        await formatPageOverrideMd(mockDesignSystem, 'dashboard', 'SaaS analytics');
+
+        expect(intelligentOverridesModule.generateIntelligentOverrides)
+            .toHaveBeenCalledWith('dashboard', 'SaaS analytics', mockDesignSystem);
+    });
+
+    test('uses project name from design system', async () => {
+        const customDesignSystem = {
+            project_name: 'My Custom Project'
+        };
+
+        intelligentOverridesModule.generateIntelligentOverrides.mockResolvedValue({
+            page_type: 'General',
+            layout: {},
+            spacing: {},
+            typography: {},
+            colors: {},
+            components: [],
+            unique_components: [],
+            recommendations: []
+        });
+
+        const output = await formatPageOverrideMd(customDesignSystem, 'test');
+        expect(output).toContain('> **PROJECT:** My Custom Project');
+    });
+
+    test('includes all required sections in order', async () => {
+        intelligentOverridesModule.generateIntelligentOverrides.mockResolvedValue({
+            page_type: 'General',
+            layout: {},
+            spacing: {},
+            typography: {},
+            colors: {},
+            components: [],
+            unique_components: [],
+            recommendations: []
+        });
+
+        const output = await formatPageOverrideMd(mockDesignSystem, 'test');
+
+        const sections = [
+            'Page Overrides',
+            '## Page-Specific Rules',
+            '### Layout Overrides',
+            '### Spacing Overrides',
+            '### Typography Overrides',
+            '### Color Overrides',
+            '### Component Overrides',
+            '## Page-Specific Components',
+            '## Recommendations'
+        ];
+
+        let lastIndex = -1;
+        for (const section of sections) {
+            const index = output.indexOf(section);
+            expect(index).toBeGreaterThan(lastIndex);
+            lastIndex = index;
+        }
+    });
+
+    test('output is valid markdown', async () => {
+        intelligentOverridesModule.generateIntelligentOverrides.mockResolvedValue({
+            page_type: 'Dashboard',
+            layout: { 'Max Width': '1400px' },
+            spacing: {},
+            typography: {},
+            colors: {},
+            components: [],
+            unique_components: [],
+            recommendations: ['Test recommendation']
+        });
+
+        const output = await formatPageOverrideMd(mockDesignSystem, 'dashboard');
+
+        // Check for proper heading levels
+        expect(output).toContain('# Dashboard Page Overrides');
+        expect(output).toContain('## Page-Specific Rules');
+        expect(output).toContain('### Layout Overrides');
+
+        // Check for proper lists
+        expect(output).toMatch(/- \*\*[^:]+:\*\* [^\n]+/); // Bold key-value pairs
+        expect(output).toMatch(/- [^\n]+/); // Simple list items
+
+        // Check for blockquotes
+        expect(output).toMatch(/> [^\n]+/);
+    });
+});