@symbiote-native/angular 0.6.1 → 0.7.0

package/src/components/virtualized-list/virtualized-list-class-style.test.ts

@@ -1,76 +0,0 @@
-// Regression test for the anchor/class bug: VirtualizedList is its own
-// ANCHOR_HOST_COMPONENTS entry — a class= on <VirtualizedList> resolves onto VirtualizedList's OWN
-// anchor and needs its OWN anchorHostStyle merge (see index.ts's recomputeView), it is NOT
-// transitively fixed by ScrollView's own fix one level down. 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 { VirtualizedList } from './index';
-import { VListItemDirective } from './directives';
-
-const ROOT_TAG = 952;
-const fabric = installFabric();
-const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
-
-interface IRow {
-  id: string;
-}
-
-const rows: IRow[] = [{ id: 'a' }, { id: 'b' }];
-
-@Component({
-  selector: 'symbiote-virtualized-list-class-host',
-  standalone: true,
-  imports: [VirtualizedList, VListItemDirective],
-  template: `
-    <VirtualizedList
-      class="card"
-      [data]="rows"
-      [getItem]="getItem"
-      [getItemCount]="getItemCount"
-      [getItemLayout]="getItemLayout"
-    >
-      <ng-template vListItem let-item>
-        <symbiote-text [testID]="item.id">{{ item.id }}</symbiote-text>
-      </ng-template>
-    </VirtualizedList>
-  `,
-})
-class VirtualizedListClassHost {
-  rows = rows;
-  getItem = (data: readonly IRow[], index: number): IRow => data[index];
-  getItemCount = (data: readonly IRow[]): number => data.length;
-  getItemLayout = (
-    _data: unknown,
-    index: number,
-  ): { length: number; offset: number; index: number } => ({
-    length: 30,
-    offset: 30 * index,
-    index,
-  });
-}
-
-beforeEach(() => {
-  fabric.reset();
-  registerStyles({ card: { backgroundColor: 'red' } });
-});
-afterEach(() => {
-  unmount(ROOT_TAG);
-  clearGlobalStyles();
-});
-
-describe('VirtualizedList anchor class= resolution', () => {
-  it('resolves a class= on the VirtualizedList use site onto the real committed scroll host', async () => {
-    mount(ROOT_TAG, VirtualizedListClassHost);
-    await tick();
-    await tick();
-
-    const node = fabric.find(n => n.props.backgroundColor === 'red');
-    expect(node, 'a real Fabric node carries the class-derived style').toBeDefined();
-  });
-});

package/src/components/virtualized-section-list/virtualized-section-list-class-style.test.ts

@@ -1,60 +0,0 @@
-// Regression test for the anchor/class bug: VirtualizedSectionList is its
-// own ANCHOR_HOST_COMPONENTS entry — a class= on <VirtualizedSectionList> resolves onto its OWN
-// anchor and needs its OWN anchorHostStyle merge (see index.ts's resolvedStyle getter), it is NOT
-// transitively fixed by VirtualizedList's/ScrollView's own fixes further down. 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 type { ISection } from '@symbiote-native/components';
-
-import { mount, unmount } from '../../render';
-import { VirtualizedSectionList, VSectionItemDirective } from './index';
-
-const ROOT_TAG = 954;
-const fabric = installFabric();
-const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
-
-interface IRow {
-  id: string;
-}
-
-const sections: ISection<IRow>[] = [{ title: 'A', data: [{ id: 'a1' }, { id: 'a2' }] }];
-
-@Component({
-  selector: 'symbiote-virtualized-section-list-class-host',
-  standalone: true,
-  imports: [VirtualizedSectionList, VSectionItemDirective],
-  template: `
-    <VirtualizedSectionList class="card" [sections]="sections">
-      <ng-template vSectionItem let-item>
-        <symbiote-text [testID]="item.id">{{ item.id }}</symbiote-text>
-      </ng-template>
-    </VirtualizedSectionList>
-  `,
-})
-class VirtualizedSectionListClassHost {
-  sections = sections;
-}
-
-beforeEach(() => {
-  fabric.reset();
-  registerStyles({ card: { backgroundColor: 'red' } });
-});
-afterEach(() => {
-  unmount(ROOT_TAG);
-  clearGlobalStyles();
-});
-
-describe('VirtualizedSectionList anchor class= resolution', () => {
-  it('resolves a class= on the VirtualizedSectionList use site onto the real committed scroll host', async () => {
-    mount(ROOT_TAG, VirtualizedSectionListClassHost);
-    await tick();
-    await tick();
-
-    const node = fabric.find(n => n.props.backgroundColor === 'red');
-    expect(node, 'a real Fabric node carries the class-derived style').toBeDefined();
-  });
-});

