@symbiote-native/angular 0.6.1 → 0.6.2

package/src/modules/animated/animated-leaf-binder.test.ts

@@ -1,116 +0,0 @@
-// Unit tests for AnimatedLeafBinder in isolation — no Angular involved. Both
-// AnimatedComponentBase and AnimatedImage delegate their leaf-lifecycle (build a leaf,
-// bind it to the committed Fabric node, swap leaves on re-render, tear down) to this Pure
-// Fabrication; these tests exercise the binder directly against a real engine node
-// (SymbioteSurface + the fake Fabric backend), so a break here isolates to the shared
-// orchestration rather than either owning component.
-import { beforeEach, describe, expect, it } from 'vitest';
-import { installFabric } from '@symbiote-native/test-utils';
-import {
-  AnimatedValue,
-  createElement,
-  createSurface,
-  type ISymbioteNode,
-} from '@symbiote-native/engine';
-import { AnimatedLeafBinder } from './animated-leaf-binder';
-
-const fabric = installFabric();
-let nextRootTag = 9001;
-
-beforeEach(() => fabric.reset());
-
-// A node that has already gone through a commit — whenCommitted fires synchronously.
-function committedNode(): ISymbioteNode {
-  const surface = createSurface(nextRootTag++);
-  const node = createElement('RCTView');
-  surface.appendChild(node);
-  surface.commit();
-  return node;
-}
-
-// A node that is attached to a surface but has NOT been committed yet — whenCommitted
-// must defer until the caller commits the surface.
-function uncommittedNode(): { node: ISymbioteNode; commit: () => void } {
-  const surface = createSurface(nextRootTag++);
-  const node = createElement('RCTView');
-  surface.appendChild(node);
-  return { node, commit: () => surface.commit() };
-}
-
-// `appRoot()` unwraps RN's synthetic box-none AppContainer, which is ALSO an RCTView, so a
-// plain `fabric.find(viewName === 'RCTView')` would match it instead of the node under test.
-// Each test appends exactly one child, so the container's first (only) child is the real node.
-function fakeView(): ReturnType<typeof fabric.find> {
-  return fabric.appRoot().children[0];
-}
-
-describe('AnimatedLeafBinder', () => {
-  it('creates and attaches an AnimatedProps leaf, wiring value changes onto the host node', () => {
-    const node = committedNode();
-    const binder = new AnimatedLeafBinder(() => node, 'test');
-    const opacity = new AnimatedValue(1);
-
-    // The leaf itself never pushes the INITIAL value — that first paint comes from the
-    // owning component's own reduceProps template binding (out of scope here). The leaf
-    // only drives value CHANGES after it is bound.
-    binder.reconcile({ style: { opacity } }, false);
-
-    opacity.setValue(0.4);
-    expect(fakeView()?.props.opacity).toBe(0.4);
-  });
-
-  it('binds to the host node via whenCommitted, deferring until the node is actually committed', () => {
-    const { node, commit } = uncommittedNode();
-    const binder = new AnimatedLeafBinder(() => node, 'test');
-    const opacity = new AnimatedValue(1);
-
-    binder.reconcile({ style: { opacity } }, false);
-    // Not committed yet: the value graph exists, but no Fabric node to flush onto.
-    opacity.setValue(0.5);
-    expect(fabric.created).toHaveLength(0);
-
-    commit();
-    // whenCommitted's post-commit retry binds the leaf now; a subsequent change flushes.
-    opacity.setValue(0.7);
-    expect(fakeView()?.props.opacity).toBe(0.7);
-  });
-
-  it('attaches the new leaf before detaching the old one on a second reconcile', () => {
-    const node = committedNode();
-    const binder = new AnimatedLeafBinder(() => node, 'test');
-    const shared = new AnimatedValue(1);
-    const order: string[] = [];
-    const originalAddChild = shared.__addChild.bind(shared);
-    const originalRemoveChild = shared.__removeChild.bind(shared);
-    shared.__addChild = child => {
-      order.push('add');
-      originalAddChild(child);
-    };
-    shared.__removeChild = child => {
-      order.push('remove');
-      originalRemoveChild(child);
-    };
-
-    binder.reconcile({ style: { opacity: shared } }, false);
-    order.length = 0; // only care about the SECOND reconcile's swap order
-
-    binder.reconcile({ style: { opacity: shared } }, false);
-
-    expect(order).toEqual(['add', 'remove']);
-  });
-
-  it('detaches the leaf and cancels any pending bind on destroy', () => {
-    const { node, commit } = uncommittedNode();
-    const binder = new AnimatedLeafBinder(() => node, 'test');
-    const opacity = new AnimatedValue(1);
-
-    binder.reconcile({ style: { opacity } }, false);
-    binder.destroy();
-    commit();
-
-    // The pending whenCommitted bind was cancelled by destroy, so committing afterward
-    // must not retroactively bind the (already-detached) leaf.
-    opacity.setValue(0.9);
-    expect(fakeView()?.props.opacity).toBeUndefined();
-  });
-});

