@symbiote-native/angular 0.6.1 → 0.6.2

package/README.md

@@ -78,7 +78,7 @@ export class AppComponent {
 ```
 
 The full canary is [`examples/angular`](../../examples/angular) — a stock RN 0.86 app whose
-[`App.ts`](../../examples/angular/App.ts) exercises the same surface as the React and Vue
+[`App.ts`](../../examples/angular/src/App.ts) exercises the same surface as the React and Vue
 reference canaries, standalone components, zoneless change detection.
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/angular",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "SymbioteNative's Angular adapter — a Renderer2/RendererFactory2 with DOM-less bootstrap driving real native iOS/Android views through the same engine as the other adapters.",
   "license": "MIT",
   "repository": {
@@ -42,7 +42,10 @@
     "metro-config.cjs",
     "babel-linker.cjs",
     "babel-register-composed.cjs",
-    "tsconfig.angular.base.json"
+    "tsconfig.angular.base.json",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*",
+    "!src/**/*.detox.*"
   ],
   "bin": {
     "symbiote-angular-dev": "./bin/symbiote-angular-dev.cjs"

package/src/__tests__/responder-change-detection.test.ts

@@ -1,102 +0,0 @@
-// A flat-bag `onX` responder callback is invoked by the engine's event dispatch, entirely
-// outside Angular. In Angular 20 components compile as SignalView (not CheckAlways), so a plain
-// state mutation inside such a callback dirties nothing and the template stays stale — the "pan
-// does nothing" bug, while React/Vue repainted the same demo. SymbioteHostPropsDirective now
-// calls `cdr.markForCheck()` after each such callback (flags the component + ancestors with
-// RefreshView and notifies the scheduler), so the mutation repaints. This is the flat-root case;
-// responder-nested-cd.test.ts covers the App→child nesting the real app has.
-
-import '@angular/compiler';
-import { Component } from '@angular/core';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { installFabric, type IFakeNode } from '@symbiote-native/test-utils';
-
-import { mount, unmount } from '../render';
-import { ViewHost as View, TextHost as Text, SymbioteHostPropsDirective } from '../primitives';
-
-const ROOT_TAG = 970;
-const TOUCH_START = 'topTouchStart';
-const TOUCH_MOVE = 'topTouchMove';
-const TOUCH_END = 'topTouchEnd';
-
-const fabric = installFabric();
-
-// Fabric is clone-on-write: a prop update yields a NEW node object in the committed tree,
-// never in `created`. Walk the live committed child-set for post-mutation assertions.
-function findCommitted(predicate: (node: IFakeNode) => boolean): IFakeNode | undefined {
-  const stack = [...fabric.committed];
-  while (stack.length > 0) {
-    const node = stack.pop();
-    if (node === undefined) continue;
-    if (predicate(node)) return node;
-    stack.push(...node.children);
-  }
-  return undefined;
-}
-
-function statusText(testID: string): string | undefined {
-  const node = findCommitted(n => n.props.testID === testID);
-  const raw = node?.children[0];
-  return typeof raw?.props.text === 'string' ? raw.props.text : undefined;
-}
-
-// The stable SymbioteNode (event target). Its identity and listener map survive clone-on-
-// write, so firing on the first-created handle reaches the live listeners.
-function handleFor(testID: string): unknown {
-  const node = fabric.find(n => n.props.testID === testID);
-  if (!node) throw new Error(`no node created with testID=${testID}`);
-  return node.instanceHandle;
-}
-
-const flush = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
-
-@Component({
-  selector: 'symbiote-responder-cd-host',
-  standalone: true,
-  imports: [View, Text, SymbioteHostPropsDirective],
-  template: `
-    <View [symbioteHostProps]="handlers"></View>
-    <Text [symbioteHostProps]="statusProps">{{ status }}</Text>
-  `,
-})
-class ResponderCdHost {
-  status = 'idle';
-  statusProps = { testID: 'status' };
-  handlers = {
-    testID: 'chip',
-    onStartShouldSetResponder: () => true,
-    onResponderGrant: () => {
-      this.status = 'granted';
-    },
-    onResponderMove: () => {
-      this.status = 'moving';
-    },
-    onResponderRelease: () => {
-      this.status = 'released';
-    },
-  };
-}
-
-beforeEach(() => fabric.reset());
-afterEach(() => unmount(ROOT_TAG));
-
-describe('Angular responder callback triggers change detection', () => {
-  it('re-renders bound state mutated inside a flat-bag responder callback', async () => {
-    mount(ROOT_TAG, ResponderCdHost);
-    await flush();
-    expect(statusText('status')).toBe('idle');
-
-    const chip = handleFor('chip');
-    fabric.fireEvent(chip, TOUCH_START);
-    await flush();
-    expect(statusText('status')).toBe('granted');
-
-    fabric.fireEvent(chip, TOUCH_MOVE);
-    await flush();
-    expect(statusText('status')).toBe('moving');
-
-    fabric.fireEvent(chip, TOUCH_END);
-    await flush();
-    expect(statusText('status')).toBe('released');
-  });
-});

package/src/__tests__/responder-nested-cd.test.ts

@@ -1,113 +0,0 @@
-// The device-faithful shape: a ROOT component whose template embeds a CHILD component that
-// owns the responder state + the {{status}} binding (App -> ResponderDemo). Angular 20 compiles
-// components as SignalView (not CheckAlways), so a plain (non-signal) state mutation inside a
-// flat-bag responder callback does NOT dirty the child's reactive consumer, and the scheduler's
-// root detectChanges() will NOT descend into it — the child's {{status}} used to stay stale
-// ("pan does nothing"). SymbioteHostPropsDirective now refreshes its own host component's view
-// right after the callback runs, so the nested child repaints.
-
-import '@angular/compiler';
-import { Component } from '@angular/core';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { installFabric, type IFakeNode } from '@symbiote-native/test-utils';
-
-import { mount, unmount } from '../render';
-import { ViewHost as View, TextHost as Text, SymbioteHostPropsDirective } from '../primitives';
-import { registerComposedComponent } from '../anchor-host-registry';
-
-const ROOT_TAG = 972;
-const TOUCH_START = 'topTouchStart';
-const TOUCH_MOVE = 'topTouchMove';
-const TOUCH_END = 'topTouchEnd';
-
-registerComposedComponent('nested-responder-inner');
-
-const fabric = installFabric();
-
-function findCommitted(predicate: (node: IFakeNode) => boolean): IFakeNode | undefined {
-  const stack = [...fabric.committed];
-  while (stack.length > 0) {
-    const node = stack.pop();
-    if (node === undefined) continue;
-    if (predicate(node)) return node;
-    stack.push(...node.children);
-  }
-  return undefined;
-}
-
-function statusText(testID: string): string | undefined {
-  const node = findCommitted(n => n.props.testID === testID);
-  const raw = node?.children[0];
-  return typeof raw?.props.text === 'string' ? raw.props.text : undefined;
-}
-
-function handleFor(testID: string): unknown {
-  const node = fabric.find(n => n.props.testID === testID);
-  if (!node) throw new Error(`no node created with testID=${testID}`);
-  return node.instanceHandle;
-}
-
-const flush = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
-
-@Component({
-  selector: 'nested-responder-inner',
-  standalone: true,
-  imports: [View, Text, SymbioteHostPropsDirective],
-  template: `
-    <View [symbioteHostProps]="handlers"></View>
-    <Text [symbioteHostProps]="statusProps">{{ status }}</Text>
-  `,
-})
-class NestedResponderInner {
-  status = 'idle';
-  statusProps = { testID: 'nested-status' };
-  handlers = {
-    testID: 'nested-chip',
-    onStartShouldSetResponder: () => true,
-    onResponderGrant: () => {
-      this.status = 'granted';
-    },
-    onResponderMove: () => {
-      this.status = 'moving';
-    },
-    onResponderRelease: () => {
-      this.status = 'released';
-    },
-  };
-}
-
-@Component({
-  selector: 'nested-responder-outer',
-  standalone: true,
-  imports: [View, NestedResponderInner],
-  template: `
-    <View>
-      <nested-responder-inner></nested-responder-inner>
-    </View>
-  `,
-})
-class NestedResponderOuter {}
-
-beforeEach(() => fabric.reset());
-afterEach(() => unmount(ROOT_TAG));
-
-describe('Angular nested-child responder CD', () => {
-  it('re-renders a nested child component`s state mutated in a flat-bag responder callback', async () => {
-    mount(ROOT_TAG, NestedResponderOuter);
-    await flush();
-    expect(statusText('nested-status')).toBe('idle');
-
-    const chip = handleFor('nested-chip');
-    fabric.fireEvent(chip, TOUCH_START);
-    await flush();
-    expect(statusText('nested-status')).toBe('granted');
-
-    fabric.fireEvent(chip, TOUCH_MOVE);
-    await flush();
-    expect(statusText('nested-status')).toBe('moving');
-
-    fabric.fireEvent(chip, TOUCH_END);
-    await flush();
-    expect(statusText('nested-status')).toBe('released');
-  });
-});