package/src/create-portal/create-portal.test.ts

@@ -1,90 +0,0 @@
-// Proves createPortal (create-portal.ts) paints content into an already-mounted destination
-// WITHIN THE SAME SURFACE — mirrors adapters/react/src/create-portal.test.tsx's "same surface,
-// already-mounted target" case (Angular has no cross-surface equivalent of this primitive;
-// createTunnel covers that, see create-tunnel.test.ts).
-
-import '@angular/compiler';
-import { Component, signal } 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, TextHost } from '../primitives';
-import { PortalDirective, PortalOutletDirective } from './index';
-
-const ROOT_TAG = 930;
-
-const fabric = installFabric();
-const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
-const settle = async (): Promise<void> => {
-  await tick();
-  await tick();
-};
-
-let capturedHost: HostApp | undefined;
-
-@Component({
-  selector: 'symbiote-portal-host-app',
-  standalone: true,
-  imports: [ViewHost, TextHost, PortalDirective, PortalOutletDirective],
-  template: `
-    <View>
-      <View portalOutlet #overlayHost="portalOutlet" testID="overlay-host"></View>
-      @if (visible()) {
-        <View *portal="overlayHost"><Text>portaled content</Text></View>
-      }
-    </View>
-  `,
-})
-class HostApp {
-  readonly visible = signal(false);
-
-  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));
-
-function walk(nodes: IFakeNode[], visit: (node: IFakeNode) => void): void {
-  for (const node of nodes) {
-    visit(node);
-    walk(node.children, visit);
-  }
-}
-
-function findText(text: string): IFakeNode | undefined {
-  let found: IFakeNode | undefined;
-  walk(fabric.committed, node => {
-    if (node.viewName === 'RCTRawText' && node.props.text === text) found = node;
-  });
-  return found;
-}
-
-describe('createPortal (Angular) — same-surface delivery', () => {
-  it('renders nothing until the portal is toggled on', async () => {
-    mount(ROOT_TAG, HostApp);
-    await settle();
-    expect(findText('portaled content')).toBeUndefined();
-  });
-
-  it('paints content into the outlet once toggled on, and removes it once toggled off', async () => {
-    mount(ROOT_TAG, HostApp);
-    await settle();
-
-    if (!capturedHost) throw new Error('host was not captured');
-    capturedHost.visible.set(true);
-    await settle();
-    expect(findText('portaled content'), 'painted once the portal renders').toBeDefined();
-
-    capturedHost.visible.set(false);
-    await settle();
-    expect(findText('portaled content'), 'gone once the portal unmounts').toBeUndefined();
-  });
-});

package/src/create-tunnel/create-tunnel.test.ts

