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('x');
		});

		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('●');
		});
	});
});