package/src/angular-gaps.test.ts

@@ -1,142 +0,0 @@
-/// <reference types="node" />
-
-import { readFileSync } from 'node:fs';
-import { describe, expect, it } from 'vitest';
-
-const readSource = (path: string): string => readFileSync(path, 'utf8');
-
-describe('Angular adapter gap regressions', () => {
-  it('VirtualizedList exposes accessibility and aria inputs and forwards them to ScrollView', () => {
-    const source = readSource('adapters/angular/src/components/virtualized-list/index.ts');
-
-    expect(source).toContain('@Input() accessibilityLabel?: string');
-    expect(source).toContain('@Input() ariaBusy?: boolean');
-    expect(source).toContain('[accessibilityLabel]="foldedAccessibility.accessibilityLabel"');
-    expect(source).toContain('[accessibilityState]="foldedAccessibility.accessibilityState"');
-    expect(source).toContain('[accessibilityRole]="foldedAccessibility.accessibilityRole"');
-  });
-
-  it('Animated namespace exposes AOT-safe built-in entries and documents runtime HOC as a non-goal', () => {
-    const animatedSource = readSource('adapters/angular/src/modules/animated/index.ts');
-    const componentSource = readSource(
-      'adapters/angular/src/modules/animated/create-animated-component.ts',
-    );
-
-    expect(componentSource).toContain('export const AnimatedFlatList');
-    expect(componentSource).toContain('export const AnimatedSectionList');
-    expect(componentSource).toContain('if (base === View) return AnimatedView');
-    expect(componentSource).toContain('if (base === Text) return AnimatedText');
-    expect(componentSource).toContain('if (base === Image) return AnimatedImage');
-    expect(componentSource).toContain('if (base === ScrollView) return AnimatedScrollView');
-    expect(componentSource).toContain('Angular cannot synthesize a component at runtime');
-    expect(componentSource).toContain('no JIT under AOT/Metro');
-    expect(componentSource).toContain(
-      'Author an explicit standalone @Component extending AnimatedComponentBase',
-    );
-    expect(animatedSource).toContain('View: AnimatedView');
-    expect(animatedSource).toContain('Text: AnimatedText');
-    expect(animatedSource).toContain('Image: AnimatedImage');
-    expect(animatedSource).toContain('ScrollView: AnimatedScrollView');
-    expect(animatedSource).toContain('FlatList: AnimatedFlatList');
-    expect(animatedSource).toContain('SectionList: AnimatedSectionList');
-  });
-
-  it('AnimatedImage uses composed Image props and normalized load events', () => {
-    const source = readSource('adapters/angular/src/modules/animated/create-animated-component.ts');
-
-    expect(source).toContain('export class AnimatedImage extends ImageBase');
-    expect(source).toContain('inputs: ANIMATED_IMAGE_INPUTS');
-    expect(source).toContain('outputs: IMAGE_OUTPUTS');
-    expect(source).toContain('const resolved = resolveImageProps(reduced)');
-    expect(source).toContain('(load)="handleLoad($event)"');
-    expect(source).toContain('(error)="handleError($event)"');
-  });
-
-  it('Image prop resolution is shared with AnimatedImage', () => {
-    const imageSource = readSource('adapters/angular/src/components/image/shared.ts');
-
-    expect(imageSource).toContain('export function resolveImageProps');
-    expect(imageSource).toContain('get imageProps(): Record<string, unknown>');
-    expect(imageSource).toContain('return resolveImageProps(this.imageInputProps)');
-  });
-
-  it('Button forwards its full accessibility and TV-focus surface through TouchableOpacity', () => {
-    const buttonSource = readSource('adapters/angular/src/components/button.ts');
-    const touchableSource = readSource('adapters/angular/src/components/touchable/index.ts');
-    const pressableSource = readSource('adapters/angular/src/components/pressable/index.ts');
-
-    for (const binding of [
-      '[accessible]="true"',
-      '[accessibilityLabelledBy]="accessibilityLabelledBy"',
-      '[importantForAccessibility]="importantForAccessibility"',
-      '[accessibilityLiveRegion]="accessibilityLiveRegion"',
-      '[screenReaderFocusable]="screenReaderFocusable"',
-      '[accessibilityViewIsModal]="accessibilityViewIsModal"',
-      '[accessibilityElementsHidden]="accessibilityElementsHidden"',
-      '[accessibilityIgnoresInvertColors]="accessibilityIgnoresInvertColors"',
-      '[accessibilityLanguage]="accessibilityLanguage"',
-      '[accessibilityRespondsToUserInteraction]="accessibilityRespondsToUserInteraction"',
-      '[accessibilityShowsLargeContentViewer]="accessibilityShowsLargeContentViewer"',
-      '[accessibilityLargeContentTitle]="accessibilityLargeContentTitle"',
-      '(accessibilityAction)="accessibilityAction.emit($event)"',
-      '(accessibilityTap)="accessibilityTap.emit($event)"',
-      '(magicTap)="magicTap.emit($event)"',
-      '(accessibilityEscape)="accessibilityEscape.emit($event)"',
-      '[ariaModal]="ariaModal"',
-      '[ariaValueMax]="ariaValueMax"',
-      '[ariaValueMin]="ariaValueMin"',
-      '[ariaValueNow]="ariaValueNow"',
-      '[ariaValueText]="ariaValueText"',
-      '[hasTVPreferredFocus]="hasTVPreferredFocus"',
-      '[nextFocusDown]="nextFocusDown"',
-      '[nextFocusForward]="nextFocusForward"',
-      '[nextFocusLeft]="nextFocusLeft"',
-      '[nextFocusRight]="nextFocusRight"',
-      '[nextFocusUp]="nextFocusUp"',
-    ]) {
-      expect(buttonSource).toContain(binding);
-    }
-
-    for (const binding of [
-      '[accessible]="accessible"',
-      '[accessibilityLabelledBy]="accessibilityLabelledBy"',
-      '[importantForAccessibility]="importantForAccessibility"',
-      '[accessibilityLiveRegion]="accessibilityLiveRegion"',
-      '[screenReaderFocusable]="screenReaderFocusable"',
-      '[accessibilityViewIsModal]="accessibilityViewIsModal"',
-      '[accessibilityElementsHidden]="accessibilityElementsHidden"',
-      '[accessibilityIgnoresInvertColors]="accessibilityIgnoresInvertColors"',
-      '[accessibilityLanguage]="accessibilityLanguage"',
-      '[accessibilityRespondsToUserInteraction]="accessibilityRespondsToUserInteraction"',
-      '[accessibilityShowsLargeContentViewer]="accessibilityShowsLargeContentViewer"',
-      '[accessibilityLargeContentTitle]="accessibilityLargeContentTitle"',
-      '(accessibilityAction)="accessibilityAction.emit($event)"',
-      '(accessibilityTap)="accessibilityTap.emit($event)"',
-      '(magicTap)="magicTap.emit($event)"',
-      '(accessibilityEscape)="accessibilityEscape.emit($event)"',
-      '[ariaModal]="ariaModal"',
-      '[ariaValueMax]="ariaValueMax"',
-      '[ariaValueMin]="ariaValueMin"',
-      '[ariaValueNow]="ariaValueNow"',
-      '[ariaValueText]="ariaValueText"',
-      '[hasTVPreferredFocus]="hasTVPreferredFocus"',
-      '[nextFocusDown]="nextFocusDown"',
-      '[nextFocusForward]="nextFocusForward"',
-      '[nextFocusLeft]="nextFocusLeft"',
-      '[nextFocusRight]="nextFocusRight"',
-      '[nextFocusUp]="nextFocusUp"',
-    ]) {
-      expect(touchableSource).toContain(binding);
-    }
-
-    // Pressable forwards its resolved props through the shared SymbioteHostPropsDirective
-    // (adapters/angular/src/primitives/shared.ts) rather than one `[prop]="x"` binding per
-    // key, so the contract to check is: the binding exists, and the `hostProps` getter it
-    // reads from actually assembles `accessible` / the folded accessibility bag / TV-focus.
-    expect(pressableSource).toContain('[symbioteHostProps]="hostProps"');
-    expect(pressableSource).toContain('accessible: this.accessible');
-    expect(pressableSource).toContain('...this.foldedAccessibility');
-    expect(pressableSource).toContain('hasTVPreferredFocus: this.hasTVPreferredFocus');
-    expect(pressableSource).toContain('(accessibilityAction)="emit(accessibilityAction, $event)"');
-  });
-});