@@ -1,120 +0,0 @@
-// Proves createTunnel (create-tunnel.ts) actually delivers across two GENUINELY separate,
-// independently-mounted SymbioteSurfaces — the same proof React's/Vue's create-tunnel tests
-// give, via two real `mount()` calls on different rootTags. Mirrors
-// adapters/react/src/create-tunnel.test.tsx and adapters/vue/src/create-tunnel.test.ts.
-
-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, TextHost } from '../primitives';
-import { createTunnel, TunnelInDirective, TunnelOut } from './index';
-
-const SOURCE_TAG = 920;
-const TARGET_TAG = 921;
-
-const fabric = installFabric();
-const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
-const settle = async (): Promise<void> => {
-  await tick();
-  await tick();
-};
-
-beforeEach(() => fabric.reset());
-afterEach(() => {
-  unmount(SOURCE_TAG);
-  unmount(TARGET_TAG);
-});
-
-function walk(nodes: IFakeNode[], visit: (node: IFakeNode) => void): void {
-  for (const node of nodes) {
-    visit(node);
-    walk(node.children, visit);
-  }
-}
-
-function findText(text: string): IFakeNode | undefined {
-  let found: IFakeNode | undefined;
-  walk(fabric.committed, node => {
-    if (node.viewName === 'RCTRawText' && node.props.text === text) found = node;
-  });
-  return found;
-}
-
-describe('createTunnel (Angular) — genuine cross-surface delivery', () => {
-  it('paints content registered by surface A on surface B, a DIFFERENT mounted surface', async () => {
-    const tunnel = createTunnel();
-
-    @Component({
-      selector: 'symbiote-tunnel-source-app',
-      standalone: true,
-      imports: [TextHost, TunnelInDirective],
-      template: '<Text *tunnelIn="tunnel">ported across surfaces</Text>',
-    })
-    class SourceApp {
-      readonly tunnel = tunnel;
-    }
-
-    @Component({
-      selector: 'symbiote-tunnel-target-app',
-      standalone: true,
-      imports: [ViewHost, TunnelOut],
-      template: '<View><tunnel-out [tunnel]="tunnel" /></View>',
-    })
-    class TargetApp {
-      readonly tunnel = tunnel;
-    }
-
-    // Surface A registers, fully independently, before surface B ever mounts.
-    mount(SOURCE_TAG, SourceApp);
-    // Surface B mounts SEPARATELY (its own rootTag, its own SymbioteSurface) and reads the
-    // tunnel via its own TunnelOut — no ref, no rootTag lookup, no shared Fabric node at all.
-    mount(TARGET_TAG, TargetApp);
-    await settle();
-
-    // fake-fabric's `committed` is last-write-wins across rootTags (core/test-utils
-    // limitation, not the engine's), so after mounting B second it reflects B's own tree.
-    expect(
-      findText('ported across surfaces'),
-      'content is present in the LAST-committed tree (surface B)',
-    ).toBeDefined();
-  });
-
-  it('removes the content from the target once the source unmounts', async () => {
-    const tunnel = createTunnel();
-
-    @Component({
-      selector: 'symbiote-tunnel-source-app-2',
-      standalone: true,
-      imports: [TextHost, TunnelInDirective],
-      template: '<Text *tunnelIn="tunnel">still here</Text>',
-    })
-    class SourceApp {
-      readonly tunnel = tunnel;
-    }
-
-    @Component({
-      selector: 'symbiote-tunnel-target-app-2',
-      standalone: true,
-      imports: [ViewHost, TunnelOut],
-      template: '<View><tunnel-out [tunnel]="tunnel" /></View>',
-    })
-    class TargetApp {
-      readonly tunnel = tunnel;
-    }
-
-    mount(SOURCE_TAG, SourceApp);
-    mount(TARGET_TAG, TargetApp);
-    await settle();
-    expect(findText('still here'), 'present while the source is mounted').toBeDefined();
-
-    // Tearing down surface A destroys TunnelInDirective, whose ngOnDestroy unregisters from
-    // the shared store; surface B's TunnelOut effect reacts on its own next tick and destroys
-    // its view.
-    unmount(SOURCE_TAG);
-    await settle();
-    expect(findText('still here'), 'gone from surface B after the source unmounts').toBeUndefined();
-  });
-});

package/src/descriptor-to-angular/descriptor-outlet.test.ts

