@octane-xplat/ui 0.7.2 → 0.9.0

package/src/refresh.web.test.ts

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { createPullToRefresh } from './refresh.web';
-import { REFRESH_HEADER_HEIGHT } from './refresh-metrics';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createPullToRefresh } from './refresh.web'
+import { REFRESH_HEADER_HEIGHT } from './refresh-metrics'
 
 // Unit-level check of the web pull-to-refresh state machine: synthetic
 // pointer events drive the controller, assertions read the composed
@@ -10,102 +10,102 @@ import { REFRESH_HEADER_HEIGHT } from './refresh-metrics';
 // handlers read.
 
 function host() {
-	const wrapper = document.createElement('div');
-	const scroller = document.createElement('div');
-	const indicator = document.createElement('div');
-	wrapper.appendChild(indicator);
-	wrapper.appendChild(scroller);
-	document.body.appendChild(wrapper);
-	return { wrapper, scroller, indicator };
+	const wrapper = document.createElement('div')
+	const scroller = document.createElement('div')
+	const indicator = document.createElement('div')
+	wrapper.appendChild(indicator)
+	wrapper.appendChild(scroller)
+	document.body.appendChild(wrapper)
+	return { wrapper, scroller, indicator }
 }
 
 function pointer(type: string, y: number) {
-	const e = new Event(type, { cancelable: true, bubbles: true });
-	Object.assign(e, { pointerType: 'mouse', clientY: y, button: 0 });
-	return e;
+	const e = new Event(type, { cancelable: true, bubbles: true })
+	Object.assign(e, { pointerType: 'mouse', clientY: y, button: 0 })
+	return e
 }
 
