mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-31 05:19:53 +00:00
b8d8193a38
* Add copyTerminal translation key * Add copy terminal button with select all functionality * Remove copy button from error view button group * Add hover-based copy button overlay to terminal * Fix clipboard copy implementation in BaseTerminal * Add 'Copy all' tooltip to terminal copy button * Fix copy button to be away from right hand side * Update copy button to respect existing selection - Copy only selected text if any exists - Copy all text and clear selection if nothing selected - Update tooltip to reflect new behavior * Add dynamic tooltip showing actual copy action - Show 'Copy selection' when text is selected - Show 'Copy all' when no text is selected * Remove redundant i18n * Fix aria-label to use dynamic tooltip text * Remove debug console.error statements from useTerminal Clean up debug logging added during development: - Remove selection change debug logging - Remove focus state debug logging - Remove keyboard event debug logging - Remove copy/paste debug logging * Remove redundant keyboard handling from useTerminal The rebase commit already fixed basic copy/paste. Removed only the complex keyboard event handling that duplicates the rebase fix. Kept the valuable UI features: - Hover copy button overlay - Right-click context menu * Use Tailwind transition classes instead of custom CSS Replace custom .animate-fade-in with standard Tailwind transition-opacity duration-200 classes * Use VueUse useElementHover for robust hover handling Replace manual mouseenter/mouseleave events with VueUse useElementHover composable which properly handles all edge cases including mouseout and interrupted events * Move tooltip to left of button Relieves squished tooltip * Simplify code * Fix listener lifecycle management Consolidate setup into single onMounted block instead of creating unnecessary duplicate lifecycle hooks * Replace any type with proper IDisposable type * Refactor copy logic for clarity * Use v-show for proper opacity transitions * Prefer optional chaining * Use useEventListener for context menu * Remove redundant opacity classes * Add BaseTerminal component tests * Use pointer-events for button interactivity * Update tests for pointer-events button behavior * Fix clipboard mock in tests * Fix test expectations for opacity classes * Simplify hover tests for button state * Remove low-value 'renders terminal container' test * Remove non-functional 'button responds to hover' test * Remove implementation detail test for dispose listener * Remove redundant 'tracks selection changes' test * Remove obvious comments from test file * Use cn() utility for conditional classes * Update tests-ui/tests/components/bottomPanel/tabs/terminal/BaseTerminal.spec.ts Co-authored-by: Alexander Brown <drjkl@comfy.org> * [auto-fix] Apply ESLint and Prettier fixes * Remove 'any' types from wrapper and terminalMock variables Add assertion to verify onSelectionChange was called * Move mountBaseTerminal factory to module scope * Rename test file - Current consensus is .test.ts for component files * Update src/components/bottomPanel/tabs/terminal/BaseTerminal.vue * nit --------- Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: GitHub Action <action@github.com>
ComfyUI Frontend Testing Guide
This guide provides an overview of testing approaches used in the ComfyUI Frontend codebase. These guides are meant to document any particularities or nuances of writing tests in this codebase, rather than being a comprehensive guide to testing in general. By reading these guides first, you may save yourself some time when encountering issues.
Testing Documentation
Documentation for unit tests is organized into three guides:
- Component Testing - How to test Vue components
- Unit Testing - How to test utility functions, composables, and other non-component code
- Store Testing - How to test Pinia stores specifically
Testing Structure
The ComfyUI Frontend project uses a mixed approach to unit test organization:
- Component Tests: Located directly alongside their components with a
.spec.tsextension - Unit Tests: Located in the
tests-ui/tests/directory - Store Tests: Located in the
tests-ui/tests/store/directory - Browser Tests: These are located in the
browser_tests/directory. There is a dedicated README in thebrowser_tests/directory, so it will not be covered here.
Test Frameworks and Libraries
Our tests use the following frameworks and libraries:
- Vitest - Test runner and assertion library
- @vue/test-utils - Vue component testing utilities
- Pinia - For store testing
Getting Started
To run the tests locally:
# Run unit tests
pnpm test:unit
# Run unit tests in watch mode
pnpm test:unit:dev
# Run component tests with browser-native environment
pnpm test:component
Refer to the specific guides for more detailed information on each testing type.