@@ -1,94 +0,0 @@
-import '@angular/compiler';
-import { Component, signal } from '@angular/core';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { el, txt, type IDescriptor } from '@symbiote-native/components';
-import { installFabric } from '@symbiote-native/test-utils';
-
-import { mount, unmount } from '../render';
-import { DescriptorOutlet } from './index.ts';
-
-const ROOT_TAG = 904;
-const fabric = installFabric();
-
-let capturedHost: DescriptorOutletHost | undefined;
-
-async function flushAngular(): Promise<void> {
-  await Promise.resolve();
-  await new Promise<void>(resolve => setTimeout(resolve, 0));
-}
-
-function currentOutletChild() {
-  const child = fabric.appRoot().children[0];
-  if (!child) throw new Error('descriptor outlet rendered no root child');
-  return child;
-}
-
-@Component({
-  selector: 'symbiote-descriptor-outlet-host',
-  standalone: true,
-  imports: [DescriptorOutlet],
-  template: '<symbiote-descriptor-outlet [node]="node()" />',
-})
-class DescriptorOutletHost {
-  readonly node = signal<IDescriptor>(
-    el('symbiote-view', { testID: 'root', style: { width: 10 } }, [txt({}, ['hello'])]),
-  );
-
-  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('DescriptorOutlet', () => {
-  it('renders a Descriptor tree through Renderer2', async () => {
-    mount(ROOT_TAG, DescriptorOutletHost);
-    await flushAngular();
-
-    expect(fabric.serialize(fabric.appRoot().children)).toBe(
-      'RCTView(RCTText(RCTRawText "hello"))',
-    );
-    const root = currentOutletChild();
-    expect(root.props.testID).toBe('root');
-    expect(root.props.width).toBe(10);
-  });
-
-  it('does not recommit a structurally identical descriptor through anchor flattening', async () => {
-    mount(ROOT_TAG, DescriptorOutletHost);
-    await flushAngular();
-
-    const completeRootBefore = fabric.counts.completeRoot;
-
-    capturedHost?.node.set(
-      el('symbiote-view', { testID: 'root', style: { width: 10 } }, [txt({}, ['hello'])]),
-    );
-    await flushAngular();
-
-    expect(fabric.counts.completeRoot).toBe(completeRootBefore);
-  });
-
-  it('patches same type/key descriptors without recreating the Fabric node', async () => {
-    mount(ROOT_TAG, DescriptorOutletHost);
-    await flushAngular();
-
-    const before = currentOutletChild();
-    const createdBefore = fabric.counts.createNode;
-
-    capturedHost?.node.set(
-      el('symbiote-view', { testID: 'root', style: { width: 20 } }, [txt({}, ['hello'])]),
-    );
-    await flushAngular();
-
-    const after = currentOutletChild();
-    expect(fabric.counts.createNode).toBe(createdBefore);
-    expect(after.instanceHandle).toBe(before.instanceHandle);
-    expect(after.props.width).toBe(20);
-  });
-});

package/src/host-instance/host-instance.test.ts

@@ -1,49 +0,0 @@
-// Co-located test for findNodeHandle, the Angular twin of adapters/vue/src/host-instance/host-instance.test.ts.
-// Proves the Angular adapter can resolve a raw engine node, an engine public instance, a bare
-// reactTag, and null/undefined to a native tag using the engine's getNativeTag.
-
-import { describe, expect, it } from 'vitest';
-import { createElement, createSurface, getNativeTag } from '@symbiote-native/engine';
-import { installFabric } from '@symbiote-native/test-utils';
-import { findNodeHandle } from './index';
-
-installFabric();
-const ROOT_TAG = 708;
-
-describe('Angular findNodeHandle on the engine', () => {
-  it('returns the committed tag for a raw engine node', async () => {
-    const surface = createSurface(ROOT_TAG);
-    const node = createElement('RCTView');
-    surface.appendChild(node);
-    surface.commit();
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const tag = getNativeTag(node);
-    expect(tag).toBeGreaterThan(0);
-    expect(findNodeHandle(node)).toBe(tag);
-  });
-
-  it('returns the committed tag for a public instance (toPublicInstance graft)', async () => {
-    const surface = createSurface(ROOT_TAG + 1);
-    const node = createElement('RCTView');
-    surface.appendChild(node);
-    surface.commit();
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const tag = getNativeTag(node);
-    // The public instance is the same identity as the engine node; findNodeHandle accepts it.
-    const publicInstance = node;
-    expect(findNodeHandle(publicInstance)).toBe(tag);
-  });
-
-  it('passes a bare number through idempotently', () => {
-    expect(findNodeHandle(42)).toBe(42);
-  });
-
-  it('returns null for null, undefined, and unknown inputs', () => {
-    expect(findNodeHandle(null)).toBeNull();
-    expect(findNodeHandle(undefined)).toBeNull();
-    expect(findNodeHandle('not-a-node' as any)).toBeNull();
-    expect(findNodeHandle({} as any)).toBeNull();
-  });
-});

package/src/modules/animated/animated-leaf-binder/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 './index';
-
-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();
-  });
-});