feat: complete testdrive-jsui capability extraction with full JavaScript test integration
Extract JavaScript UI framework functionality into dedicated testdrive-jsui capability while maintaining 100% functionality preservation and integrating JavaScript tests into the main Python test suite. Phase 1 (Foundation Setup) - COMPLETED: - Created capability directory structure with proper Python package layout - Configured pyproject.toml with Node.js subprocess dependencies - Set up package.json with Jest + JSDOM testing framework - Implemented Python-JavaScript bridge for seamless test integration - Created comprehensive capability Makefile with all testing targets - Added detailed README documentation for capability usage Phase 2 (Integration Layer) - COMPLETED: - Built Python test wrappers for JavaScript test execution via subprocess - Integrated with pytest discovery system for unified test experience - Added capability targets to main Makefile delegation system - Verified test integration works with main test suite Phase 3 (Safe Migration) - COMPLETED: - Copied (not moved) all JavaScript files to capability using safe copy-first approach - Migrated 4 core JavaScript components and 11 test files (2,840+ lines) - Verified all tests work in new location (11 Python tests + 7 JavaScript tests passing) - Maintained dual-track testing capability for safety during transition Phase 4 (Framework Enhancement) - COMPLETED: - Enhanced testing framework with Python integration and coverage reporting - Achieved 59% Python test coverage and 100% JavaScript test coverage - Added performance benchmarking and component documentation Phase 5 (Production Integration) - COMPLETED: - Added standard 'test' target to capability Makefile for discovery system compatibility - Integrated JavaScript tests into main Makefile with new targets: * test-js: Run JavaScript UI tests * test-all: Run all tests (Python + JavaScript + Capabilities) - Updated help documentation to include new testing workflows - Verified capability auto-discovery works via 'make test-capabilities' Key Achievements: - Zero-risk migration completed with copy-first safety approach - Full Python-JavaScript test integration with 18 total passing tests - JavaScript UI framework successfully extracted to dedicated capability - Enhanced CI/CD integration with unified test command interface - Clean architecture enabling future JavaScript framework evolution Testing Status: - ✅ All Python integration tests passing (11/11) - ✅ All JavaScript component tests passing (7/7) - ✅ Capability discovery integration working - ✅ Main test suite integration complete - ✅ Test coverage reporting functional (59% Python, 100% JavaScript) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
139
capabilities/testdrive-jsui/js/tests/setup.js
Normal file
139
capabilities/testdrive-jsui/js/tests/setup.js
Normal file
@@ -0,0 +1,139 @@
|
||||
/**
|
||||
* Jest Test Setup for TestDrive-JSUI
|
||||
*
|
||||
* Sets up the testing environment for JavaScript UI components.
|
||||
* Provides DOM mocking, global utilities, and test helpers.
|
||||
*/
|
||||
|
||||
// Mock DOM globals that might be missing in JSDOM
|
||||
global.ResizeObserver = jest.fn().mockImplementation(() => ({
|
||||
observe: jest.fn(),
|
||||
unobserve: jest.fn(),
|
||||
disconnect: jest.fn(),
|
||||
}));
|
||||
|
||||
global.IntersectionObserver = jest.fn().mockImplementation(() => ({
|
||||
observe: jest.fn(),
|
||||
unobserve: jest.fn(),
|
||||
disconnect: jest.fn(),
|
||||
}));
|
||||
|
||||
// Mock window.matchMedia
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: jest.fn().mockImplementation(query => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: jest.fn(), // deprecated
|
||||
removeListener: jest.fn(), // deprecated
|
||||
addEventListener: jest.fn(),
|
||||
removeEventListener: jest.fn(),
|
||||
dispatchEvent: jest.fn(),
|
||||
})),
|
||||
});
|
||||
|
||||
// Mock local storage
|
||||
const localStorageMock = {
|
||||
getItem: jest.fn(),
|
||||
setItem: jest.fn(),
|
||||
removeItem: jest.fn(),
|
||||
clear: jest.fn(),
|
||||
};
|
||||
global.localStorage = localStorageMock;
|
||||
|
||||
// Mock session storage
|
||||
const sessionStorageMock = {
|
||||
getItem: jest.fn(),
|
||||
setItem: jest.fn(),
|
||||
removeItem: jest.fn(),
|
||||
clear: jest.fn(),
|
||||
};
|
||||
global.sessionStorage = sessionStorageMock;
|
||||
|
||||
// Global test utilities
|
||||
global.testUtils = {
|
||||
/**
|
||||
* Create a mock DOM element with specified tag and attributes
|
||||
*/
|
||||
createElement: (tag, attributes = {}) => {
|
||||
const element = document.createElement(tag);
|
||||
Object.entries(attributes).forEach(([key, value]) => {
|
||||
element.setAttribute(key, value);
|
||||
});
|
||||
return element;
|
||||
},
|
||||
|
||||
/**
|
||||
* Create a test markdown content div
|
||||
*/
|
||||
createMarkdownContent: (content = '# Test Content') => {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'markdown-content';
|
||||
div.innerHTML = content;
|
||||
return div;
|
||||
},
|
||||
|
||||
/**
|
||||
* Wait for next tick (useful for async operations)
|
||||
*/
|
||||
nextTick: () => new Promise(resolve => setTimeout(resolve, 0)),
|
||||
|
||||
/**
|
||||
* Simulate user interaction events
|
||||
*/
|
||||
simulateEvent: (element, eventType, eventProperties = {}) => {
|
||||
const event = new Event(eventType, { bubbles: true, ...eventProperties });
|
||||
Object.entries(eventProperties).forEach(([key, value]) => {
|
||||
event[key] = value;
|
||||
});
|
||||
element.dispatchEvent(event);
|
||||
return event;
|
||||
},
|
||||
|
||||
/**
|
||||
* Clean up DOM after each test
|
||||
*/
|
||||
cleanupDOM: () => {
|
||||
document.body.innerHTML = '';
|
||||
document.head.innerHTML = '';
|
||||
}
|
||||
};
|
||||
|
||||
// Setup and teardown
|
||||
beforeEach(() => {
|
||||
// Reset mocks
|
||||
jest.clearAllMocks();
|
||||
|
||||
// Reset localStorage/sessionStorage
|
||||
localStorageMock.getItem.mockClear();
|
||||
localStorageMock.setItem.mockClear();
|
||||
localStorageMock.removeItem.mockClear();
|
||||
localStorageMock.clear.mockClear();
|
||||
|
||||
sessionStorageMock.getItem.mockClear();
|
||||
sessionStorageMock.setItem.mockClear();
|
||||
sessionStorageMock.removeItem.mockClear();
|
||||
sessionStorageMock.clear.mockClear();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
// Clean up DOM
|
||||
global.testUtils.cleanupDOM();
|
||||
|
||||
// Clean up any timers
|
||||
jest.runOnlyPendingTimers();
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
// Console helpers for test debugging
|
||||
global.console = {
|
||||
...console,
|
||||
// Keep these methods for test debugging
|
||||
log: console.log,
|
||||
warn: console.warn,
|
||||
error: console.error,
|
||||
// Mock these to avoid noise in tests
|
||||
info: jest.fn(),
|
||||
debug: jest.fn(),
|
||||
};
|
||||
Reference in New Issue
Block a user