task-master-neo-sdlc/src/core/neo/__tests__/design-system-manager.test.js

Enhanced task management system with Neo SDLC agents and MCP tools for comprehensive, AI-driven software development lifecycle management.

import { DesignSystemManager } from '../design-system-manager.js';
import { jest } from '@jest/globals';

// Mock KnowledgeGraph
const mockKnowledgeGraph = {
  addNode: jest.fn(),
  updateContext: jest.fn(),
};

describe('DesignSystemManager', () => {
  let manager;

  beforeEach(() => {
    jest.clearAllMocks();
    manager = new DesignSystemManager(mockKnowledgeGraph);
  });

  describe('Initialization', () => {
    it('should initialize design system and register in knowledge graph', async () => {
      await manager.initialize();
      
      expect(mockKnowledgeGraph.addNode).toHaveBeenCalledWith({
        id: 'design-system',
        type: 'system',
        data: {
          status: 'active',
          tokenCount: 0,
          componentCount: 0,
          templateCount: 0
        }
      });
    });
  });

  describe('Token Management', () => {
    const validToken = {
      id: 'primary-color',
      type: 'color',
      value: '#007bff',
      metadata: {
        description: 'Primary brand color',
        usage: 'Use for primary actions and highlights'
      }
    };

    it('should add a valid token', async () => {
      await manager.addToken(validToken);
      
      expect(manager.tokens.get('primary-color')).toEqual(validToken);
      expect(mockKnowledgeGraph.addNode).toHaveBeenCalledWith({
        id: 'token:primary-color',
        type: 'design-token',
        data: validToken
      });
    });

    it('should reject invalid token type', async () => {
      const invalidToken = { ...validToken, type: 'invalid' };
      await expect(manager.addToken(invalidToken)).rejects.toThrow('Invalid token type');
    });

    it('should update existing token', async () => {
      await manager.addToken(validToken);
      const updates = { value: '#0056b3' };
      
      await manager.updateToken('primary-color', updates);
      
      expect(manager.tokens.get('primary-color').value).toBe('#0056b3');
      expect(mockKnowledgeGraph.updateContext).toHaveBeenCalled();
    });
  });

  describe('Component Management', () => {
    const validComponent = {
      id: 'button',
      type: 'atom',
      name: 'Button',
      description: 'Basic button component',
      props: [{ name: 'label', type: 'string', required: true }],
      dependencies: [],
      tokens: ['primary-color'],
      template: '<button>{{label}}</button>',
      documentation: 'Basic button usage...',
      tests: ['button.test.js']
    };

    it('should add a valid component', async () => {
      // Add required token first
      await manager.addToken({
        id: 'primary-color',
        type: 'color',
        value: '#007bff'
      });

      await manager.addComponent(validComponent);
      
      expect(manager.components.get('button')).toEqual(validComponent);
      expect(mockKnowledgeGraph.addNode).toHaveBeenCalledWith({
        id: 'component:button',
        type: 'design-component',
        data: validComponent
      });
    });

    it('should detect circular dependencies', async () => {
      const componentA = { ...validComponent, id: 'a', dependencies: ['b'] };
      const componentB = { ...validComponent, id: 'b', dependencies: ['a'] };
      
      await manager.addToken({
        id: 'primary-color',
        type: 'color',
        value: '#007bff'
      });

      await manager.addComponent(componentB);
      await expect(manager.addComponent(componentA)).rejects.toThrow('Invalid component');
    });
  });

  describe('Grid System', () => {
    const validGridConfig = {
      columns: 12,
      gutter: '1rem',
      breakpoints: {
        xs: '0px',
        sm: '576px',
        md: '768px',
        lg: '992px'
      },
      containerWidth: '1200px'
    };

    it('should define grid system', async () => {
      await manager.defineGridSystem(validGridConfig);
      
      expect(manager.gridConfig).toEqual(validGridConfig);
      expect(mockKnowledgeGraph.updateContext).toHaveBeenCalledWith({
        id: 'design-system',
        type: 'system',
        data: { gridConfig: validGridConfig }
      });
    });

    it('should generate grid styles', async () => {
      await manager.defineGridSystem(validGridConfig);
      const styles = await manager.generateGridStyles();
      
      expect(styles).toContain('.container');
      expect(styles).toContain('.row');
      expect(styles).toContain('.col');
      expect(styles).toContain('@media');
    });
  });

  describe('Templates', () => {
    const validTemplate = {
      name: 'Basic Layout',
      description: 'Two column layout',
      layout: {
        sections: [{
          class: 'main-section',
          components: [
            { id: 'header', class: 'col-12' },
            { id: 'sidebar', class: 'col-4' },
            { id: 'content', class: 'col-8' }
          ]
        }]
      },
      components: ['header', 'sidebar', 'content']
    };

    it('should create template', async () => {
      // Add required components first
      const components = ['header', 'sidebar', 'content'].map(id => ({
        id,
        type: 'atom',
        name: id,
        description: `${id} component`,
        props: [],
        dependencies: [],
        tokens: [],
        template: `<div>${id}</div>`,
        documentation: '',
        tests: []
      }));

      for (const component of components) {
        await manager.addComponent(component);
      }

      await manager.createTemplate(validTemplate);
      
      const templateId = 'template:basic-layout';
      expect(manager.templates.get(templateId)).toEqual(validTemplate);
      expect(mockKnowledgeGraph.addNode).toHaveBeenCalledWith({
        id: templateId,
        type: 'design-template',
        data: validTemplate
      });
    });

    it('should apply template with data', async () => {
      // Add required components first
      const components = ['header', 'sidebar', 'content'].map(id => ({
        id,
        type: 'atom',
        name: id,
        description: `${id} component`,
        props: [],
        dependencies: [],
        tokens: [],
        template: `<div>{{content}}</div>`,
        documentation: '',
        tests: []
      }));

      for (const component of components) {
        await manager.addComponent(component);
      }

      await manager.createTemplate(validTemplate);
      
      const templateId = 'template:basic-layout';
      const data = {
        header: { content: 'Header Content' },
        sidebar: { content: 'Sidebar Content' },
        content: { content: 'Main Content' }
      };

      const rendered = await manager.applyTemplate(templateId, data);
      
      expect(rendered).toContain('Header Content');
      expect(rendered).toContain('Sidebar Content');
      expect(rendered).toContain('Main Content');
    });
  });

  describe('Documentation', () => {
    it('should generate comprehensive documentation', async () => {
      // Add some tokens and components first
      await manager.addToken({
        id: 'primary-color',
        type: 'color',
        value: '#007bff',
        metadata: {
          description: 'Primary brand color',
          usage: 'Use for primary actions'
        }
      });

      await manager.addComponent({
        id: 'button',
        type: 'atom',
        name: 'Button',
        description: 'Basic button component',
        props: [{ name: 'label', type: 'string', required: true }],
        dependencies: [],
        tokens: ['primary-color'],
        template: '<button>{{label}}</button>',
        documentation: 'Button usage...',
        tests: ['button.test.js']
      });

      const docs = await manager.generateDocumentation();
      
      expect(docs).toContain('# Design System Documentation');
      expect(docs).toContain('## Design Tokens');
      expect(docs).toContain('## Components');
      expect(docs).toContain('primary-color');
      expect(docs).toContain('Button');
    });
  });
});