Commit Graph

25 Commits

Author SHA1 Message Date
Alexander Brown
f90d6cf607 test: migrate 132 test files from @vue/test-utils to @testing-library/vue (#10965)
## Summary

Migrate 132 test files from `@vue/test-utils` (VTU) to
`@testing-library/vue` (VTL) with `@testing-library/user-event`,
adopting user-centric behavioral testing patterns across the codebase.

## Changes

- **What**: Systematic migration of component/unit tests from VTU's
`mount`/`wrapper` API to VTL's `render`/`screen`/`userEvent` API across
132 files in `src/`
- **Breaking**: None — test-only changes, no production code affected

### Migration breakdown

| Batch | Files | Description |
|-------|-------|-------------|
| 1 | 19 | Simple render/assert tests |
| 2A | 16 | Interactive tests with user events |
| 2B-1 | 14 | Interactive tests (continued) |
| 2B-2 | 32 | Interactive tests (continued) |
| 3A–3E | 51 | Complex tests (stores, composables, heavy mocking) |
| Lint fix | 7 | `await` on `fireEvent` calls for `no-floating-promises`
|
| Review fixes | 15 | Address CodeRabbit feedback (3 rounds) |

### Review feedback addressed

- Removed class-based assertions (`text-ellipsis`, `pr-3`, `.pi-save`,
`.skeleton`, `.bg-black\/15`, Tailwind utilities) in favor of
behavioral/accessible queries
- Added null guards before `querySelector` casts
- Added `expect(roots).toHaveLength(N)` guards before indexed NodeList
access
- Wrapped fake timer tests in `try/finally` for guaranteed cleanup
- Split double-render tests into focused single-render tests
- Replaced CSS class selectors with
`screen.getByText`/`screen.getByRole` queries
- Updated stubs to use semantic `role`/`aria-label` instead of CSS
classes
- Consolidated redundant edge-case tests
- Removed manual `document.body.appendChild` in favor of VTL container
management
- Used distinct mock return values to verify command wiring

### VTU holdouts (2 files)

These files intentionally retain `@vue/test-utils` because their
components use `<script setup>` without `defineExpose`, making internal
computed properties and methods inaccessible via VTL:

1. **`NodeWidgets.test.ts`** — partial VTU for `vm.processedWidgets`
2. **`WidgetSelectDropdown.test.ts`** — full VTU for heavy
`wrapper.vm.*` access

## Follow-up

Deferred items (`ComponentProps` typing, camelCase listener props)
tracked in #10966.

## Review Focus

- Test correctness: all migrated tests preserve original behavioral
coverage
- VTL idioms: proper use of `screen` queries, `userEvent`, and
accessibility-based selectors
- The 2 VTU holdout files are intentional, not oversights

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10965-test-migrate-132-test-files-from-vue-test-utils-to-testing-library-vue-33c6d73d36508199a6a7e513cf5d8296)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>
2026-04-08 19:21:42 -07:00
Johnpaul Chiwetelu
cfdd002b7c Road to No Explicit Any Part 10 (#8499)
## Summary

This PR removes `any` types from UI component files and replaces them
with proper TypeScript types.

### Key Changes

#### Type Safety Improvements
- Replaced `any` with `unknown`, explicit types, or proper interfaces
across UI components
- Used `ComponentPublicInstance` with explicit method signatures for
component refs
- Used `Record<string, unknown>` for dynamic property access
- Added generics for form components with flexible value types
- Used `CSSProperties` for style objects

### Files Changed

UI Components:
- src/components/common/ComfyImage.vue - Used proper class prop type
- src/components/common/DeviceInfo.vue - Used `string | number` for
formatValue
- src/components/common/FormItem.vue - Used `unknown` for model value
- src/components/common/FormRadioGroup.vue - Added generic type
parameter
- src/components/common/TreeExplorer.vue - Used proper async function
signature
- src/components/custom/widget/WorkflowTemplateSelectorDialog.vue -
Fixed duplicate import
- src/components/graph/CanvasModeSelector.vue - Used
`ComponentPublicInstance` for ref
- src/components/node/NodePreview.vue - Changed `any` to `unknown`
- src/components/queue/job/JobDetailsPopover.vue - Removed unnecessary
casts
- src/components/queue/job/JobFiltersBar.vue - Removed `as any` casts
- src/platform/assets/components/MediaAssetContextMenu.vue - Added
`ContextMenuInstance` type
- src/renderer/extensions/minimap/MiniMapPanel.vue - Used
`CSSProperties`
- src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts -
Added `PrimeVueTooltipElement` interface
-
src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
- Used `Record<string, unknown>`
-
src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
- Added `LicenseObject` interface

### Testing
- All TypeScript type checking passes (`pnpm typecheck`)
- Linting passes without errors (`pnpm lint`)

Part of the "Road to No Explicit Any" initiative.

### Previous PRs in this series:
- Part 2: #7401
- Part 3: #7935
- Part 4: #7970
- Part 5: #8064
- Part 6: #8083
- Part 7: #8092
- Part 8 Group 1: #8253
- Part 8 Group 2: #8258
- Part 8 Group 3: #8304
- Part 8 Group 4: #8314
- Part 8 Group 5: #8329
- Part 8 Group 6: #8344
- Part 8 Group 7: #8459
- Part 8 Group 8: #8496
- Part 9: #8498
- Part 10: #8499

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8499-Road-to-No-Explicit-Any-Part-10-2f86d73d365081aab129f165c7d02434)
by [Unito](https://www.unito.io)
2026-02-02 17:16:40 +01:00
Christian Byrne
4a85bffb1f fix: node header on preview has a gap on the right (not flush) (#8487)
## Summary

After changes:

[Screencast from 2026-01-30
00-34-59.webm](https://github.com/user-attachments/assets/9111b8ce-936d-4b30-8b56-6f44aabfe009)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8487-fix-node-header-on-preview-has-a-gap-on-the-right-not-flush-2f86d73d365081f38cabfca9ab9e04e4)
by [Unito](https://www.unito.io)
2026-01-31 15:57:38 -08:00
Johnpaul Chiwetelu
b598ce2c0f fix: node preview Vue mode sizing in manager panel (#7611)
## Summary
- Add `lg-node-preview` class to LGraphNodePreview for CSS targeting
- Override absolute positioning in NodesTabPanel to make Vue mode
previews fit within the container
- Apply zoom scaling (0.5) to fit node previews in the manager info
panel

## Test plan
- [ ] Open manager panel and select a node pack with nodes
- [ ] Verify node previews display correctly with Vue mode enabled
- [ ] Verify previews fit within the panel bounds without overflow

## Before


https://github.com/user-attachments/assets/8cd3a201-600d-4f31-9b79-4a480a07d998



## After



https://github.com/user-attachments/assets/b88ee7f2-5e6d-4913-b5a6-fa5fbe3b4dde





┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7611-fix-node-preview-Vue-mode-sizing-in-manager-panel-2cd6d73d36508141843cea046f104746)
by [Unito](https://www.unito.io)
2025-12-19 08:32:58 +01:00
Alexander Brown
5139e0564e Style: Font Consistency (#7220)
## Summary

Reduce lower level font definitions in most places. Default to Inter.

See #6912 

## Review Focus

Comic Sans is still an option...

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7220-Style-Font-Consistency-2c26d73d365081348f2dd8909dd9bb8f)
by [Unito](https://www.unito.io)

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>
2025-12-08 19:48:11 -07:00
Christian Byrne
836cd7f9ba fix: node preview background color (#6768)
## Summary

Changes node previews to use background color from color palette instead
of the menu color.

| Before | After |
| ------ | ----- |
| <img width="1700" height="1248" alt="Selection_2345"
src="https://github.com/user-attachments/assets/cc1d0e97-9551-4f88-8e92-4fe6bcdd8c21"
/> | <img width="2144" height="1138" alt="Selection_2347"
src="https://github.com/user-attachments/assets/16e64be3-3623-4900-ad18-c599a1aee59b"
/> |

Fixes https://github.com/Comfy-Org/ComfyUI_frontend/issues/6576

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6768-fix-node-preview-background-color-2b16d73d365081868644e1e6b7c7e3be)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: GitHub Action <action@github.com>
2025-11-19 21:41:25 -07:00
Alexander Brown
b943c0fa75 Lint: Add tailwind linter (#5984)
## Summary

Adds the [tailwind lint
plugin](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#eslint-plugin-tailwindcss)
and fixes the currently fixable rules ([v4 is still in
beta](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#about-tailwind-css-4-support)).

## Changes

- **What**: Enforces things like consistent class order, and eventually
can prohibit extra classes that could be utilities instead
- **Dependencies**: The plugin and its types

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5984-Lint-Add-tailwind-linter-2866d73d365081d89db0d998232533bb)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
2025-10-08 19:39:14 -07:00
Christian Byrne
8fc54646de apply stylelint auto fixes (#5940)
## Summary

Applied stylelint auto-fixes and resolved manual CSS issues across 25
files to achieve full compliance with stylelint rules.

## Changes

- **What**: Auto-fixed 68 CSS issues (legacy color functions,
font-weight keywords, shorthand properties, pseudo-element notation) and
manually resolved 6 remaining issues (duplicate selectors, vendor prefix
duplicates, font fallbacks, Vue v-bind whitelisting)
- **Config**: Disabled `no-descending-specificity` rule (43 warnings
require architectural CSS refactor)

## Review Focus

Verify no visual regressions from modernized CSS syntax:
- Modern [color function
notation](https://www.w3.org/TR/css-color-4/#funcdef-rgb): `rgba(0, 0,
0, 0.5)` → `rgb(0 0 0 / 50%)`
- Numeric font weights: `bold`/`normal` → `700`/`400`
- Pseudo-element double colons: `:before` → `::before

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5940-apply-stylelint-auto-fixes-2846d73d365081ee8031c212a69a4bd4)
by [Unito](https://www.unito.io)

---------

Co-authored-by: DrJKL <DrJKL0424@gmail.com>
2025-10-07 18:49:50 -07:00
Simula_r
0919856a05 Feat/vue nodes preview (#5747)
## Summary

Create a LGraphNodePreview.vue component to use Vue Nodes for preview
when hovering over search results / sidebar tree list.

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<img width="3024" height="1642" alt="image"
src="https://github.com/user-attachments/assets/d102b08e-2970-407b-aff8-3fa6333d5e38"
/>
<img width="3024" height="1646" alt="image (1)"
src="https://github.com/user-attachments/assets/b5d378d5-3cf6-4cca-9fa1-741647e8d72c"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5747-Feat-vue-nodes-preview-2786d73d3650817dbf9af458bd5dda8c)
by [Unito](https://www.unito.io)

---------

Co-authored-by: JakeSchroeder <jake@axiom.co>
Co-authored-by: AustinMroz <AustinMroz@users.noreply.github.com>
2025-09-24 13:02:47 -07:00
Alexander Brown
85017dbba0 Upgrade: Tailwind v4 (#5246)
* temp: move tailwind calls out of the layer

* temp: ts tailwind config

* upgrade: Tailwind v4
This got a little out of hand.
Had to add a relative reference to the stylesheet in any component that uses @apply instead of the utility classes directly.

* upgrade: bg-opacity is now a modifier

* fix: Classic menu buttons assume a border

* Update test expectations [skip ci]

* fix: New preflight removal pattern

* fix: Skeletons don't have skin

* Update test expectations [skip ci]

* fix: Missing @reference

* [auto-fix] Apply ESLint and Prettier fixes

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: GitHub Action <action@github.com>
2025-09-03 12:37:43 -07:00
Christian Byrne
c42c9315f4 [refactor] Replace lodash with es-toolkit (#4935) 2025-08-12 12:22:09 -07:00
snomiao
6b31596399 [feat] Support Markdown rendering for node descriptions in NodePreview (#4684)
Co-authored-by: Claude <noreply@anthropic.com>
2025-08-06 00:44:23 -07:00
Christian Byrne
efb08bf2ba [Style] Fix node preview header/title overflow (#4610) 2025-07-30 11:46:50 -07:00
Christian Byrne
959ab3b3ec [feat] Add ESLint i18n enforcement and fix hardcoded strings (#4327)
Co-authored-by: github-actions <github-actions@github.com>
2025-07-02 00:41:46 -07:00
Chenlei Hu
a03841cb1a [lint] Enable plugin vue recommended rules (#3403) 2025-04-11 12:53:20 -04:00
Chenlei Hu
f593f3caa4 [Schema] ComfyNodeDefV2 schema (#2847) 2025-03-04 09:15:16 -05:00
Margen67
7bc48c5074 Formatting/cleanup (#2594) 2025-02-17 10:10:00 -05:00
Chenlei Hu
d8f074fea0 [Lint] Sort imports (#2104) 2024-12-30 17:26:37 -05:00
Chenlei Hu
db572a4085 Implement color palette in Vue (#2047)
Co-authored-by: github-actions <github-actions@github.com>
2024-12-25 21:41:48 -05:00
Chenlei Hu
ae26390776 Properly implement ComfyNodeDef interface (#1821)
* nit

* Properly implement ComfyNodeDef interface

* nit

* Mark readonly
2024-12-06 12:00:15 -05:00
Chenlei Hu
1ff6e27d9c Manage widget definitions with Pinia store (#1510)
* Fix compile

* nit

* Remove extensions.test

* nit
2024-11-11 17:23:52 -05:00
bymyself
4052fc55f3 Fix node preview styles (#903)
* Use colorPalette to style node previews

* Use widget text secondary color for description

* Remove unused css

* nit

---------

Co-authored-by: huchenlei <chenlei.hu@mail.utoronto.ca>
2024-09-22 09:05:06 +09:00
Chenlei Hu
a68f7c680b Rename SideBar to Sidebar (#422)
* Rename SideBar to Sidebar

* rename files

* rename files
2024-08-14 11:27:23 -04:00
Chenlei Hu
a095e7ecae Show category in node search box instead of description (#360) 2024-08-10 14:52:37 -04:00
Chenlei Hu
b90b1194d6 Organize searchbox files (#315) 2024-08-05 18:29:06 -04:00