package/src/angular-imports.test.ts

@@ -1,100 +0,0 @@
-// Angular source-import harness regression. Vitest imports adapter source (`src/*.ts`) directly,
-// not the partial-Ivy `ngc` output Metro consumes. The adapter tsconfig must therefore enable
-// TypeScript's legacy decorator lowering so Node never sees raw `@Component` / `@Directive`
-// syntax. Importing `@angular/compiler` enables JIT metadata creation for these source-only tests;
-// production still proves AOT/partial-Ivy through `pnpm --filter @symbiote-native/angular ng:build`.
-
-import '@angular/compiler';
-import { ElementRef, Injector, runInInjectionContext } from '@angular/core';
-import { describe, expect, it } from 'vitest';
-import { Image, ScrollView, Text, View } from './components';
-import { VirtualizedList, VListItemDirective } from './components/virtualized-list';
-import { SymbioteHostPropsDirective } from './primitives';
-import {
-  Animated,
-  AnimatedImage,
-  AnimatedScrollView,
-  AnimatedText,
-  AnimatedView,
-  createAnimatedComponent,
-} from './modules/animated';
-
-interface IAngularCompiledComponent {
-  ɵcmp?: { selectors?: unknown };
-}
-
-interface IAngularCompiledDirective {
-  ɵdir?: { selectors?: unknown };
-}
-
-describe('Angular source imports under Vitest', () => {
-  it('imports decorated adapter components and directives directly from src', () => {
-    expect(VirtualizedList).toBeTypeOf('function');
-    expect(VListItemDirective).toBeTypeOf('function');
-    expect(AnimatedView).toBeTypeOf('function');
-    expect(SymbioteHostPropsDirective).toBeTypeOf('function');
-  });
-
-  it('keeps Angular decorator metadata available to the JIT test runtime', () => {
-    expect((VirtualizedList as IAngularCompiledComponent).ɵcmp?.selectors).toEqual([
-      ['VirtualizedList'],
-    ]);
-    expect((AnimatedView as IAngularCompiledComponent).ɵcmp?.selectors).toEqual([
-      ['AnimatedView'],
-      ['symbiote-animated-view'],
-    ]);
-    expect((VListItemDirective as IAngularCompiledDirective).ɵdir?.selectors).toEqual([
-      ['', 'vListItem', ''],
-    ]);
-    expect((SymbioteHostPropsDirective as IAngularCompiledDirective).ɵdir?.selectors).toEqual([
-      ['', 'symbioteHostProps', ''],
-    ]);
-  });
-
-  it('imports the Animated namespace without losing component identity', () => {
-    expect(Animated.View).toBe(AnimatedView);
-    expect(Animated.Text).toBe(AnimatedText);
-    expect(Animated.Image).toBe(AnimatedImage);
-    expect(Animated.ScrollView).toBe(AnimatedScrollView);
-    expect(Animated.FlatList).toBeTypeOf('function');
-    expect(Animated.SectionList).toBeTypeOf('function');
-  });
-
-  it('keeps createAnimatedComponent limited to pre-authored AOT-safe Angular wrappers', () => {
-    class CustomComponent {}
-
-    expect(createAnimatedComponent(View)).toBe(AnimatedView);
-    expect(createAnimatedComponent(Text)).toBe(AnimatedText);
-    expect(createAnimatedComponent(Image)).toBe(AnimatedImage);
-    expect(createAnimatedComponent(ScrollView)).toBe(AnimatedScrollView);
-    expect(() => createAnimatedComponent(CustomComponent)).toThrow(
-      /Angular cannot synthesize a component at runtime \(no JIT compiler under AOT\/Metro\)/,
-    );
-    expect(() => createAnimatedComponent(CustomComponent)).toThrow(
-      /Author an explicit standalone @Component extending AnimatedComponentBase instead/,
-    );
-  });
-
-  it('resolves AnimatedImage props through the composed Image path', () => {
-    // AnimatedImage is an ANCHOR_HOST_COMPONENT: its field initializer injects its own
-    // ElementRef (anchorHostStyle merge, see create-animated-component.ts), so constructing it
-    // outside Angular's component machinery needs an explicit injection context.
-    const injector = Injector.create({
-      providers: [{ provide: ElementRef, useValue: new ElementRef({}) }],
-    });
-    const image = runInInjectionContext(injector, () => new AnimatedImage());
-    image.src = 'https://example.invalid/image.png';
-    image.width = 32;
-    image.height = 24;
-    image.alt = 'Preview';
-    image.animatedProps = { style: { opacity: 0.5 }, testID: 'animated-image' };
-
-    expect(image.animatedImageProps).toMatchObject({
-      testID: 'animated-image',
-      accessible: true,
-      accessibilityLabel: 'Preview',
-      source: [{ uri: 'https://example.invalid/image.png' }],
-      style: [undefined, [{ width: 32, height: 24 }, { opacity: 0.5 }]],
-    });
-  });
-});