-const ty = (el: HTMLElement) => el.style.transform;
+const ty = (el: HTMLElement) => el.style.transform
 
 describe('createPullToRefresh (web)', () => {
 	beforeEach(() => {
-		vi.useFakeTimers();
-	});
+		vi.useFakeTimers()
+	})
 
 	afterEach(() => {
-		vi.useRealTimers();
-		document.body.innerHTML = '';
-	});
+		vi.useRealTimers()
+		document.body.innerHTML = ''
+	})
 
 	it('tracks a sub-threshold drag and resets on release', () => {
-		const { scroller, indicator } = host();
-		const cfg = { current: { onRefresh: vi.fn() } };
-		const ctl = createPullToRefresh({ scroller, indicator, cfg });
+		const { scroller, indicator } = host()
+		const cfg = { current: { onRefresh: vi.fn() } }
+		const ctl = createPullToRefresh({ scroller, indicator, cfg })
 
-		scroller.dispatchEvent(pointer('pointerdown', 100));
-		scroller.dispatchEvent(pointer('pointermove', 180));
+		scroller.dispatchEvent(pointer('pointerdown', 100))
+		scroller.dispatchEvent(pointer('pointermove', 180))
 		// damped: 80 * 0.5 = 40
-		expect(ty(scroller)).toContain('translateY(40px)');
-		expect(ty(indicator)).toContain(`translateY(${40 - REFRESH_HEADER_HEIGHT}px)`);
+		expect(ty(scroller)).toContain('translateY(40px)')
+		expect(ty(indicator)).toContain(`translateY(${40 - REFRESH_HEADER_HEIGHT}px)`)
 
-		scroller.dispatchEvent(pointer('pointerup', 180));
-		expect(cfg.current.onRefresh).not.toHaveBeenCalled();
-		expect(ty(scroller)).toContain('translateY(0px)');
-		ctl.detach();
-	});
+		scroller.dispatchEvent(pointer('pointerup', 180))
+		expect(cfg.current.onRefresh).not.toHaveBeenCalled()
+		expect(ty(scroller)).toContain('translateY(0px)')
+		ctl.detach()
+	})
 
 	it('fires onRefresh and docks past the threshold; refreshless release collapses after grace', () => {
-		const { scroller, indicator } = host();
-		const cfg = { current: { onRefresh: vi.fn(), refreshing: false } };
-		const ctl = createPullToRefresh({ scroller, indicator, cfg });
+		const { scroller, indicator } = host()
+		const cfg = { current: { onRefresh: vi.fn(), refreshing: false } }
+		const ctl = createPullToRefresh({ scroller, indicator, cfg })
 
-		scroller.dispatchEvent(pointer('pointerdown', 100));
-		scroller.dispatchEvent(pointer('pointermove', 320));
-		scroller.dispatchEvent(pointer('pointerup', 320));
+		scroller.dispatchEvent(pointer('pointerdown', 100))
+		scroller.dispatchEvent(pointer('pointermove', 320))
+		scroller.dispatchEvent(pointer('pointerup', 320))
 		// 220 * 0.5 = 110 >= 64 → docked
-		expect(cfg.current.onRefresh).toHaveBeenCalledTimes(1);
-		expect(ty(scroller)).toContain(`translateY(${REFRESH_HEADER_HEIGHT}px)`);
-		expect(ty(indicator)).toContain('translateY(0px)');
+		expect(cfg.current.onRefresh).toHaveBeenCalledTimes(1)
+		expect(ty(scroller)).toContain(`translateY(${REFRESH_HEADER_HEIGHT}px)`)
+		expect(ty(indicator)).toContain('translateY(0px)')
 
 		// refreshing never arrives → grace collapse
-		vi.advanceTimersByTime(400);
-		expect(ty(scroller)).toContain('translateY(0px)');
-		ctl.detach();
-	});
+		vi.advanceTimersByTime(400)
+		expect(ty(scroller)).toContain('translateY(0px)')
+		ctl.detach()
+	})
 
 	it('refreshing keeps the dock; sync(false) collapses', () => {
-		const { scroller, indicator } = host();
-		const cfg = { current: { onRefresh: vi.fn(), refreshing: false } };
-		const ctl = createPullToRefresh({ scroller, indicator, cfg });
-
-		scroller.dispatchEvent(pointer('pointerdown', 100));
-		scroller.dispatchEvent(pointer('pointermove', 320));
-		cfg.current.refreshing = true;
-		ctl.sync();
-		scroller.dispatchEvent(pointer('pointerup', 320));
-		expect(cfg.current.onRefresh).toHaveBeenCalledTimes(1);
-
-		vi.advanceTimersByTime(400);
-		expect(ty(scroller)).toContain(`translateY(${REFRESH_HEADER_HEIGHT}px)`);
-
-		cfg.current.refreshing = false;
-		ctl.sync();
-		expect(ty(scroller)).toContain('translateY(0px)');
-		expect(ty(indicator)).toContain(`translateY(${-REFRESH_HEADER_HEIGHT}px)`);
-		ctl.detach();
-	});
+		const { scroller, indicator } = host()
+		const cfg = { current: { onRefresh: vi.fn(), refreshing: false } }
+		const ctl = createPullToRefresh({ scroller, indicator, cfg })
+
+		scroller.dispatchEvent(pointer('pointerdown', 100))
+		scroller.dispatchEvent(pointer('pointermove', 320))
+		cfg.current.refreshing = true
+		ctl.sync()
+		scroller.dispatchEvent(pointer('pointerup', 320))
+		expect(cfg.current.onRefresh).toHaveBeenCalledTimes(1)
+
+		vi.advanceTimersByTime(400)
+		expect(ty(scroller)).toContain(`translateY(${REFRESH_HEADER_HEIGHT}px)`)
+
+		cfg.current.refreshing = false
+		ctl.sync()
+		expect(ty(scroller)).toContain('translateY(0px)')
+		expect(ty(indicator)).toContain(`translateY(${-REFRESH_HEADER_HEIGHT}px)`)
+		ctl.detach()
+	})
 
 	it('ignores drags that start below the top edge', () => {
-		const { scroller } = host();
-		Object.defineProperty(scroller, 'scrollTop', { value: 30, writable: true });
-		const cfg = { current: { onRefresh: vi.fn() } };
-		const ctl = createPullToRefresh({ scroller, indicator: document.createElement('div'), cfg });
-
-		scroller.dispatchEvent(pointer('pointerdown', 100));
-		scroller.dispatchEvent(pointer('pointermove', 320));
-		scroller.dispatchEvent(pointer('pointerup', 320));
-		expect(cfg.current.onRefresh).not.toHaveBeenCalled();
-		expect(ty(scroller)).toBe('');
-		ctl.detach();
-	});
-});
+		const { scroller } = host()
+		Object.defineProperty(scroller, 'scrollTop', { value: 30, writable: true })
+		const cfg = { current: { onRefresh: vi.fn() } }
+		const ctl = createPullToRefresh({ scroller, indicator: document.createElement('div'), cfg })
+
+		scroller.dispatchEvent(pointer('pointerdown', 100))
+		scroller.dispatchEvent(pointer('pointermove', 320))
+		scroller.dispatchEvent(pointer('pointerup', 320))
+		expect(cfg.current.onRefresh).not.toHaveBeenCalled()
+		expect(ty(scroller)).toBe('')
+		ctl.detach()
+	})
+})

