Compare commits

...

5 Commits

Author SHA1 Message Date
huang47
c25e88d366 test: cover system and workspace stores 2026-07-02 14:38:30 -07:00
huang47
cfe4e0f444 refactor: convert test mocks to hoisted mutable state for coverage additions 2026-07-02 14:37:12 -07:00
Benjamin Lu
2ec2a0e091 feat: attribute payment intent through paywall, checkout, and top-up telemetry (#13363)
## Summary

Answers "why did this user want to pay?" by capturing the triggering
product moment at every paywall/upsell entry point and carrying it
through checkout and success telemetry.

## Changes

- **What**:
- Widen `SubscriptionDialogReason` from 4 coarse values to 13 grounded
intent sources (`subscribe_to_run`, `upgrade_to_add_credits`,
`invite_member_upsell`, `settings_billing_panel`, etc.)
- Fire `app:subscription_required_modal_opened` from
`useSubscriptionDialog` (the choke point all dialog variants pass
through) — the workspace/unified path previously emitted nothing; remove
the now-duplicate emitters in `useSubscription` and
`usePricingTableUrlLoader`
- Add `payment_intent_source` to
`BeginCheckoutMetadata`/`SubscriptionSuccessMetadata`, threaded via the
existing `reason` prop: dialog → `PricingTable` →
`performSubscriptionCheckout` → pending-attempt record, so legacy
`app:monthly_subscription_succeeded` carries intent alongside
`checkout_attempt_id`
- Fire `begin_checkout` on the workspace checkout path
(`useSubscriptionCheckout`, personal + team confirm) and the team
deep-link util — both previously emitted nothing; `tier` widened to
`TierKey | 'team'`
- Implement `trackBeginCheckout` in `PostHogTelemetryProvider` (was
GTM/host-only, so `begin_checkout` never reached PostHog)
- Thread `showSubscriptionDialog(options)` through the billing-context
adapters and pass a reason at ~14 call sites; add `source` to
`app:add_api_credit_button_clicked`

## Review Focus

- `modal_opened` now fires once per dialog actually shown, so a
free-tier user clicking Upgrade emits two events (free-tier dialog, then
pricing table) where the legacy path emitted one
- Intent is threaded explicitly via props/params rather than shared
state; `useSubscriptionCheckout` gained an optional second parameter
2026-07-02 03:11:21 +00:00
Mobeen Abdullah
9cf5c9a93f refactor(website): tidy customer story review nits (#13324)
## Summary

Small follow-up to #13289 applying two non-blocking review nits from
Alex's review.

## Changes

- **What**: drop the redundant `before:content-['']` on the
customer-story list bullet (Tailwind emits the empty `content`
automatically once another `before:` utility is present), and rename
`HEADER_OFFSET` to `HEADER_OFFSET_PX` in `ArticleNav` so the scroll
constants use consistent unit suffixes.

## Review Focus

Both changes are cosmetic with no behavior change. Confirmed in the
browser that the list bullet still renders identically (6px yellow dot)
without the explicit `content` utility.

## Notes from the #13289 review (left as-is here, open to discussion)

Three other comments from the review are intentionally not changed in
this PR; reasoning below so the decisions are on record:

- **`Category` type in `ArticleNav`**: kept the `ComponentProps<typeof
CategoryNav>` derivation. AGENTS.md says to derive component types via
`vue-component-type-helpers` rather than redefining them, so the current
form follows the styleguide. Happy to switch to a plain named type if
preferred.
- **Section ids in frontmatter vs the body `<Section>`**: kept the
`customers.content.test.ts` parity test. The short TOC labels live only
in frontmatter and Astro can't introspect the rendered MDX body to build
the nav, so the frontmatter `sections` list and the body anchor ids
can't be trivially deduplicated. A real fix would need a remark plugin
(larger, separate change). The test guards against silent drift in the
meantime.
- **`nextStory` throw**: left as a fail-loud, build-time invariant. The
slug always comes from the same `getStaticPaths` collection, so the
throw is effectively unreachable; it surfaces a future-refactor bug
loudly instead of linking to the wrong story.
2026-07-01 12:45:24 +00:00
jaeone94
9e5fb67b76 Show app mode run validation warning (#12557)
## Summary
Adds an app mode validation warning so users can see when a workflow has
errors before running and jump directly back to graph mode to review
them.

## Changes
- **What**: Adds a reusable app mode warning banner above the Run button
when the execution error store reports workflow errors, including
validation and missing asset states.
- **What**: Reuses the existing graph-error navigation flow so the
warning action switches out of app mode and opens the Errors panel in
graph mode.
- **What**: Updates the app mode Run button icon and accessible label in
the warning state while keeping the Run action non-blocking.
- **What**: Adds unit coverage for the warning render/accessibility
state and an E2E flow that triggers a validation failure, dismisses the
overlay, and opens graph errors from the app mode warning.
- **Breaking**: None.
- **Dependencies**: None.

## Review Focus
The warning intentionally mirrors graph mode behavior: it surfaces the
error state but does not prevent the user from clicking Run. This avoids
turning display-level validation signals into hard execution blockers.

The warning is driven by the existing `hasAnyError` aggregate, so
missing nodes, missing models, and missing media are included alongside
prompt/node/execution errors.

## Tests
- `pnpm format`
- `pnpm lint`
- `pnpm typecheck`
- `pnpm test:unit`
- `pnpm knip`
- `pnpm test:browser:local
browser_tests/tests/appModeValidationWarning.spec.ts`

## Screenshots

<img width="461" height="994" alt="스크린샷 2026-06-25 오후 7 00 55"
src="https://github.com/user-attachments/assets/f8fc20bf-d572-46b5-9fa4-312e7c4c8076"
/>
2026-07-01 15:24:45 +09:00
82 changed files with 3945 additions and 282 deletions

View File

@@ -15,7 +15,7 @@ const { categories } = defineProps<{
const activeSection = ref(categories[0]?.value ?? '')
const HEADER_OFFSET = -144
const HEADER_OFFSET_PX = -144
const BOTTOM_THRESHOLD_PX = 4
const SCROLL_SAFETY_MS = 1500
@@ -52,7 +52,7 @@ function scrollToSection(id: string) {
const el = document.getElementById(id)
if (el) {
scrollTo(el, {
offset: HEADER_OFFSET,
offset: HEADER_OFFSET_PX,
duration: 0.8,
immediate: prefersReducedMotion(),
onComplete: clearScrollLock

View File

@@ -1,5 +1,5 @@
<li
class="flex items-start gap-2 text-primary-comfy-canvas before:mt-1.5 before:size-1.5 before:shrink-0 before:rounded-full before:bg-primary-comfy-yellow before:content-['']"
class="flex items-start gap-2 text-primary-comfy-canvas before:mt-1.5 before:size-1.5 before:shrink-0 before:rounded-full before:bg-primary-comfy-yellow"
>
<slot />
</li>

View File

@@ -0,0 +1,45 @@
{
"last_node_id": 9,
"last_link_id": 9,
"nodes": [
{
"id": 9,
"type": "SaveImage",
"pos": {
"0": 64,
"1": 104
},
"size": {
"0": 210,
"1": 58
},
"flags": {},
"order": 0,
"mode": 0,
"inputs": [
{
"name": "images",
"type": "IMAGE",
"link": null
}
],
"outputs": [],
"properties": {},
"widgets_values": ["ComfyUI"]
}
],
"links": [],
"groups": [],
"config": {},
"extra": {
"ds": {
"scale": 1,
"offset": [0, 0]
},
"linearData": {
"inputs": [],
"outputs": ["9"]
}
},
"version": 0.4
}

View File

@@ -34,6 +34,10 @@ export class AppModeHelper {
public readonly outputPlaceholder: Locator
/** The linear-mode widget list container (visible in app mode). */
public readonly linearWidgets: Locator
/** The validation warning shown above the app mode run button. */
public readonly validationWarning: Locator
/** The action that opens graph mode errors from the validation warning. */
public readonly viewErrorsInGraphButton: Locator
/** The PrimeVue Popover for the image picker (renders with role="dialog"). */
public readonly imagePickerPopover: Locator
/** The Run button in the app mode footer. */
@@ -92,13 +96,19 @@ export class AppModeHelper {
this.outputPlaceholder = this.page.getByTestId(
TestIds.builder.outputPlaceholder
)
this.linearWidgets = this.page.getByTestId('linear-widgets')
this.linearWidgets = this.page.getByTestId(TestIds.linear.widgetContainer)
this.validationWarning = this.page.getByTestId(
TestIds.linear.validationWarning
)
this.viewErrorsInGraphButton = this.validationWarning.getByTestId(
TestIds.linear.viewErrorsInGraph
)
this.imagePickerPopover = this.page
.getByRole('dialog')
.filter({ has: this.page.getByRole('button', { name: 'All' }) })
.first()
this.runButton = this.page
.getByTestId('linear-run-button')
.getByTestId(TestIds.linear.runButton)
.getByRole('button', { name: /run/i })
this.welcome = this.page.getByTestId(TestIds.appMode.welcome)
this.emptyWorkflowText = this.page.getByTestId(

View File

@@ -172,6 +172,9 @@ export const TestIds = {
mobileNavigation: 'linear-mobile-navigation',
mobileWorkflows: 'linear-mobile-workflows',
outputInfo: 'linear-output-info',
runButton: 'linear-run-button',
validationWarning: 'linear-validation-warning',
viewErrorsInGraph: 'linear-view-errors',
widgetContainer: 'linear-widgets'
},
builder: {

View File

@@ -0,0 +1,106 @@
import {
comfyExpect as expect,
comfyPageFixture as test
} from '@e2e/fixtures/ComfyPage'
import type { NodeError, PromptResponse } from '@/schemas/apiSchema'
import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
import { enableErrorsOverlay } from '@e2e/fixtures/helpers/ErrorsTabHelper'
import { TestIds } from '@e2e/fixtures/selectors'
const SAVE_IMAGE_NODE_ID = '9'
function buildSaveImageRequiredInputError(): NodeError {
return {
class_type: 'SaveImage',
dependent_outputs: [],
errors: [
{
type: 'required_input_missing',
message: 'Required input is missing: images',
details: '',
extra_info: { input_name: 'images' }
}
]
}
}
test.describe(
'App mode validation warning',
{ tag: ['@ui', '@workflow'] },
() => {
test.beforeEach(async ({ comfyPage }) => {
await enableErrorsOverlay(comfyPage)
await comfyPage.workflow.loadWorkflow('linear-validation-warning')
await comfyPage.appMode.toggleAppMode()
await expect(comfyPage.appMode.linearWidgets).toBeVisible()
})
test('opens graph errors from the app mode validation warning', async ({
comfyPage
}) => {
await expect(comfyPage.appMode.validationWarning).toBeHidden()
const exec = new ExecutionHelper(comfyPage)
await exec.mockValidationFailure({
[SAVE_IMAGE_NODE_ID]: buildSaveImageRequiredInputError()
})
await comfyPage.appMode.runButton.click()
const appModeOverlay = comfyPage.appMode.centerPanel.getByTestId(
TestIds.dialogs.errorOverlay
)
await expect(appModeOverlay).toBeHidden()
await expect(comfyPage.appMode.validationWarning).toBeVisible()
await expect(comfyPage.appMode.validationWarning).toContainText(
/Required input missing/i
)
await expect(comfyPage.appMode.viewErrorsInGraphButton).toBeVisible()
await comfyPage.appMode.viewErrorsInGraphButton.click()
await expect(comfyPage.appMode.linearWidgets).toBeHidden()
await expect(
comfyPage.page.getByTestId(TestIds.propertiesPanel.root)
).toBeVisible()
await expect(
comfyPage.page.getByTestId(TestIds.propertiesPanel.errorsTab)
).toBeVisible()
})
test('keeps the app mode run button enabled when the warning is visible', async ({
comfyPage
}) => {
const exec = new ExecutionHelper(comfyPage)
await exec.mockValidationFailure({
[SAVE_IMAGE_NODE_ID]: buildSaveImageRequiredInputError()
})
await comfyPage.appMode.runButton.click()
await expect(comfyPage.appMode.validationWarning).toBeVisible()
await expect(comfyPage.appMode.runButton).toBeEnabled()
let promptQueued = false
const mockResponse: PromptResponse = {
prompt_id: 'test-id',
node_errors: {},
error: ''
}
await comfyPage.page.route(
'**/api/prompt',
async (route) => {
promptQueued = true
await route.fulfill({
status: 200,
body: JSON.stringify(mockResponse)
})
},
{ times: 1 }
)
await comfyPage.appMode.runButton.click()
await expect.poll(() => promptQueued).toBe(true)
})
}
)

View File

@@ -1,5 +1,6 @@
import { expect } from '@playwright/test'
import { toLinkId } from '@/types/linkId'
import { toNodeId } from '@/types/nodeId'
import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
@@ -15,9 +16,10 @@ test.describe('Graph', { tag: ['@smoke', '@canvas'] }, () => {
await comfyPage.workflow.loadWorkflow('inputs/input_order_swap')
await expect
.poll(() =>
comfyPage.page.evaluate(() => {
return window.app!.graph!.links.get(1)?.target_slot
})
comfyPage.page.evaluate(
(linkId) => window.app!.graph!.links.get(linkId)?.target_slot,
toLinkId(1)
)
)
.toBe(1)
})

View File

@@ -3,6 +3,7 @@ import {
comfyPageFixture as test,
comfyExpect as expect
} from '@e2e/fixtures/ComfyPage'
import { TestIds } from '@e2e/fixtures/selectors'
test.describe('Linear Mode', { tag: '@ui' }, () => {
test('Displays linear controls when app mode active', async ({
@@ -16,7 +17,9 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
test('Run button visible in linear mode', async ({ comfyPage }) => {
await comfyPage.appMode.enterAppModeWithInputs([])
await expect(comfyPage.page.getByTestId('linear-run-button')).toBeVisible()
await expect(
comfyPage.page.getByTestId(TestIds.linear.runButton)
).toBeVisible()
})
test('Workflow info section visible', async ({ comfyPage }) => {

View File

@@ -37,7 +37,7 @@
size="unset"
class="min-h-8 rounded-lg px-3 py-2 text-xs font-normal"
data-testid="error-overlay-see-errors"
@click="seeErrors"
@click="viewErrorsInGraph"
>
{{
appMode
@@ -67,31 +67,18 @@ import { useI18n } from 'vue-i18n'
import Button from '@/components/ui/button/Button.vue'
import { useExecutionErrorStore } from '@/stores/executionErrorStore'
import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
import { useErrorOverlayState } from '@/components/error/useErrorOverlayState'
import { useViewErrorsInGraph } from '@/composables/useViewErrorsInGraph'
const { appMode = false } = defineProps<{ appMode?: boolean }>()
const { t } = useI18n()
const executionErrorStore = useExecutionErrorStore()
const rightSidePanelStore = useRightSidePanelStore()
const canvasStore = useCanvasStore()
const { viewErrorsInGraph } = useViewErrorsInGraph()
const { isVisible, overlayMessage, overlayTitle } = useErrorOverlayState()
function dismiss() {
executionErrorStore.dismissErrorOverlay()
}
function seeErrors() {
canvasStore.linearMode = false
if (canvasStore.canvas) {
canvasStore.canvas.deselectAll()
canvasStore.updateSelectedItems()
}
rightSidePanelStore.openPanel('errors')
executionErrorStore.dismissErrorOverlay()
}
</script>

View File

@@ -224,7 +224,7 @@ const handleOpenUserSettings = () => {
}
const handleOpenPlansAndPricing = () => {
subscriptionDialog.showPricingTable()
subscriptionDialog.showPricingTable({ reason: 'avatar_menu_plans' })
emit('close')
}
@@ -239,8 +239,7 @@ const handleOpenPlanAndCreditsSettings = () => {
}
const handleTopUp = () => {
// Track purchase credits entry from avatar popover
useTelemetry()?.trackAddApiCreditButtonClicked()
useTelemetry()?.trackAddApiCreditButtonClicked({ source: 'avatar_menu' })
dialogService.showTopUpCreditsDialog()
emit('close')
}
@@ -254,7 +253,7 @@ const handleOpenPartnerNodesInfo = () => {
}
const handleUpgradeToAddCredits = () => {
subscriptionDialog.showPricingTable()
subscriptionDialog.showPricingTable({ reason: 'upgrade_to_add_credits' })
emit('close')
}

View File

@@ -21,6 +21,6 @@ const { isFreeTier } = useBillingContext()
const subscriptionDialog = useSubscriptionDialog()
function handleClick() {
subscriptionDialog.showPricingTable()
subscriptionDialog.showPricingTable({ reason: 'subscribe_now_button' })
}
</script>

View File

@@ -1,5 +1,6 @@
import type { ComputedRef, Ref } from 'vue'
import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
import type {
BillingStatus,
@@ -75,9 +76,10 @@ export interface BillingActions {
*/
requireActiveSubscription: () => Promise<void>
/**
* Shows the subscription dialog.
* Shows the subscription dialog. Pass a reason so the paywall open and any
* downstream checkout stay attributed to the triggering product moment.
*/
showSubscriptionDialog: () => void
showSubscriptionDialog: (options?: SubscriptionDialogOptions) => void
}
export interface BillingState {

View File

@@ -7,6 +7,7 @@ import {
getTierFeatures
} from '@/platform/cloud/subscription/constants/tierPricing'
import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
import type {
PreviewSubscribeOptions,
SubscribeOptions
@@ -281,8 +282,8 @@ function useBillingContextInternal(): BillingContext {
return activeContext.value.requireActiveSubscription()
}
function showSubscriptionDialog() {
return activeContext.value.showSubscriptionDialog()
function showSubscriptionDialog(options?: SubscriptionDialogOptions) {
return activeContext.value.showSubscriptionDialog(options)
}
return {

View File

@@ -0,0 +1,256 @@
import { createPinia, setActivePinia } from 'pinia'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { useLegacyBilling } from './useLegacyBilling'
const mocks = vi.hoisted(() => ({
isActiveSubscription: { value: false },
subscriptionTier: { value: null as string | null },
subscriptionDuration: { value: null as string | null },
subscriptionStatus: {
value: null as null | {
renewal_date?: string | null
end_date?: string | null
}
},
isCancelled: { value: false },
fetchStatus: vi.fn(),
manageSubscription: vi.fn(),
subscribe: vi.fn(),
showSubscriptionDialog: vi.fn(),
balance: {
value: null as null | {
amount_micros?: number
currency?: string
effective_balance_micros?: number
prepaid_balance_micros?: number
cloud_credit_balance_micros?: number
}
},
fetchBalance: vi.fn(),
purchaseCredits: vi.fn()
}))
vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
useSubscription: () => ({
isActiveSubscription: mocks.isActiveSubscription,
subscriptionTier: mocks.subscriptionTier,
subscriptionDuration: mocks.subscriptionDuration,
subscriptionStatus: mocks.subscriptionStatus,
isCancelled: mocks.isCancelled,
fetchStatus: mocks.fetchStatus,
manageSubscription: mocks.manageSubscription,
subscribe: mocks.subscribe,
showSubscriptionDialog: mocks.showSubscriptionDialog
})
}))
vi.mock('@/stores/authStore', () => ({
useAuthStore: () => ({
get balance() {
return mocks.balance.value
},
fetchBalance: mocks.fetchBalance
})
}))
vi.mock('@/composables/auth/useAuthActions', () => ({
useAuthActions: () => ({
purchaseCredits: mocks.purchaseCredits
})
}))
describe('useLegacyBilling', () => {
beforeEach(() => {
setActivePinia(createPinia())
vi.clearAllMocks()
mocks.isActiveSubscription.value = false
mocks.subscriptionTier.value = null
mocks.subscriptionDuration.value = null
mocks.subscriptionStatus.value = null
mocks.isCancelled.value = false
mocks.balance.value = null
mocks.fetchStatus.mockResolvedValue(undefined)
mocks.manageSubscription.mockResolvedValue(undefined)
mocks.subscribe.mockResolvedValue(undefined)
mocks.fetchBalance.mockResolvedValue(undefined)
mocks.purchaseCredits.mockResolvedValue(undefined)
})
it('returns empty subscription and balance state without legacy data', () => {
const billing = useLegacyBilling()
expect(billing.subscription.value).toBeNull()
expect(billing.balance.value).toBeNull()
expect(billing.subscriptionStatus.value).toBeNull()
expect(billing.renewalDate.value).toBeNull()
expect(billing.isFreeTier.value).toBe(false)
})
it('maps active subscription and explicit balance fields', () => {
mocks.isActiveSubscription.value = true
mocks.subscriptionTier.value = 'PRO'
mocks.subscriptionDuration.value = 'MONTHLY'
mocks.subscriptionStatus.value = {
renewal_date: '2026-01-01T00:00:00Z',
end_date: '2026-02-01T00:00:00Z'
}
mocks.balance.value = {
amount_micros: 500,
currency: 'eur',
effective_balance_micros: 400,
prepaid_balance_micros: 300,
cloud_credit_balance_micros: 200
}
const billing = useLegacyBilling()
expect(billing.subscription.value).toEqual({
isActive: true,
tier: 'PRO',
duration: 'MONTHLY',
planSlug: null,
renewalDate: '2026-01-01T00:00:00Z',
endDate: '2026-02-01T00:00:00Z',
isCancelled: false,
hasFunds: true
})
expect(billing.balance.value).toEqual({
amountMicros: 500,
currency: 'eur',
effectiveBalanceMicros: 400,
prepaidBalanceMicros: 300,
cloudCreditBalanceMicros: 200
})
expect(billing.subscriptionStatus.value).toBe('active')
})
it('uses legacy balance defaults when optional fields are absent', () => {
mocks.subscriptionTier.value = 'FREE'
mocks.balance.value = {}
const billing = useLegacyBilling()
expect(billing.balance.value).toEqual({
amountMicros: 0,
currency: 'usd',
effectiveBalanceMicros: 0,
prepaidBalanceMicros: 0,
cloudCreditBalanceMicros: 0
})
expect(billing.subscription.value?.hasFunds).toBe(false)
})
it('uses amount as effective balance when only amount is present', () => {
mocks.balance.value = { amount_micros: 250 }
const billing = useLegacyBilling()
expect(billing.balance.value?.effectiveBalanceMicros).toBe(250)
})
it('reports canceled status before active status', () => {
mocks.isActiveSubscription.value = true
mocks.isCancelled.value = true
const billing = useLegacyBilling()
expect(billing.subscriptionStatus.value).toBe('canceled')
})
it('initializes once and re-fetches zero free-tier balance', async () => {
mocks.subscriptionTier.value = 'FREE'
mocks.balance.value = { amount_micros: 0 }
const billing = useLegacyBilling()
await billing.initialize()
await billing.initialize()
expect(billing.isInitialized.value).toBe(true)
expect(mocks.fetchStatus).toHaveBeenCalledTimes(1)
expect(mocks.fetchBalance).toHaveBeenCalledTimes(2)
})
it('stores initialization error messages from Error failures', async () => {
mocks.fetchStatus.mockRejectedValue(new Error('status failed'))
const billing = useLegacyBilling()
await expect(billing.initialize()).rejects.toThrow('status failed')
expect(billing.error.value).toBe('status failed')
expect(billing.isLoading.value).toBe(false)
})
it('stores fallback initialization error messages for non-Error failures', async () => {
mocks.fetchStatus.mockRejectedValue('status failed')
const billing = useLegacyBilling()
await expect(billing.initialize()).rejects.toBe('status failed')
expect(billing.error.value).toBe('Failed to initialize billing')
})
it('stores subscription fetch fallback errors', async () => {
mocks.fetchStatus.mockRejectedValue('status failed')
const billing = useLegacyBilling()
await expect(billing.fetchStatus()).rejects.toBe('status failed')
expect(billing.error.value).toBe('Failed to fetch subscription')
expect(billing.isLoading.value).toBe(false)
})
it('stores balance fetch errors', async () => {
mocks.fetchBalance.mockRejectedValue(new Error('balance failed'))
const billing = useLegacyBilling()
await expect(billing.fetchBalance()).rejects.toThrow('balance failed')
expect(billing.error.value).toBe('balance failed')
expect(billing.isLoading.value).toBe(false)
})
it('stores balance fetch fallback errors', async () => {
mocks.fetchBalance.mockRejectedValue('balance failed')
const billing = useLegacyBilling()
await expect(billing.fetchBalance()).rejects.toBe('balance failed')
expect(billing.error.value).toBe('Failed to fetch balance')
})
it('delegates legacy billing actions', async () => {
const billing = useLegacyBilling()
await expect(billing.subscribe('pro-monthly')).resolves.toBeUndefined()
await expect(billing.previewSubscribe('pro-monthly')).resolves.toBeNull()
await billing.manageSubscription()
await billing.cancelSubscription()
await billing.resubscribe()
await billing.topup(750)
await expect(billing.fetchPlans()).resolves.toBeUndefined()
billing.showSubscriptionDialog()
expect(mocks.subscribe).toHaveBeenCalledTimes(2)
expect(mocks.manageSubscription).toHaveBeenCalledTimes(2)
expect(mocks.purchaseCredits).toHaveBeenCalledWith(7.5)
expect(mocks.showSubscriptionDialog).toHaveBeenCalledTimes(1)
})
it('shows the subscription dialog when active subscription is required', async () => {
const billing = useLegacyBilling()
await billing.requireActiveSubscription()
expect(mocks.showSubscriptionDialog).toHaveBeenCalledTimes(1)
})
it('does not show the subscription dialog for active subscribers', async () => {
mocks.isActiveSubscription.value = true
const billing = useLegacyBilling()
await billing.requireActiveSubscription()
expect(mocks.showSubscriptionDialog).not.toHaveBeenCalled()
})
})

View File

@@ -2,6 +2,7 @@ import { computed, ref } from 'vue'
import { useAuthActions } from '@/composables/auth/useAuthActions'
import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
import type {
BillingStatus,
BillingSubscriptionStatus,
@@ -189,12 +190,12 @@ export function useLegacyBilling(): BillingState & BillingActions {
async function requireActiveSubscription(): Promise<void> {
await fetchStatus()
if (!isActiveSubscription.value) {
legacyShowSubscriptionDialog()
legacyShowSubscriptionDialog({ reason: 'subscription_required' })
}
}
function showSubscriptionDialog(): void {
legacyShowSubscriptionDialog()
function showSubscriptionDialog(options?: SubscriptionDialogOptions): void {
legacyShowSubscriptionDialog(options)
}
return {

View File

@@ -0,0 +1,217 @@
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { createApp, defineComponent, ref } from 'vue'
interface MockTerminalInstance {
cols: number
rows: number
options: unknown
loadAddon: ReturnType<typeof vi.fn>
attachCustomKeyEventHandler: ReturnType<typeof vi.fn>
open: ReturnType<typeof vi.fn>
dispose: ReturnType<typeof vi.fn>
resize: ReturnType<typeof vi.fn>
hasSelection: ReturnType<typeof vi.fn>
}
interface MockFitAddonInstance {
proposeDimensions: ReturnType<typeof vi.fn>
}
const mockXterm = vi.hoisted(() => {
const terminalInstances: MockTerminalInstance[] = []
const fitAddonInstances: MockFitAddonInstance[] = []
class Terminal {
cols = 80
rows = 24
loadAddon = vi.fn()
attachCustomKeyEventHandler = vi.fn()
open = vi.fn()
dispose = vi.fn()
resize = vi.fn((cols: number, rows: number) => {
this.cols = cols
this.rows = rows
})
hasSelection = vi.fn(() => false)
constructor(readonly options: unknown) {
terminalInstances.push(this)
}
}
class FitAddon {
proposeDimensions = vi.fn(() => ({ cols: 120, rows: 40 }))
constructor() {
fitAddonInstances.push(this)
}
}
return {
Terminal,
FitAddon,
terminalInstances,
fitAddonInstances
}
})
const mockResizeObserverInstances = [] as MockResizeObserver[]
class MockResizeObserver {
observe = vi.fn()
disconnect = vi.fn()
constructor(readonly callback: ResizeObserverCallback) {
mockResizeObserverInstances.push(this)
}
}
vi.mock('@xterm/xterm', () => ({
Terminal: mockXterm.Terminal
}))
vi.mock('@xterm/addon-fit', () => ({
FitAddon: mockXterm.FitAddon
}))
vi.mock('es-toolkit/compat', () => ({
debounce: (fn: () => void) => fn
}))
vi.mock('@/platform/distribution/types', () => ({
isDesktop: true
}))
import { useTerminal } from './useTerminal'
function terminalElement() {
const element = document.createElement('div')
Object.defineProperty(element, 'clientWidth', { value: 160 })
Object.defineProperty(element, 'clientHeight', { value: 100 })
return element
}
function mountTerminal(
configure?: (
result: ReturnType<typeof useTerminal>,
root: ReturnType<typeof ref<HTMLElement | undefined>>
) => void
) {
let result: ReturnType<typeof useTerminal> | undefined
const root = ref<HTMLElement | undefined>(terminalElement())
const app = createApp(
defineComponent({
setup() {
result = useTerminal(root)
configure?.(result, root)
return () => null
}
})
)
app.mount(document.createElement('div'))
if (!result) throw new Error('Expected terminal composable to initialize')
return { app, result, root }
}
describe('useTerminal', () => {
beforeEach(() => {
mockXterm.terminalInstances.length = 0
mockXterm.fitAddonInstances.length = 0
mockResizeObserverInstances.length = 0
vi.stubGlobal('ResizeObserver', MockResizeObserver)
})
it('creates a desktop themed terminal and opens it on mount', () => {
const { app, root } = mountTerminal()
const terminal = mockXterm.terminalInstances[0]
const fitAddon = mockXterm.fitAddonInstances[0]
expect(terminal.options).toMatchObject({
convertEol: true,
theme: { background: '#171717' }
})
expect(terminal.loadAddon).toHaveBeenCalledWith(fitAddon)
expect(terminal.open).toHaveBeenCalledWith(root.value)
app.unmount()
expect(terminal.dispose).toHaveBeenCalledOnce()
})
it('lets browser copy and paste shortcuts pass through', () => {
mountTerminal()
const terminal = mockXterm.terminalInstances[0]
const handler = terminal.attachCustomKeyEventHandler.mock.calls[0][0] as (
event: KeyboardEvent
) => boolean
terminal.hasSelection.mockReturnValue(true)
expect(
handler(new KeyboardEvent('keydown', { key: 'c', ctrlKey: true }))
).toBe(false)
expect(
handler(new KeyboardEvent('keydown', { key: 'v', metaKey: true }))
).toBe(false)
terminal.hasSelection.mockReturnValue(false)
expect(
handler(new KeyboardEvent('keydown', { key: 'c', ctrlKey: true }))
).toBe(true)
expect(
handler(new KeyboardEvent('keyup', { key: 'v', ctrlKey: true }))
).toBe(true)
})
it('auto-sizes from fit dimensions and disconnects the observer on unmount', () => {
const onResize = vi.fn()
const { app, root } = mountTerminal((terminal, rootRef) => {
terminal.useAutoSize({
root: rootRef,
minCols: 100,
minRows: 20,
onResize
})
})
const terminal = mockXterm.terminalInstances[0]
const observer = mockResizeObserverInstances[0]
expect(observer.observe).toHaveBeenCalledWith(root.value)
expect(terminal.resize).toHaveBeenCalledWith(120, 40)
expect(onResize).toHaveBeenCalledOnce()
app.unmount()
expect(observer.disconnect).toHaveBeenCalledOnce()
})
it('estimates invalid fit dimensions from the root element', () => {
const { result, root } = mountTerminal()
const fitAddon = mockXterm.fitAddonInstances[0]
fitAddon.proposeDimensions.mockReturnValue({
cols: Number.NaN,
rows: undefined
})
const { resize } = result.useAutoSize({ root, minCols: 30, minRows: 10 })
const terminal = mockXterm.terminalInstances[0]
resize()
expect(terminal.resize).toHaveBeenLastCalledWith(30, 10)
})
it('keeps existing terminal dimensions when auto sizing is disabled', () => {
const { result, root } = mountTerminal()
const terminal = mockXterm.terminalInstances[0]
terminal.cols = 90
terminal.rows = 30
const { resize } = result.useAutoSize({
root,
autoCols: false,
autoRows: false,
minCols: 10,
minRows: 10
})
resize()
expect(terminal.resize).toHaveBeenLastCalledWith(90, 30)
})
})

View File

@@ -503,7 +503,7 @@ export function useCoreCommands(): ComfyCommand[] {
}) => {
trackRunButton(metadata)
if (!isActiveSubscription.value) {
showSubscriptionDialog()
showSubscriptionDialog({ reason: 'subscribe_to_run' })
return
}
@@ -526,7 +526,7 @@ export function useCoreCommands(): ComfyCommand[] {
}) => {
trackRunButton(metadata)
if (!isActiveSubscription.value) {
showSubscriptionDialog()
showSubscriptionDialog({ reason: 'subscribe_to_run' })
return
}
@@ -548,7 +548,7 @@ export function useCoreCommands(): ComfyCommand[] {
}) => {
trackRunButton(metadata)
if (!isActiveSubscription.value) {
showSubscriptionDialog()
showSubscriptionDialog({ reason: 'subscribe_to_run' })
return
}

View File

@@ -0,0 +1,105 @@
import { createPinia, setActivePinia } from 'pinia'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
import { useExecutionErrorStore } from '@/stores/executionErrorStore'
import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
import { LGraph, LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
import { createMockCanvasRenderingContext2D } from '@/utils/__tests__/litegraphTestUtils'
import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
import { useViewErrorsInGraph } from './useViewErrorsInGraph'
const apiMock = vi.hoisted(() => ({
getSettings: vi.fn(),
storeSetting: vi.fn(),
storeSettings: vi.fn()
}))
vi.mock('@/scripts/api', () => ({
api: apiMock
}))
const appMock = vi.hoisted(() => ({
ui: {
settings: {
dispatchChange: vi.fn()
}
},
rootGraph: {
events: new EventTarget(),
nodes: []
}
}))
vi.mock('@/scripts/app', () => ({
app: appMock
}))
function createSelectedCanvas() {
const graph = new LGraph()
const canvasElement = document.createElement('canvas')
canvasElement.width = 800
canvasElement.height = 600
canvasElement.getContext = vi
.fn()
.mockReturnValue(createMockCanvasRenderingContext2D())
const canvas = new LGraphCanvas(canvasElement, graph, {
skip_events: true,
skip_render: true
})
const node = new LGraphNode('Selected Node')
graph.add(node)
canvas.selectedItems.add(node)
node.selected = true
return { canvas, node }
}
describe('useViewErrorsInGraph', () => {
beforeEach(() => {
vi.clearAllMocks()
setActivePinia(createPinia())
apiMock.getSettings.mockResolvedValue({})
apiMock.storeSetting.mockResolvedValue(undefined)
apiMock.storeSettings.mockResolvedValue(undefined)
})
it('opens graph errors and clears app-mode error UI state', () => {
const canvasStore = useCanvasStore()
const executionErrorStore = useExecutionErrorStore()
const rightSidePanelStore = useRightSidePanelStore()
const workflowStore = useWorkflowStore()
const { canvas, node } = createSelectedCanvas()
workflowStore.activeWorkflow = {
activeMode: 'app'
} as typeof workflowStore.activeWorkflow
canvasStore.canvas = canvas
canvasStore.selectedItems = [node]
executionErrorStore.showErrorOverlay()
useViewErrorsInGraph().viewErrorsInGraph()
expect(node.selected).toBe(false)
expect(canvasStore.linearMode).toBe(false)
expect(canvasStore.selectedItems).toEqual([])
expect(rightSidePanelStore.activeTab).toBe('errors')
expect(rightSidePanelStore.isOpen).toBe(true)
expect(executionErrorStore.isErrorOverlayOpen).toBe(false)
})
it('opens graph errors when the canvas is not initialized', () => {
const canvasStore = useCanvasStore()
const executionErrorStore = useExecutionErrorStore()
const rightSidePanelStore = useRightSidePanelStore()
canvasStore.canvas = null
executionErrorStore.showErrorOverlay()
expect(() => useViewErrorsInGraph().viewErrorsInGraph()).not.toThrow()
expect(rightSidePanelStore.activeTab).toBe('errors')
expect(rightSidePanelStore.isOpen).toBe(true)
expect(executionErrorStore.isErrorOverlayOpen).toBe(false)
})
})

View File

@@ -0,0 +1,22 @@
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
import { useExecutionErrorStore } from '@/stores/executionErrorStore'
import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
export function useViewErrorsInGraph() {
const canvasStore = useCanvasStore()
const executionErrorStore = useExecutionErrorStore()
const rightSidePanelStore = useRightSidePanelStore()
function viewErrorsInGraph() {
canvasStore.linearMode = false
if (canvasStore.canvas) {
canvasStore.canvas.deselectAll()
canvasStore.updateSelectedItems()
}
rightSidePanelStore.openPanel('errors')
executionErrorStore.dismissErrorOverlay()
}
return { viewErrorsInGraph }
}

View File

@@ -25,6 +25,6 @@ function handleClose() {
}
function handleSubscribe() {
showSubscriptionDialog()
showSubscriptionDialog({ reason: 'upload_model_upgrade' })
}
</script>

View File

@@ -140,7 +140,10 @@ describe('CloudSubscriptionRedirectView', () => {
expect(mockPerformSubscriptionCheckout).toHaveBeenCalledWith(
'creator',
'monthly',
false
{
openInNewTab: false,
paymentIntentSource: 'deep_link'
}
)
// Shows loading affordances
@@ -169,7 +172,10 @@ describe('CloudSubscriptionRedirectView', () => {
expect(mockPerformSubscriptionCheckout).toHaveBeenCalledWith(
'creator',
'monthly',
false
{
openInNewTab: false,
paymentIntentSource: 'deep_link'
}
)
})
@@ -180,7 +186,8 @@ describe('CloudSubscriptionRedirectView', () => {
expect(screen.getByText('Subscribe to Team Plan')).toBeInTheDocument()
expect(mockPerformTeamSubscriptionCheckout).toHaveBeenCalledWith(
'team_700',
'yearly'
'yearly',
{ paymentIntentSource: 'deep_link' }
)
// Team never goes through the personal checkout path
expect(mockPerformSubscriptionCheckout).not.toHaveBeenCalled()

View File

@@ -94,7 +94,9 @@ const runRedirect = wrapWithErrorHandlingAsync(async () => {
return
}
isTeamCheckout.value = true
await performTeamSubscriptionCheckout(stopId, billingCycle)
await performTeamSubscriptionCheckout(stopId, billingCycle, {
paymentIntentSource: 'deep_link'
})
return
}
@@ -112,7 +114,10 @@ const runRedirect = wrapWithErrorHandlingAsync(async () => {
if (isActiveSubscription.value) {
await accessBillingPortal(undefined, false)
} else {
await performSubscriptionCheckout(tierKeyParam, billingCycle, false)
await performSubscriptionCheckout(tierKeyParam, billingCycle, {
openInNewTab: false,
paymentIntentSource: 'deep_link'
})
}
}, reportError)

View File

@@ -351,12 +351,12 @@ const handleRefresh = wrapWithErrorHandlingAsync(async () => {
})
function handleAddCredits() {
telemetry?.trackAddApiCreditButtonClicked()
telemetry?.trackAddApiCreditButtonClicked({ source: 'credits_panel' })
void dialogService.showTopUpCreditsDialog()
}
function handleUpgradeToAddCredits() {
showPricingTable()
showPricingTable({ reason: 'upgrade_to_add_credits' })
}
async function handleWindowFocus() {

View File

@@ -5,6 +5,8 @@ import { render, screen } from '@testing-library/vue'
import enMessages from '@/locales/en/main.json' with { type: 'json' }
import type { PaymentIntentSource } from '@/platform/telemetry/types'
import FreeTierDialogContent from './FreeTierDialogContent.vue'
const mockRenewalDate = vi.hoisted(() => ({ value: null as string | null }))
@@ -15,7 +17,7 @@ vi.mock('@/composables/billing/useBillingContext', () => ({
}))
}))
function renderComponent() {
function renderComponent(props?: { reason?: PaymentIntentSource }) {
const i18n = createI18n({
legacy: false,
locale: 'en',
@@ -23,6 +25,7 @@ function renderComponent() {
})
return render(FreeTierDialogContent, {
props,
global: {
plugins: [i18n]
}
@@ -43,4 +46,18 @@ describe('FreeTierDialogContent', () => {
renderComponent()
expect(screen.queryByText(/credits refresh on/)).not.toBeInTheDocument()
})
it('keeps the generic copy for intent reasons outside the credits variants', () => {
mockRenewalDate.value = '2026-07-15T10:00:00Z'
renderComponent({ reason: 'subscribe_to_run' })
expect(
screen.getByText('Your credits refresh on Jul 15, 2026.')
).toBeInTheDocument()
})
it('swaps to the out-of-credits copy without the refresh line', () => {
mockRenewalDate.value = '2026-07-15T10:00:00Z'
renderComponent({ reason: 'out_of_credits' })
expect(screen.queryByText(/credits refresh on/)).not.toBeInTheDocument()
})
})

View File

@@ -52,7 +52,7 @@
</p>
<p
v-if="!reason || reason === 'subscription_required'"
v-if="!isCreditsBlockedVariant"
class="m-0 text-sm text-text-secondary"
>
{{
@@ -65,10 +65,7 @@
</p>
<p
v-if="
(!reason || reason === 'subscription_required') &&
formattedRenewalDate
"
v-if="!isCreditsBlockedVariant && formattedRenewalDate"
class="m-0 text-sm text-text-secondary"
>
{{
@@ -88,7 +85,7 @@
@click="$emit('upgrade')"
>
{{
reason === 'out_of_credits' || reason === 'top_up_blocked'
isCreditsBlockedVariant
? $t('subscription.freeTier.upgradeCta')
: $t('subscription.freeTier.subscribeCta')
}}
@@ -103,12 +100,12 @@ import { computed } from 'vue'
import Button from '@/components/ui/button/Button.vue'
import { useBillingContext } from '@/composables/billing/useBillingContext'
import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
import type { PaymentIntentSource } from '@/platform/telemetry/types'
import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
import { getTierCredits } from '@/platform/cloud/subscription/constants/tierPricing'
defineProps<{
reason?: SubscriptionDialogReason
const { reason } = defineProps<{
reason?: PaymentIntentSource
}>()
defineEmits<{
@@ -129,4 +126,10 @@ const formattedRenewalDate = computed(() => {
})
const freeTierCredits = computed(() => getTierCredits('free'))
// Only these two variants replace the generic free-tier copy; any other
// intent reason (subscribe_to_run, deep_link, ...) keeps the default pitch.
const isCreditsBlockedVariant = computed(
() => reason === 'out_of_credits' || reason === 'top_up_blocked'
)
</script>

View File

@@ -261,6 +261,7 @@ describe('PricingTable', () => {
tier: 'creator',
cycle: 'yearly',
checkout_type: 'change',
checkout_attempt_id: expect.any(String),
previous_tier: 'standard'
})
expect(mockAccessBillingPortal).toHaveBeenCalledWith('creator-yearly')
@@ -341,6 +342,7 @@ describe('PricingTable', () => {
expect(
window.localStorage.getItem(PENDING_SUBSCRIPTION_CHECKOUT_STORAGE_KEY)
).toBeNull()
expect(mockTrackBeginCheckout).not.toHaveBeenCalled()
})
it('should use the latest userId value when it changes after mount', async () => {
@@ -366,6 +368,7 @@ describe('PricingTable', () => {
tier: 'creator',
cycle: 'yearly',
checkout_type: 'change',
checkout_attempt_id: expect.any(String),
previous_tier: 'standard'
})
})

View File

@@ -277,13 +277,19 @@ import type {
TierKey,
TierPricing
} from '@/platform/cloud/subscription/constants/tierPricing'
import { recordPendingSubscriptionCheckoutAttempt } from '@/platform/cloud/subscription/utils/subscriptionCheckoutTracker'
import {
recordPendingSubscriptionCheckoutAttempt,
withPendingCheckoutAttemptId
} from '@/platform/cloud/subscription/utils/subscriptionCheckoutTracker'
import { performSubscriptionCheckout } from '@/platform/cloud/subscription/utils/subscriptionCheckoutUtil'
import { isPlanDowngrade } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
import { isCloud } from '@/platform/distribution/types'
import { useTelemetry } from '@/platform/telemetry'
import type { CheckoutAttributionMetadata } from '@/platform/telemetry/types'
import type {
CheckoutAttributionMetadata,
PaymentIntentSource
} from '@/platform/telemetry/types'
import { useAuthStore } from '@/stores/authStore'
type CheckoutTierKey = Exclude<TierKey, 'free' | 'founder'>
@@ -321,6 +327,10 @@ interface PricingTierConfig {
isPopular?: boolean
}
const { reason } = defineProps<{
reason?: PaymentIntentSource
}>()
const emit = defineEmits<{
chooseTeamWorkspace: []
}>()
@@ -463,16 +473,17 @@ const handleSubscribe = wrapWithErrorHandlingAsync(
} as const
const previousPlan = currentPlanDescriptor.value
const checkoutAttribution = await getCheckoutAttributionForCloud()
if (userId.value) {
telemetry?.trackBeginCheckout({
user_id: userId.value,
tier: targetPlan.tierKey,
cycle: targetPlan.billingCycle,
checkout_type: 'change',
...checkoutAttribution,
...(previousPlan ? { previous_tier: previousPlan.tierKey } : {})
})
}
const beginCheckoutMetadata = userId.value
? {
user_id: userId.value,
tier: targetPlan.tierKey,
cycle: targetPlan.billingCycle,
checkout_type: 'change' as const,
...(reason ? { payment_intent_source: reason } : {}),
...checkoutAttribution,
...(previousPlan ? { previous_tier: previousPlan.tierKey } : {})
}
: null
// Pass the target tier to create a deep link to subscription update confirmation
const checkoutTier = getCheckoutTier(
targetPlan.tierKey,
@@ -487,29 +498,39 @@ const handleSubscribe = wrapWithErrorHandlingAsync(
if (downgrade) {
// TODO(COMFY-StripeProration): Remove once backend checkout creation mirrors portal proration ("change at billing end")
await accessBillingPortal()
const didOpenPortal = await accessBillingPortal()
if (didOpenPortal && beginCheckoutMetadata) {
telemetry?.trackBeginCheckout(beginCheckoutMetadata)
}
} else {
const didOpenPortal = await accessBillingPortal(checkoutTier)
if (!didOpenPortal) {
return
}
recordPendingSubscriptionCheckoutAttempt({
const pendingAttempt = recordPendingSubscriptionCheckoutAttempt({
tier: targetPlan.tierKey,
cycle: targetPlan.billingCycle,
checkout_type: 'change',
payment_intent_source: reason,
...(previousPlan ? { previous_tier: previousPlan.tierKey } : {}),
...(previousPlan
? { previous_cycle: previousPlan.billingCycle }
: {})
})
if (beginCheckoutMetadata) {
telemetry?.trackBeginCheckout(
withPendingCheckoutAttemptId(
beginCheckoutMetadata,
pendingAttempt
)
)
}
}
} else {
await performSubscriptionCheckout(
tierKey,
currentBillingCycle.value,
true
)
await performSubscriptionCheckout(tierKey, currentBillingCycle.value, {
paymentIntentSource: reason
})
}
} finally {
isLoading.value = false

View File

@@ -56,7 +56,7 @@ const handleSubscribe = () => {
current_tier: tier.value?.toLowerCase()
})
isAwaitingStripeSubscription.value = true
showSubscriptionDialog()
showSubscriptionDialog({ reason: 'subscribe_now_button' })
}
onBeforeUnmount(() => {

View File

@@ -54,6 +54,6 @@ function handleSubscribeToRun() {
trackRunButton({ subscribe_to_run: true })
}
showSubscriptionDialog()
showSubscriptionDialog({ reason: 'subscribe_to_run' })
}
</script>

View File

@@ -48,7 +48,9 @@
v-if="isActiveSubscription"
variant="primary"
class="rounded-lg px-4 py-2 text-sm font-normal text-text-primary"
@click="showSubscriptionDialog"
@click="
showSubscriptionDialog({ reason: 'settings_billing_panel' })
"
>
{{ $t('subscription.upgradePlan') }}
</Button>

View File

@@ -33,7 +33,11 @@
</i18n-t>
</div>
<PricingTable class="flex-1" @choose-team-workspace="handleChooseTeam" />
<PricingTable
:reason
class="flex-1"
@choose-team-workspace="handleChooseTeam"
/>
<!-- Contact and Enterprise Links -->
<div class="flex flex-col items-center gap-2">
@@ -157,11 +161,11 @@ import { useBillingContext } from '@/composables/billing/useBillingContext'
import { isCloud } from '@/platform/distribution/types'
import { useTelemetry } from '@/platform/telemetry'
import { useCommandStore } from '@/stores/commandStore'
import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
import type { PaymentIntentSource } from '@/platform/telemetry/types'
const { onClose, reason, onChooseTeam } = defineProps<{
onClose: () => void
reason?: SubscriptionDialogReason
reason?: PaymentIntentSource
onChooseTeam?: () => void
}>()

View File

@@ -24,7 +24,9 @@ export function useAccountPreconditionDialog() {
)
return
case 'subscription':
void dialogService.showSubscriptionRequiredDialog()
void dialogService.showSubscriptionRequiredDialog({
reason: 'subscription_required'
})
return
case 'credits':
void dialogService.showTopUpCreditsDialog({

View File

@@ -55,12 +55,6 @@ vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
})
}))
const mockTrackSubscription = vi.hoisted(() => vi.fn())
vi.mock('@/platform/telemetry', () => ({
useTelemetry: () => ({ trackSubscription: mockTrackSubscription })
}))
describe('usePricingTableUrlLoader', () => {
beforeEach(() => {
vi.clearAllMocks()
@@ -96,9 +90,6 @@ describe('usePricingTableUrlLoader', () => {
reason: 'deep_link',
planMode: undefined
})
expect(mockTrackSubscription).toHaveBeenCalledWith('modal_opened', {
reason: 'deep_link'
})
expect(mockRouterReplace).toHaveBeenCalledWith({ query: {} })
})
@@ -150,7 +141,6 @@ describe('usePricingTableUrlLoader', () => {
await loadPricingTableFromUrl()
expect(mockShowPricingTable).not.toHaveBeenCalled()
expect(mockTrackSubscription).not.toHaveBeenCalled()
})
it('denies, strips, and clears together when the user is not eligible', async () => {
@@ -161,7 +151,6 @@ describe('usePricingTableUrlLoader', () => {
await loadPricingTableFromUrl()
expect(mockShowPricingTable).not.toHaveBeenCalled()
expect(mockTrackSubscription).not.toHaveBeenCalled()
expect(mockRouterReplace).toHaveBeenCalledWith({
query: { other: 'param' }
})
@@ -230,7 +219,6 @@ describe('usePricingTableUrlLoader', () => {
)
expect(mockShowPricingTable).not.toHaveBeenCalled()
expect(mockTrackSubscription).not.toHaveBeenCalled()
expect(mockRouterReplace).toHaveBeenCalledWith({ query: {} })
expect(preservedQueryMocks.clearPreservedQuery).toHaveBeenCalledWith(
'pricing'

View File

@@ -7,7 +7,6 @@ import {
mergePreservedQueryIntoQuery
} from '@/platform/navigation/preservedQueryManager'
import { PRESERVED_QUERY_NAMESPACES } from '@/platform/navigation/preservedQueryNamespaces'
import { useTelemetry } from '@/platform/telemetry'
import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
@@ -62,7 +61,6 @@ export function usePricingTableUrlLoader() {
const planMode =
param === 'team' || param === 'personal' ? param : undefined
useTelemetry()?.trackSubscription('modal_opened', { reason: 'deep_link' })
subscriptionDialog.showPricingTable({ reason: 'deep_link', planMode })
}

View File

@@ -15,7 +15,7 @@ import { t } from '@/i18n'
import { fetchWithUnifiedRemint } from '@/platform/auth/unified/remintRetry'
import { isCloud } from '@/platform/distribution/types'
import { useTelemetry } from '@/platform/telemetry'
import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
import type { CheckoutAttributionMetadata } from '@/platform/telemetry/types'
import { AuthStoreError, useAuthStore } from '@/stores/authStore'
import { useDialogService } from '@/services/dialogService'
@@ -237,14 +237,7 @@ function useSubscriptionInternal() {
})
}, reportError)
const showSubscriptionDialog = (options?: {
reason?: SubscriptionDialogReason
}) => {
useTelemetry()?.trackSubscription('modal_opened', {
current_tier: subscriptionTier.value?.toLowerCase(),
reason: options?.reason
})
const showSubscriptionDialog = (options?: SubscriptionDialogOptions) => {
void showSubscriptionRequiredDialog(options)
}
@@ -277,7 +270,7 @@ function useSubscriptionInternal() {
await fetchSubscriptionStatus()
if (!isSubscribedOrIsNotCloud.value) {
showSubscriptionDialog()
showSubscriptionDialog({ reason: 'subscription_required' })
}
}

View File

@@ -39,15 +39,23 @@ vi.mock('@/stores/commandStore', () => ({
}))
// useTelemetry() returns null in OSS, a dispatcher in cloud — toggle via mockIsCloud.
const { mockIsCloud, mockTrackHelpResourceClicked } = vi.hoisted(() => ({
const {
mockIsCloud,
mockTrackHelpResourceClicked,
mockTrackAddApiCreditButtonClicked
} = vi.hoisted(() => ({
mockIsCloud: { value: true },
mockTrackHelpResourceClicked: vi.fn()
mockTrackHelpResourceClicked: vi.fn(),
mockTrackAddApiCreditButtonClicked: vi.fn()
}))
vi.mock('@/platform/telemetry', () => ({
useTelemetry: () =>
mockIsCloud.value
? { trackHelpResourceClicked: mockTrackHelpResourceClicked }
? {
trackHelpResourceClicked: mockTrackHelpResourceClicked,
trackAddApiCreditButtonClicked: mockTrackAddApiCreditButtonClicked
}
: null
}))
@@ -69,6 +77,9 @@ describe('useSubscriptionActions', () => {
const { handleAddApiCredits } = useSubscriptionActions()
handleAddApiCredits()
expect(mockShowTopUpCreditsDialog).toHaveBeenCalledOnce()
expect(mockTrackAddApiCreditButtonClicked).toHaveBeenCalledWith({
source: 'settings_billing_panel'
})
})
})

View File

@@ -21,6 +21,9 @@ export function useSubscriptionActions() {
})
const handleAddApiCredits = () => {
telemetry?.trackAddApiCreditButtonClicked({
source: 'settings_billing_panel'
})
void dialogService.showTopUpCreditsDialog()
}

View File

@@ -5,8 +5,10 @@ import { useSubscriptionDialog } from './useSubscriptionDialog'
const mockCloseDialog = vi.fn()
const mockShowLayoutDialog = vi.fn()
const mockShowTeamWorkspacesDialog = vi.fn()
const mockTrackSubscription = vi.hoisted(() => vi.fn())
const mockIsInPersonalWorkspace = vi.hoisted(() => ({ value: true }))
const mockIsFreeTier = vi.hoisted(() => ({ value: false }))
const mockTier = vi.hoisted(() => ({ value: 'FREE' as string | null }))
const mockTeamWorkspacesEnabled = vi.hoisted(() => ({ value: false }))
const mockIsCloud = vi.hoisted(() => ({ value: true }))
const mockIsLegacyTeamPlan = vi.hoisted(() => ({ value: false }))
@@ -60,10 +62,15 @@ vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
vi.mock('@/composables/billing/useBillingContext', () => ({
useBillingContext: () => ({
isFreeTier: mockIsFreeTier,
isLegacyTeamPlan: mockIsLegacyTeamPlan
isLegacyTeamPlan: mockIsLegacyTeamPlan,
tier: mockTier
})
}))
vi.mock('@/platform/telemetry', () => ({
useTelemetry: () => ({ trackSubscription: mockTrackSubscription })
}))
vi.mock('@/platform/workspace/composables/useWorkspaceUI', () => ({
useWorkspaceUI: () => ({
permissions: {
@@ -80,6 +87,7 @@ describe('useSubscriptionDialog', () => {
mockIsCloud.value = true
mockIsInPersonalWorkspace.value = true
mockIsFreeTier.value = false
mockTier.value = 'FREE'
mockTeamWorkspacesEnabled.value = false
mockIsLegacyTeamPlan.value = false
mockCanManageSubscription.value = true
@@ -198,6 +206,51 @@ describe('useSubscriptionDialog', () => {
const props = mockShowLayoutDialog.mock.calls[0][0].props
expect(props.initialPlanMode).toBe('team')
})
it('tracks modal_opened with the caller reason and current tier', () => {
mockTier.value = 'STANDARD'
const { showPricingTable } = useSubscriptionDialog()
showPricingTable({ reason: 'upgrade_to_add_credits' })
expect(mockTrackSubscription).toHaveBeenCalledWith('modal_opened', {
current_tier: 'standard',
reason: 'upgrade_to_add_credits'
})
})
it('tracks modal_opened on the workspace (unified) path too', () => {
mockTeamWorkspacesEnabled.value = true
const { showPricingTable } = useSubscriptionDialog()
showPricingTable({ reason: 'subscribe_to_run' })
expect(mockTrackSubscription).toHaveBeenCalledWith(
'modal_opened',
expect.objectContaining({ reason: 'subscribe_to_run' })
)
})
it('does not track modal_opened for the inactive member dialog', () => {
mockTeamWorkspacesEnabled.value = true
mockIsInPersonalWorkspace.value = false
mockCanManageSubscription.value = false
const { showPricingTable } = useSubscriptionDialog()
showPricingTable({ reason: 'subscribe_to_run' })
expect(mockShowLayoutDialog).toHaveBeenCalledTimes(1)
expect(mockTrackSubscription).not.toHaveBeenCalled()
})
it('does not track on non-cloud', () => {
mockIsCloud.value = false
const { showPricingTable } = useSubscriptionDialog()
showPricingTable({ reason: 'subscribe_to_run' })
expect(mockTrackSubscription).not.toHaveBeenCalled()
})
})
describe('show', () => {
@@ -235,6 +288,20 @@ describe('useSubscriptionDialog', () => {
expect.objectContaining({ key: 'subscription-required' })
)
})
it('tracks modal_opened with the reason for the free-tier dialog', () => {
mockIsFreeTier.value = true
mockIsInPersonalWorkspace.value = true
const { show } = useSubscriptionDialog()
show({ reason: 'out_of_credits' })
expect(mockTrackSubscription).toHaveBeenCalledTimes(1)
expect(mockTrackSubscription).toHaveBeenCalledWith(
'modal_opened',
expect.objectContaining({ reason: 'out_of_credits' })
)
})
})
describe('startTeamWorkspaceUpgradeFlow', () => {

View File

@@ -4,6 +4,8 @@ import { useDialogStore } from '@/stores/dialogStore'
import { useBillingContext } from '@/composables/billing/useBillingContext'
import { useFeatureFlags } from '@/composables/useFeatureFlags'
import { isCloud } from '@/platform/distribution/types'
import { useTelemetry } from '@/platform/telemetry'
import type { PaymentIntentSource } from '@/platform/telemetry/types'
import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
@@ -11,14 +13,8 @@ const DIALOG_KEY = 'subscription-required'
const FREE_TIER_DIALOG_KEY = 'free-tier-info'
const RESUME_PRICING_KEY = 'comfy:resume-team-pricing'
export type SubscriptionDialogReason =
| 'subscription_required'
| 'out_of_credits'
| 'top_up_blocked'
| 'deep_link'
interface SubscriptionDialogOptions {
reason?: SubscriptionDialogReason
export interface SubscriptionDialogOptions {
reason?: PaymentIntentSource
/**
* Forces the unified pricing dialog to open on a specific plan tab,
* overriding the workspace-derived default (e.g. an "Upgrade to Team" CTA
@@ -38,6 +34,17 @@ export const useSubscriptionDialog = () => {
dialogStore.closeDialog({ key: FREE_TIER_DIALOG_KEY })
}
// Fired here — the choke point every paywall/pricing dialog variant passes
// through — so both the legacy and workspace billing paths emit it.
function trackModalOpened(reason?: PaymentIntentSource) {
// Resolved lazily to avoid the useBillingContext import cycle (see below).
const { tier } = useBillingContext()
useTelemetry()?.trackSubscription('modal_opened', {
current_tier: tier.value?.toLowerCase(),
reason
})
}
function showPricingTable(options?: SubscriptionDialogOptions) {
if (!isCloud) return
@@ -71,6 +78,8 @@ export const useSubscriptionDialog = () => {
return
}
trackModalOpened(options?.reason)
// Shared dialog shell styling for both variants.
const dialogComponentProps = {
style: 'width: min(1328px, 95vw); max-height: 958px;',
@@ -167,6 +176,8 @@ export const useSubscriptionDialog = () => {
// (not at composable setup) to avoid the useBillingContext import cycle.
const { isFreeTier } = useBillingContext()
if (isFreeTier.value && workspaceStore.isInPersonalWorkspace) {
trackModalOpened(options?.reason)
const component = defineAsyncComponent(
() =>
import('@/platform/cloud/subscription/components/FreeTierDialogContent.vue')
@@ -236,7 +247,7 @@ export const useSubscriptionDialog = () => {
sessionStorage.removeItem(RESUME_PRICING_KEY)
if (!workspaceStore.isInPersonalWorkspace) {
showPricingTable()
showPricingTable({ reason: 'team_upgrade_resume' })
}
} catch {
// sessionStorage may be unavailable

View File

@@ -0,0 +1,49 @@
import { beforeEach, describe, expect, it } from 'vitest'
import {
clearPendingSubscriptionCheckoutAttempt,
consumePendingSubscriptionCheckoutSuccess,
recordPendingSubscriptionCheckoutAttempt
} from './subscriptionCheckoutTracker'
const activeProStatus = {
is_active: true,
subscription_tier: 'PRO',
subscription_duration: 'MONTHLY'
} as const
describe('subscriptionCheckoutTracker', () => {
beforeEach(() => {
clearPendingSubscriptionCheckoutAttempt()
})
it('round-trips payment_intent_source from attempt to success metadata', () => {
recordPendingSubscriptionCheckoutAttempt({
tier: 'pro',
cycle: 'monthly',
checkout_type: 'new',
payment_intent_source: 'subscribe_to_run'
})
const metadata = consumePendingSubscriptionCheckoutSuccess(activeProStatus)
expect(metadata).toMatchObject({
tier: 'pro',
checkout_type: 'new',
payment_intent_source: 'subscribe_to_run'
})
})
it('omits payment_intent_source when the attempt had none', () => {
recordPendingSubscriptionCheckoutAttempt({
tier: 'pro',
cycle: 'monthly',
checkout_type: 'new'
})
const metadata = consumePendingSubscriptionCheckoutSuccess(activeProStatus)
expect(metadata).not.toBeNull()
expect(metadata).not.toHaveProperty('payment_intent_source')
})
})

View File

@@ -7,7 +7,12 @@ import type {
TierKey
} from '@/platform/cloud/subscription/constants/tierPricing'
import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
import type { SubscriptionSuccessMetadata } from '@/platform/telemetry/types'
import type {
BeginCheckoutMetadata,
PaymentIntentSource,
SubscriptionCheckoutType,
SubscriptionSuccessMetadata
} from '@/platform/telemetry/types'
const PENDING_SUBSCRIPTION_CHECKOUT_MAX_AGE_MS = 6 * 60 * 60 * 1000
const VALID_TIER_KEYS = new Set<TierKey>([
@@ -23,7 +28,6 @@ export const PENDING_SUBSCRIPTION_CHECKOUT_STORAGE_KEY =
export const PENDING_SUBSCRIPTION_CHECKOUT_EVENT =
'comfy:subscription-checkout-attempt-changed'
type CheckoutType = 'new' | 'change'
type SubscriptionDuration = 'MONTHLY' | 'ANNUAL'
interface SubscriptionStatusSnapshot {
@@ -32,22 +36,24 @@ interface SubscriptionStatusSnapshot {
subscription_duration?: SubscriptionDuration | null
}
interface PendingSubscriptionCheckoutAttempt {
export interface PendingSubscriptionCheckoutAttempt {
attempt_id: string
started_at_ms: number
tier: TierKey
cycle: BillingCycle
checkout_type: CheckoutType
checkout_type: SubscriptionCheckoutType
previous_tier?: TierKey
previous_cycle?: BillingCycle
payment_intent_source?: PaymentIntentSource
}
interface RecordPendingSubscriptionCheckoutAttemptInput {
interface PendingSubscriptionCheckoutAttemptInput {
tier: TierKey
cycle: BillingCycle
checkout_type: CheckoutType
checkout_type: SubscriptionCheckoutType
previous_tier?: TierKey
previous_cycle?: BillingCycle
payment_intent_source?: PaymentIntentSource
}
const dispatchPendingCheckoutChangeEvent = () => {
@@ -168,6 +174,9 @@ const normalizeAttempt = (
...(candidate.previous_cycle === 'monthly' ||
candidate.previous_cycle === 'yearly'
? { previous_cycle: candidate.previous_cycle }
: {}),
...(typeof candidate.payment_intent_source === 'string'
? { payment_intent_source: candidate.payment_intent_source }
: {})
}
}
@@ -224,20 +233,27 @@ const getPendingSubscriptionCheckoutAttempt =
export const hasPendingSubscriptionCheckoutAttempt = (): boolean =>
getPendingSubscriptionCheckoutAttempt() !== null
export const recordPendingSubscriptionCheckoutAttempt = (
input: RecordPendingSubscriptionCheckoutAttemptInput
export const createPendingSubscriptionCheckoutAttempt = (
input: PendingSubscriptionCheckoutAttemptInput
): PendingSubscriptionCheckoutAttempt => {
const storage = getStorage()
const attempt: PendingSubscriptionCheckoutAttempt = {
return {
attempt_id: createAttemptId(),
started_at_ms: Date.now(),
tier: input.tier,
cycle: input.cycle,
checkout_type: input.checkout_type,
...(input.previous_tier ? { previous_tier: input.previous_tier } : {}),
...(input.previous_cycle ? { previous_cycle: input.previous_cycle } : {})
...(input.previous_cycle ? { previous_cycle: input.previous_cycle } : {}),
...(input.payment_intent_source
? { payment_intent_source: input.payment_intent_source }
: {})
}
}
export const persistPendingSubscriptionCheckoutAttempt = (
attempt: PendingSubscriptionCheckoutAttempt
): PendingSubscriptionCheckoutAttempt => {
const storage = getStorage()
if (!storage) {
return attempt
}
@@ -255,6 +271,21 @@ export const recordPendingSubscriptionCheckoutAttempt = (
return attempt
}
export const recordPendingSubscriptionCheckoutAttempt = (
input: PendingSubscriptionCheckoutAttemptInput
): PendingSubscriptionCheckoutAttempt =>
persistPendingSubscriptionCheckoutAttempt(
createPendingSubscriptionCheckoutAttempt(input)
)
export const withPendingCheckoutAttemptId = (
metadata: BeginCheckoutMetadata,
attempt: PendingSubscriptionCheckoutAttempt
): BeginCheckoutMetadata => ({
...metadata,
checkout_attempt_id: attempt.attempt_id
})
const didAttemptSucceed = (
attempt: PendingSubscriptionCheckoutAttempt,
status: SubscriptionStatusSnapshot
@@ -287,6 +318,9 @@ export const consumePendingSubscriptionCheckoutSuccess = (
cycle: attempt.cycle,
checkout_type: attempt.checkout_type,
...(attempt.previous_tier ? { previous_tier: attempt.previous_tier } : {}),
...(attempt.payment_intent_source
? { payment_intent_source: attempt.payment_intent_source }
: {}),
value,
currency: 'USD',
ecommerce: {

View File

@@ -132,13 +132,14 @@ describe('performSubscriptionCheckout', () => {
json: async () => ({ checkout_url: checkoutUrl })
} as Response)
await performSubscriptionCheckout('pro', 'yearly', true)
await performSubscriptionCheckout('pro', 'yearly')
expect(mockTelemetry.trackBeginCheckout).toHaveBeenCalledWith({
user_id: 'user-123',
tier: 'pro',
cycle: 'yearly',
checkout_type: 'new',
checkout_attempt_id: expect.any(String),
ga_client_id: 'ga-client-id',
ga_session_id: 'ga-session-id',
ga_session_number: 'ga-session-number',
@@ -150,6 +151,12 @@ describe('performSubscriptionCheckout', () => {
gbraid: 'gbraid-456',
wbraid: 'wbraid-789'
})
const beginCheckoutMetadata =
mockTelemetry.trackBeginCheckout.mock.calls[0][0]
const [, storedAttempt] = mockLocalStorage.setItem.mock.calls[0]
expect(beginCheckoutMetadata.checkout_attempt_id).toBe(
JSON.parse(storedAttempt).attempt_id
)
expect(global.fetch).toHaveBeenCalledWith(
expect.stringContaining(
'/customers/cloud-subscription-checkout/pro-yearly'
@@ -186,7 +193,7 @@ describe('performSubscriptionCheckout', () => {
json: async () => ({ checkout_url: checkoutUrl })
} as Response)
await performSubscriptionCheckout('pro', 'monthly', true)
await performSubscriptionCheckout('pro', 'monthly')
expect(warnSpy).toHaveBeenCalledWith(
'[SubscriptionCheckout] Failed to collect checkout attribution',
@@ -203,11 +210,43 @@ describe('performSubscriptionCheckout', () => {
user_id: 'user-123',
tier: 'pro',
cycle: 'monthly',
checkout_type: 'new'
checkout_type: 'new',
checkout_attempt_id: expect.any(String)
})
expect(openSpy).toHaveBeenCalledWith(checkoutUrl, '_blank')
})
it('carries the payment intent source into begin_checkout and the pending attempt', async () => {
const checkoutUrl = 'https://checkout.stripe.com/test'
const openSpy = vi
.spyOn(window, 'open')
.mockImplementation(() => window as unknown as Window)
vi.mocked(global.fetch).mockResolvedValue({
ok: true,
json: async () => ({ checkout_url: checkoutUrl })
} as Response)
await performSubscriptionCheckout('pro', 'monthly', {
paymentIntentSource: 'out_of_credits'
})
expect(mockTelemetry.trackBeginCheckout).toHaveBeenCalledWith(
expect.objectContaining({ payment_intent_source: 'out_of_credits' })
)
const beginCheckoutMetadata =
mockTelemetry.trackBeginCheckout.mock.calls[0][0]
const [, storedAttempt] = mockLocalStorage.setItem.mock.calls[0]
const pendingAttempt = JSON.parse(storedAttempt)
expect(pendingAttempt).toMatchObject({
payment_intent_source: 'out_of_credits'
})
expect(beginCheckoutMetadata.checkout_attempt_id).toBe(
pendingAttempt.attempt_id
)
openSpy.mockRestore()
})
it('uses the latest userId when it changes after checkout starts', async () => {
const checkoutUrl = 'https://checkout.stripe.com/test'
const openSpy = vi
@@ -222,7 +261,7 @@ describe('performSubscriptionCheckout', () => {
json: async () => ({ checkout_url: checkoutUrl })
} as Response)
const checkoutPromise = performSubscriptionCheckout('pro', 'yearly', true)
const checkoutPromise = performSubscriptionCheckout('pro', 'yearly')
mockUserId.value = 'user-late'
authHeader.resolve({ Authorization: 'Bearer test-token' })
@@ -235,13 +274,14 @@ describe('performSubscriptionCheckout', () => {
user_id: 'user-late',
tier: 'pro',
cycle: 'yearly',
checkout_type: 'new'
checkout_type: 'new',
checkout_attempt_id: expect.any(String)
})
)
expect(openSpy).toHaveBeenCalledWith(checkoutUrl, '_blank')
})
it('does not persist a pending attempt when the checkout popup is blocked', async () => {
it('does not persist the pending attempt when the checkout popup is blocked', async () => {
const checkoutUrl = 'https://checkout.stripe.com/test'
const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
@@ -250,11 +290,18 @@ describe('performSubscriptionCheckout', () => {
json: async () => ({ checkout_url: checkoutUrl })
} as Response)
await performSubscriptionCheckout('pro', 'monthly', true)
await performSubscriptionCheckout('pro', 'monthly')
expect(openSpy).toHaveBeenCalledWith(checkoutUrl, '_blank')
expect(
window.localStorage.getItem(PENDING_SUBSCRIPTION_CHECKOUT_STORAGE_KEY)
).toBeNull()
const storedAttempt = window.localStorage.getItem(
PENDING_SUBSCRIPTION_CHECKOUT_STORAGE_KEY
)
expect(storedAttempt).toBeNull()
expect(mockLocalStorage.setItem).not.toHaveBeenCalled()
expect(mockTelemetry.trackBeginCheckout).toHaveBeenCalledWith(
expect.objectContaining({
checkout_attempt_id: expect.any(String)
})
)
})
})

View File

@@ -4,12 +4,19 @@ import { useFeatureFlags } from '@/composables/useFeatureFlags'
import { getComfyApiBaseUrl } from '@/config/comfyApi'
import { t } from '@/i18n'
import { fetchWithUnifiedRemint } from '@/platform/auth/unified/remintRetry'
import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
import {
createPendingSubscriptionCheckoutAttempt,
persistPendingSubscriptionCheckoutAttempt,
withPendingCheckoutAttemptId
} from '@/platform/cloud/subscription/utils/subscriptionCheckoutTracker'
import { isCloud } from '@/platform/distribution/types'
import { useTelemetry } from '@/platform/telemetry'
import type {
CheckoutAttributionMetadata,
PaymentIntentSource
} from '@/platform/telemetry/types'
import { AuthStoreError, useAuthStore } from '@/stores/authStore'
import type { CheckoutAttributionMetadata } from '@/platform/telemetry/types'
import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
import { recordPendingSubscriptionCheckoutAttempt } from '@/platform/cloud/subscription/utils/subscriptionCheckoutTracker'
import type { BillingCycle } from './subscriptionTierRank'
type CheckoutTier = TierKey | `${TierKey}-yearly`
@@ -31,6 +38,11 @@ const getCheckoutAttributionForCloud =
return getCheckoutAttribution()
}
interface PerformSubscriptionCheckoutOptions {
openInNewTab?: boolean
paymentIntentSource?: PaymentIntentSource
}
/**
* Core subscription checkout logic shared between PricingTable and
* SubscriptionRedirectView. Handles:
@@ -47,10 +59,12 @@ const getCheckoutAttributionForCloud =
export async function performSubscriptionCheckout(
tierKey: TierKey,
currentBillingCycle: BillingCycle,
openInNewTab: boolean = true
options: PerformSubscriptionCheckoutOptions = {}
): Promise<void> {
if (!isCloud) return
const { openInNewTab = true, paymentIntentSource } = options
const authStore = useAuthStore()
const { userId } = storeToRefs(authStore)
const telemetry = useTelemetry()
@@ -108,14 +122,29 @@ export async function performSubscriptionCheckout(
const data = await response.json()
if (data.checkout_url) {
const pendingAttempt = createPendingSubscriptionCheckoutAttempt({
tier: tierKey,
cycle: currentBillingCycle,
checkout_type: 'new',
payment_intent_source: paymentIntentSource
})
if (userId.value) {
telemetry?.trackBeginCheckout({
user_id: userId.value,
tier: tierKey,
cycle: currentBillingCycle,
checkout_type: 'new',
...checkoutAttribution
})
telemetry?.trackBeginCheckout(
withPendingCheckoutAttemptId(
{
user_id: userId.value,
tier: tierKey,
cycle: currentBillingCycle,
checkout_type: 'new',
...(paymentIntentSource
? { payment_intent_source: paymentIntentSource }
: {}),
...checkoutAttribution
},
pendingAttempt
)
)
}
if (openInNewTab) {
@@ -123,18 +152,9 @@ export async function performSubscriptionCheckout(
if (!checkoutWindow) {
return
}
recordPendingSubscriptionCheckoutAttempt({
tier: tierKey,
cycle: currentBillingCycle,
checkout_type: 'new'
})
persistPendingSubscriptionCheckoutAttempt(pendingAttempt)
} else {
recordPendingSubscriptionCheckoutAttempt({
tier: tierKey,
cycle: currentBillingCycle,
checkout_type: 'new'
})
persistPendingSubscriptionCheckoutAttempt(pendingAttempt)
globalThis.location.href = data.checkout_url
}
}

View File

@@ -1,9 +1,13 @@
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { computed, reactive } from 'vue'
const { mockIsCloud, mockSubscribe } = vi.hoisted(() => ({
mockIsCloud: { value: true },
mockSubscribe: vi.fn()
}))
const { mockIsCloud, mockSubscribe, mockTrackBeginCheckout, mockUserId } =
vi.hoisted(() => ({
mockIsCloud: { value: true },
mockSubscribe: vi.fn(),
mockTrackBeginCheckout: vi.fn(),
mockUserId: { value: 'user-1' as string | null }
}))
vi.mock('@/platform/distribution/types', () => ({
get isCloud() {
@@ -16,6 +20,12 @@ vi.mock('@/config/comfyApi', () => ({
vi.mock('@/platform/workspace/api/workspaceApi', () => ({
workspaceApi: { subscribe: mockSubscribe }
}))
vi.mock('@/platform/telemetry', () => ({
useTelemetry: () => ({ trackBeginCheckout: mockTrackBeginCheckout })
}))
vi.mock('@/stores/authStore', () => ({
useAuthStore: () => reactive({ userId: computed(() => mockUserId.value) })
}))
import { performTeamSubscriptionCheckout } from './teamSubscriptionCheckoutUtil'
@@ -43,7 +53,9 @@ describe('performTeamSubscriptionCheckout', () => {
billing_op_id: 'op_1'
})
await performTeamSubscriptionCheckout('team_700', 'yearly')
await performTeamSubscriptionCheckout('team_700', 'yearly', {
paymentIntentSource: 'deep_link'
})
expect(mockSubscribe).toHaveBeenCalledWith('team_per_credit_annual', {
returnUrl: 'https://app.test/payment/success',
@@ -51,6 +63,14 @@ describe('performTeamSubscriptionCheckout', () => {
teamCreditStopId: 'team_700'
})
expect(assignedHref).toBe('https://stripe.test/pay')
expect(mockTrackBeginCheckout).toHaveBeenCalledWith({
user_id: 'user-1',
tier: 'team',
cycle: 'yearly',
checkout_type: 'new',
billing_op_id: 'op_1',
payment_intent_source: 'deep_link'
})
})
it('uses the monthly slug and lands in the app when no Stripe step is needed', async () => {
@@ -82,6 +102,16 @@ describe('performTeamSubscriptionCheckout', () => {
expect(assignedHref).toBeUndefined()
})
it('does not track begin_checkout when subscribe fails', async () => {
mockSubscribe.mockRejectedValueOnce(new Error('subscribe failed'))
await expect(
performTeamSubscriptionCheckout('team_700', 'yearly')
).rejects.toThrow('subscribe failed')
expect(mockTrackBeginCheckout).not.toHaveBeenCalled()
})
it('does nothing off cloud', async () => {
mockIsCloud.value = false

View File

@@ -1,10 +1,16 @@
import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
import { getTeamPlanSlug } from '@/platform/cloud/subscription/constants/teamPlanCreditStops'
import { isCloud } from '@/platform/distribution/types'
import type { PaymentIntentSource } from '@/platform/telemetry/types'
import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
import { trackWorkspaceCheckoutStarted } from '@/platform/workspace/utils/workspaceCheckoutTelemetry'
import type { BillingCycle } from './subscriptionTierRank'
interface PerformTeamSubscriptionCheckoutOptions {
paymentIntentSource?: PaymentIntentSource
}
/**
* Direct team-plan checkout for the marketing `/cloud/subscribe?tier=team` deep
* link: subscribes to the per-credit Team plan at the chosen slider stop and
@@ -22,7 +28,8 @@ import type { BillingCycle } from './subscriptionTierRank'
*/
export async function performTeamSubscriptionCheckout(
teamCreditStopId: string,
billingCycle: BillingCycle
billingCycle: BillingCycle,
options: PerformTeamSubscriptionCheckoutOptions = {}
): Promise<void> {
if (!isCloud) return
@@ -33,6 +40,14 @@ export async function performTeamSubscriptionCheckout(
teamCreditStopId
})
trackWorkspaceCheckoutStarted({
tier: 'team',
cycle: billingCycle,
checkoutType: 'new',
billingOpId: response.billing_op_id,
paymentIntentSource: options.paymentIntentSource
})
if (response.status === 'needs_payment_method') {
// A needs_payment_method response without a URL is unusable: surface it to
// the caller's error handling rather than silently dropping the user home

View File

@@ -30,6 +30,39 @@ describe('TelemetryRegistry', () => {
expect(b.trackSearchQuery).toHaveBeenCalledExactlyOnceWith(payload)
})
it('dispatches trackBeginCheckout with intent metadata to every provider', () => {
const a: TelemetryProvider = { trackBeginCheckout: vi.fn() }
const b: TelemetryProvider = {}
const registry = new TelemetryRegistry()
registry.registerProvider(a)
registry.registerProvider(b)
const metadata = {
user_id: 'user-1',
tier: 'pro' as const,
cycle: 'monthly' as const,
checkout_type: 'new' as const,
payment_intent_source: 'subscribe_to_run' as const
}
registry.trackBeginCheckout(metadata)
expect(a.trackBeginCheckout).toHaveBeenCalledExactlyOnceWith(metadata)
})
it('dispatches trackAddApiCreditButtonClicked with its source', () => {
const provider: TelemetryProvider = {
trackAddApiCreditButtonClicked: vi.fn()
}
const registry = new TelemetryRegistry()
registry.registerProvider(provider)
registry.trackAddApiCreditButtonClicked({ source: 'credits_panel' })
expect(
provider.trackAddApiCreditButtonClicked
).toHaveBeenCalledExactlyOnceWith({ source: 'credits_panel' })
})
it('skips providers that do not implement trackSearchQuery', () => {
const empty: TelemetryProvider = {}
const registry = new TelemetryRegistry()

View File

@@ -1,6 +1,7 @@
import type { AuditLog } from '@/services/customerEventsService'
import type {
AddCreditsClickMetadata,
AuthMetadata,
BeginCheckoutMetadata,
DefaultViewSetMetadata,
@@ -99,8 +100,10 @@ export class TelemetryRegistry implements TelemetryDispatcher {
this.dispatch((provider) => provider.trackMonthlySubscriptionCancelled?.())
}
trackAddApiCreditButtonClicked(): void {
this.dispatch((provider) => provider.trackAddApiCreditButtonClicked?.())
trackAddApiCreditButtonClicked(metadata?: AddCreditsClickMetadata): void {
this.dispatch((provider) =>
provider.trackAddApiCreditButtonClicked?.(metadata)
)
}
trackApiCreditTopupButtonPurchaseClicked(amount: number): void {

View File

@@ -313,6 +313,42 @@ describe('PostHogTelemetryProvider', () => {
)
})
it('captures begin_checkout with intent metadata', async () => {
const provider = createProvider()
await vi.dynamicImportSettled()
provider.trackBeginCheckout({
user_id: 'user-1',
tier: 'pro',
cycle: 'monthly',
checkout_type: 'new',
payment_intent_source: 'subscribe_to_run'
})
expect(hoisted.mockCapture).toHaveBeenCalledWith(
TelemetryEvents.BEGIN_CHECKOUT,
{
user_id: 'user-1',
tier: 'pro',
cycle: 'monthly',
checkout_type: 'new',
payment_intent_source: 'subscribe_to_run'
}
)
})
it('captures add-credit clicks with their source', async () => {
const provider = createProvider()
await vi.dynamicImportSettled()
provider.trackAddApiCreditButtonClicked({ source: 'credits_panel' })
expect(hoisted.mockCapture).toHaveBeenCalledWith(
TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED,
{ source: 'credits_panel' }
)
})
it('captures share attribution events', async () => {
const provider = createProvider()
await vi.dynamicImportSettled()

View File

@@ -10,7 +10,9 @@ import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
import type { RemoteConfig } from '@/platform/remoteConfig/types'
import type {
AddCreditsClickMetadata,
AuthMetadata,
BeginCheckoutMetadata,
DefaultViewSetMetadata,
EnterLinearMetadata,
ShareFlowMetadata,
@@ -350,8 +352,12 @@ export class PostHogTelemetryProvider implements TelemetryProvider {
this.trackEvent(eventName, metadata)
}
trackAddApiCreditButtonClicked(): void {
this.trackEvent(TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED)
trackAddApiCreditButtonClicked(metadata?: AddCreditsClickMetadata): void {
this.trackEvent(TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED, metadata)
}
trackBeginCheckout(metadata: BeginCheckoutMetadata): void {
this.trackEvent(TelemetryEvents.BEGIN_CHECKOUT, metadata)
}
trackMonthlySubscriptionSucceeded(

View File

@@ -115,6 +115,17 @@ describe('HostTelemetrySink', () => {
)
})
it('forwards add-credit clicks with their source', () => {
new HostTelemetrySink().trackAddApiCreditButtonClicked({
source: 'avatar_menu'
})
expect(state.capture).toHaveBeenCalledExactlyOnceWith(
TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED,
{ source: 'avatar_menu' }
)
})
it('does nothing when the host bridge is absent', () => {
delete window.__comfyDesktop2

View File

@@ -10,6 +10,7 @@ import {
import type { AuditLog } from '@/services/customerEventsService'
import type {
AddCreditsClickMetadata,
AuthMetadata,
BeginCheckoutMetadata,
DefaultViewSetMetadata,
@@ -126,8 +127,8 @@ export class HostTelemetrySink implements TelemetryProvider {
this.capture(TelemetryEvents.MONTHLY_SUBSCRIPTION_CANCELLED)
}
trackAddApiCreditButtonClicked(): void {
this.capture(TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED)
trackAddApiCreditButtonClicked(metadata?: AddCreditsClickMetadata): void {
this.capture(TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED, metadata)
}
trackApiCreditTopupButtonPurchaseClicked(amount: number): void {

View File

@@ -12,12 +12,29 @@
* 3. Check dist/assets/*.js files contain no tracking code
*/
import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
import type { AuditLog } from '@/services/customerEventsService'
import type { AppMode } from '@/utils/appMode'
export type PaymentIntentSource =
| 'subscription_required'
| 'out_of_credits'
| 'top_up_blocked'
| 'deep_link'
| 'subscribe_to_run'
| 'subscribe_now_button'
| 'upgrade_to_add_credits'
| 'settings_billing_panel'
| 'avatar_menu_plans'
| 'team_members_panel'
| 'invite_member_upsell'
| 'upload_model_upgrade'
| 'team_upgrade_resume'
export type SubscriptionCheckoutType = 'new' | 'change'
export type SubscriptionCheckoutTier = TierKey | 'team'
/**
* Authentication metadata for sign-up tracking
*/
@@ -426,16 +443,23 @@ export interface CheckoutAttributionMetadata {
export interface SubscriptionMetadata {
current_tier?: string
reason?: SubscriptionDialogReason
reason?: PaymentIntentSource
}
export interface AddCreditsClickMetadata {
source: 'credits_panel' | 'avatar_menu' | 'settings_billing_panel'
}
export interface BeginCheckoutMetadata
extends Record<string, unknown>, CheckoutAttributionMetadata {
user_id: string
tier: TierKey
tier: SubscriptionCheckoutTier
cycle: BillingCycle
checkout_type: 'new' | 'change'
checkout_type: SubscriptionCheckoutType
checkout_attempt_id?: string
billing_op_id?: string
previous_tier?: TierKey
payment_intent_source?: PaymentIntentSource
}
interface EcommerceItemMetadata {
@@ -457,8 +481,9 @@ export interface SubscriptionSuccessMetadata extends Record<string, unknown> {
checkout_attempt_id: string
tier: TierKey
cycle: BillingCycle
checkout_type: 'new' | 'change'
checkout_type: SubscriptionCheckoutType
previous_tier?: TierKey
payment_intent_source?: PaymentIntentSource
value: number
currency: string
ecommerce: EcommerceMetadata
@@ -489,7 +514,7 @@ export interface TelemetryProvider {
metadata?: SubscriptionSuccessMetadata
): void
trackMonthlySubscriptionCancelled?(): void
trackAddApiCreditButtonClicked?(): void
trackAddApiCreditButtonClicked?(metadata?: AddCreditsClickMetadata): void
trackApiCreditTopupButtonPurchaseClicked?(amount: number): void
trackApiCreditTopupSucceeded?(): void
trackWorkspaceInviteSent?(metadata: WorkspaceInviteMetadata): void

View File

@@ -321,7 +321,7 @@ const handleOpenWorkspaceSettings = () => {
}
const handleOpenPlansAndPricing = () => {
subscriptionDialog.showPricingTable()
subscriptionDialog.showPricingTable({ reason: 'avatar_menu_plans' })
emit('close')
}
@@ -336,13 +336,12 @@ const handleOpenPlanAndCreditsSettings = () => {
}
const handleUpgradeToAddCredits = () => {
subscriptionDialog.showPricingTable()
subscriptionDialog.showPricingTable({ reason: 'upgrade_to_add_credits' })
emit('close')
}
const handleTopUp = () => {
// Track purchase credits entry from avatar popover
useTelemetry()?.trackAddApiCreditButtonClicked()
useTelemetry()?.trackAddApiCreditButtonClicked({ source: 'avatar_menu' })
dialogService.showTopUpCreditsDialog()
emit('close')
}

View File

@@ -391,12 +391,13 @@ const showZeroState = computed(
)
function handleSubscribeWorkspace() {
showSubscriptionDialog()
showSubscriptionDialog({ reason: 'settings_billing_panel' })
}
function handleUpgrade() {
if (isFreeTierPlan.value) showPricingTable()
else showSubscriptionDialog()
if (isFreeTierPlan.value)
showPricingTable({ reason: 'settings_billing_panel' })
else showSubscriptionDialog({ reason: 'settings_billing_panel' })
}
function handleViewMoreDetails() {

View File

@@ -113,7 +113,7 @@ import { cn } from '@comfyorg/tailwind-utils'
import { useEventListener } from '@vueuse/core'
import Button from '@/components/ui/button/Button.vue'
import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
import type { PaymentIntentSource } from '@/platform/telemetry/types'
import { useSubscriptionCheckout } from '@/platform/workspace/composables/useSubscriptionCheckout'
import SubscriptionAddPaymentPreviewWorkspace from './SubscriptionAddPaymentPreviewWorkspace.vue'
@@ -123,7 +123,7 @@ import UnifiedPricingTable from './UnifiedPricingTable.vue'
const { onClose, reason, initialPlanMode } = defineProps<{
onClose: () => void
reason?: SubscriptionDialogReason
reason?: PaymentIntentSource
initialPlanMode?: 'personal' | 'team'
}>()
@@ -152,7 +152,7 @@ const {
handleConfirmTransition,
handleTeamSubscribe,
handleResubscribe
} = useSubscriptionCheckout(emit)
} = useSubscriptionCheckout(emit, reason)
// Backspace mirrors the back arrow on the confirm step, but never while an
// editable element is focused (let it delete text there).

View File

@@ -5,7 +5,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import { ref } from 'vue'
import { createI18n } from 'vue-i18n'
import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
import type { PaymentIntentSource } from '@/platform/telemetry/types'
import SubscriptionRequiredDialogContentWorkspace from './SubscriptionRequiredDialogContentWorkspace.vue'
@@ -17,25 +17,10 @@ const mockHandleResubscribe = vi.fn()
const mockHandleSuccessClose = vi.fn()
const mockCheckoutStep = ref<'pricing' | 'preview' | 'success'>('pricing')
const mockPreviewData = ref<{ transition_type: string } | null>(null)
const mockUseSubscriptionCheckout = vi.hoisted(() => vi.fn())
vi.mock('@/platform/workspace/composables/useSubscriptionCheckout', () => ({
useSubscriptionCheckout: () => ({
checkoutStep: mockCheckoutStep,
isLoadingPreview: ref(false),
loadingTier: ref(null),
isSubscribing: ref(false),
isResubscribing: ref(false),
previewData: mockPreviewData,
selectedTierKey: ref('standard'),
selectedBillingCycle: ref('yearly'),
isPolling: ref(false),
handleSubscribeClick: mockHandleSubscribeClick,
handleBackToPricing: mockHandleBackToPricing,
handleAddCreditCard: mockHandleAddCreditCard,
handleConfirmTransition: mockHandleConfirmTransition,
handleResubscribe: mockHandleResubscribe,
handleSuccessClose: mockHandleSuccessClose
})
useSubscriptionCheckout: mockUseSubscriptionCheckout
}))
const i18n = createI18n({
@@ -91,7 +76,7 @@ const SuccessStub = {
function renderComponent(
props: {
onClose?: () => void
reason?: SubscriptionDialogReason
reason?: PaymentIntentSource
isPersonal?: boolean
} = {}
) {
@@ -121,6 +106,23 @@ function renderComponent(
describe('SubscriptionRequiredDialogContentWorkspace', () => {
beforeEach(() => {
vi.clearAllMocks()
mockUseSubscriptionCheckout.mockReturnValue({
checkoutStep: mockCheckoutStep,
isLoadingPreview: ref(false),
loadingTier: ref(null),
isSubscribing: ref(false),
isResubscribing: ref(false),
previewData: mockPreviewData,
selectedTierKey: ref('standard'),
selectedBillingCycle: ref('yearly'),
isPolling: ref(false),
handleSubscribeClick: mockHandleSubscribeClick,
handleBackToPricing: mockHandleBackToPricing,
handleAddCreditCard: mockHandleAddCreditCard,
handleConfirmTransition: mockHandleConfirmTransition,
handleResubscribe: mockHandleResubscribe,
handleSuccessClose: mockHandleSuccessClose
})
mockCheckoutStep.value = 'pricing'
mockPreviewData.value = null
})
@@ -132,6 +134,15 @@ describe('SubscriptionRequiredDialogContentWorkspace', () => {
expect(screen.queryByTestId('transition-preview')).not.toBeInTheDocument()
})
it('passes the reason into subscription checkout', () => {
renderComponent({ reason: 'out_of_credits' })
expect(mockUseSubscriptionCheckout).toHaveBeenCalledWith(
expect.any(Function),
'out_of_credits'
)
})
it('shows the team workspace header by default', () => {
renderComponent()
expect(screen.getByText('Team Workspace')).toBeInTheDocument()

View File

@@ -116,7 +116,7 @@
import { cn } from '@comfyorg/tailwind-utils'
import Button from '@/components/ui/button/Button.vue'
import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
import type { PaymentIntentSource } from '@/platform/telemetry/types'
import { useSubscriptionCheckout } from '@/platform/workspace/composables/useSubscriptionCheckout'
import PricingTableWorkspace from './PricingTableWorkspace.vue'
@@ -130,7 +130,7 @@ const {
isPersonal = false
} = defineProps<{
onClose: () => void
reason?: SubscriptionDialogReason
reason?: PaymentIntentSource
isPersonal?: boolean
}>()
@@ -154,7 +154,7 @@ const {
handleConfirmTransition,
handleResubscribe,
handleSuccessClose
} = useSubscriptionCheckout(emit)
} = useSubscriptionCheckout(emit, reason)
</script>
<style scoped>

View File

@@ -61,6 +61,9 @@ function onDismiss() {
function onUpgrade() {
dialogStore.closeDialog({ key: 'invite-member-upsell' })
subscriptionDialog.show({ planMode: 'team' })
subscriptionDialog.show({
planMode: 'team',
reason: 'invite_member_upsell'
})
}
</script>

View File

@@ -277,7 +277,7 @@ export function useMembersPanel() {
}
function showTeamPlans() {
subscriptionDialog.show({ planMode: 'team' })
subscriptionDialog.show({ planMode: 'team', reason: 'team_members_panel' })
}
return {

View File

@@ -1,8 +1,9 @@
import { createTestingPinia } from '@pinia/testing'
import { setActivePinia } from 'pinia'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { computed } from 'vue'
import { computed, reactive } from 'vue'
import type { PaymentIntentSource } from '@/platform/telemetry/types'
import type { Plan } from '@/platform/workspace/api/workspaceApi'
import { findPlanSlug } from './useSubscriptionCheckout'
@@ -75,7 +76,9 @@ const {
mockPlans,
mockResubscribe,
mockToastAdd,
mockStartOperation
mockStartOperation,
mockTrackBeginCheckout,
mockUserId
} = vi.hoisted(() => ({
mockSubscribe: vi.fn(),
mockPreviewSubscribe: vi.fn(),
@@ -84,7 +87,9 @@ const {
mockPlans: { value: [] as Plan[] },
mockResubscribe: vi.fn(),
mockToastAdd: vi.fn(),
mockStartOperation: vi.fn()
mockStartOperation: vi.fn(),
mockTrackBeginCheckout: vi.fn(),
mockUserId: { value: 'user-1' as string | null }
}))
vi.mock('@/composables/billing/useBillingContext', () => ({
@@ -119,7 +124,14 @@ vi.mock('primevue/usetoast', () => ({
}))
vi.mock('@/platform/telemetry', () => ({
useTelemetry: () => ({ trackMonthlySubscriptionSucceeded: vi.fn() })
useTelemetry: () => ({
trackMonthlySubscriptionSucceeded: vi.fn(),
trackBeginCheckout: mockTrackBeginCheckout
})
}))
vi.mock('@/stores/authStore', () => ({
useAuthStore: () => reactive({ userId: computed(() => mockUserId.value) })
}))
vi.mock('vue-i18n', async (importOriginal) => {
@@ -135,10 +147,10 @@ vi.mock('vue-i18n', async (importOriginal) => {
describe('useSubscriptionCheckout', () => {
let emit: ReturnType<typeof vi.fn>
async function setup() {
async function setup(paymentIntentSource?: PaymentIntentSource) {
const { useSubscriptionCheckout } =
await import('./useSubscriptionCheckout')
return useSubscriptionCheckout(emit as never)
return useSubscriptionCheckout(emit as never, paymentIntentSource)
}
beforeEach(() => {
@@ -146,6 +158,7 @@ describe('useSubscriptionCheckout', () => {
vi.clearAllMocks()
mockPlans.value = allPlans()
mockStartOperation.mockResolvedValue({ status: 'succeeded' })
mockUserId.value = 'user-1'
emit = vi.fn()
})
@@ -459,6 +472,13 @@ describe('useSubscriptionCheckout', () => {
cancelUrl: 'https://platform.comfy.org/payment/failed'
})
expect(checkout.checkoutStep.value).toBe('success')
expect(mockTrackBeginCheckout).toHaveBeenCalledWith(
expect.objectContaining({
tier: 'team',
checkout_type: 'new',
billing_op_id: 'op-team-1'
})
)
})
it('uses the annual plan slug for the yearly cycle', async () => {
@@ -553,6 +573,39 @@ describe('useSubscriptionCheckout', () => {
detail: 'Team payment failed'
})
)
expect(mockTrackBeginCheckout).not.toHaveBeenCalled()
})
it('keeps team checkout_type as change when the preview request fails', async () => {
const checkout = await setup()
mockPreviewSubscribe.mockRejectedValueOnce(new Error('not supported'))
await checkout.handleSubscribeTeamClick({
stop: {
id: 'team_1400',
usd: 1400,
credits: 295_400,
discountedUsd: 1295
},
billingCycle: 'monthly',
isChange: true
})
mockSubscribe.mockResolvedValueOnce({
status: 'subscribed',
billing_op_id: 'op-team-change'
})
mockFetchStatus.mockResolvedValueOnce(undefined)
mockFetchBalance.mockResolvedValueOnce(undefined)
await checkout.handleTeamSubscribe()
expect(mockTrackBeginCheckout).toHaveBeenCalledWith(
expect.objectContaining({
tier: 'team',
cycle: 'monthly',
checkout_type: 'change',
billing_op_id: 'op-team-change'
})
)
})
})
@@ -603,6 +656,47 @@ describe('useSubscriptionCheckout', () => {
expect(checkout.checkoutStep.value).toBe('success')
})
it('skips begin_checkout when no user id is available', async () => {
mockUserId.value = null
const checkout = await setup('subscribe_to_run')
checkout.selectedTierKey.value = 'standard'
checkout.selectedBillingCycle.value = 'yearly'
mockSubscribe.mockResolvedValueOnce({
status: 'subscribed',
billing_op_id: 'op-1'
})
mockFetchStatus.mockResolvedValueOnce(undefined)
mockFetchBalance.mockResolvedValueOnce(undefined)
await checkout.handleAddCreditCard()
expect(mockTrackBeginCheckout).not.toHaveBeenCalled()
mockUserId.value = 'user-1'
})
it('fires begin_checkout carrying the payment intent source', async () => {
const checkout = await setup('subscribe_to_run')
checkout.selectedTierKey.value = 'standard'
checkout.selectedBillingCycle.value = 'yearly'
mockSubscribe.mockResolvedValueOnce({
status: 'subscribed',
billing_op_id: 'op-1'
})
mockFetchStatus.mockResolvedValueOnce(undefined)
mockFetchBalance.mockResolvedValueOnce(undefined)
await checkout.handleAddCreditCard()
expect(mockTrackBeginCheckout).toHaveBeenCalledWith({
user_id: 'user-1',
tier: 'standard',
cycle: 'yearly',
checkout_type: 'new',
billing_op_id: 'op-1',
payment_intent_source: 'subscribe_to_run'
})
})
it('opens payment URL when needs_payment_method', async () => {
const checkout = await setup()
checkout.selectedTierKey.value = 'standard'
@@ -720,6 +814,7 @@ describe('useSubscriptionCheckout', () => {
detail: 'Payment failed'
})
)
expect(mockTrackBeginCheckout).not.toHaveBeenCalled()
})
})

View File

@@ -9,16 +9,26 @@ import type { TeamPlanSelection } from '@/platform/cloud/subscription/constants/
import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
import { useTelemetry } from '@/platform/telemetry'
import type {
PaymentIntentSource,
SubscriptionCheckoutType
} from '@/platform/telemetry/types'
import type {
Plan,
PreviewSubscribeResponse,
SubscribeResponse
} from '@/platform/workspace/api/workspaceApi'
import { useBillingOperationStore } from '@/platform/workspace/stores/billingOperationStore'
import { trackWorkspaceCheckoutStarted } from '@/platform/workspace/utils/workspaceCheckoutTelemetry'
type CheckoutStep = 'pricing' | 'preview' | 'success'
type CheckoutTierKey = Exclude<TierKey, 'free' | 'founder'>
interface SelectedTeamCheckout {
stop: TeamPlanSelection
checkoutType: SubscriptionCheckoutType
}
/**
* Which screen the `preview` step shows. Only a change prorates: a team change
* carries `previewData` (handleSubscribeTeamClick sets it solely for an immediate
@@ -45,9 +55,12 @@ export function findPlanSlug(
return plan?.slug ?? null
}
export function useSubscriptionCheckout(emit: {
(e: 'close', subscribed: boolean): void
}) {
export function useSubscriptionCheckout(
emit: {
(e: 'close', subscribed: boolean): void
},
paymentIntentSource?: PaymentIntentSource
) {
const { t } = useI18n()
const toast = useToast()
const {
@@ -68,13 +81,16 @@ export function useSubscriptionCheckout(emit: {
const isResubscribing = ref(false)
const previewData = ref<PreviewSubscribeResponse | null>(null)
const selectedTierKey = ref<CheckoutTierKey | null>(null)
const selectedTeamStop = ref<TeamPlanSelection | null>(null)
const selectedTeamCheckout = ref<SelectedTeamCheckout | null>(null)
const selectedBillingCycle = ref<BillingCycle>('yearly')
const isPolling = computed(() => billingOperationStore.hasPendingOperations)
const isTeamCheckout = computed(() => selectedTeamStop.value !== null)
const selectedTeamStop = computed(
() => selectedTeamCheckout.value?.stop ?? null
)
const isTeamCheckout = computed(() => selectedTeamCheckout.value !== null)
const previewVariant = computed<PreviewVariant>(() => {
if (selectedTeamStop.value) {
if (selectedTeamCheckout.value) {
return previewData.value ? 'team-change' : 'team-new'
}
if (previewData.value) {
@@ -154,7 +170,10 @@ export function useSubscriptionCheckout(emit: {
billingCycle: BillingCycle
isChange?: boolean
}) {
selectedTeamStop.value = payload.stop
selectedTeamCheckout.value = {
stop: payload.stop,
checkoutType: payload.isChange ? 'change' : 'new'
}
selectedBillingCycle.value = payload.billingCycle
selectedTierKey.value = null
previewData.value = null
@@ -182,7 +201,7 @@ export function useSubscriptionCheckout(emit: {
function handleBackToPricing() {
checkoutStep.value = 'pricing'
previewData.value = null
selectedTeamStop.value = null
selectedTeamCheckout.value = null
}
function handleSuccessClose() {
@@ -190,20 +209,34 @@ export function useSubscriptionCheckout(emit: {
}
async function handleSubscription() {
if (!selectedTierKey.value) return
const tierKey = selectedTierKey.value
if (!tierKey) return
const billingCycle = selectedBillingCycle.value
const checkoutType =
previewData.value &&
previewData.value.transition_type !== 'new_subscription'
? 'change'
: 'new'
isSubscribing.value = true
try {
const planSlug = getApiPlanSlug(
selectedTierKey.value,
selectedBillingCycle.value
)
const planSlug = getApiPlanSlug(tierKey, billingCycle)
if (!planSlug) return
const response = await subscribe(planSlug, {
returnUrl: `${getComfyPlatformBaseUrl()}/payment/success`,
cancelUrl: `${getComfyPlatformBaseUrl()}/payment/failed`
})
if (response) {
trackWorkspaceCheckoutStarted({
tier: tierKey,
cycle: billingCycle,
checkoutType,
billingOpId: response.billing_op_id,
paymentIntentSource
})
}
await handleSubscribeResponse(response)
} catch (error) {
showSubscribeError(error)
@@ -269,8 +302,8 @@ export function useSubscriptionCheckout(emit: {
}
async function handleTeamSubscription() {
const stop = selectedTeamStop.value
if (!stop?.id) {
const teamCheckout = selectedTeamCheckout.value
if (!teamCheckout?.stop.id) {
toast.add({
severity: 'error',
summary: t('subscription.teamPlan.name'),
@@ -279,16 +312,28 @@ export function useSubscriptionCheckout(emit: {
return
}
const { stop, checkoutType } = teamCheckout
const billingCycle = selectedBillingCycle.value
isSubscribing.value = true
try {
const planSlug = getTeamPlanSlug(selectedBillingCycle.value)
const planSlug = getTeamPlanSlug(billingCycle)
const response = await subscribe(planSlug, {
teamCreditStopId: stop.id,
billingCycle: selectedBillingCycle.value,
billingCycle,
returnUrl: `${getComfyPlatformBaseUrl()}/payment/success`,
cancelUrl: `${getComfyPlatformBaseUrl()}/payment/failed`
})
if (response) {
trackWorkspaceCheckoutStarted({
tier: 'team',
cycle: billingCycle,
checkoutType,
billingOpId: response.billing_op_id,
paymentIntentSource
})
}
await handleSubscribeResponse(response)
} catch (error) {
showSubscribeError(error)

View File

@@ -2,6 +2,7 @@ import { computed, ref, shallowRef } from 'vue'
import { useBillingPlans } from '@/platform/cloud/subscription/composables/useBillingPlans'
import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
import type {
BillingBalanceResponse,
BillingStatusResponse,
@@ -275,12 +276,12 @@ export function useWorkspaceBilling(): BillingState & BillingActions {
async function requireActiveSubscription(): Promise<void> {
await fetchStatus()
if (!isActiveSubscription.value) {
subscriptionDialog.show()
subscriptionDialog.show({ reason: 'subscription_required' })
}
}
function showSubscriptionDialog(): void {
subscriptionDialog.show()
function showSubscriptionDialog(options?: SubscriptionDialogOptions): void {
subscriptionDialog.show(options)
}
return {

View File

@@ -179,6 +179,14 @@ describe('useTeamWorkspaceStore', () => {
expect(store.canCreateWorkspace).toBe(true)
expect(store.members).toEqual([])
expect(store.pendingInvites).toEqual([])
expect(store.originalOwnerId).toBeNull()
expect(store.isCurrentUserOriginalOwner).toBe(false)
expect(store.totalMemberSlots).toBe(0)
expect(store.isInviteLimitReached).toBe(false)
expect(store.workspaceId).toBeNull()
expect(store.workspaceName).toBe('')
expect(store.isWorkspaceSubscribed).toBe(false)
expect(store.subscriptionPlan).toBeNull()
})
})
@@ -208,6 +216,30 @@ describe('useTeamWorkspaceStore', () => {
expect(mockWorkspaceAuthStore.switchWorkspace).not.toHaveBeenCalled()
})
it('falls back when the restored session workspace is no longer available', async () => {
const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(true)
mockWorkspaceAuthStore.currentWorkspace = {
...mockTeamWorkspace,
id: 'ws-stale'
}
mockWorkspaceAuthStore.switchWorkspace.mockRejectedValueOnce(
new Error('Token exchange failed')
)
const store = useTeamWorkspaceStore()
await store.initialize()
expect(mockWorkspaceAuthStore.clearWorkspaceContext).toHaveBeenCalled()
expect(store.activeWorkspaceId).toBe(mockPersonalWorkspace.id)
expect(store.initState).toBe('ready')
expect(consoleSpy).toHaveBeenCalledWith(
'[teamWorkspaceStore] Token exchange failed during fallback'
)
consoleSpy.mockRestore()
})
it('falls back to localStorage if no session', async () => {
mockLocalStorage.getItem.mockReturnValue(mockTeamWorkspace.id)
@@ -217,6 +249,17 @@ describe('useTeamWorkspaceStore', () => {
expect(store.activeWorkspaceId).toBe(mockTeamWorkspace.id)
})
it('uses the default workspace when localStorage cannot be read', async () => {
mockLocalStorage.getItem.mockImplementationOnce(() => {
throw new Error('blocked')
})
const store = useTeamWorkspaceStore()
await store.initialize()
expect(store.activeWorkspaceId).toBe(mockPersonalWorkspace.id)
})
it('falls back to personal if stored workspace not in list', async () => {
mockLocalStorage.getItem.mockReturnValue('non-existent-workspace')
@@ -226,6 +269,23 @@ describe('useTeamWorkspaceStore', () => {
expect(store.activeWorkspaceId).toBe(mockPersonalWorkspace.id)
})
it('continues initialization when persisting the last workspace fails', async () => {
const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
mockLocalStorage.setItem.mockImplementationOnce(() => {
throw new Error('quota')
})
const store = useTeamWorkspaceStore()
await store.initialize()
expect(store.initState).toBe('ready')
expect(consoleSpy).toHaveBeenCalledWith(
'Failed to persist last workspace ID to localStorage'
)
consoleSpy.mockRestore()
})
it('sets error state when workspaces fetch fails after retries', async () => {
vi.useFakeTimers()
mockWorkspaceApi.list.mockRejectedValue(new Error('Network error'))
@@ -428,6 +488,14 @@ describe('useTeamWorkspaceStore', () => {
})
describe('deleteWorkspace', () => {
it('throws when no active workspace is available', async () => {
const store = useTeamWorkspaceStore()
await expect(store.deleteWorkspace()).rejects.toThrow(
'No workspace to delete'
)
})
it('deletes non-active workspace without reload', async () => {
const store = useTeamWorkspaceStore()
await store.initialize()
@@ -459,6 +527,35 @@ describe('useTeamWorkspaceStore', () => {
expect(mockReload).toHaveBeenCalled()
})
it('deletes an active team workspace even when no personal workspace exists', async () => {
mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(true)
mockWorkspaceAuthStore.currentWorkspace = mockTeamWorkspace
mockWorkspaceApi.list.mockResolvedValue({
workspaces: [mockTeamWorkspace]
})
const store = useTeamWorkspaceStore()
await store.initialize()
await store.deleteWorkspace()
expect(mockWorkspaceApi.delete).toHaveBeenCalledWith(mockTeamWorkspace.id)
expect(mockWorkspaceAuthStore.clearWorkspaceContext).toHaveBeenCalled()
expect(mockReload).toHaveBeenCalled()
})
it('resets isDeleting when deletion fails', async () => {
mockWorkspaceApi.delete.mockRejectedValue(new Error('Delete failed'))
const store = useTeamWorkspaceStore()
await store.initialize()
await expect(store.deleteWorkspace(mockTeamWorkspace.id)).rejects.toThrow(
'Delete failed'
)
expect(store.isDeleting).toBe(false)
})
it('throws when trying to delete personal workspace', async () => {
const store = useTeamWorkspaceStore()
await store.initialize()
@@ -500,6 +597,32 @@ describe('useTeamWorkspaceStore', () => {
)
expect(updated?.name).toBe('Renamed Workspace')
})
it('renames the active workspace by name', async () => {
mockWorkspaceApi.update.mockResolvedValue({
...mockPersonalWorkspace,
name: 'Renamed Personal'
})
const store = useTeamWorkspaceStore()
await store.initialize()
await store.updateWorkspaceName('Renamed Personal')
expect(mockWorkspaceApi.update).toHaveBeenCalledWith(
mockPersonalWorkspace.id,
{ name: 'Renamed Personal' }
)
expect(store.activeWorkspace?.name).toBe('Renamed Personal')
})
it('throws when renaming without an active workspace', async () => {
const store = useTeamWorkspaceStore()
await expect(store.updateWorkspaceName('Nope')).rejects.toThrow(
'No active workspace'
)
})
})
describe('leaveWorkspace', () => {
@@ -613,6 +736,13 @@ describe('useTeamWorkspaceStore', () => {
})
describe('member actions', () => {
it('fetchMembers returns empty before a workspace is active', async () => {
const store = useTeamWorkspaceStore()
await expect(store.fetchMembers()).resolves.toEqual([])
expect(mockWorkspaceApi.listMembers).not.toHaveBeenCalled()
})
it('fetchMembers updates active workspace members', async () => {
const mockMembers = [
{
@@ -690,6 +820,27 @@ describe('useTeamWorkspaceStore', () => {
expect(store.members[0].id).toBe('user-2')
})
it('removeMember succeeds without a current workspace', async () => {
const store = useTeamWorkspaceStore()
await store.removeMember('user-1')
expect(mockWorkspaceApi.removeMember).toHaveBeenCalledWith('user-1')
expect(store.members).toEqual([])
})
it('changeMemberRole succeeds without a current workspace', async () => {
const store = useTeamWorkspaceStore()
await store.changeMemberRole('user-1', 'owner')
expect(mockWorkspaceApi.updateMemberRole).toHaveBeenCalledWith(
'user-1',
'owner'
)
expect(store.members).toEqual([])
})
it('changeMemberRole flips the role locally without trusting the response body', async () => {
mockWorkspaceApi.listMembers.mockResolvedValue({
members: [
@@ -943,6 +1094,14 @@ describe('useTeamWorkspaceStore', () => {
return store
}
it('does nothing before a workspace is active', async () => {
const store = useTeamWorkspaceStore()
await store.ensureMembersLoaded()
expect(mockWorkspaceApi.listMembers).not.toHaveBeenCalled()
})
it('loads members for a team workspace that is not yet loaded', async () => {
mockMembersResponse()
const store = await activateTeamWorkspace()
@@ -1129,6 +1288,21 @@ describe('useTeamWorkspaceStore', () => {
})
describe('invite actions', () => {
it('fetchPendingInvites returns empty before a workspace is active', async () => {
const store = useTeamWorkspaceStore()
await expect(store.fetchPendingInvites()).resolves.toEqual([])
expect(mockWorkspaceApi.listInvites).not.toHaveBeenCalled()
})
it('fetchPendingInvites returns empty for personal workspaces', async () => {
const store = useTeamWorkspaceStore()
await store.initialize()
await expect(store.fetchPendingInvites()).resolves.toEqual([])
expect(mockWorkspaceApi.listInvites).not.toHaveBeenCalled()
})
it('fetchPendingInvites updates active workspace invites', async () => {
const mockInvites = [
{
@@ -1179,6 +1353,23 @@ describe('useTeamWorkspaceStore', () => {
)
})
it('createInvite returns the invite before a workspace is active', async () => {
const newInvite = {
id: 'inv-new',
email: 'new@test.com',
token: 'token-new',
invited_at: '2024-01-01T00:00:00Z',
expires_at: '2024-01-08T00:00:00Z'
}
mockWorkspaceApi.createInvite.mockResolvedValue(newInvite)
const store = useTeamWorkspaceStore()
const result = await store.createInvite('new@test.com')
expect(result.email).toBe('new@test.com')
expect(store.pendingInvites).toEqual([])
})
it('revokeInvite removes from local list', async () => {
const mockInvites = [
{
@@ -1211,6 +1402,15 @@ describe('useTeamWorkspaceStore', () => {
expect(store.pendingInvites[0].id).toBe('inv-2')
})
it('revokeInvite succeeds before a workspace is active', async () => {
const store = useTeamWorkspaceStore()
await store.revokeInvite('inv-1')
expect(mockWorkspaceApi.revokeInvite).toHaveBeenCalledWith('inv-1')
expect(store.pendingInvites).toEqual([])
})
it('resendInvite creates a fresh invite before revoking the old one', async () => {
mockWorkspaceApi.listInvites.mockResolvedValue({
invites: [
@@ -1391,6 +1591,36 @@ describe('useTeamWorkspaceStore', () => {
})
})
describe('subscription placeholder', () => {
it('warns with the default subscription plan', () => {
const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
const store = useTeamWorkspaceStore()
store.subscribeWorkspace()
expect(consoleSpy).toHaveBeenCalledWith(
'PRO_MONTHLY',
'Billing endpoint has not been added yet.'
)
consoleSpy.mockRestore()
})
it('warns with a custom subscription plan', () => {
const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
const store = useTeamWorkspaceStore()
store.subscribeWorkspace('TEAM_YEARLY')
expect(consoleSpy).toHaveBeenCalledWith(
'TEAM_YEARLY',
'Billing endpoint has not been added yet.'
)
consoleSpy.mockRestore()
})
})
describe('totalMemberSlots and isInviteLimitReached', () => {
it('calculates total slots from members and invites', async () => {
const mockMembers = [

View File

@@ -74,6 +74,23 @@ function expectedExpiresAtMs(expiresAt: string): string {
return new Date(expiresAt).getTime().toString()
}
function createThrowingSessionStorage(
overrides: Partial<Pick<Storage, 'getItem' | 'removeItem'>>
): Storage {
const original = globalThis.sessionStorage
return {
get length() {
return original.length
},
key: original.key.bind(original),
getItem: original.getItem.bind(original),
setItem: original.setItem.bind(original),
removeItem: original.removeItem.bind(original),
clear: original.clear.bind(original),
...overrides
} satisfies Storage
}
describe('useWorkspaceAuthStore', () => {
beforeEach(() => {
setActivePinia(createPinia())
@@ -202,6 +219,93 @@ describe('useWorkspaceAuthStore', () => {
expect(result).toBe(false)
})
it('returns false and clears storage when the workspace shape is invalid', () => {
sessionStorage.setItem(
WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE,
JSON.stringify({ ...mockWorkspaceWithRole, role: 'admin' })
)
sessionStorage.setItem(WORKSPACE_STORAGE_KEYS.TOKEN, 'some-token')
sessionStorage.setItem(
WORKSPACE_STORAGE_KEYS.EXPIRES_AT,
(Date.now() + 3600 * 1000).toString()
)
const store = useWorkspaceAuthStore()
const result = store.initializeFromSession()
expect(result).toBe(false)
expect(
sessionStorage.getItem(WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE)
).toBeNull()
})
it('returns false when sessionStorage access throws', () => {
const originalSessionStorage = globalThis.sessionStorage
const throwingSessionStorage = createThrowingSessionStorage({
getItem: vi.fn(() => {
throw new Error('blocked')
}),
removeItem: vi.fn(() => {
throw new Error('blocked')
})
})
vi.stubGlobal('sessionStorage', throwingSessionStorage)
const consoleWarnSpy = vi
.spyOn(console, 'warn')
.mockImplementation(() => {})
try {
const store = useWorkspaceAuthStore()
expect(store.initializeFromSession()).toBe(false)
expect(consoleWarnSpy).toHaveBeenCalledWith(
'Failed to clear workspace context from sessionStorage'
)
} finally {
vi.stubGlobal('sessionStorage', originalSessionStorage)
consoleWarnSpy.mockRestore()
}
})
it('init restores session state and refreshes immediately inside the buffer window', async () => {
const nearExpiry = Date.now() + 1000
sessionStorage.setItem(
WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE,
JSON.stringify(mockWorkspaceWithRole)
)
sessionStorage.setItem(WORKSPACE_STORAGE_KEYS.TOKEN, 'session-token')
sessionStorage.setItem(
WORKSPACE_STORAGE_KEYS.EXPIRES_AT,
nearExpiry.toString()
)
mockGetIdToken.mockResolvedValue('firebase-token-xyz')
const refreshedExpiry = new Date(Date.now() + 3600 * 1000).toISOString()
const mockFetch = vi.fn().mockResolvedValue({
ok: true,
json: () =>
Promise.resolve({
...mockTokenResponse,
token: 'refreshed-token',
expires_at: refreshedExpiry
})
})
vi.stubGlobal('fetch', mockFetch)
const store = useWorkspaceAuthStore()
const { workspaceToken } = storeToRefs(store)
store.init()
expect(workspaceToken.value).toBe('session-token')
await vi.advanceTimersByTimeAsync(0)
expect(workspaceToken.value).toBe('refreshed-token')
expect(sessionStorage.getItem(WORKSPACE_STORAGE_KEYS.TOKEN)).toBe(
'refreshed-token'
)
})
})
describe('switchWorkspace', () => {
@@ -431,6 +535,71 @@ describe('useWorkspaceAuthStore', () => {
)
})
it('falls back to statusText when an error body has no message', async () => {
mockGetIdToken.mockResolvedValue('firebase-token-xyz')
vi.stubGlobal(
'fetch',
vi.fn().mockResolvedValue({
ok: false,
status: 500,
statusText: 'Server exploded',
json: () => Promise.resolve({})
})
)
const store = useWorkspaceAuthStore()
const { error } = storeToRefs(store)
await expect(store.switchWorkspace('workspace-123')).rejects.toThrow(
WorkspaceAuthError
)
expect((error.value as WorkspaceAuthError).code).toBe(
'TOKEN_EXCHANGE_FAILED'
)
})
it('throws TOKEN_EXCHANGE_FAILED when the expiry timestamp is invalid', async () => {
mockGetIdToken.mockResolvedValue('firebase-token-xyz')
vi.stubGlobal(
'fetch',
vi.fn().mockResolvedValue({
ok: true,
json: () =>
Promise.resolve({
...mockTokenResponse,
expires_at: 'not-a-date'
})
})
)
const store = useWorkspaceAuthStore()
const { error } = storeToRefs(store)
await expect(store.switchWorkspace('workspace-123')).rejects.toThrow(
WorkspaceAuthError
)
expect((error.value as WorkspaceAuthError).code).toBe(
'TOKEN_EXCHANGE_FAILED'
)
})
it('normalizes non-Error request failures into store error state', async () => {
mockGetIdToken.mockResolvedValue('firebase-token-xyz')
vi.stubGlobal('fetch', vi.fn().mockRejectedValue('network down'))
const store = useWorkspaceAuthStore()
const { error } = storeToRefs(store)
await expect(store.switchWorkspace('workspace-123')).rejects.toThrow(
'network down'
)
expect(error.value).toBeInstanceOf(Error)
expect(error.value?.message).toBe('network down')
})
it('sends correct request to API', async () => {
mockGetIdToken.mockResolvedValue('firebase-token-xyz')
const mockFetch = vi.fn().mockResolvedValue({
@@ -455,6 +624,120 @@ describe('useWorkspaceAuthStore', () => {
}
)
})
it('uses status text when the error body cannot be parsed', async () => {
mockGetIdToken.mockResolvedValue('firebase-token-xyz')
vi.stubGlobal(
'fetch',
vi.fn().mockResolvedValue({
ok: false,
status: 500,
statusText: 'Gateway Timeout',
json: () => Promise.reject(new Error('bad json'))
})
)
const store = useWorkspaceAuthStore()
const { error } = storeToRefs(store)
await expect(store.switchWorkspace('workspace-123')).rejects.toThrow(
WorkspaceAuthError
)
expect((error.value as WorkspaceAuthError).code).toBe(
'TOKEN_EXCHANGE_FAILED'
)
})
it('does not let an older switch overwrite a newer committed workspace', async () => {
mockGetIdToken.mockResolvedValue('firebase-token-xyz')
let resolveFirst: (value: unknown) => void = () => {}
const firstResponse = new Promise((resolve) => {
resolveFirst = resolve
})
const secondExpiry = new Date(Date.now() + 3600 * 1000).toISOString()
const mockFetch = vi
.fn()
.mockReturnValueOnce(firstResponse)
.mockResolvedValueOnce({
ok: true,
json: () =>
Promise.resolve({
...mockTokenResponse,
token: 'newer-token',
expires_at: secondExpiry,
workspace: { ...mockWorkspace, id: 'workspace-other' }
})
})
vi.stubGlobal('fetch', mockFetch)
const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
const store = useWorkspaceAuthStore()
const { currentWorkspace, workspaceToken } = storeToRefs(store)
const firstSwitch = store.switchWorkspace('workspace-123')
await Promise.resolve()
const secondSwitch = store.switchWorkspace('workspace-other')
await secondSwitch
resolveFirst({
ok: true,
json: () => Promise.resolve(mockTokenResponse)
})
await firstSwitch
expect(currentWorkspace.value?.id).toBe('workspace-other')
expect(workspaceToken.value).toBe('newer-token')
expect(warn).toHaveBeenCalledWith(
'Aborting stale workspace switch: workspace context changed before commit'
)
warn.mockRestore()
})
it('does not surface an older switch error after a newer workspace commits', async () => {
mockGetIdToken.mockResolvedValue('firebase-token-xyz')
let resolveFirst: (value: unknown) => void = () => {}
const firstResponse = new Promise((resolve) => {
resolveFirst = resolve
})
const mockFetch = vi
.fn()
.mockReturnValueOnce(firstResponse)
.mockResolvedValueOnce({
ok: true,
json: () =>
Promise.resolve({
...mockTokenResponse,
token: 'newer-token',
workspace: { ...mockWorkspace, id: 'workspace-other' }
})
})
vi.stubGlobal('fetch', mockFetch)
const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
const store = useWorkspaceAuthStore()
const { currentWorkspace, error } = storeToRefs(store)
const firstSwitch = store.switchWorkspace('workspace-123')
await Promise.resolve()
await store.switchWorkspace('workspace-other')
resolveFirst({
ok: false,
status: 500,
statusText: 'Internal Server Error',
json: () => Promise.resolve({ message: 'Server error' })
})
await firstSwitch
expect(currentWorkspace.value?.id).toBe('workspace-other')
expect(error.value).toBeNull()
expect(warn).toHaveBeenCalledWith(
'Aborting stale workspace switch: workspace context changed before error commit',
expect.any(WorkspaceAuthError)
)
warn.mockRestore()
})
})
describe('clearWorkspaceContext', () => {
@@ -504,6 +787,32 @@ describe('useWorkspaceAuthStore', () => {
).toBeNull()
})
it('warns when sessionStorage cannot be cleared', () => {
const originalSessionStorage = globalThis.sessionStorage
const throwingSessionStorage = createThrowingSessionStorage({
removeItem: vi.fn(() => {
throw new Error('blocked')
})
})
vi.stubGlobal('sessionStorage', throwingSessionStorage)
const consoleWarnSpy = vi
.spyOn(console, 'warn')
.mockImplementation(() => {})
try {
const store = useWorkspaceAuthStore()
store.clearWorkspaceContext()
expect(consoleWarnSpy).toHaveBeenCalledWith(
'Failed to clear workspace context from sessionStorage'
)
} finally {
vi.stubGlobal('sessionStorage', originalSessionStorage)
consoleWarnSpy.mockRestore()
}
})
it('prevents in-flight refreshes from restoring cleared state', async () => {
mockGetIdToken.mockResolvedValue('firebase-token-xyz')
const mockFetch = vi.fn().mockResolvedValueOnce({
@@ -581,6 +890,25 @@ describe('useWorkspaceAuthStore', () => {
Authorization: 'Bearer workspace-token-abc'
})
})
it('returns the raw workspace token only when present', async () => {
mockGetIdToken.mockResolvedValue('firebase-token-xyz')
vi.stubGlobal(
'fetch',
vi.fn().mockResolvedValue({
ok: true,
json: () => Promise.resolve(mockTokenResponse)
})
)
const store = useWorkspaceAuthStore()
expect(store.getWorkspaceToken()).toBeUndefined()
await store.switchWorkspace('workspace-123')
expect(store.getWorkspaceToken()).toBe('workspace-token-abc')
})
})
describe('token refresh scheduling', () => {
@@ -614,6 +942,28 @@ describe('useWorkspaceAuthStore', () => {
expect(mockFetch).toHaveBeenCalledTimes(2)
})
it('destroy stops a scheduled token refresh', async () => {
mockGetIdToken.mockResolvedValue('firebase-token-xyz')
const expiresInMs = 3600 * 1000
const mockFetch = vi.fn().mockResolvedValue({
ok: true,
json: () =>
Promise.resolve({
...mockTokenResponse,
expires_at: new Date(Date.now() + expiresInMs).toISOString()
})
})
vi.stubGlobal('fetch', mockFetch)
const store = useWorkspaceAuthStore()
await store.switchWorkspace('workspace-123')
store.destroy()
await vi.advanceTimersByTimeAsync(expiresInMs)
expect(mockFetch).toHaveBeenCalledTimes(1)
})
it('clears context when refresh fails with ACCESS_DENIED', async () => {
mockGetIdToken.mockResolvedValue('firebase-token-xyz')
const expiresInMs = 3600 * 1000
@@ -878,6 +1228,49 @@ describe('useWorkspaceAuthStore', () => {
consoleWarnSpy.mockRestore()
})
it('clears context when transient refresh retries outlive the token expiry', async () => {
const nearExpiry = Date.now() + 1
sessionStorage.setItem(
WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE,
JSON.stringify(mockWorkspaceWithRole)
)
sessionStorage.setItem(WORKSPACE_STORAGE_KEYS.TOKEN, 'nearly-expired')
sessionStorage.setItem(
WORKSPACE_STORAGE_KEYS.EXPIRES_AT,
nearExpiry.toString()
)
mockGetIdToken.mockResolvedValue('firebase-token-xyz')
const mockFetch = vi.fn().mockResolvedValue({
ok: false,
status: 500,
statusText: 'Internal Server Error',
json: () => Promise.resolve({ message: 'Server error' })
})
vi.stubGlobal('fetch', mockFetch)
const consoleErrorSpy = vi
.spyOn(console, 'error')
.mockImplementation(() => {})
const consoleWarnSpy = vi
.spyOn(console, 'warn')
.mockImplementation(() => {})
const store = useWorkspaceAuthStore()
const { currentWorkspace, workspaceToken } = storeToRefs(store)
expect(store.initializeFromSession()).toBe(true)
await vi.advanceTimersByTimeAsync(0)
await vi.advanceTimersByTimeAsync(1000)
await vi.advanceTimersByTimeAsync(2000)
await vi.advanceTimersByTimeAsync(4000)
expect(mockFetch).toHaveBeenCalledTimes(4)
expect(currentWorkspace.value).toBeNull()
expect(workspaceToken.value).toBeNull()
consoleErrorSpy.mockRestore()
consoleWarnSpy.mockRestore()
})
it('clears context immediately on INVALID_FIREBASE_TOKEN without retrying', async () => {
mockGetIdToken.mockResolvedValue('firebase-token-xyz')
const mockFetch = vi.fn().mockResolvedValueOnce({
@@ -1823,6 +2216,62 @@ describe('useWorkspaceAuthStore', () => {
)
})
it('warns and resolves false when the login mint hits a transient error', async () => {
mockUnifiedCloudAuthEnabled.value = true
mockGetIdToken.mockResolvedValue('firebase-token-xyz')
vi.stubGlobal(
'fetch',
vi.fn().mockResolvedValue({
ok: false,
status: 500,
statusText: 'Internal Server Error',
json: () => Promise.resolve({ message: 'try again' })
})
)
const consoleWarnSpy = vi
.spyOn(console, 'warn')
.mockImplementation(() => {})
const store = useWorkspaceAuthStore()
const { unifiedToken } = storeToRefs(store)
const result = await store.mintAtLogin()
expect(result).toBe(false)
expect(unifiedToken.value).toBeNull()
expect(mockToastAdd).not.toHaveBeenCalled()
expect(consoleWarnSpy).toHaveBeenCalledWith(
'Unified login mint failed:',
expect.any(WorkspaceAuthError)
)
consoleWarnSpy.mockRestore()
})
it('skips a scheduled unified refresh after the flag turns off', async () => {
mockUnifiedCloudAuthEnabled.value = true
mockGetIdToken.mockResolvedValue('firebase-token-xyz')
const expiresInMs = 3600 * 1000
const mockFetch = vi.fn().mockResolvedValue({
ok: true,
json: () =>
Promise.resolve({
...personalTokenResponse,
expires_at: new Date(Date.now() + expiresInMs).toISOString()
})
})
vi.stubGlobal('fetch', mockFetch)
const store = useWorkspaceAuthStore()
await store.mintAtLogin()
mockUnifiedCloudAuthEnabled.value = false
await vi.advanceTimersByTimeAsync(expiresInMs - 5 * 60 * 1000)
expect(mockFetch).toHaveBeenCalledTimes(1)
expect(mockNotifyTokenRefreshed).not.toHaveBeenCalled()
})
it('never toasts from the unified lifecycle when the flag is OFF', async () => {
mockUnifiedCloudAuthEnabled.value = false
mockGetIdToken.mockResolvedValue('firebase-token-xyz')

View File

@@ -0,0 +1,38 @@
import { useTelemetry } from '@/platform/telemetry'
import type {
PaymentIntentSource,
SubscriptionCheckoutTier,
SubscriptionCheckoutType
} from '@/platform/telemetry/types'
import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
import { useAuthStore } from '@/stores/authStore'
interface TrackWorkspaceCheckoutStartedOptions {
tier: SubscriptionCheckoutTier
cycle: BillingCycle
checkoutType: SubscriptionCheckoutType
billingOpId: string
paymentIntentSource?: PaymentIntentSource
}
export function trackWorkspaceCheckoutStarted({
tier,
cycle,
checkoutType,
billingOpId,
paymentIntentSource
}: TrackWorkspaceCheckoutStartedOptions) {
const { userId } = useAuthStore()
if (!userId) return
useTelemetry()?.trackBeginCheckout({
user_id: userId,
tier,
cycle,
checkout_type: checkoutType,
billing_op_id: billingOpId,
...(paymentIntentSource
? { payment_intent_source: paymentIntentSource }
: {})
})
}

View File

@@ -0,0 +1,208 @@
import { createTestingPinia } from '@pinia/testing'
import { render, screen, within } from '@testing-library/vue'
import { setActivePinia } from 'pinia'
import { createI18n } from 'vue-i18n'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import type { NodeError } from '@/schemas/apiSchema'
import LinearControls from '@/renderer/extensions/linearMode/LinearControls.vue'
import { LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID } from '@/renderer/extensions/linearMode/linearRunErrorWarningIds'
import { useAppModeStore } from '@/stores/appModeStore'
import { useExecutionErrorStore } from '@/stores/executionErrorStore'
import { toNodeId } from '@/types/nodeId'
const billingMock = vi.hoisted(() => ({
isActiveSubscription: true
}))
const overlayMock = vi.hoisted(() => ({
overlayMessage: 'KSampler is missing a required input: model',
overlayTitle: 'Required input missing'
}))
vi.mock('@/composables/billing/useBillingContext', () => ({
useBillingContext: () => ({
isActiveSubscription: billingMock.isActiveSubscription
})
}))
vi.mock('@/components/error/useErrorOverlayState', () => ({
useErrorOverlayState: () => ({
overlayMessage: overlayMock.overlayMessage,
overlayTitle: overlayMock.overlayTitle
})
}))
const i18n = createI18n({
legacy: false,
locale: 'en',
messages: {
en: {
linearMode: {
error: {
goto: 'Show errors in graph'
},
mobileNoWorkflow: 'No workflow',
runCount: 'Run count',
viewJob: 'View job'
},
menu: {
run: 'Run'
},
menuLabels: {
publish: 'Publish'
},
queue: {
jobAddedToQueue: 'Job added to queue',
jobQueueing: 'Queueing'
}
}
}
})
const nodeErrors: Record<string, NodeError> = {
'1': {
class_type: 'TestNode',
dependent_outputs: [],
errors: [
{
type: 'required_input_missing',
message: 'Missing input',
details: '',
extra_info: { input_name: 'prompt' }
}
]
}
}
function renderControls({
hasError = false,
isActiveSubscription = true,
mobile = false
}: {
hasError?: boolean
isActiveSubscription?: boolean
mobile?: boolean
} = {}) {
billingMock.isActiveSubscription = isActiveSubscription
const pinia = createTestingPinia({
createSpy: vi.fn,
stubActions: false
})
setActivePinia(pinia)
useAppModeStore().selectedOutputs = [toNodeId(1)]
if (hasError) {
useExecutionErrorStore().lastNodeErrors = nodeErrors
}
const toastTarget = document.createElement('div')
return render(LinearControls, {
props: { mobile, toastTo: toastTarget },
global: {
plugins: [pinia, i18n],
stubs: {
AppModeWidgetList: true,
Loader: true,
PartnerNodesList: true,
Popover: {
template: '<div><slot name="button" /><slot /></div>'
},
ScrubableNumberInput: true,
SubscribeToRunButton: true
}
}
})
}
describe('LinearControls', () => {
beforeEach(() => {
vi.clearAllMocks()
billingMock.isActiveSubscription = true
overlayMock.overlayMessage = 'KSampler is missing a required input: model'
overlayMock.overlayTitle = 'Required input missing'
})
it.for([
{ label: 'desktop', mobile: false },
{ label: 'mobile', mobile: true }
])('shows a workflow error warning in $label controls', ({ mobile }) => {
renderControls({ hasError: true, mobile })
const warning = screen.getByRole('status')
expect(
within(warning).getByText('Required input missing')
).toBeInTheDocument()
expect(
within(warning).getByText('KSampler is missing a required input: model')
).toBeInTheDocument()
expect(
within(warning).getByRole('button', { name: 'Show errors in graph' })
).toBeInTheDocument()
expect(within(warning).queryByLabelText('Close')).not.toBeInTheDocument()
const runButton = screen.getByRole('button', { name: 'Run' })
expect(runButton).toHaveAttribute(
'aria-describedby',
LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID
)
const description = screen.getByTestId(
'linear-validation-warning-description'
)
expect(description).toHaveAttribute(
'id',
LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID
)
expect(description).toHaveTextContent('Required input missing')
expect(description).toHaveTextContent(
'KSampler is missing a required input: model'
)
expect(description).not.toHaveTextContent('Show errors in graph')
})
it.for([
{ label: 'desktop', mobile: false },
{ label: 'mobile', mobile: true }
])(
'does not show the workflow error warning in $label controls without graph errors',
({ mobile }) => {
renderControls({ mobile })
expect(screen.queryByRole('status')).not.toBeInTheDocument()
expect(
screen.queryByRole('button', { name: 'Show errors in graph' })
).not.toBeInTheDocument()
expect(screen.getByRole('button', { name: 'Run' })).not.toHaveAttribute(
'aria-describedby'
)
}
)
it.for([
{ label: 'desktop', mobile: false },
{ label: 'mobile', mobile: true }
])(
'does not show the workflow error warning in $label controls without an active subscription',
({ mobile }) => {
renderControls({
hasError: true,
isActiveSubscription: false,
mobile
})
expect(screen.queryByRole('status')).not.toBeInTheDocument()
}
)
it('does not show the warning when the error copy is empty', () => {
overlayMock.overlayMessage = ''
renderControls({ hasError: true })
expect(screen.queryByRole('status')).not.toBeInTheDocument()
expect(screen.getByRole('button', { name: 'Run' })).not.toHaveAttribute(
'aria-describedby'
)
})
})

View File

@@ -1,10 +1,11 @@
<script setup lang="ts">
import { useTimeout } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import { ref, useTemplateRef } from 'vue'
import { computed, ref, toValue, useTemplateRef } from 'vue'
import { useI18n } from 'vue-i18n'
import AppModeWidgetList from '@/components/builder/AppModeWidgetList.vue'
import { useErrorOverlayState } from '@/components/error/useErrorOverlayState'
import Loader from '@/components/loader/Loader.vue'
import ScrubableNumberInput from '@/components/common/ScrubableNumberInput.vue'
import Popover from '@/components/ui/Popover.vue'
@@ -14,11 +15,15 @@ import SubscribeToRunButton from '@/platform/cloud/subscription/components/Subsc
import { useSettingStore } from '@/platform/settings/settingStore'
import { useTelemetry } from '@/platform/telemetry'
import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
import LinearRunErrorWarning from '@/renderer/extensions/linearMode/LinearRunErrorWarning.vue'
import { LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID } from '@/renderer/extensions/linearMode/linearRunErrorWarningIds'
import PartnerNodesList from '@/renderer/extensions/linearMode/PartnerNodesList.vue'
import { useCommandStore } from '@/stores/commandStore'
import { useQueueSettingsStore } from '@/stores/queueStore'
import { useAppMode } from '@/composables/useAppMode'
import { useAppModeStore } from '@/stores/appModeStore'
import { useExecutionErrorStore } from '@/stores/executionErrorStore'
const { t } = useI18n()
const commandStore = useCommandStore()
const { batchCount } = storeToRefs(useQueueSettingsStore())
@@ -28,6 +33,8 @@ const workflowStore = useWorkflowStore()
const { isBuilderMode } = useAppMode()
const appModeStore = useAppModeStore()
const { hasOutputs } = storeToRefs(appModeStore)
const { hasAnyError } = storeToRefs(useExecutionErrorStore())
const { overlayMessage } = useErrorOverlayState()
const { toastTo, mobile } = defineProps<{
toastTo?: string | HTMLElement
@@ -43,6 +50,13 @@ const { ready: jobToastTimeout, start: resetJobToastTimeout } = useTimeout(
{ controls: true, immediate: false }
)
const widgetListRef = useTemplateRef('widgetListRef')
const linearRunButtonTestId = 'linear-run-button'
const showRunErrorWarning = computed(
() =>
hasAnyError.value &&
toValue(isActiveSubscription) &&
toValue(overlayMessage).trim().length > 0
)
//TODO: refactor out of this file.
//code length is small, but changes should propagate
@@ -134,9 +148,10 @@ function handleDragDrop() {
<PartnerNodesList v-if="!mobile" />
<section
v-if="mobile"
data-testid="linear-run-button"
:data-testid="linearRunButtonTestId"
class="border-t border-node-component-border p-4 pb-6"
>
<LinearRunErrorWarning v-if="showRunErrorWarning" />
<SubscribeToRunButton
v-if="!isActiveSubscription"
class="mt-4 w-full"
@@ -166,18 +181,24 @@ function handleDragDrop() {
variant="primary"
class="grow"
size="lg"
:aria-describedby="
showRunErrorWarning
? LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID
: undefined
"
@click="runButtonClick"
>
<i class="icon-[lucide--play]" />
<i aria-hidden="true" class="icon-[lucide--play]" />
{{ t('menu.run') }}
</Button>
</div>
</section>
<section
v-else
data-testid="linear-run-button"
:data-testid="linearRunButtonTestId"
class="border-t border-node-component-border p-4 pb-6"
>
<LinearRunErrorWarning v-if="showRunErrorWarning" />
<div
class="m-1 mb-2 text-node-component-slot-text"
v-text="t('linearMode.runCount')"
@@ -198,9 +219,14 @@ function handleDragDrop() {
variant="primary"
class="mt-4 w-full text-sm"
size="lg"
:aria-describedby="
showRunErrorWarning
? LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID
: undefined
"
@click="runButtonClick"
>
<i class="icon-[lucide--play]" />
<i aria-hidden="true" class="icon-[lucide--play]" />
{{ t('menu.run') }}
</Button>
</section>

View File

@@ -0,0 +1,92 @@
import { render, screen } from '@testing-library/vue'
import userEvent from '@testing-library/user-event'
import { createI18n } from 'vue-i18n'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import LinearRunErrorWarning from '@/renderer/extensions/linearMode/LinearRunErrorWarning.vue'
import { LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID } from '@/renderer/extensions/linearMode/linearRunErrorWarningIds'
const mocks = vi.hoisted(() => ({
overlayMessage: 'KSampler is missing a required input: model',
overlayTitle: 'Required input missing',
viewErrorsInGraph: vi.fn()
}))
vi.mock('@/components/error/useErrorOverlayState', () => ({
useErrorOverlayState: () => ({
overlayMessage: mocks.overlayMessage,
overlayTitle: mocks.overlayTitle
})
}))
vi.mock('@/composables/useViewErrorsInGraph', () => ({
useViewErrorsInGraph: () => ({
viewErrorsInGraph: mocks.viewErrorsInGraph
})
}))
const i18n = createI18n({
legacy: false,
locale: 'en',
messages: {
en: {
linearMode: {
error: {
goto: 'Show errors in graph'
}
}
}
}
})
function renderWarning() {
const user = userEvent.setup()
const result = render(LinearRunErrorWarning, {
global: { plugins: [i18n] }
})
return { ...result, user }
}
describe('LinearRunErrorWarning', () => {
beforeEach(() => {
mocks.viewErrorsInGraph.mockReset()
})
it('shows the current error overlay title and message without a close action', () => {
renderWarning()
const warning = screen.getByRole('status')
expect(warning).toHaveTextContent('Required input missing')
expect(warning).toHaveTextContent(
'KSampler is missing a required input: model'
)
expect(screen.getByText('Required input missing')).toHaveAttribute(
'title',
'Required input missing'
)
const description = screen.getByTestId(
'linear-validation-warning-description'
)
expect(description).toHaveAttribute(
'id',
LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID
)
expect(description).toHaveTextContent('Required input missing')
expect(description).toHaveTextContent(
'KSampler is missing a required input: model'
)
expect(description).not.toHaveTextContent('Show errors in graph')
expect(screen.queryByLabelText('Close')).not.toBeInTheDocument()
})
it('opens graph errors when the action is clicked', async () => {
const { user } = renderWarning()
await user.click(
screen.getByRole('button', { name: 'Show errors in graph' })
)
expect(mocks.viewErrorsInGraph).toHaveBeenCalledOnce()
})
})

View File

@@ -0,0 +1,63 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import Button from '@/components/ui/button/Button.vue'
import { useErrorOverlayState } from '@/components/error/useErrorOverlayState'
import { useViewErrorsInGraph } from '@/composables/useViewErrorsInGraph'
import { LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID } from '@/renderer/extensions/linearMode/linearRunErrorWarningIds'
const { t } = useI18n()
const { viewErrorsInGraph } = useViewErrorsInGraph()
const { overlayMessage, overlayTitle } = useErrorOverlayState()
</script>
<template>
<div
role="status"
data-testid="linear-validation-warning"
class="mb-3 flex w-full flex-col gap-2 overflow-hidden rounded-lg border border-l-4 border-border-default border-l-destructive-background bg-base-background p-3 shadow-interface transition-colors duration-200 ease-in-out"
>
<div
:id="LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID"
data-testid="linear-validation-warning-description"
class="flex flex-col gap-2"
>
<div class="flex w-full items-start gap-2">
<i
aria-hidden="true"
class="mt-0.5 icon-[lucide--circle-x] size-4 shrink-0 text-destructive-background"
/>
<span
class="min-w-0 flex-1 truncate text-sm text-base-foreground"
:title="overlayTitle"
>
{{ overlayTitle }}
</span>
</div>
<div
class="flex w-full items-start gap-2"
data-testid="linear-validation-warning-message"
>
<span class="size-4 shrink-0" aria-hidden="true" />
<p
class="m-0 line-clamp-3 min-w-0 flex-1 text-sm/snug wrap-break-word whitespace-pre-wrap text-muted-foreground"
>
{{ overlayMessage }}
</p>
</div>
</div>
<div class="flex w-full items-center justify-end pt-2">
<Button
variant="secondary"
size="unset"
class="min-h-8 rounded-lg px-3 py-2 text-xs font-normal"
data-testid="linear-view-errors"
@click="viewErrorsInGraph"
>
{{ t('linearMode.error.goto') }}
</Button>
</div>
</div>
</template>

View File

@@ -0,0 +1,2 @@
export const LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID =
'linear-run-error-warning'

View File

@@ -18,7 +18,7 @@ import type {
} from '@/stores/dialogStore'
import type { ComponentAttrs } from 'vue-component-type-helpers'
import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
import type { WorkspaceRole } from '@/platform/workspace/api/workspaceApi'
// Lazy loaders for dialogs - components are loaded on first use
@@ -442,9 +442,9 @@ export const useDialogService = () => {
})
}
async function showSubscriptionRequiredDialog(options?: {
reason?: SubscriptionDialogReason
}) {
async function showSubscriptionRequiredDialog(
options?: SubscriptionDialogOptions
) {
if (!isCloud || !window.__CONFIG__?.subscription_required) {
return
}

View File

@@ -0,0 +1,26 @@
import { createTestingPinia } from '@pinia/testing'
import { setActivePinia } from 'pinia'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
const electronAPI = vi.hoisted(() => vi.fn())
vi.mock('@/platform/distribution/types', () => ({ isDesktop: false }))
vi.mock('@/utils/envUtil', () => ({ electronAPI }))
describe('electronDownloadStore outside desktop', () => {
beforeEach(() => {
setActivePinia(createTestingPinia({ stubActions: false }))
electronAPI.mockClear()
})
it('skips the Electron bridge when not running on desktop', async () => {
const store = useElectronDownloadStore()
await store.initialize()
expect(electronAPI).not.toHaveBeenCalled()
expect(store.downloads).toEqual([])
})
})

View File

@@ -0,0 +1,106 @@
import { DownloadStatus } from '@comfyorg/comfyui-electron-types'
import { createTestingPinia } from '@pinia/testing'
import { setActivePinia } from 'pinia'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
const downloadManagerMock = vi.hoisted(() => ({
cancelDownload: vi.fn(),
getAllDownloads: vi.fn(),
onDownloadProgress: vi.fn(),
pauseDownload: vi.fn(),
resumeDownload: vi.fn(),
startDownload: vi.fn()
}))
vi.mock('@/platform/distribution/types', () => ({
isDesktop: true
}))
vi.mock('@/utils/envUtil', () => ({
electronAPI: () => ({
DownloadManager: downloadManagerMock
})
}))
describe('electronDownloadStore', () => {
beforeEach(() => {
setActivePinia(createTestingPinia({ stubActions: false }))
Object.values(downloadManagerMock).forEach((mock) => mock.mockReset())
downloadManagerMock.getAllDownloads.mockResolvedValue([
{
filename: 'done.bin',
status: DownloadStatus.COMPLETED,
url: 'https://example.com/done.bin'
}
])
})
it('loads existing downloads and applies progress updates by URL', async () => {
let progressCallback:
| Parameters<typeof downloadManagerMock.onDownloadProgress>[0]
| undefined
downloadManagerMock.onDownloadProgress.mockImplementation((callback) => {
progressCallback = callback
})
// The store runs initialize() automatically during setup; wait for it to
// finish instead of calling it again (which would double-load downloads).
const store = useElectronDownloadStore()
await vi.waitFor(() => expect(progressCallback).toBeDefined())
progressCallback?.({
filename: 'model.bin',
progress: 25,
savePath: '/tmp/model.bin',
status: DownloadStatus.IN_PROGRESS,
url: 'https://example.com/model.bin'
})
progressCallback?.({
filename: 'model.bin',
progress: 50,
savePath: '/tmp/model.bin',
status: DownloadStatus.IN_PROGRESS,
url: 'https://example.com/model.bin'
})
expect(store.findByUrl('https://example.com/done.bin')?.status).toBe(
DownloadStatus.COMPLETED
)
expect(store.findByUrl('https://example.com/model.bin')).toMatchObject({
filename: 'model.bin',
progress: 50,
status: DownloadStatus.IN_PROGRESS
})
expect(store.inProgressDownloads).toHaveLength(1)
expect(store.downloads).toHaveLength(2)
})
it('delegates download controls to the Electron bridge', async () => {
const store = useElectronDownloadStore()
await store.start({
filename: 'model.bin',
savePath: '/tmp/model.bin',
url: 'https://example.com/model.bin'
})
await store.pause('https://example.com/model.bin')
await store.resume('https://example.com/model.bin')
await store.cancel('https://example.com/model.bin')
expect(downloadManagerMock.startDownload).toHaveBeenCalledWith(
'https://example.com/model.bin',
'/tmp/model.bin',
'model.bin'
)
expect(downloadManagerMock.pauseDownload).toHaveBeenCalledWith(
'https://example.com/model.bin'
)
expect(downloadManagerMock.resumeDownload).toHaveBeenCalledWith(
'https://example.com/model.bin'
)
expect(downloadManagerMock.cancelDownload).toHaveBeenCalledWith(
'https://example.com/model.bin'
)
})
})

View File

@@ -6,7 +6,7 @@ import type { SystemStats } from '@/schemas/apiSchema'
import { api } from '@/scripts/api'
import { useSystemStatsStore } from '@/stores/systemStatsStore'
const mockData = vi.hoisted(() => ({ isDesktop: false }))
const mockData = vi.hoisted(() => ({ isCloud: false, isDesktop: false }))
// Mock the API
vi.mock('@/scripts/api', () => ({
@@ -19,7 +19,9 @@ vi.mock('@/platform/distribution/types', () => ({
get isDesktop() {
return mockData.isDesktop
},
isCloud: false
get isCloud() {
return mockData.isCloud
}
}))
describe('useSystemStatsStore', () => {
@@ -138,6 +140,7 @@ describe('useSystemStatsStore', () => {
describe('getFormFactor', () => {
beforeEach(() => {
// Reset systemStats for each test
mockData.isCloud = false
store.systemStats = null
})
@@ -162,6 +165,12 @@ describe('useSystemStatsStore', () => {
expect(store.getFormFactor()).toBe('other')
})
it('should return "cloud" in cloud mode', () => {
mockData.isCloud = true
expect(store.getFormFactor()).toBe('cloud')
})
describe('desktop environment', () => {
beforeEach(() => {
mockData.isDesktop = true

View File

@@ -116,6 +116,33 @@ describe('useUserFileStore', () => {
"Failed to load file 'file1.txt': 404 Not Found"
)
})
it('should skip loading temporary and already loaded files', async () => {
const temporaryFile = UserFile.createTemporary('draft.txt')
const loadedFile = new UserFile('file1.txt', 123, 100)
loadedFile.content = 'content'
loadedFile.originalContent = 'content'
await temporaryFile.load()
await loadedFile.load()
expect(api.getUserData).not.toHaveBeenCalled()
})
it('should force reload loaded files', async () => {
const file = new UserFile('file1.txt', 123, 100)
file.content = 'old'
file.originalContent = 'old'
vi.mocked(api.getUserData).mockResolvedValue({
status: 200,
text: () => Promise.resolve('new')
} as Response)
await file.load({ force: true })
expect(api.getUserData).toHaveBeenCalledWith('file1.txt')
expect(file.content).toBe('new')
})
})
describe('save', () => {
@@ -148,6 +175,60 @@ describe('useUserFileStore', () => {
expect(api.storeUserData).not.toHaveBeenCalled()
})
it('should save unmodified files when forced', async () => {
const file = new UserFile('file1.txt', 123, 100)
file.content = 'content'
file.originalContent = 'content'
vi.mocked(api.storeUserData).mockResolvedValue({
status: 200,
json: () => Promise.resolve('file1.txt')
} as Response)
await file.save({ force: true })
expect(api.storeUserData).toHaveBeenCalledWith('file1.txt', 'content', {
throwOnError: true,
full_info: true,
overwrite: true
})
expect(file.lastModified).toBe(123)
expect(file.size).toBe(100)
})
it('should normalize string modified times', async () => {
const file = new UserFile('file1.txt', 123, 100)
file.content = 'modified content'
file.originalContent = 'original content'
vi.mocked(api.storeUserData).mockResolvedValue({
status: 200,
json: () =>
Promise.resolve({ modified: '2024-01-02T03:04:05Z', size: 200 })
} as Response)
await file.save()
expect(file.lastModified).toBe(
new Date('2024-01-02T03:04:05Z').getTime()
)
expect(file.size).toBe(200)
})
it('should fall back when modified time is invalid', async () => {
const dateNow = vi.spyOn(Date, 'now').mockReturnValue(999)
const file = new UserFile('file1.txt', 123, 100)
file.content = 'modified content'
file.originalContent = 'original content'
vi.mocked(api.storeUserData).mockResolvedValue({
status: 200,
json: () => Promise.resolve({ modified: 'bad date', size: 200 })
} as Response)
await file.save()
expect(file.lastModified).toBe(999)
dateNow.mockRestore()
})
})
describe('delete', () => {
@@ -161,6 +242,26 @@ describe('useUserFileStore', () => {
expect(api.deleteUserData).toHaveBeenCalledWith('file1.txt')
})
it('should skip deleting temporary files', async () => {
const file = UserFile.createTemporary('draft.txt')
await file.delete()
expect(api.deleteUserData).not.toHaveBeenCalled()
})
it('should throw when delete fails', async () => {
const file = new UserFile('file1.txt', 123, 100)
vi.mocked(api.deleteUserData).mockResolvedValue({
status: 500,
statusText: 'Server Error'
} as Response)
await expect(file.delete()).rejects.toThrow(
"Failed to delete file 'file1.txt': 500 Server Error"
)
})
})
describe('rename', () => {
@@ -181,6 +282,41 @@ describe('useUserFileStore', () => {
expect(file.lastModified).toBe(456)
expect(file.size).toBe(200)
})
it('should rename temporary files locally', async () => {
const file = UserFile.createTemporary('draft.txt')
await file.rename('renamed.txt')
expect(api.moveUserData).not.toHaveBeenCalled()
expect(file.path).toBe('renamed.txt')
})
it('should throw when rename fails', async () => {
const file = new UserFile('file1.txt', 123, 100)
vi.mocked(api.moveUserData).mockResolvedValue({
status: 409,
statusText: 'Conflict'
} as Response)
await expect(file.rename('newfile.txt')).rejects.toThrow(
"Failed to rename file 'file1.txt': 409 Conflict"
)
})
it('should leave metadata unchanged when rename returns a string', async () => {
const file = new UserFile('file1.txt', 123, 100)
vi.mocked(api.moveUserData).mockResolvedValue({
status: 200,
json: () => Promise.resolve('newfile.txt')
} as Response)
await file.rename('newfile.txt')
expect(file.path).toBe('newfile.txt')
expect(file.lastModified).toBe(123)
expect(file.size).toBe(100)
})
})
describe('saveAs', () => {
@@ -207,6 +343,25 @@ describe('useUserFileStore', () => {
expect(newFile.size).toBe(200)
expect(newFile.content).toBe('file content')
})
it('should save temporary files in place', async () => {
const file = UserFile.createTemporary('draft.txt')
file.content = 'file content'
vi.mocked(api.storeUserData).mockResolvedValue({
status: 200,
json: () => Promise.resolve({ modified: 456, size: 200 })
} as Response)
const newFile = await file.saveAs('newfile.txt')
expect(api.storeUserData).toHaveBeenCalledWith(
'draft.txt',
'file content',
{ throwOnError: true, full_info: true, overwrite: false }
)
expect(newFile).toBe(file)
expect(newFile.path).toBe('draft.txt')
})
})
})
})

View File

@@ -1,61 +1,72 @@
import { createPinia, setActivePinia } from 'pinia'
import { createTestingPinia } from '@pinia/testing'
import { setActivePinia } from 'pinia'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { useUserStore } from './userStore'
const getUserConfig = vi.fn()
const apiMock = vi.hoisted(() => ({
createUser: vi.fn(),
getUserConfig: vi.fn(),
user: undefined as string | undefined
}))
vi.mock('@/scripts/api', () => ({
api: {
getUserConfig: (...args: unknown[]) => getUserConfig(...args)
}
api: apiMock
}))
describe('userStore', () => {
beforeEach(() => {
setActivePinia(createPinia())
getUserConfig.mockReset()
setActivePinia(createTestingPinia({ stubActions: false }))
apiMock.createUser.mockReset()
apiMock.getUserConfig.mockReset()
apiMock.user = undefined
localStorage.clear()
})
describe('initialize', () => {
it('returns an empty user list before initialization', () => {
const store = useUserStore()
expect(store.users).toEqual([])
})
it('fetches user config on first call', async () => {
getUserConfig.mockResolvedValue({})
apiMock.getUserConfig.mockResolvedValue({})
const store = useUserStore()
await store.initialize()
expect(getUserConfig).toHaveBeenCalledTimes(1)
expect(apiMock.getUserConfig).toHaveBeenCalledTimes(1)
expect(store.initialized).toBe(true)
})
it('is a no-op once already initialized', async () => {
getUserConfig.mockResolvedValue({})
apiMock.getUserConfig.mockResolvedValue({})
const store = useUserStore()
await store.initialize()
getUserConfig.mockClear()
apiMock.getUserConfig.mockClear()
await store.initialize()
expect(getUserConfig).not.toHaveBeenCalled()
expect(apiMock.getUserConfig).not.toHaveBeenCalled()
})
it('retries on a subsequent call when the first fetch failed', async () => {
getUserConfig.mockRejectedValueOnce(new Error('network down'))
getUserConfig.mockResolvedValueOnce({})
apiMock.getUserConfig.mockRejectedValueOnce(new Error('network down'))
apiMock.getUserConfig.mockResolvedValueOnce({})
const store = useUserStore()
await expect(store.initialize()).rejects.toThrow('network down')
expect(store.initialized).toBe(false)
await expect(store.initialize()).resolves.toBeUndefined()
expect(getUserConfig).toHaveBeenCalledTimes(2)
expect(apiMock.getUserConfig).toHaveBeenCalledTimes(2)
expect(store.initialized).toBe(true)
})
it('deduplicates concurrent calls before the first fetch resolves', async () => {
let resolveConfig: (value: unknown) => void = () => {}
getUserConfig.mockImplementation(
apiMock.getUserConfig.mockImplementation(
() =>
new Promise((resolve) => {
resolveConfig = resolve
@@ -68,7 +79,100 @@ describe('userStore', () => {
resolveConfig({})
await Promise.all([a, b])
expect(getUserConfig).toHaveBeenCalledTimes(1)
expect(apiMock.getUserConfig).toHaveBeenCalledTimes(1)
})
it('derives multi-user state and restores the current user from storage', async () => {
localStorage['Comfy.userId'] = 'user-2'
apiMock.getUserConfig.mockResolvedValue({
users: { 'user-1': 'Ada', 'user-2': 'Grace' }
})
const store = useUserStore()
await store.initialize()
expect(store.isMultiUserServer).toBe(true)
expect(store.needsLogin).toBe(false)
expect(store.users).toEqual([
{ userId: 'user-1', username: 'Ada' },
{ userId: 'user-2', username: 'Grace' }
])
expect(store.currentUser).toEqual({ userId: 'user-2', username: 'Grace' })
await vi.waitFor(() => expect(apiMock.user).toBe('user-2'))
})
it('requires login on multi-user servers without a stored user', async () => {
apiMock.getUserConfig.mockResolvedValue({
users: { 'user-1': 'Ada' }
})
const store = useUserStore()
await store.initialize()
expect(store.needsLogin).toBe(true)
expect(store.currentUser).toBeNull()
expect(apiMock.user).toBeUndefined()
})
})
describe('createUser', () => {
it('returns the created user id with the requested username', async () => {
apiMock.createUser.mockResolvedValue({
json: () => Promise.resolve('user-1'),
status: 201
})
const store = useUserStore()
await expect(store.createUser('Ada')).resolves.toEqual({
userId: 'user-1',
username: 'Ada'
})
})
it('throws API errors returned by user creation', async () => {
apiMock.createUser.mockResolvedValue({
json: () => Promise.resolve({ error: 'name taken' }),
status: 409,
statusText: 'Conflict'
})
const store = useUserStore()
await expect(store.createUser('Ada')).rejects.toThrow('name taken')
})
it('throws a fallback error when user creation has no error body', async () => {
apiMock.createUser.mockResolvedValue({
json: () => Promise.resolve({}),
status: 500,
statusText: 'Server Error'
})
const store = useUserStore()
await expect(store.createUser('Ada')).rejects.toThrow(
'Error creating user: 500 Server Error'
)
})
})
describe('login/logout', () => {
it('persists login identity and clears it on logout', async () => {
const store = useUserStore()
await store.login({ userId: 'user-1', username: 'Ada' })
expect(localStorage['Comfy.userId']).toBe('user-1')
expect(localStorage['Comfy.userName']).toBe('Ada')
await store.logout()
expect(localStorage['Comfy.userId']).toBeUndefined()
expect(localStorage['Comfy.userName']).toBeUndefined()
})
it('does not set api.user when login happens before user config loads', async () => {
const store = useUserStore()
await store.login({ userId: 'user-1', username: 'Ada' })
expect(apiMock.user).toBeUndefined()
})
})
})

View File

@@ -5,6 +5,10 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
import type { BottomPanelExtension } from '@/types/extensionTypes'
const { mockRegisterCommand } = vi.hoisted(() => ({
mockRegisterCommand: vi.fn()
}))
// Mock dependencies
vi.mock('@/composables/bottomPanelTabs/useShortcutsTab', () => ({
useShortcutsTab: () => [
@@ -44,7 +48,7 @@ vi.mock('@/composables/bottomPanelTabs/useTerminalTabs', () => ({
vi.mock('@/stores/commandStore', () => ({
useCommandStore: () => ({
registerCommand: vi.fn()
registerCommand: mockRegisterCommand
})
}))
@@ -59,6 +63,8 @@ vi.mock('@/platform/distribution/types', () => ({
describe('useBottomPanelStore', () => {
beforeEach(() => {
setActivePinia(createTestingPinia({ stubActions: false }))
mockRegisterCommand.mockClear()
mockData.isDesktop = false
})
it('should initialize with empty panels', () => {
@@ -86,6 +92,39 @@ describe('useBottomPanelStore', () => {
tab
)
expect(store.panels.terminal.activeTabId).toBe('test-tab')
expect(mockRegisterCommand).toHaveBeenCalledWith(
expect.objectContaining({
id: 'Workspace.ToggleBottomPanelTab.test-tab',
label: 'Toggle Test Tab Bottom Panel'
})
)
})
it('uses titleKey and id fallbacks in registered command labels', () => {
const store = useBottomPanelStore()
store.registerBottomPanelTab({
id: 'title-key-tab',
titleKey: 'panel.titleKey',
component: {},
type: 'vue'
})
store.registerBottomPanelTab({
id: 'id-fallback-tab',
component: {},
type: 'vue'
})
expect(mockRegisterCommand).toHaveBeenCalledWith(
expect.objectContaining({
label: 'Toggle panel.titleKey Bottom Panel'
})
)
expect(mockRegisterCommand).toHaveBeenCalledWith(
expect.objectContaining({
label: 'Toggle id-fallback-tab Bottom Panel'
})
)
})
it('should toggle panel visibility', () => {
@@ -114,6 +153,14 @@ describe('useBottomPanelStore', () => {
expect(store.bottomPanelVisible).toBe(false)
})
it('does not open an empty panel', () => {
const store = useBottomPanelStore()
store.togglePanel('terminal')
expect(store.activePanel).toBeNull()
})
it('should switch between panel types', () => {
const store = useBottomPanelStore()
@@ -147,6 +194,31 @@ describe('useBottomPanelStore', () => {
expect(store.activeBottomPanelTab?.id).toBe('shortcuts-tab')
})
it('sets active tab only when a panel is active', () => {
const store = useBottomPanelStore()
store.setActiveTab('missing')
expect(store.activeBottomPanelTabId).toBe('')
store.registerBottomPanelTab({
id: 'first',
title: 'First',
component: {},
type: 'vue',
targetPanel: 'shortcuts'
})
store.registerBottomPanelTab({
id: 'second',
title: 'Second',
component: {},
type: 'vue',
targetPanel: 'shortcuts'
})
store.togglePanel('shortcuts')
store.setActiveTab('second')
expect(store.activeBottomPanelTab?.id).toBe('second')
})
it('should toggle specific tabs', () => {
const store = useBottomPanelStore()
const tab: BottomPanelExtension = {
@@ -168,4 +240,84 @@ describe('useBottomPanelStore', () => {
store.toggleBottomPanelTab('specific-tab')
expect(store.activePanel).toBeNull()
})
it('ignores toggles for unknown bottom panel tabs', () => {
const store = useBottomPanelStore()
store.toggleBottomPanelTab('missing-tab')
expect(store.activePanel).toBeNull()
})
it('toggles terminal when available and shortcuts otherwise', () => {
const store = useBottomPanelStore()
const shortcutsTab: BottomPanelExtension = {
id: 'shortcuts-tab',
title: 'Shortcuts',
component: {},
type: 'vue',
targetPanel: 'shortcuts'
}
const terminalTab: BottomPanelExtension = {
id: 'terminal-tab',
title: 'Terminal',
component: {},
type: 'vue',
targetPanel: 'terminal'
}
store.registerBottomPanelTab(shortcutsTab)
store.toggleBottomPanel()
expect(store.activePanel).toBe('shortcuts')
store.registerBottomPanelTab(terminalTab)
store.toggleBottomPanel()
expect(store.activePanel).toBe('terminal')
})
it('registers extension bottom panel tabs when present', () => {
const store = useBottomPanelStore()
store.registerExtensionBottomPanelTabs({
name: 'extension',
bottomPanelTabs: [
{
id: 'extension-tab',
title: 'Extension',
component: {},
type: 'vue',
targetPanel: 'shortcuts'
}
]
})
expect(store.panels.shortcuts.tabs.map((tab) => tab.id)).toEqual([
'extension-tab'
])
})
it('ignores extensions without bottom panel tabs', () => {
const store = useBottomPanelStore()
store.registerExtensionBottomPanelTabs({ name: 'extension' })
expect(store.panels.shortcuts.tabs).toHaveLength(0)
expect(store.panels.terminal.tabs).toHaveLength(0)
})
it('registers core tabs including desktop command terminal', async () => {
mockData.isDesktop = true
const store = useBottomPanelStore()
await store.registerCoreBottomPanelTabs()
expect(store.panels.shortcuts.tabs.map((tab) => tab.id)).toEqual([
'shortcuts-essentials',
'shortcuts-view-controls'
])
expect(store.panels.terminal.tabs.map((tab) => tab.id)).toEqual([
'logs',
'command'
])
})
})

View File

@@ -0,0 +1,108 @@
import { createTestingPinia } from '@pinia/testing'
import { setActivePinia } from 'pinia'
import { beforeEach, describe, expect, it } from 'vitest'
import {
CORE_COLOR_PALETTES,
DEFAULT_DARK_COLOR_PALETTE,
DEFAULT_LIGHT_COLOR_PALETTE
} from '@/constants/coreColorPalettes'
import type { Palette } from '@/schemas/colorPaletteSchema'
import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
function createPalette(overrides: Partial<Palette> = {}): Palette {
return {
id: 'custom',
name: 'Custom',
colors: {
node_slot: {},
litegraph_base: {},
comfy_base: {}
},
...overrides
}
}
describe('useColorPaletteStore', () => {
beforeEach(() => {
setActivePinia(createTestingPinia({ stubActions: false }))
})
it('adds and deletes custom palettes', () => {
const store = useColorPaletteStore()
const palette = createPalette()
store.addCustomPalette(palette)
expect(store.isCustomPalette('custom')).toBe(true)
expect(store.activePaletteId).toBe('custom')
expect(store.palettesLookup.custom).toStrictEqual(palette)
store.deleteCustomPalette('custom')
expect(store.isCustomPalette('custom')).toBe(false)
expect(store.activePaletteId).toBe(CORE_COLOR_PALETTES.dark.id)
})
it('rejects duplicate and missing custom palette operations', () => {
const store = useColorPaletteStore()
expect(() =>
store.addCustomPalette(
createPalette({
id: CORE_COLOR_PALETTES.dark.id
})
)
).toThrow(`Palette with id ${CORE_COLOR_PALETTES.dark.id} already exists`)
expect(() => store.deleteCustomPalette('missing')).toThrow(
'Palette with id missing does not exist'
)
})
it('completes dark palettes and mirrors menu background when secondary is missing', () => {
const store = useColorPaletteStore()
const completed = store.completePalette(
createPalette({
colors: {
node_slot: {},
litegraph_base: {},
comfy_base: {
'comfy-menu-bg': '#101010'
}
}
})
)
expect(completed.colors.comfy_base['comfy-menu-secondary-bg']).toBe(
'#101010'
)
expect(completed.colors.node_slot.CLIP).toBe(
DEFAULT_DARK_COLOR_PALETTE.colors.node_slot.CLIP
)
})
it('completes light palettes without overwriting an existing secondary menu background', () => {
const store = useColorPaletteStore()
const completed = store.completePalette(
createPalette({
light_theme: true,
colors: {
node_slot: {},
litegraph_base: {},
comfy_base: {
'comfy-menu-bg': '#ffffff',
'comfy-menu-secondary-bg': '#eeeeee'
}
}
})
)
expect(completed.colors.comfy_base['comfy-menu-secondary-bg']).toBe(
'#eeeeee'
)
expect(completed.colors.node_slot.CLIP).toBe(
DEFAULT_LIGHT_COLOR_PALETTE.colors.node_slot.CLIP
)
})
})

View File

@@ -0,0 +1,302 @@
import { createPinia, setActivePinia } from 'pinia'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { LGraphNode } from '@/lib/litegraph/src/litegraph'
import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
import { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
import { toNodeId } from '@/types/nodeId'
const { mockState } = vi.hoisted(() => ({
mockState: {
graph: null as { extra: Record<string, unknown> } | null,
nodes: {} as Record<string, unknown>,
setDirty: vi.fn()
}
}))
vi.mock('@/scripts/app', () => ({
app: {
get rootGraph() {
return mockState.graph
}
}
}))
vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
useWorkflowStore: () => ({
activeWorkflow: undefined,
nodeToNodeLocatorId: (node: { id: unknown }) => String(node.id),
nodeIdToNodeLocatorId: (id: unknown) => String(id)
})
}))
vi.mock('@/renderer/core/canvas/canvasStore', () => ({
useCanvasStore: () => ({ canvas: { setDirty: mockState.setDirty } })
}))
vi.mock('@/utils/graphTraversalUtil', () => ({
getNodeByLocatorId: (_graph: unknown, id: string) =>
mockState.nodes[id] ?? null
}))
vi.mock('@/utils/nodeTitleUtil', () => ({
resolveNodeDisplayName: (node: { title?: string }) => node.title ?? 'Node'
}))
vi.mock('@/i18n', () => ({
st: (_key: string, fallback: string) => fallback
}))
interface FakeWidget {
name: string
label?: string
}
function makeWidget({ name, label }: FakeWidget): IBaseWidget {
return {
name,
label,
options: {},
type: 'number',
y: 0
} as IBaseWidget
}
function makeNode(id: number, widgets: FakeWidget[] = [], title = 'My Node') {
const node = new LGraphNode(title)
node.id = toNodeId(id)
node.title = title
node.widgets = widgets.map(makeWidget)
return node
}
function registerNode(node: { id: unknown }) {
mockState.nodes[String(node.id)] = node
}
beforeEach(() => {
setActivePinia(createPinia())
mockState.graph = { extra: {} }
mockState.nodes = {}
mockState.setDirty = vi.fn()
})
describe('favoritedWidgetsStore', () => {
it('adds a favorite, marks workflow dirty, and persists to graph.extra', () => {
const store = useFavoritedWidgetsStore()
const node = makeNode(1, [{ name: 'seed' }])
registerNode(node)
store.addFavorite(node, 'seed')
expect(store.isFavorited(node, 'seed')).toBe(true)
expect(mockState.setDirty).toHaveBeenCalledWith(true, true)
expect(mockState.graph?.extra.favoritedWidgets).toEqual({
favorites: [{ nodeLocatorId: '1', widgetName: 'seed' }]
})
})
it('does not add the same favorite twice', () => {
const store = useFavoritedWidgetsStore()
const node = makeNode(1, [{ name: 'seed' }])
registerNode(node)
store.addFavorite(node, 'seed')
const persisted = structuredClone(mockState.graph?.extra.favoritedWidgets)
const dirtyCalls = mockState.setDirty.mock.calls.length
store.addFavorite(node, 'seed')
expect(store.favoritedWidgets).toHaveLength(1)
expect(mockState.graph?.extra.favoritedWidgets).toEqual(persisted)
expect(mockState.setDirty).toHaveBeenCalledTimes(dirtyCalls)
})
it('removes a favorite and treats removing an absent one as a no-op', () => {
const store = useFavoritedWidgetsStore()
const node = makeNode(1, [{ name: 'seed' }])
registerNode(node)
store.addFavorite(node, 'seed')
const persisted = structuredClone(mockState.graph?.extra.favoritedWidgets)
const dirtyCalls = mockState.setDirty.mock.calls.length
store.removeFavorite(node, 'missing')
expect(store.isFavorited(node, 'seed')).toBe(true)
expect(mockState.graph?.extra.favoritedWidgets).toEqual(persisted)
expect(mockState.setDirty).toHaveBeenCalledTimes(dirtyCalls)
store.removeFavorite(node, 'seed')
expect(store.isFavorited(node, 'seed')).toBe(false)
})
it('toggles favorite state in both directions', () => {
const store = useFavoritedWidgetsStore()
const node = makeNode(1, [{ name: 'seed' }])
registerNode(node)
store.toggleFavorite(node, 'seed')
expect(store.isFavorited(node, 'seed')).toBe(true)
store.toggleFavorite(node, 'seed')
expect(store.isFavorited(node, 'seed')).toBe(false)
})
it('resolves a valid favorite to a node/widget with a composed label', () => {
const store = useFavoritedWidgetsStore()
const node = makeNode(7, [{ name: 'cfg', label: 'CFG Scale' }], 'KSampler')
registerNode(node)
store.addFavorite(node, 'cfg')
const [resolved] = store.favoritedWidgets
expect(resolved.label).toBe('KSampler / CFG Scale')
expect(store.validFavoritedWidgets).toHaveLength(1)
})
it('labels favorites whose node was deleted and excludes them from valid', () => {
const store = useFavoritedWidgetsStore()
const node = makeNode(2, [{ name: 'seed' }])
registerNode(node)
store.addFavorite(node, 'seed')
delete mockState.nodes['2']
expect(store.favoritedWidgets[0].label).toContain('(node deleted)')
expect(store.validFavoritedWidgets).toHaveLength(0)
})
it('labels favorites whose widget no longer exists', () => {
const store = useFavoritedWidgetsStore()
const node = makeNode(3, [{ name: 'seed' }])
registerNode(node)
store.addFavorite(node, 'seed')
mockState.nodes['3'] = makeNode(3, [], 'My Node')
expect(store.favoritedWidgets[0].label).toContain('(widget not found)')
})
it('prunes invalid favorites while keeping valid ones', () => {
const store = useFavoritedWidgetsStore()
const valid = makeNode(1, [{ name: 'seed' }])
const stale = makeNode(2, [{ name: 'steps' }])
registerNode(valid)
registerNode(stale)
store.addFavorite(valid, 'seed')
store.addFavorite(stale, 'steps')
delete mockState.nodes['2']
store.pruneInvalidFavorites()
expect(store.favoritedWidgets).toHaveLength(1)
expect(store.isFavorited(valid, 'seed')).toBe(true)
})
it('reorders favorites to match the provided order', () => {
const store = useFavoritedWidgetsStore()
const a = makeNode(1, [{ name: 'seed' }])
const b = makeNode(2, [{ name: 'steps' }])
registerNode(a)
registerNode(b)
store.addFavorite(a, 'seed')
store.addFavorite(b, 'steps')
store.reorderFavorites([...store.validFavoritedWidgets].reverse())
expect(store.favoritedWidgets.map((fw) => fw.nodeLocatorId)).toEqual([
'2',
'1'
])
})
it('clears all favorites', () => {
const store = useFavoritedWidgetsStore()
const node = makeNode(1, [{ name: 'seed' }])
registerNode(node)
store.addFavorite(node, 'seed')
store.clearFavorites()
expect(store.favoritedWidgets).toHaveLength(0)
})
it('loads favorites from graph.extra on init, normalizing legacy nodeId entries', () => {
mockState.graph = {
extra: {
favoritedWidgets: {
favorites: [
{ nodeLocatorId: '1', widgetName: 'seed' },
{ nodeId: 2, widgetName: 'steps' },
{ widgetName: 'no-node' }
]
}
}
}
registerNode(makeNode(1, [{ name: 'seed' }]))
registerNode(makeNode(2, [{ name: 'steps' }]))
const store = useFavoritedWidgetsStore()
expect(store.favoritedWidgets.map((fw) => fw.nodeLocatorId)).toEqual([
'1',
'2'
])
})
it('ignores malformed favorites when loading from graph.extra', () => {
mockState.graph = {
extra: {
favoritedWidgets: {
favorites: [
{ nodeLocatorId: '1', widgetName: 'seed' },
{ nodeLocatorId: 'bad:locator', widgetName: 'bad-locator' },
{ nodeLocatorId: 42, widgetName: 'number-locator' },
{ nodeLocatorId: '2', widgetName: '' },
{ nodeId: '', widgetName: 'bad-node' },
null,
{ widgetName: 'missing-node' }
]
}
}
}
registerNode(makeNode(1, [{ name: 'seed' }]))
const store = useFavoritedWidgetsStore()
expect(store.favoritedWidgets.map((fw) => fw.nodeLocatorId)).toEqual(['1'])
})
it('loads an empty list when the graph is not available', () => {
mockState.graph = null
const store = useFavoritedWidgetsStore()
expect(store.favoritedWidgets).toHaveLength(0)
})
it('does not save when pruning already valid favorites', () => {
const store = useFavoritedWidgetsStore()
const node = makeNode(1, [{ name: 'seed' }])
registerNode(node)
store.addFavorite(node, 'seed')
const dirtyCalls = mockState.setDirty.mock.calls.length
store.pruneInvalidFavorites()
expect(store.favoritedWidgets).toHaveLength(1)
expect(mockState.setDirty).toHaveBeenCalledTimes(dirtyCalls)
})
it('labels existing favorites when the graph is not loaded', () => {
const node = makeNode(1, [{ name: 'seed' }])
registerNode(node)
const store = useFavoritedWidgetsStore()
store.addFavorite(node, 'seed')
mockState.graph = null
expect(store.favoritedWidgets[0].label).toContain('(graph not loaded)')
store.clearFavorites()
expect(store.favoritedWidgets).toHaveLength(0)
})
})

View File

@@ -5,12 +5,21 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
const { mockGetSetting, mockRegisterCommand, mockRegisterCommands } =
vi.hoisted(() => ({
mockGetSetting: vi.fn(),
mockRegisterCommand: vi.fn(),
mockRegisterCommands: vi.fn()
}))
const {
mockCommands,
mockGetSetting,
mockRegisterCommand,
mockRegisterCommands,
mockT,
mockTe
} = vi.hoisted(() => ({
mockCommands: [] as Array<{ id: string; function?: () => void }>,
mockGetSetting: vi.fn(),
mockRegisterCommand: vi.fn(),
mockRegisterCommands: vi.fn(),
mockT: vi.fn((key: string) => `translated:${key}`),
mockTe: vi.fn((_key: string) => false)
}))
vi.mock('@/platform/settings/settingStore', () => ({
useSettingStore: () => ({
@@ -21,7 +30,7 @@ vi.mock('@/platform/settings/settingStore', () => ({
vi.mock('@/stores/commandStore', () => ({
useCommandStore: () => ({
registerCommand: mockRegisterCommand,
commands: []
commands: mockCommands
})
}))
@@ -32,8 +41,8 @@ vi.mock('@/stores/menuItemStore', () => ({
}))
vi.mock('@/i18n', () => ({
t: (key: string) => key,
te: () => false
t: mockT,
te: mockTe
}))
vi.mock('@/composables/sidebarTabs/useAssetsSidebarTab', () => ({
@@ -96,7 +105,11 @@ vi.mock('@/platform/workflow/management/composables/useAppsSidebarTab', () => ({
describe('useSidebarTabStore', () => {
beforeEach(() => {
setActivePinia(createTestingPinia({ stubActions: false }))
mockCommands.length = 0
mockGetSetting.mockReset()
mockT.mockClear()
mockTe.mockReset()
mockTe.mockReturnValue(false)
mockRegisterCommand.mockClear()
mockRegisterCommands.mockClear()
})
@@ -120,6 +133,22 @@ describe('useSidebarTabStore', () => {
expect(mockRegisterCommand).toHaveBeenCalledTimes(6)
})
it('removes the job history tab when QPO V2 is toggled off', async () => {
const qpoV2Enabled = ref(true)
mockGetSetting.mockImplementation((key: string) =>
key === 'Comfy.Queue.QPOV2' ? qpoV2Enabled.value : undefined
)
const store = useSidebarTabStore()
store.registerCoreSidebarTabs()
expect(store.sidebarTabs[0].id).toBe('job-history')
qpoV2Enabled.value = false
await nextTick()
expect(store.sidebarTabs.map((tab) => tab.id)).not.toContain('job-history')
})
it('does not register the job history tab when QPO V2 is disabled', () => {
mockGetSetting.mockImplementation((key: string) =>
key === 'Comfy.Queue.QPOV2' ? false : undefined
@@ -160,4 +189,96 @@ describe('useSidebarTabStore', () => {
])
expect(mockRegisterCommand).toHaveBeenCalledTimes(6)
})
it('registers command metadata and toggles a custom sidebar tab', async () => {
mockTe.mockImplementation((key: string) => key === 'custom.title')
const store = useSidebarTabStore()
store.registerSidebarTab({
id: 'custom',
title: 'custom.title',
tooltip: 'custom.tooltip',
icon: { render: () => null },
type: 'vue',
component: {}
})
const command = mockRegisterCommand.mock.calls[0][0]
expect(command.icon).toBeUndefined()
expect(command.label()).toBe('Toggle translated:custom.title Sidebar')
expect(command.tooltip).toBe('custom.tooltip')
expect(command.menubarLabel()).toBe('custom.title')
await command.function()
expect(store.activeSidebarTabId).toBe('custom')
expect(command.active()).toBe(true)
await command.function()
expect(store.activeSidebarTabId).toBeNull()
})
it('uses translated menubar labels for known core tabs', () => {
mockTe.mockImplementation((key: string) => key === 'sideToolbar.assets')
const store = useSidebarTabStore()
store.registerSidebarTab({
id: 'assets',
title: 'assets',
type: 'vue',
component: {}
})
const command = mockRegisterCommand.mock.calls[0][0]
expect(command.menubarLabel()).toBe('translated:sideToolbar.assets')
})
it('delegates model library command to BrowseModelAssets when asset API is enabled', async () => {
const browseModelAssets = vi.fn()
mockCommands.push({
id: 'Comfy.BrowseModelAssets',
function: browseModelAssets
})
mockGetSetting.mockImplementation((key: string) =>
key === 'Comfy.Assets.UseAssetAPI' ? true : undefined
)
const store = useSidebarTabStore()
store.registerSidebarTab({
id: 'model-library',
title: 'Models',
type: 'vue',
component: {}
})
const command = mockRegisterCommand.mock.calls[0][0]
await command.function()
expect(browseModelAssets).toHaveBeenCalledOnce()
expect(store.activeSidebarTabId).toBeNull()
})
it('destroys custom tabs and clears active state on unregister', () => {
const destroy = vi.fn()
const store = useSidebarTabStore()
store.registerSidebarTab({
id: 'custom',
title: 'Custom',
type: 'custom',
render: vi.fn(),
destroy
})
store.toggleSidebarTab('custom')
store.unregisterSidebarTab('custom')
expect(destroy).toHaveBeenCalledOnce()
expect(store.sidebarTabs).toHaveLength(0)
expect(store.activeSidebarTabId).toBeNull()
})
it('ignores unregister requests for missing tabs', () => {
const store = useSidebarTabStore()
store.unregisterSidebarTab('missing')
expect(store.sidebarTabs).toHaveLength(0)
})
})

View File

@@ -0,0 +1,115 @@
import { createTestingPinia } from '@pinia/testing'
import { setActivePinia } from 'pinia'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { useWorkspaceStore } from '@/stores/workspaceStore'
const storeMocks = vi.hoisted(() => ({
apiKeyAuthStore: {
isAuthenticated: false
},
authStore: {
currentUser: null as null | { uid: string }
},
commandStore: {
commands: [],
execute: vi.fn()
},
executionErrorStore: {
lastExecutionError: null,
lastNodeErrors: null
},
queueSettingsStore: {},
settingStore: {
settingsById: {},
get: vi.fn(),
set: vi.fn()
},
sidebarTabStore: {
registerSidebarTab: vi.fn(),
unregisterSidebarTab: vi.fn(),
sidebarTabs: []
},
toastStore: {},
workflowStore: {}
}))
vi.mock('@vueuse/core', () => ({
useMagicKeys: () => ({ shift: false })
}))
vi.mock('@/platform/settings/settingStore', () => ({
useSettingStore: () => storeMocks.settingStore
}))
vi.mock('@/platform/updates/common/toastStore', () => ({
useToastStore: () => storeMocks.toastStore
}))
vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
useWorkflowStore: () => storeMocks.workflowStore
}))
vi.mock('@/services/colorPaletteService', () => ({
useColorPaletteService: () => ({})
}))
vi.mock('@/services/dialogService', () => ({
useDialogService: () => ({})
}))
vi.mock('@/stores/apiKeyAuthStore', () => ({
useApiKeyAuthStore: () => storeMocks.apiKeyAuthStore
}))
vi.mock('@/stores/authStore', () => ({
useAuthStore: () => storeMocks.authStore
}))
vi.mock('@/stores/commandStore', () => ({
useCommandStore: () => storeMocks.commandStore
}))
vi.mock('@/stores/executionErrorStore', () => ({
useExecutionErrorStore: () => storeMocks.executionErrorStore
}))
vi.mock('@/stores/queueStore', () => ({
useQueueSettingsStore: () => storeMocks.queueSettingsStore
}))
vi.mock('@/stores/workspace/bottomPanelStore', () => ({
useBottomPanelStore: () => ({})
}))
vi.mock('@/stores/workspace/sidebarTabStore', () => ({
useSidebarTabStore: () => storeMocks.sidebarTabStore
}))
describe('useWorkspaceStore', () => {
beforeEach(() => {
setActivePinia(createTestingPinia({ stubActions: false }))
storeMocks.apiKeyAuthStore.isAuthenticated = false
storeMocks.authStore.currentUser = null
})
it('reports logged out when neither auth source is active', () => {
const store = useWorkspaceStore()
expect(store.user.isLoggedIn).toBe(false)
})
it('reports logged in for API-key auth', () => {
storeMocks.apiKeyAuthStore.isAuthenticated = true
const store = useWorkspaceStore()
expect(store.user.isLoggedIn).toBe(true)
})
it('reports logged in for Firebase auth', () => {
storeMocks.authStore.currentUser = { uid: 'user-1' }
const store = useWorkspaceStore()
expect(store.user.isLoggedIn).toBe(true)
})
})

View File

@@ -9,7 +9,6 @@ import { computed, useTemplateRef } from 'vue'
import AppBuilder from '@/components/builder/AppBuilder.vue'
import AppModeToolbar from '@/components/appMode/AppModeToolbar.vue'
import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
import ErrorOverlay from '@/components/error/ErrorOverlay.vue'
import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
import TopbarSubscribeButton from '@/components/topbar/TopbarSubscribeButton.vue'
import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
@@ -165,7 +164,6 @@ function dragDrop(e: DragEvent) {
</div>
<div ref="bottomLeftRef" class="absolute bottom-7 left-4 z-20" />
<div ref="bottomRightRef" class="absolute right-4 bottom-7 z-20" />
<div class="absolute top-4 right-4 z-20"><ErrorOverlay app-mode /></div>
</SplitterPanel>
<SplitterPanel
v-if="hasRightPanel"