@symbiote-native/navigation 1.0.0

package/src/angular/tabs/tabs.test.ts

@@ -0,0 +1,249 @@
+// Co-located Angular-driven test for the @symbiote-native/navigation Angular Tab navigator.
+// Proves: registry building from @ContentChildren, tab switching via jumpTo, focus/blur
+// synthesis, tab bar item painting (label/icon/badge/tint), and press wiring. Tab is imported from
+// its own module (NOT the package barrel) so the ../register side-effect never loads headless -
+// Tab needs no react-native-screens ViewConfig at all (pure-JS UI).
+
+import '@angular/compiler';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, type Signal } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { mount, unmount, registerComposedComponent } from '@symbiote-native/angular';
+import { installFabric, type IFakeNode } from '@symbiote-native/test-utils';
+import { Tab } from './index';
+import type { ITabNavigatorHandle } from './index';
+import { TabScreenDirective } from '../tab-screen.directive';
+import { injectIsFocused } from '../injectors/inject-is-focused';
+
+const ROOT_TAG = 5121;
+const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
+
+const fabric = installFabric();
+// On a real Metro build, adapters/angular's babel-register-composed.cjs auto-registers `Tab`
+// as an anchor host by scanning the AOT-compiled @Component's selector - vitest never runs that
+// pipeline, so this test drives the same self-registration entry point by hand (mirrors
+// renderer.test.ts's 'RefApiDemo' convention). Without it, `<Tab>` falls through to a raw
+// Fabric createNode('Tab') call instead of a non-painting anchor.
+registerComposedComponent('Tab');
+
+beforeEach(() => {
+  fabric.reset();
+  capturedFeedInstance = undefined;
+  capturedProfileInstance = undefined;
+});
+afterEach(() => unmount(ROOT_TAG));
+
+function findInTree(
+  predicate: (node: IFakeNode) => boolean,
+  nodes = fabric.committed,
+): IFakeNode | undefined {
+  for (const node of nodes) {
+    if (predicate(node)) return node;
+    const found = findInTree(predicate, node.children);
+    if (found) return found;
+  }
+  return undefined;
+}
+
+let capturedFeedInstance: FeedScreenComponent | undefined;
+let capturedProfileInstance: ProfileScreenComponent | undefined;
+
+@Component({
+  selector: 'feed-screen',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<symbiote-text>feed</symbiote-text>`,
+})
+class FeedScreenComponent {
+  // Real screens (e.g. .examples/angular's TabHomeScreen) call injectIsFocused() - see the
+  // regression test below for why this matters.
+  readonly isFocused: Signal<boolean> = injectIsFocused();
+
+  constructor() {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    capturedFeedInstance = this;
+  }
+}
+
+@Component({
+  selector: 'profile-screen',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<symbiote-text>profile</symbiote-text>`,
+})
+class ProfileScreenComponent {
+  readonly isFocused: Signal<boolean> = injectIsFocused();
+
+  constructor() {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    capturedProfileInstance = this;
+  }
+}
+
+let capturedHost: TabTestHost | undefined;
+
+@Component({
+  selector: 'tab-test-host',
+  standalone: true,
+  imports: [Tab, TabScreenDirective],
+  template: `
+    <Tab #nav initialRouteName="Feed">
+      <ng-template
+        symbioteTabScreen
+        name="Feed"
+        [component]="feedComponent"
+        [options]="feedOptions"
+      ></ng-template>
+      <ng-template
+        symbioteTabScreen
+        name="Profile"
+        [component]="profileComponent"
+        [options]="profileOptions"
+      ></ng-template>
+    </Tab>
+  `,
+})
+class TabTestHost {
+  @ViewChild('nav') nav!: Tab;
+
+  feedComponent = FeedScreenComponent;
+  profileComponent = ProfileScreenComponent;
+  feedOptions: Record<string, unknown> = { title: 'Feed', tabBarBadge: 3 };
+  profileOptions: Record<string, unknown> = { tabBarLabel: 'Me' };
+
+  constructor() {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    capturedHost = this;
+  }
+}
+
+async function mountTab(): Promise<ITabNavigatorHandle> {
+  capturedHost = undefined;
+  mount(ROOT_TAG, TabTestHost);
+  await tick();
+  const host = capturedHost;
+  if (!host) throw new Error('TabTestHost never mounted');
+  return host.nav;
+}
+
+function tabItemNodes(): IFakeNode[] {
+  const found: IFakeNode[] = [];
+  const collect = (nodes: readonly IFakeNode[]): void => {
+    for (const node of nodes) {
+      if (node.props.accessibilityRole === 'tab') found.push(node);
+      collect(node.children);
+    }
+  };
+  collect(fabric.committed);
+  return found;
+}
+
+describe('Angular Tab navigator', () => {
+  it("mounts only the initial route's content and marks it focused in the tab bar", async () => {
+    await mountTab();
+    expect(findInTree(n => n.viewName === 'RCTRawText' && n.props.text === 'feed')).toBeDefined();
+    expect(
+      findInTree(n => n.viewName === 'RCTRawText' && n.props.text === 'profile'),
+    ).toBeUndefined();
+    const items = tabItemNodes();
+    expect(items).toHaveLength(2);
+    expect(items[0].props.accessibilityState).toEqual({ selected: true });
+    expect(items[1].props.accessibilityState).toEqual({ selected: false });
+  });
+
+  it('jumpTo() switches the mounted content and the focused tab bar item', async () => {
+    const handle = await mountTab();
+    handle.jumpTo('Profile');
+    await tick();
+    expect(
+      findInTree(n => n.viewName === 'RCTRawText' && n.props.text === 'profile'),
+    ).toBeDefined();
+    expect(findInTree(n => n.viewName === 'RCTRawText' && n.props.text === 'feed')).toBeUndefined();
+    const items = tabItemNodes();
+    expect(items[0].props.accessibilityState).toEqual({ selected: false });
+    expect(items[1].props.accessibilityState).toEqual({ selected: true });
+  });
+
+  it('resolves tabBarLabel/title fallback and paints a badge', async () => {
+    await mountTab();
+    const items = tabItemNodes();
+    // Feed: no tabBarLabel, falls back to title 'Feed'; badge '3' painted as a child text.
+    expect(findInTree(n => n.viewName === 'RCTRawText' && n.props.text === 'Feed')).toBeDefined();
+    expect(findInTree(n => n.viewName === 'RCTRawText' && n.props.text === '3')).toBeDefined();
+    // Profile: explicit tabBarLabel 'Me' wins over the route name.
+    expect(findInTree(n => n.viewName === 'RCTRawText' && n.props.text === 'Me')).toBeDefined();
+    expect(items).toHaveLength(2);
+  });
+
+  it('tapping a tab bar item calls jumpTo via the wired onPress passthrough', async () => {
+    // onPress is synthesized by the engine from a touchStart/touchEnd pair on the node (no direct
+    // native 'press' event - see render-tabs.ts's own comment on ITabBarItemView.passthrough).
+    await mountTab();
+    const items = tabItemNodes();
+    const profileItem = items[1];
+    const nativeEvent = {
+      target: profileItem.tag,
+      identifier: 1,
+      pageX: 0,
+      pageY: 0,
+      locationX: 0,
+      locationY: 0,
+      timestamp: Date.now(),
+    };
+    fabric.fireEvent(profileItem.instanceHandle, 'topTouchStart', nativeEvent);
+    fabric.fireEvent(profileItem.instanceHandle, 'topTouchEnd', nativeEvent);
+    await tick();
+    expect(
+      findInTree(n => n.viewName === 'RCTRawText' && n.props.text === 'profile'),
+    ).toBeDefined();
+  });
+
+  // Regression test: focusedRouteEmitter() runs as a TEMPLATE EXPRESSION
+  // ([emitter]="focusedRouteEmitter()"), evaluated inside Angular's reactive-read tracking
+  // context for the current CD pass. It synchronously calls emitter.emit(FOCUS/BLUR), which
+  // fan-out-calls every listener on that route's emitter synchronously too - including
+  // injectIsFocused()'s `isFocused.set(...)`, since every real screen (TabHomeScreen,
+  // TabSearchScreen, TabProfileScreen in .examples/angular) calls injectIsFocused(). Angular
+  // throws NG600 ("signal write during a template execution") the instant that set() runs
+  // inside a tracked read - not gated behind ngDevMode, so this reproduces in every build,
+  // not just dev. jumpTo() is exactly what a tab-bar tap fires (see the test above), so this
+  // threw on literally every tab switch. drawer.ts's focusedRouteEmitter() has the identical
+  // shape and its own regression test in drawer.test.ts.
+  it('switching tabs does not throw when the newly-focused screen calls injectIsFocused()', async () => {
+    const handle = await mountTab();
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    try {
+      handle.jumpTo('Profile');
+      await tick();
+      handle.jumpTo('Feed');
+      await tick();
+    } finally {
+      expect(errorSpy).not.toHaveBeenCalled();
+      errorSpy.mockRestore();
+    }
+  });
+
+  // injectIsFocused() reads context.emitter at CALL time (during the screen's own constructor),
+  // which runs as part of *ngComponentOutlet creating the screen - nested INSIDE the same
+  // <ng-container [emitter]="focusedRouteEmitter()"> whose input evaluation is what actually
+  // fires the FOCUS emit. If Angular evaluates the ng-container's OWN inputs (calling
+  // focusedRouteEmitter(), firing FOCUS) before creating/refreshing the nested ngComponentOutlet
+  // child (running the screen's constructor, registering the injectIsFocused() listener), the
+  // FOCUS event fires to zero listeners and is lost forever - isFocused stays false permanently,
+  // exactly as reported ("focused: false", never changes, even after switching tabs back to it).
+  it('the initially-focused screen actually observes isFocused() becoming true', async () => {
+    await mountTab();
+    await tick();
+    expect(capturedFeedInstance).toBeDefined();
+    expect(capturedFeedInstance?.isFocused()).toBe(true);
+  });
+
+  it('switching tabs toggles isFocused() true/false on the exiting/entering screens', async () => {
+    const handle = await mountTab();
+    await tick();
+    handle.jumpTo('Profile');
+    await tick();
+    expect(capturedFeedInstance?.isFocused()).toBe(false);
+    expect(capturedProfileInstance).toBeDefined();
+    expect(capturedProfileInstance?.isFocused()).toBe(true);
+  });
+});