package/src/route-android.test.ts

@@ -0,0 +1,162 @@
+import { beforeEach, expect, it, vi } from 'vitest'
+import { defineRoutes } from './route-table'
+const native = vi.hoisted(() => {
+	class View {
+		isLoaded = true
+		frame: any
+		actionBar = { title: '' }
+		modal: any = null
+		closeCallback: (() => void) | undefined
+		showModal(host: any, options: any) {
+			this.modal = host
+			host.closeCallback = () => {
+				this.modal = null
+				options.closeCallback()
+			}
+		}
+		closeModal() {
+			this.closeCallback?.()
+		}
+	}
+
+	class Frame extends View {
+		currentPage: any = new View()
+		backStack: any[] = []
+		listeners = new Map<string, () => void>()
+		constructor() {
+			super()
+			this.currentPage.frame = this
+		}
+		on(name: string, cb: () => void) {
+			this.listeners.set(name, cb)
+		}
+		navigate({ create }: any) {
+			this.backStack.push(this.currentPage)
+			this.currentPage = create()
+			this.currentPage.frame = this
+			this.listeners.get('navigatedTo')?.()
+		}
+		goBack() {
+			if (this.backStack.length) {
+				this.currentPage = this.backStack.pop()
+			}
+
+			this.listeners.get('navigatedTo')?.()
+		}
+		callLoaded() {
+			this.isLoaded = true
+		}
+	}
+
+	const events = new Map<string, (event: any) => void>()
+	const app: any = {
+		android: { on: (name: string, cb: any) => events.set(name, cb) },
+		AndroidApplication: { activityBackPressedEvent: 'back' },
+		getRootView: () => null,
+	}
+
+	return { View, Frame, app, events, roots: [] as any[] }
+})
+
+vi.mock('@nativescript/core', () => ({
+	Application: native.app,
+	Frame: native.Frame,
+	Page: native.View,
+	GridLayout: native.View,
+}))
+
+vi.mock('octane', () => ({ useSyncExternalStore: vi.fn(), hookSlots: vi.fn() }))
+vi.mock('@nativescript-community/octane', () => ({
+	createNativeScriptRoot: (host: any) => {
+		const root = { host, render: vi.fn(), unmount: vi.fn() }
+		native.roots.push(root)
+		return root
+	},
+}))
+
+vi.mock('./route-host.mobile', () => ({ RouteHost: () => null }))
+vi.mock('./stacks', async () => import('./stacks.ts'))
+let router: typeof import('./route')
+let stacks: typeof import('./stacks')
+let frame: InstanceType<typeof native.Frame>
+beforeEach(async () => {
+	vi.resetModules()
+	delete native.app.__octaneXplatBackWired
+	delete native.app.__octaneXplatBackPress
+	native.events.clear()
+	native.roots.length = 0
+	router = await import('./route.ts')
+	stacks = await import('./stacks.ts')
+	frame = new native.Frame()
+	stacks.registerStack('root', frame as any)
+	router.registerRoutes(defineRoutes([{ path: 'detail', screen: () => null }]))
+})
+
+const push = (stack: string, id: string, presentation?: 'modal') =>
+	router.pushRoute({ stack, name: 'detail', params: { id }, presentation })
+
+const back = () => {
+	const event = { cancel: false }
+	native.events.get('back')!(event)
+	return event.cancel
+}
+
+it('uses route arrays even when Android has a registered named Frame', () => {
+	const named = new native.Frame()
+	stacks.registerStack('first', named as any)
+	push('first', 'one')
+	push('first', 'two')
+	expect(named.backStack).toHaveLength(0)
+	expect(router.routeFor('first')?.params.id).toBe('two')
+	router.popRoute('first')
+	expect(router.routeFor('first')?.params.id).toBe('one')
+})
+
+it('orders interceptors then modal, root, latest named stack and base fall-through', () => {
+	push('first', 'one')
+	push('second', 'two')
+	push('root', 'root')
+	push('root', 'modal', 'modal')
+	const calls: string[] = []
+	const older = router.addBackInterceptor(() => {
+		calls.push('old')
+		return false
+	})
+
+	const newest = router.addBackInterceptor(() => {
+		calls.push('new')
+		return true
+	})
+
+	expect(back()).toBe(true)
+	expect(calls).toEqual(['new'])
+	newest()
+	expect(back()).toBe(true)
+	expect(calls).toEqual(['new', 'old'])
+	expect(router.currentModalRoute()).toBeNull()
+	expect(router.routeFor('root')?.params.id).toBe('root')
+	older()
+	expect(back()).toBe(true)
+	expect(router.routeFor('root')).toBeNull()
+	expect(back()).toBe(true)
+	expect(router.routeFor('second')).toBeNull()
+	expect(router.routeFor('first')?.params.id).toBe('one')
+	expect(back()).toBe(true)
+	expect(back()).toBe(false)
+})
+
+it('unmounts the separate modal root exactly once when dismissed', () => {
+	push('root', 'modal', 'modal')
+	const modalRoot = native.roots.at(-1)
+	router.popRoute()
+	expect(modalRoot.unmount).toHaveBeenCalledTimes(1)
+	expect(router.currentModalRoute()).toBeNull()
+})
+
+it('unmounts when the modal host invokes its close callback', () => {
+	push('root', 'modal', 'modal')
+	const modalRoot = native.roots.at(-1)
+	modalRoot.host.closeModal()
+	expect(modalRoot.unmount).toHaveBeenCalledTimes(1)
+	expect(router.currentModalRoute()).toBeNull()
+})