package/src/modules/animated/animated-scroll-view.test.ts

@@ -1,102 +0,0 @@
-// Regression tests for two Android-only bugs AnimatedScrollView's bespoke template hit because
-// it talks to the raw symbiote-scroll-view primitive directly instead of reusing the real
-// ScrollView component (which already has both fixes — see scroll-view/shared.ts):
-//
-// 1. It projected <ng-content> straight into symbiote-scroll-view with no content wrapper. On
-//    Android, symbiote-scroll-content resolves to a plain RCTView, which Fabric view-flattens
-//    away unless collapsable:false pins it — so multiple projected children were hoisted up as
-//    direct children of the scroll view, which natively hosts exactly one ("ScrollView can
-//    host only one direct child" -> addViewAt crash).
-// 2. It never defaulted nestedScrollEnabled. RN defaults nested scrolling ON (ScrollView.js
-//    `nestedScrollEnabled ?? true`), but Android needs it explicit or a ScrollView nested
-//    inside another scrollable container (this canary's own nested demo) never receives touch
-//    — it renders fine but is static, the outer ScrollView swallows the gesture.
-//
-// The fake Fabric harness doesn't simulate Android's real view-flattening or touch dispatch, so
-// these tests only prove the structural/prop invariants that prevent both bugs, not the
-// on-device symptoms themselves — those still need a real Android host.
-import '@angular/compiler';
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { installFabric } from '@symbiote-native/test-utils';
-import { mount, unmount } from '../../render';
-import { AnimatedScrollView } from './create-animated-component';
-
-const ROOT_TAG = 927;
-const OVERRIDE_ROOT_TAG = 928;
-const fabric = installFabric();
-const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
-
-class AnimatedScrollViewApp {}
-Component({
-  selector: 'animated-scroll-view-test',
-  standalone: true,
-  imports: [AnimatedScrollView],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <AnimatedScrollView>
-      <symbiote-view testID="a"></symbiote-view>
-      <symbiote-view testID="b"></symbiote-view>
-    </AnimatedScrollView>
-  `,
-})(AnimatedScrollViewApp);
-
-class AnimatedScrollViewOverrideApp {}
-Component({
-  selector: 'animated-scroll-view-override-test',
-  standalone: true,
-  imports: [AnimatedScrollView],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <AnimatedScrollView [animatedProps]="{ nestedScrollEnabled: false }">
-      <symbiote-view testID="a"></symbiote-view>
-    </AnimatedScrollView>
-  `,
-})(AnimatedScrollViewOverrideApp);
-
-beforeEach(() => fabric.reset());
-afterEach(() => {
-  unmount(ROOT_TAG);
-  unmount(OVERRIDE_ROOT_TAG);
-});
-
-describe('AnimatedScrollView', () => {
-  it('wraps multiple projected children in a single non-collapsable content view', async () => {
-    mount(ROOT_TAG, AnimatedScrollViewApp);
-    await tick();
-
-    const scrollView = fabric.find(node => node.viewName === 'RCTScrollView');
-    expect(scrollView?.children).toHaveLength(1);
-    expect(scrollView?.props.nestedScrollEnabled).toBe(true);
-
-    const content = scrollView?.children[0];
-    expect(content?.viewName).toBe('RCTScrollContentView');
-    expect(content?.props.collapsable).toBe(false);
-    expect(content?.children.map(child => child.props.testID)).toEqual(['a', 'b']);
-  });
-
-  // Regression test for a THIRD bug in this same bespoke-template class, this one iOS-only (the
-  // inverse of the two Android bugs above): AnimatedScrollView never applied
-  // selectScrollIntrinsics' scrollViewBaseStyle (overflow: 'scroll') to its host node, unlike the
-  // real ScrollView component. On iOS Fabric a scroll view only clips its content to its own
-  // frame when `overflow: 'scroll'` is set; without it, content taller than the frame bleeds out
-  // over sibling views instead of scrolling clipped (Android's native ViewGroup clips regardless
-  // of the style prop, which is why this was invisible there). See
-  // core/components/src/view/render-scroll-view.ts's SCROLL_VIEW_BASE_VERTICAL comment.
-  it('applies the scroll-view base style (overflow: scroll) so content clips to the frame', async () => {
-    mount(ROOT_TAG, AnimatedScrollViewApp);
-    await tick();
-
-    const scrollView = fabric.find(node => node.viewName === 'RCTScrollView');
-    expect(scrollView?.props.overflow).toBe('scroll');
-    expect(scrollView?.props.flexDirection).toBe('column');
-  });
-
-  it('lets an explicit nestedScrollEnabled in animatedProps override the default', async () => {
-    mount(OVERRIDE_ROOT_TAG, AnimatedScrollViewOverrideApp);
-    await tick();
-
-    const scrollView = fabric.find(node => node.viewName === 'RCTScrollView');
-    expect(scrollView?.props.nestedScrollEnabled).toBe(false);
-  });
-});

