Vue3

[dannon]

The test migration is still a giant pain, there are warnings, but the app builds, runs, and much of it does work. Very obviously still a work in progress, but I'm making this into a PR for at least a little more visibility, hoping to reduce conflicts and recruit folks to help test manually, fix tests, etc.

I will try to keep this rebased frequently so the branch doesn't slip away into the darkness yet again. (and, I rebased yesterday and it's already got 6 conflicted files)

Also, I have separated this from the vite branch as that actually (somewhat unexpectedly) had evenmore blockers than this one did. We still want to swap over, but we can push this one first at this point. The previous perceived dependency on the vite migration was primarily typescript errors we have for the most part now addressed in the build.

Unit test status (~10% failing, which is still a lot.)

Notes:

• We're running with significant whitespace mode on in the vue compiler -- this is not the default and we should swap over time.

STATUS AND TASK LIST

Vue 3 Migration - Parallel Work Task List

Current Status (2026-01-13)

• Branch: vue3-2025-07 (~230 commits ahead of dev)
• Build: Production build compiles successfully
• Unit Tests: 203 failing / 83 passing files (699/601 tests)
• Selenium Tests: Not yet run on this iteration

---

Narrative Summary: Understanding the Failures

The Core Problem: Bootstrap-Vue + @vue/compat Slot Incompatibility

The biggest blocker is Bootstrap-Vue's incompatibility with Vue 3's @vue/compat mode. This manifests as:

TypeError: Cannot read properties of null (reading 'ce')
    at renderSlot (vue.cjs.js:6178:32)

Why this happens: Bootstrap-Vue was built for Vue 2's slot API. Vue 3 fundamentally changed how slots work internally. The @vue/compat compatibility layer handles most Vue 2 patterns, but Bootstrap-Vue's internal slot manipulation triggers edge cases where the rendering context (currentRenderingInstance) is null when it shouldn't be.

Components affected:

• BPopover - 8 files using it
• BTable - 39 files using it
• BModal with custom slots
• BTabs / BTab
• Any component passing slot props

This is why many tests show "empty DOMWrapper" errors - the components aren't rendering because of these slot errors.

Secondary Issues

1. Vue Test Utils v1 → v2 API Changes

We've built adapters to handle most of these, but some tests still use old patterns:

• wrapper.destroy() → wrapper.unmount()
• propsData → props
• Some mount option differences

2. Axios Mock Issues

Tests that use axios directly (not through our API client) hit mock configuration issues with Vitest's different mocking approach.

3. Console Warning Failures

We use vitest-fail-on-console to catch unexpected warnings. Many Vue compat deprecation warnings trigger test failures. We've suppressed common ones, but some leak through.

4. Store Setup Issues

Some tests don't properly set up required Pinia stores (e.g., provideScopedWorkflowStores).

---

Parallelizable Task List

Category A: Quick Fixes (Individual files, no dependencies)

These can be done in parallel by anyone. Each is a small, self-contained fix.

Task	File	Issue	Effort
A1	PersistentTaskProgressMonitorAlert.test.ts	Missing import { vi } from 'vitest'	5 min
A2	ObjectStoreBadge.test.ts	Wrong import path: tests/jest/helpers → @tests/vitest/helpers	5 min
A3	FormData.test.ts	Wrong import path: tests/jest/helpers → @tests/vitest/helpers	5 min
A4	FormSelectMany.test.ts	Wrong import path (verify)	5 min
A5	ToolsList.test.ts	Wrong import path (verify)	5 min

Category B: VTU v2 API Updates (Pattern-based, can be split)

Fix tests using deprecated Vue Test Utils v1 patterns.

Task	Pattern	Count	Description
B1	wrapper.destroy()	4 files	Change to wrapper.unmount()
B2	propsData	5 files	Change to props in mount options
B3	vi.spyOn() on non-function	8 files	Fix spy setup (need to spy on method, not object)
B4	Empty DOMWrapper calls	~50 tests	Fix selectors or add await for async rendering

How to find these:

# Find wrapper.destroy
grep -r "wrapper.destroy()" client/src --include="*.test.*"

# Find propsData
grep -r "propsData" client/src --include="*.test.*"

# Find problematic spyOn
grep -r "vi.spyOn" client/src --include="*.test.*"

Category C: Bootstrap-Vue Slot Issues (Requires component changes)

These tests fail because the components use Bootstrap-Vue components with slots. Two options for each:

1. Skip the test temporarily (with TODO comment explaining why)
2. Replace Bootstrap-Vue component with alternative