package/src/core/constants.ts

@@ -0,0 +1,68 @@
+// Framework-agnostic constants for the react-native-screens native stack primitives. symbiote
+// ships zero ViewConfig metadata for these views at runtime - the engine derives events and
+// color processors from react-native-screens' own codegen ViewConfig - this file only names the
+// Fabric view names and event prop keys every adapter binds against, plus the RNS activityState
+// convention (mirrors @react-navigation/native-stack's internal screen focus signaling).
+
+// The Fabric view names react-native-screens' codegen components register. descriptorFor passes
+// any non-`symbiote-` string through as a raw Fabric name, so the render fns emit these directly.
+export const RNS_SCREEN_VIEW_NAME = 'RNSScreen';
+// The modal-presentation twin of RNSScreen - see resolveScreenViewName's comment in
+// render-stack.ts for why a formSheet/modal screen MUST use this different Fabric name.
+export const RNS_MODAL_SCREEN_VIEW_NAME = 'RNSModalScreen';
+export const RNS_SCREEN_STACK_VIEW_NAME = 'RNSScreenStack';
+export const RNS_SCREEN_STACK_HEADER_CONFIG_VIEW_NAME = 'RNSScreenStackHeaderConfig';
+// The header-subview leaf react-native-screens itself uses to host arbitrary framework children
+// (left/right/back/title/center/searchBar) inside the header. Registered here for ground-truth
+// parity, but unconsumed by any fold in v1 scope: renderHeaderConfig's Descriptor never takes
+// framework children (see render-stack.ts), so mounting a subview child is left to the adapter.
+export const RNS_SCREEN_STACK_HEADER_SUBVIEW_VIEW_NAME = 'RNSScreenStackHeaderSubview';
+export const RNS_SEARCH_BAR_VIEW_NAME = 'RNSSearchBar';
+// react-native-screens' own JS layer (ScreenStackItem -> DebugContainer -> ScreenContentWrapper)
+// ALWAYS wraps a screen's content in this native view, `collapsable: false` so Fabric can never
+// flatten it away. RNSScreen.mm's `registerContentWrapper:contentHeightErrata:` is a no-op for
+// `push` (early-returns NO), but for `formSheet` it's how the native side ever learns the
+// content's real size - RNSScreenContentWrapper's `willMoveToWindow` walks up to the ancestor
+// RNSScreen and registers itself, and its `receivedReactFrame:` delegate callback is what feeds
+// the sheet's own height/detent machinery. Skipping this wrapper is harmless for `push` (why it
+// went unnoticed) but leaves a formSheet screen's native side with nothing to attach to at all.
+export const RNS_SCREEN_CONTENT_WRAPPER_VIEW_NAME = 'RNSScreenContentWrapper';
+
+// RNSScreen event prop keys (all DirectEventHandler in the codegen spec).
+export const SCREEN_ON_APPEAR = 'onAppear';
+export const SCREEN_ON_DISAPPEAR = 'onDisappear';
+export const SCREEN_ON_WILL_APPEAR = 'onWillAppear';
+export const SCREEN_ON_WILL_DISAPPEAR = 'onWillDisappear';
+export const SCREEN_ON_DISMISSED = 'onDismissed';
+export const SCREEN_ON_HEADER_BACK_BUTTON_CLICKED = 'onHeaderBackButtonClicked';
+
+// RNSScreenStack event prop key.
+export const STACK_ON_FINISH_TRANSITIONING = 'onFinishTransitioning';
+
+// RNSScreenStackHeaderConfig event prop keys (both DirectEventHandler in the codegen spec): a
+// plain bar-button-item press, and a press on a (possibly nested) menu action of a 'menu'-type
+// bar-button item.
+export const HEADER_ON_PRESS_BAR_BUTTON_ITEM = 'onPressHeaderBarButtonItem';
+export const HEADER_ON_PRESS_BAR_BUTTON_MENU_ITEM = 'onPressHeaderBarButtonMenuItem';
+
+// RNSSearchBar event prop keys (all DirectEventHandler in the codegen spec). onClose/onOpen are
+// Android-only per the codegen spec's own comment.
+export const SEARCH_BAR_ON_FOCUS = 'onSearchFocus';
+export const SEARCH_BAR_ON_BLUR = 'onSearchBlur';
+export const SEARCH_BAR_ON_SEARCH_BUTTON_PRESS = 'onSearchButtonPress';
+export const SEARCH_BAR_ON_CANCEL_BUTTON_PRESS = 'onCancelButtonPress';
+export const SEARCH_BAR_ON_CHANGE_TEXT = 'onChangeText';
+export const SEARCH_BAR_ON_CLOSE = 'onClose';
+export const SEARCH_BAR_ON_OPEN = 'onOpen';
+
+// activityState RNS reads to decide which screen is attached to the native hierarchy. Per
+// react-native-screens' native RNSScreen.mm (maybeAssertActivityStateProgressionOldValue), an
+// already-mounted NativeStack screen's activityState can never DECREASE via a plain prop update -
+// only 0 (detached) and 2 (attached + focused) are used; there is no "1 = transitioning" value in
+// @react-navigation/native-stack's actual algorithm (NativeStackView.native.tsx computes
+// `activityState={isInactive ? 0 : 2}`, never 1). See computeActivityState for the full rationale.
+export const SCREEN_ACTIVITY_STATE_FOCUSED = 2;
+export const SCREEN_ACTIVITY_STATE_INACTIVE = 0;
+
+export const STACK_DEFAULT_ANIMATION = 'default';
+export const STACK_DEFAULT_PRESENTATION = 'push';