package/src/route-history.web.test.ts

@@ -0,0 +1,80 @@
+// @vitest-environment jsdom
+import { beforeEach, expect, it, vi } from 'vitest'
+import { defineRoutes } from './route-table'
+vi.mock('octane', () => ({ useSyncExternalStore: vi.fn() }))
+
+let router: typeof import('./route.web')
+beforeEach(async () => {
+	vi.resetModules()
+	vi.spyOn(window, 'scrollTo').mockImplementation(() => {})
+	history.replaceState(null, '', '/')
+	router = await import('./route.web')
+	router.registerRoutes(
+		defineRoutes([
+			{
+				path: 'detail',
+				screen: () => null,
+				beforeLoad: () => ({ guarded: true }),
+				loader: () => 'loaded',
+			},
+			{ path: 'about', screen: () => null, presentation: 'modal' },
+		]),
+	)
+})
+
+const settle = () => new Promise((resolve) => setTimeout(resolve, 25))
+
+it('restores guard context and loader data on back and forward', async () => {
+	router.pushRoute({ stack: 'root', name: 'detail', params: {} })
+	await settle()
+	router.pushRoute({ stack: 'root', name: 'about', params: {} })
+	history.back()
+	await settle()
+	expect(router.routeFor('root')).toMatchObject({
+		context: { guarded: true },
+		loaderData: 'loaded',
+	})
+
+	history.forward()
+	await settle()
+	expect(router.currentModalRoute()?.name).toBe('about')
+	expect(router.routeFor('root')?.name).toBe('detail')
+})
+
+it('keeps loaded route state when addRoutes updates the registry', async () => {
+	router.pushRoute({ stack: 'root', name: 'detail', params: {} })
+	await settle()
+	router.addRoutes(defineRoutes([{ path: 'extra', screen: () => null }]))
+	expect(router.routeFor('root')).toMatchObject({
+		context: { guarded: true },
+		loaderData: 'loaded',
+	})
+})
+
+it('counts the visible modal as a back affordance from the base shell', () => {
+	router.pushRoute({ stack: 'root', name: 'about', params: {} })
+	expect(router.canGoBack()).toBe(true)
+})
+
+it('rejects unmatched incoming links without changing history', () => {
+	const length = history.length
+	expect(router.pushDeepLink('xplat://missing')).toBe(false)
+	expect(history.length).toBe(length)
+	expect(router.currentRoute()).toBeNull()
+})
+
+it('loads a direct URL without adding history or running its guard', async () => {
+	const guard = vi.fn()
+	const loader = vi.fn(() => ({ entries: ['baked'] }))
+	history.replaceState(null, '', '/baked')
+	const length = history.length
+	router.registerRoutes(
+		defineRoutes([{ path: 'baked', screen: () => null, beforeLoad: guard, loader }]),
+	)
+
+	await settle()
+	expect(router.routeFor('root')).toMatchObject({ loaderData: { entries: ['baked'] } })
+	expect(history.length).toBe(length)
+	expect(guard).not.toHaveBeenCalled()
+	expect(loader).toHaveBeenCalledTimes(1)
+})

