claude-task-master/tests/unit/ui.test.js

/**
 * UI module tests
 */

import { jest } from '@jest/globals';
import { 
  getStatusWithColor, 
  formatDependenciesWithStatus, 
  createProgressBar,
  getComplexityWithColor
} from '../../scripts/modules/ui.js';
import { sampleTasks } from '../fixtures/sample-tasks.js';

// Mock dependencies
jest.mock('chalk', () => {
  const origChalkFn = text => text;
  const chalk = origChalkFn;
  chalk.green = text => text; // Return text as-is for status functions
  chalk.yellow = text => text;
  chalk.red = text => text;
  chalk.cyan = text => text;
  chalk.blue = text => text;
  chalk.gray = text => text;
  chalk.white = text => text;
  chalk.bold = text => text;
  chalk.dim = text => text;
  
  // Add hex and other methods
  chalk.hex = () => origChalkFn;
  chalk.rgb = () => origChalkFn;
  
  return chalk;
});

jest.mock('figlet', () => ({
  textSync: jest.fn(() => 'Task Master Banner'),
}));

jest.mock('boxen', () => jest.fn(text => `[boxed: ${text}]`));

jest.mock('ora', () => jest.fn(() => ({
  start: jest.fn(),
  succeed: jest.fn(),
  fail: jest.fn(),
  stop: jest.fn(),
})));

jest.mock('cli-table3', () => jest.fn().mockImplementation(() => ({
  push: jest.fn(),
  toString: jest.fn(() => 'Table Content'),
})));

jest.mock('gradient-string', () => jest.fn(() => jest.fn(text => text)));

jest.mock('../../scripts/modules/utils.js', () => ({
  CONFIG: {
    projectName: 'Test Project',
    projectVersion: '1.0.0',
  },
  log: jest.fn(),
  findTaskById: jest.fn(),
  readJSON: jest.fn(),
  readComplexityReport: jest.fn(),
  truncate: jest.fn(text => text),
}));

jest.mock('../../scripts/modules/task-manager.js', () => ({
  findNextTask: jest.fn(),
  analyzeTaskComplexity: jest.fn(),
}));

describe('UI Module', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  describe('getStatusWithColor function', () => {
    test('should return done status with emoji for console output', () => {
      const result = getStatusWithColor('done');
      expect(result).toMatch(/done/);
      expect(result).toContain('✅');
    });

    test('should return pending status with emoji for console output', () => {
      const result = getStatusWithColor('pending');
      expect(result).toMatch(/pending/);
      expect(result).toContain('⏱️');
    });

    test('should return deferred status with emoji for console output', () => {
      const result = getStatusWithColor('deferred');
      expect(result).toMatch(/deferred/);
      expect(result).toContain('⏱️');
    });

    test('should return in-progress status with emoji for console output', () => {
      const result = getStatusWithColor('in-progress');
      expect(result).toMatch(/in-progress/);
      expect(result).toContain('🔄');
    });

    test('should return unknown status with emoji for console output', () => {
      const result = getStatusWithColor('unknown');
      expect(result).toMatch(/unknown/);
      expect(result).toContain('❌');
    });
    
    test('should use simple icons when forTable is true', () => {
      const doneResult = getStatusWithColor('done', true);
      expect(doneResult).toMatch(/done/);
      expect(doneResult).toContain('✓');
      
      const pendingResult = getStatusWithColor('pending', true);
      expect(pendingResult).toMatch(/pending/);
      expect(pendingResult).toContain('○');
      
      const inProgressResult = getStatusWithColor('in-progress', true);
      expect(inProgressResult).toMatch(/in-progress/);
      expect(inProgressResult).toContain('►');
      
      const deferredResult = getStatusWithColor('deferred', true);
      expect(deferredResult).toMatch(/deferred/);
      expect(deferredResult).toContain('x');
    });
  });

  describe('formatDependenciesWithStatus function', () => {
    test('should format dependencies as plain IDs when forConsole is false (default)', () => {
      const dependencies = [1, 2, 3];
      const allTasks = [
        { id: 1, status: 'done' },
        { id: 2, status: 'pending' },
        { id: 3, status: 'deferred' }
      ];

      const result = formatDependenciesWithStatus(dependencies, allTasks);
      
      // With recent changes, we expect just plain IDs when forConsole is false
      expect(result).toBe('1, 2, 3');
    });

    test('should format dependencies with status indicators when forConsole is true', () => {
      const dependencies = [1, 2, 3];
      const allTasks = [
        { id: 1, status: 'done' },
        { id: 2, status: 'pending' },
        { id: 3, status: 'deferred' }
      ];
      
      const result = formatDependenciesWithStatus(dependencies, allTasks, true);
      
      // We can't test for exact color formatting due to our chalk mocks
      // Instead, test that the result contains all the expected IDs
      expect(result).toContain('1');
      expect(result).toContain('2');
      expect(result).toContain('3');
      
      // Test that it's a comma-separated list
      expect(result.split(', ').length).toBe(3);
    });

    test('should return "None" for empty dependencies', () => {
      const result = formatDependenciesWithStatus([], []);
      expect(result).toBe('None');
    });

    test('should handle missing tasks in the task list', () => {
      const dependencies = [1, 999];
      const allTasks = [
        { id: 1, status: 'done' }
      ];

      const result = formatDependenciesWithStatus(dependencies, allTasks);
      expect(result).toBe('1, 999 (Not found)');
    });
  });

  describe('createProgressBar function', () => {
    test('should create a progress bar with the correct percentage', () => {
      const result = createProgressBar(50, 10, {
        'pending': 20,
        'in-progress': 15,
        'blocked': 5
      });
      expect(result).toContain('50%');
    });

    test('should handle 0% progress', () => {
      const result = createProgressBar(0, 10);
      expect(result).toContain('0%');
    });

    test('should handle 100% progress', () => {
      const result = createProgressBar(100, 10);
      expect(result).toContain('100%');
    });

    test('should handle invalid percentages by clamping', () => {
      const result1 = createProgressBar(0, 10);
      expect(result1).toContain('0%');
      
      const result2 = createProgressBar(100, 10); 
      expect(result2).toContain('100%');
    });

    test('should support status breakdown in the progress bar', () => {
      const result = createProgressBar(30, 10, {
        'pending': 30,
        'in-progress': 20,
        'blocked': 10,
        'deferred': 5,
        'cancelled': 5
      });
      
      expect(result).toContain('40%');
    });
  });

  describe('getComplexityWithColor function', () => {
    test('should return high complexity in red', () => {
      const result = getComplexityWithColor(8);
      expect(result).toMatch(/8/);
      expect(result).toContain('🔴');
    });

    test('should return medium complexity in yellow', () => {
      const result = getComplexityWithColor(5);
      expect(result).toMatch(/5/);
      expect(result).toContain('🟡');
    });

    test('should return low complexity in green', () => {
      const result = getComplexityWithColor(3);
      expect(result).toMatch(/3/);
      expect(result).toContain('🟢');
    });

    test('should handle non-numeric inputs', () => {
      const result = getComplexityWithColor('high');
      expect(result).toMatch(/high/);
      expect(result).toContain('🔴');
    });
  });
});