package/src/modules/app-registry/app-registry.test.ts

@@ -1,106 +0,0 @@
-// Co-located Angular-driven test, Angular twin of adapters/react/src/modules/
-// app-registry/app-registry.test.tsx. Proves the AppRegistry entry point:
-// `registerComponent(appKey, () => App)` stores a runnable that calls `mount` (driving
-// @symbiote-native/engine) AND bridges it to the host registrar (RN's own AppRegistry, injected via
-// `setHostRegistrar`) so native can find it by key. Also proves the Angular-specific
-// `setWrapperComponentProvider` seam: a pre-authored standalone wrapper receives the root's
-// host node as projected `<ng-content>`, the AOT-safe twin of React's
-// createElement(Wrapper, null, rootElement).
-
-import '@angular/compiler';
-import { Component, Input, type Type } from '@angular/core';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { installFabric } from '@symbiote-native/test-utils';
-import { AppRegistry, setHostRegistrar, type IAppParameters, type IRunnable } from '../..';
-import { unmount } from '../../render';
-
-const APP_KEY = 'canary';
-const ROOT_TAG = 212;
-const WRAPPED_APP_KEY = 'canary-wrapped';
-const WRAPPED_ROOT_TAG = 213;
-
-// Angular's mount() batches change detection on a microtask, so a committed native tag isn't
-// available synchronously — assertions on the committed tree need one tick, same as Vue.
-const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
-
-class TestText {}
-Component({
-  selector: 'symbiote-text',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})(TestText);
-
-class SmokeComponent {}
-Component({
-  selector: 'symbiote-app-registry-smoke',
-  standalone: true,
-  imports: [TestText],
-  template: '<symbiote-text>hi</symbiote-text>',
-})(SmokeComponent);
-
-class WrapperComponent {
-  @Input() label = '';
-}
-Component({
-  selector: 'symbiote-app-registry-wrapper',
-  standalone: true,
-  imports: [TestText],
-  template: '<symbiote-text>{{ label }}</symbiote-text><ng-content></ng-content>',
-})(WrapperComponent);
-
-const fabric = installFabric();
-
-// The host registrar the native side drives (RN's AppRegistry stand-in).
-const hostRunnables = new Map<string, IRunnable>();
-
-beforeEach(() => {
-  fabric.reset();
-  hostRunnables.clear();
-  setHostRegistrar({
-    registerRunnable: (appKey: string, run: IRunnable): string => {
-      hostRunnables.set(appKey, run);
-      return appKey;
-    },
-  });
-  AppRegistry.registerComponent(APP_KEY, () => SmokeComponent);
-});
-afterEach(() => {
-  unmount(ROOT_TAG);
-  unmount(WRAPPED_ROOT_TAG);
-});
-
-describe('AppRegistry', () => {
-  it('exposes the app key and bridges the runnable to the host registrar', () => {
-    expect(AppRegistry.getAppKeys()).toContain(APP_KEY);
-    expect(hostRunnables.get(APP_KEY)).toBeDefined();
-  });
-
-  it('mounts the tree when the host invokes the runnable with a rootTag', async () => {
-    const hostRun = hostRunnables.get(APP_KEY);
-    expect(hostRun).toBeDefined();
-
-    const nativeParams: IAppParameters = { rootTag: ROOT_TAG };
-    hostRun!(nativeParams);
-    await tick();
-
-    expect(fabric.find(n => n.viewName === 'RCTText')).toBeDefined();
-  });
-
-  it('runApplication drives the same runnable locally', async () => {
-    AppRegistry.runApplication(APP_KEY, { rootTag: ROOT_TAG });
-    await tick();
-
-    expect(fabric.find(n => n.viewName === 'RCTText')).toBeDefined();
-  });
-
-  it('projects the root component into a registered wrapper via <ng-content>', async () => {
-    AppRegistry.setWrapperComponentProvider(() => WrapperComponent as Type<unknown>);
-    AppRegistry.registerComponent(WRAPPED_APP_KEY, () => SmokeComponent);
-
-    AppRegistry.runApplication(WRAPPED_APP_KEY, { rootTag: WRAPPED_ROOT_TAG });
-    await tick();
-
-    const texts = fabric.appRoot().children.flatMap(n => fabric.serialize([n]));
-    expect(texts.join('')).toContain('hi');
-  });
-});