package/src/route-navigation.web.test.ts

@@ -0,0 +1,173 @@
+// @vitest-environment jsdom
+import { beforeAll, describe, expect, it, vi } from 'vitest'
+import type { Route, RouteManifest } from './props'
+
+const registration = vi.hoisted(() => ({
+	listener: null as null | ((name: string, frame: any) => void),
+}))
+
+vi.mock('@nativescript/core', () => ({
+	Application: { android: null },
+	Frame: class {},
+	GridLayout: class {},
+	Page: class {},
+}))
+
+vi.mock('@nativescript-community/octane', () => ({
+	createNativeScriptRoot: () => ({ render() {}, unmount() {} }),
+}))
+
+vi.mock('./stacks', () => ({
+	getStack: () => undefined,
+	onStackRegistered(listener: typeof registration.listener) {
+		registration.listener = listener
+	},
+	stackEntries: () => new Map().entries(),
+}))
+
+vi.mock('./route-host.mobile', () => ({ RouteHost: () => null }))
+
+function deferred<T>() {
+	let resolve!: (value: T) => void
+	let reject!: (error: unknown) => void
+	const promise = new Promise<T>((yes, no) => {
+		resolve = yes
+		reject = no
+	})
+
+	return { promise, resolve, reject }
+}
+
+const settle = () => new Promise((resolve) => setTimeout(resolve, 0))
+
+describe.each(['web', 'macos', 'native'] as const)('%s navigation ownership', (target) => {
+	let router:
+		| typeof import('./route.web')
+		| typeof import('./route.macos')
+		| typeof import('./route')
+
+	beforeAll(async () => {
+		router =
+			target === 'web'
+				? await import('./route.web')
+				: target === 'macos'
+					? await import('./route.macos')
+					: await import('./route.ts')
+	}, 60000)
+
+	function setup(slow: Partial<RouteManifest['routes'][number]> = {}) {
+		router.registerRoutes({
+			screens: { slow: () => null, fast: () => null, redirected: () => null },
+			layouts: {},
+			routes: ['slow', 'fast', 'redirected'].map((name) => ({
+				name,
+				file: name,
+				segments: [name],
+				params: [],
+				...(name === 'slow' ? slow : {}),
+			})),
+		})
+	}
+
+	const route = (name: string, stack = 'audit'): Route => ({ name, stack, params: {} })
+	if (target === 'native') {
+		it('invalidates pending work when a newly registered frame goes back', async () => {
+			const wait = deferred<unknown>()
+			setup({ loader: () => wait.promise })
+			const on = vi.fn()
+			registration.listener!('audit', { on, currentPage: null })
+			router.pushRoute(route('fast'))
+			router.pushRoute(route('slow'))
+			on.mock.calls[0][1]({ isBackNavigation: true })
+			wait.resolve('old')
+			await settle()
+			expect(router.routeFor('audit')?.name).toBe('fast')
+		})
+	}
+
+	it('ignores a superseded loader result', async () => {
+		const wait = deferred<unknown>()
+		setup({ loader: () => wait.promise })
+		router.pushRoute(route('slow'))
+		await settle()
+		router.pushRoute(route('fast'))
+		wait.resolve('old')
+		await settle()
+		expect(router.routeFor('audit')?.name).toBe('fast')
+	})
+
+	it('ignores a superseded loader rejection', async () => {
+		const wait = deferred<unknown>()
+		setup({ loader: () => wait.promise })
+		router.pushRoute(route('slow'))
+		await settle()
+		router.pushRoute(route('fast'))
+		wait.reject(new Error('old'))
+		await settle()
+		expect(router.routeFor('audit')?.name).toBe('fast')
+	})
+
+	it('ignores a superseded guard and its redirect', async () => {
+		const wait = deferred<unknown>()
+		setup({
+			beforeLoad: async () => {
+				await wait.promise
+				router.redirect(route('redirected'))
+			},
+		})
+
+		router.pushRoute(route('slow'))
+		router.pushRoute(route('fast'))
+		wait.resolve(null)
+		await settle()
+		expect(router.routeFor('audit')?.name).toBe('fast')
+	})
+
+	it('preserves active guard context and loader data', async () => {
+		setup({ beforeLoad: async () => ({ allowed: true }), loader: async () => 'loaded' })
+		router.pushRoute(route('slow'))
+		await settle()
+		expect(router.routeFor('audit')).toMatchObject({
+			name: 'slow',
+			context: { allowed: true },
+			loaderData: 'loaded',
+		})
+	})
+
+	it('preserves an active redirect', async () => {
+		setup({ beforeLoad: async () => router.redirect(route('redirected')) })
+		router.pushRoute(route('slow'))
+		await settle()
+		expect(router.routeFor('audit')?.name).toBe('redirected')
+	})
+
+	it('invalidates pending work when back is requested', async () => {
+		const wait = deferred<unknown>()
+		setup({ loader: () => wait.promise })
+		router.pushRoute(route('fast'))
+		router.pushRoute(route('slow'))
+		await settle()
+		if (target === 'web') {
+			vi.spyOn(history, 'back').mockImplementation(() => {})
+		}
+
+		router.popRoute('audit')
+		const before = router.routeFor('audit')
+		wait.resolve('old')
+		await settle()
+		expect(router.routeFor('audit')).toEqual(before)
+		vi.restoreAllMocks()
+	})
+
+	it('uses one history on web and independent named stacks elsewhere', async () => {
+		const wait = deferred<unknown>()
+		setup({ loader: () => wait.promise })
+		router.pushRoute(route('slow'))
+		await settle()
+		router.pushRoute(route('fast', 'other'))
+		wait.resolve('loaded')
+		await settle()
+		expect(router.routeFor('audit')?.name ?? null).toBe(target === 'web' ? null : 'slow')
+		expect(router.routeFor('other')?.name ?? null).toBe('fast')
+	})
+})