package/src/components/activity-indicator/activity-indicator-class-style.test.ts

@@ -1,44 +0,0 @@
-// Regression test for the anchor/class bug: ActivityIndicator is its own
-// ANCHOR_HOST_COMPONENTS entry AND renders through DescriptorOutlet (`symbiote-descriptor-outlet`,
-// itself also an anchor entry) — a class= on <ActivityIndicator> resolves onto ActivityIndicator's
-// OWN anchor, two levels up from the real committed wrapper View the descriptor builds, and needs
-// its OWN anchorHostStyle merge (see shared.ts's `descriptor` getter). Mirrors pressable.test.ts's
-// "resolves a class=" case.
-import '@angular/compiler';
-import { Component } from '@angular/core';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
-import { installFabric } from '@symbiote-native/test-utils';
-
-import { mount, unmount } from '../../render';
-import { ActivityIndicator } from './index';
-
-const ROOT_TAG = 909;
-const fabric = installFabric();
-
-@Component({
-  selector: 'symbiote-activity-indicator-class-host',
-  standalone: true,
-  imports: [ActivityIndicator],
-  template: `<ActivityIndicator class="card" />`,
-})
-class ActivityIndicatorClassHost {}
-
-beforeEach(() => {
-  fabric.reset();
-  registerStyles({ card: { backgroundColor: 'red' } });
-});
-afterEach(() => {
-  unmount(ROOT_TAG);
-  clearGlobalStyles();
-});
-
-describe('ActivityIndicator anchor class= resolution', () => {
-  it('resolves a class= on the ActivityIndicator use site onto the real committed wrapper View', async () => {
-    mount(ROOT_TAG, ActivityIndicatorClassHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const node = fabric.find(n => n.props.backgroundColor === 'red');
-    expect(node, 'a real Fabric node carries the class-derived style').toBeDefined();
-  });
-});

package/src/components/activity-indicator/activity-indicator.test.ts

@@ -1,131 +0,0 @@
-import '@angular/compiler';
-import { Component, signal } from '@angular/core';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { installFabric, type IFakeNode } from '@symbiote-native/test-utils';
-
-import { mount, unmount } from '../../render';
-import { ActivityIndicator } from './index';
-
-const ROOT_TAG = 905;
-const fabric = installFabric();
-
-let capturedHost: ActivityIndicatorHost | undefined;
-
-function findCommitted(predicate: (node: IFakeNode) => boolean): IFakeNode | undefined {
-  const visit = (node: IFakeNode): IFakeNode | undefined => {
-    if (predicate(node)) return node;
-    for (const child of node.children) {
-      const found = visit(child);
-      if (found) return found;
-    }
-    return undefined;
-  };
-  for (const node of fabric.committed) {
-    const found = visit(node);
-    if (found) return found;
-  }
-  return undefined;
-}
-
-function findSpinner(): IFakeNode {
-  const node = findCommitted(n => n.viewName === 'ActivityIndicatorView');
-  if (!node) throw new Error('no ActivityIndicatorView was created');
-  return node;
-}
-
-function findWrapper(): IFakeNode {
-  const node = findCommitted(n => n.viewName === 'RCTView' && n.props.pointerEvents !== 'box-none');
-  if (!node) throw new Error('no ActivityIndicator wrapper was created');
-  return node;
-}
-
-@Component({
-  selector: 'symbiote-activity-indicator-host',
-  standalone: true,
-  imports: [ActivityIndicator],
-  template: `
-    <ActivityIndicator
-      [size]="size()"
-      [color]="color()"
-      [animating]="animating()"
-      [testID]="testID()"
-      [accessible]="true"
-      [accessibilityLabel]="'loading'"
-      (layout)="onLayout($event)"
-    />
-  `,
-})
-class ActivityIndicatorHost {
-  readonly size = signal<'small' | 'large' | number>('large');
-  readonly color = signal('#0000ff');
-  readonly animating = signal(false);
-  readonly testID = signal('spinner-wrapper');
-  onLayout = vi.fn();
-
-  constructor() {
-    // Captures the live component instance so the test can drive its signals after mount.
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    capturedHost = this;
-  }
-}
-
-beforeEach(() => {
-  capturedHost = undefined;
-  fabric.reset();
-});
-afterEach(() => unmount(ROOT_TAG));
-
-describe('ActivityIndicator', () => {
-  it('renders through the shared descriptor shape and forwards wrapper props', async () => {
-    mount(ROOT_TAG, ActivityIndicatorHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    expect(fabric.serialize(fabric.appRoot().children)).toBe('RCTView(ActivityIndicatorView)');
-
-    const spinner = findSpinner();
-    expect(spinner.props.animating).toBe(false);
-    expect(spinner.props.color).toBe('#0000ff');
-    expect(spinner.props.hidesWhenStopped).toBe(true);
-    expect(spinner.props.size).toBe('large');
-    expect(spinner.props.width).toBe(36);
-    expect(spinner.props.height).toBe(36);
-
-    const wrapper = findWrapper();
-    expect(wrapper.props.testID).toBe('spinner-wrapper');
-    expect(wrapper.props.accessible).toBe(true);
-    expect(wrapper.props.accessibilityLabel).toBe('loading');
-    expect(wrapper.props.alignItems).toBe('center');
-    expect(wrapper.props.justifyContent).toBe('center');
-
-    fabric.fireEvent(wrapper.instanceHandle, 'topLayout', {});
-    expect(capturedHost?.onLayout).toHaveBeenCalledOnce();
-  });
-
-  it('patches the descriptor without remounting the native wrapper', async () => {
-    mount(ROOT_TAG, ActivityIndicatorHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const before = findWrapper();
-    const createdBefore = fabric.counts.createNode;
-
-    if (!capturedHost) throw new Error('host was not captured');
-    capturedHost.size.set(48);
-    capturedHost.color.set('#ff0000');
-    capturedHost.animating.set(true);
-    capturedHost.testID.set('spinner-wrapper-updated');
-    await Promise.resolve();
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const after = findWrapper();
-    expect(after.instanceHandle).toBe(before.instanceHandle);
-    expect(fabric.counts.createNode).toBe(createdBefore);
-    expect(after.props.testID).toBe('spinner-wrapper-updated');
-    const spinner = findSpinner();
-    expect(spinner.props.color).toBe('#ff0000');
-    expect(spinner.props.animating).toBe(true);
-    expect(spinner.props.width).toBe(48);
-    expect(spinner.props.height).toBe(48);
-    // Updating from string size to numeric size sends null to reset the previous native enum.
-    expect(spinner.props.size).toBeNull();
-  });
-});