package/src/modules/status-bar/status-bar.test.ts

@@ -1,50 +0,0 @@
-import '@angular/compiler';
-import { Component } from '@angular/core';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import * as engine from '@symbiote-native/engine';
-import { installFabric } from '@symbiote-native/test-utils';
-
-import { mount, unmount } from '../../render';
-import { StatusBar } from './index';
-
-const ROOT_TAG = 901;
-const fabric = installFabric();
-
-@Component({
-  selector: 'symbiote-status-bar-host',
-  standalone: true,
-  imports: [StatusBar],
-  template: ` <StatusBar [barStyle]="'dark-content'" [hidden]="true" [animated]="false" /> `,
-})
-class StatusBarHost {}
-
-beforeEach(() => fabric.reset());
-afterEach(() => unmount(ROOT_TAG));
-
-describe('StatusBar', () => {
-  it('applies status bar props on mount and renders no Fabric node', async () => {
-    const spy = vi.spyOn(engine, 'applyStatusBarProps').mockReturnValue(undefined);
-
-    mount(ROOT_TAG, StatusBarHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    expect(spy).toHaveBeenCalledWith(
-      expect.objectContaining({
-        barStyle: 'dark-content',
-        hidden: true,
-        animated: false,
-      }),
-    );
-
-    const root = fabric.appRoot();
-    expect(root.children).toHaveLength(0);
-  });
-
-  it('exposes imperative statics on the component value', () => {
-    expect(typeof StatusBar.setHidden).toBe('function');
-    expect(typeof StatusBar.setBarStyle).toBe('function');
-    expect(typeof StatusBar.setNetworkActivityIndicatorVisible).toBe('function');
-    expect(typeof StatusBar.setBackgroundColor).toBe('function');
-    expect(typeof StatusBar.setTranslucent).toBe('function');
-  });
-});

package/src/render/render.test.ts

@@ -1,147 +0,0 @@
-// Integration coverage: run the real Angular runtime (createComponent + RendererFactory2)
-// over the headless fake Fabric slot. Unlike renderer.test.ts, this proves mount() wires
-// Angular's bootstrap to the Symbiote renderer, so a standalone template paints and updates
-// through the engine.
-
-import '@angular/compiler';
-import { Component } from '@angular/core';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { installFabric } from '@symbiote-native/test-utils';
-import { mount, unmount } from './index';
-
-const ROOT_TAG = 808;
-
-const fabric = installFabric();
-const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
-const drainAngularAndCommit = async (): Promise<void> => {
-  await tick();
-  await tick();
-};
-
-class TestView {}
-Component({
-  selector: 'symbiote-view',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})(TestView);
-
-class TestText {}
-Component({
-  selector: 'symbiote-text',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})(TestText);
-
-class SmokeComponent {
-  name = 'Angular';
-  count = 0;
-  boxStyle = { padding: 12 };
-
-  increment(): void {
-    this.count += 1;
-  }
-}
-
-Component({
-  selector: 'symbiote-angular-smoke',
-  standalone: true,
-  imports: [TestView, TestText],
-  template: `<symbiote-view [style]="boxStyle"><symbiote-text>Hello {{ name }}</symbiote-text><symbiote-view testID="counter" (press)="increment()"><symbiote-text>tapped {{ count }}×</symbiote-text></symbiote-view></symbiote-view>`,
-})(SmokeComponent);
-
-beforeEach(() => fabric.reset());
-afterEach(() => unmount(ROOT_TAG));
-
-// A plain (non-OnPush) child component compiles as SignalView in Angular 20+, so an UNTOUCHED
-// sibling child is skipped by the per-view CheckAlways/Dirty/RefreshView gate inside
-// detectChangesInView — true with or without ApplicationRef (the gate lives inside
-// detectChangesInView regardless of who calls it). This is NOT a claim that the root's own
-// template is spared: markViewDirty (used by both native (event) bindings and
-// ChangeDetectorRef.markForCheck(), see SymbioteHostPropsDirective) unconditionally sets
-// RefreshView on every ancestor up to the root — a press anywhere always re-runs the root's
-// own template, in every Angular app, regardless of scheduler. What this guards is narrower
-// but still real: a SIBLING component with no dirty descendant of its own must not be dragged
-// along for the ride.
-let unrelatedRenderCount = 0;
-class CounterChild {
-  count = 0;
-
-  increment(): void {
-    this.count += 1;
-  }
-}
-Component({
-  selector: 'counter-child',
-  standalone: true,
-  imports: [TestView, TestText],
-  template:
-    '<symbiote-view testID="counter" (press)="increment()"><symbiote-text>tapped {{ count }}×</symbiote-text></symbiote-view>',
-})(CounterChild);
-
-class UnrelatedSiblingChild {
-  trackRender(): number {
-    unrelatedRenderCount++;
-    return unrelatedRenderCount;
-  }
-}
-Component({
-  selector: 'unrelated-sibling-child',
-  standalone: true,
-  template: '<symbiote-text>unrelated {{ trackRender() }}</symbiote-text>',
-})(UnrelatedSiblingChild);
-
-class TargetedComponent {}
-Component({
-  selector: 'symbiote-angular-targeted',
-  standalone: true,
-  imports: [TestView, CounterChild, UnrelatedSiblingChild],
-  template: `<symbiote-view><counter-child /><unrelated-sibling-child /></symbiote-view>`,
-})(TargetedComponent);
-
-describe('Angular mount', () => {
-  it('bootstraps a standalone component into a committed Fabric tree', async () => {
-    mount(ROOT_TAG, SmokeComponent);
-    await tick();
-
-    const root = fabric.appRoot();
-    expect(fabric.serialize(root.children)).toBe(
-      'RCTView(RCTText(RCTRawText "Hello Angular")RCTView(RCTText(RCTRawText "tapped 0×")))',
-    );
-    expect(root.children[0]?.props).toMatchObject({ padding: 12 });
-  });
-
-  it('runs Angular change detection after a native press and recommits text', async () => {
-    mount(ROOT_TAG, SmokeComponent);
-    await tick();
-
-    const counter = fabric.find(node => node.props.testID === 'counter');
-    expect(counter).toBeDefined();
-
-    fabric.fireEvent(counter?.instanceHandle, 'topTouchStart');
-    fabric.fireEvent(counter?.instanceHandle, 'topTouchEnd');
-    await drainAngularAndCommit();
-
-    expect(fabric.serialize(fabric.appRoot().children)).toContain('RCTRawText "tapped 1×"');
-  });
-
-  it('does not re-check a sibling child component on a press inside a different child', async () => {
-    unrelatedRenderCount = 0;
-    mount(ROOT_TAG, TargetedComponent);
-    await tick();
-
-    const afterFirstPaint = unrelatedRenderCount;
-    expect(afterFirstPaint).toBeGreaterThan(0);
-
-    const counter = fabric.find(node => node.props.testID === 'counter');
-    fabric.fireEvent(counter?.instanceHandle, 'topTouchStart');
-    fabric.fireEvent(counter?.instanceHandle, 'topTouchEnd');
-    await drainAngularAndCommit();
-
-    expect(fabric.serialize(fabric.appRoot().children)).toContain('RCTRawText "tapped 1×"');
-    // UnrelatedSiblingChild has no dirty descendant of its own, so it must not be re-checked
-    // just because CounterChild (a completely separate branch) got pressed. This does NOT prove
-    // the root's own template stays untouched — the root's template still re-runs on every
-    // press (see render.ts).
-    expect(unrelatedRenderCount).toBe(afterFirstPaint);
-  });
-});