Task	Component	BV Usage	Recommendation
C1	TemplateSummaryPopover.vue	BPopover	Replace with Floating UI or skip test
C2	InstanceDropdown.vue	BDropdown	Replace or skip test
C3	EditSecretsForm.vue	Various	Review and fix/skip
C4	VaultSecret.vue	Form components	Review and fix/skip
C5	Grid components (14 files)	BTable	Major effort - see Category E

Category D: Store/Context Setup Issues

Tests failing because required context/stores aren't set up.

Task	Test File	Missing Setup
D1	WorkflowInvocationState.test.ts	provideScopedWorkflowStores
D2	JobStep.test.ts	Workflow store setup
D3	Several workflow-related tests	Same pattern

Fix approach: Add proper store setup in test's beforeEach:

import { provideScopedWorkflowStores } from "@/stores/workflowEditorStateStore";
// Then use in mount options or setup

Category E: Major Component Migrations (Blocking decisions)

These require team decision on approach before proceeding.

Task	Scope	Options
E1	BTable usage (39 files)	1) Migrate to Bootstrap-Vue-Next, 2) Replace with custom table, 3) Skip tests until full migration
E2	BPopover usage (8 files)	1) Migrate to Bootstrap-Vue-Next, 2) Replace with Floating UI, 3) Skip tests
E3	BModal with custom slots	Same as above

Category F: Test Infrastructure

Task	Description	Effort
F1	Review vitest-fail-on-console rules	Some warnings may need to be suppressed
F2	Fix axios mock configuration	Update tests/vitest/__mocks__/axios.js if needed
F3	Review and update test helpers	tests/vitest/helpers.js may need more compatibility shims

---

Priority Order

Phase 1: Quick Wins (Unblocks ~10 tests)

1. A1-A5: Fix import paths and missing imports
2. B1-B2: Fix wrapper.destroy() and propsData

Phase 2: Pattern Fixes (Unblocks ~30-50 tests)

3. B3-B4: Fix vi.spyOn and empty DOMWrapper issues
4. D1-D3: Fix store setup issues

Phase 3: Strategic Decisions

5. E1-E3: Team decides on Bootstrap-Vue approach
   • If migrating to BV-Next: start E1-E3 migrations
   • If staying with compat: skip affected tests with TODOs

Phase 4: Component Replacements (if needed)

6. C1-C5: Replace/fix Bootstrap-Vue slot components

How to test the changes?

(Select all options that apply)

• I've included appropriate automated tests.
• This is a refactoring of components with existing test coverage.
• Instructions for manual testing are as follows:
  1. [add testing steps and prerequisites here if you didn't write automated tests covering all your changes]

License

• I agree to license these and all my past contributions to the core galaxy codebase under the MIT license.

[jmchilton]

Very exciting stuff - thank you so much!

Would you be okay if I wrote a wrapper Vue test mount that would allow us to use either of these patterns based on what version is available? I feel like we can start migrating all the tests without the upgrade that way. We an use the new paradigms now and it would simplify this branch a lot of getting using paradigms that will reduce conflicts in the future.

Also I think the upgrade of prettier in the middle there seems like it is a causing a lot of unrelated changes. Is it possible we can pull that out and apply to our current codebase or that we can remove it and apply it after the Vue 3 migration is done?

[dannon]

Post-release-rebase update:

The branch builds and runs successfully with all TypeScript errors resolved. Selenium testing found a few reactivity issues - collection builders weren't emitting events properly (fixed by swapping @update to @input), the workflow editor has some step update problems, and there's an accessibility issue with the dataset library multiselect. On the Jest side, tests are blocked because Babel transforms our Vue Router 4 ESM imports to CommonJS, which breaks Vue Router's conditional exports. I'm experimenting with Vitest as an alternative since we want to migrate to it anyway for the better Vite integration - got Bootstrap Vue and vue-rx mocked successfully, but components with slots still fail because of how @vue/compat handles rendering. Just trying to figure out the right order of operations here - whether to push through on Vitest now, stick with Jest until we're fully on Vue 3, or some hybrid approach.

[mvdbeek]

Can you update the lock file so we can see the tests ?

[davelopez]

@dannon what would be the best way to work on the upgrades and fixes?

• create PR's against this branch?
• direct commit to this branch?
• other?

Regarding Fix axios mock configuration (F2), I think we should completely replace axios mock usages with useServerMock for consistency and compatibility for when we replace the axios calls with openAPI fetcher ones in the future.

[dannon]

@davelopez Was just rebasing this and see your comment -- so sorry I missed it! Yeah, just push here or however you prefer, no worries!