@symbiote-native/angular 0.6.1 → 0.7.0

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();
-  });
-});

package/src/components/flat-list/column-wrapper-style-class.test.ts

@@ -1,116 +0,0 @@
-// Regression guard: columnWrapperStyle previously accepted ONLY a JS style object/array. It now
-// also resolves a class-name string through the shared style registry, merged onto the same
-// flex-row wrapper as an object/array value (see index.ts's ngOnChanges). Mirrors the Vue twin
-// (column-wrapper-style-class.test.ts) and flat-list.test.ts's row-packing shape.
-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, type IFakeNode } from '@symbiote-native/test-utils';
-
-import { mount, unmount } from '../../render';
-import { FlatList } from './index';
-import { VListItemDirective } from '../virtualized-list/directives';
-
-const ROOT_TAG = 953;
-const fabric = installFabric();
-const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
-
-interface IRow {
-  id: string;
-  label: string;
-}
-
-const rows: IRow[] = Array.from({ length: 4 }, (_unused, index) => ({
-  id: `r-${index}`,
-  label: `row-${index}`,
-}));
-
-function walk(nodes: IFakeNode[], visit: (node: IFakeNode) => void): void {
-  for (const node of nodes) {
-    visit(node);
-    walk(node.children, visit);
-  }
-}
-
-function rowsWithFlexDirection(): IFakeNode[] {
-  const found: IFakeNode[] = [];
-  walk(fabric.committed, node => {
-    if (node.viewName === 'RCTView' && node.props.flexDirection === 'row') found.push(node);
-  });
-  return found;
-}
-
-@Component({
-  selector: 'symbiote-flatlist-column-style-class-host',
-  standalone: true,
-  imports: [FlatList, VListItemDirective],
-  template: `
-    <FlatList
-      [data]="rows"
-      [numColumns]="2"
-      [keyExtractor]="keyExtractor"
-      [columnWrapperStyle]="'gap8'"
-    >
-      <ng-template vListItem let-item>
-        <symbiote-text [testID]="item.id">{{ item.label }}</symbiote-text>
-      </ng-template>
-    </FlatList>
-  `,
-})
-class FlatListColumnStyleClassHost {
-  rows = rows;
-  keyExtractor = (item: IRow): string => item.id;
-}
-
-@Component({
-  selector: 'symbiote-flatlist-column-style-object-host',
-  standalone: true,
-  imports: [FlatList, VListItemDirective],
-  template: `
-    <FlatList
-      [data]="rows"
-      [numColumns]="2"
-      [keyExtractor]="keyExtractor"
-      [columnWrapperStyle]="{ gap: 4 }"
-    >
-      <ng-template vListItem let-item>
-        <symbiote-text [testID]="item.id">{{ item.label }}</symbiote-text>
-      </ng-template>
-    </FlatList>
-  `,
-})
-class FlatListColumnStyleObjectHost {
-  rows = rows;
-  keyExtractor = (item: IRow): string => item.id;
-}
-
-beforeEach(() => {
-  fabric.reset();
-  registerStyles({ gap8: { gap: 8 } });
-});
-afterEach(() => {
-  unmount(ROOT_TAG);
-  clearGlobalStyles();
-});
-
-describe('FlatList columnWrapperStyle class-name support', () => {
-  it('resolves a class-name string onto the row wrapper alongside flexDirection', async () => {
-    mount(ROOT_TAG, FlatListColumnStyleClassHost);
-    await tick();
-    await tick();
-
-    const found = rowsWithFlexDirection();
-    expect(found.length, 'two flex-row rows for 4 items in 2 columns').toBe(2);
-    expect(found[0].props.gap).toBe(8);
-  });
-
-  it('still accepts an ordinary style object unchanged', async () => {
-    mount(ROOT_TAG, FlatListColumnStyleObjectHost);
-    await tick();
-    await tick();
-
-    const found = rowsWithFlexDirection();
-    expect(found[0].props.gap).toBe(4);
-  });
-});

package/src/components/flat-list/flat-list-array-style.test.ts

@@ -1,131 +0,0 @@
-import '@angular/compiler';
-import { Component } from '@angular/core';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { installFabric } from '@symbiote-native/test-utils';
-import { flattenStyle } from '@symbiote-native/engine';
-
-import { mount, unmount } from '../../render';
-import { FlatList } from './index';
-import { VListItemDirective } from '../virtualized-list/directives';
-
-const ROOT_TAG = 905;
-const fabric = installFabric();
-
-interface IChip {
-  id: string;
-  n: number;
-}
-
-const chips: IChip[] = Array.from({ length: 24 }, (_unused, index) => ({
-  id: `c-${index}`,
-  n: index,
-}));
-
-// Regression coverage for a real device bug: Angular compiles a literal `[style]="…"` binding to
-// the built-in ɵɵstyleMap instruction (NOT a regular @Input() property write), regardless of the
-// target's declared type — it only understands a flat style object, never an array. RN's own
-// `style={[base, override]}` composition idiom (used by examples/angular/App.ts's "FlatList · 24
-// chips" demo for the per-item computed backgroundColor) crashed deep inside Angular's own styling
-// engine (`prop.indexOf is not a function`), and the crash landed inside a zoneless
-// SymbioteChangeDetectionScheduler tick with no catch around it — so the retry kept re-firing
-// forever (RAM climbing, constant re-render log spam on device) while the item never painted its
-// style. Fixed by flattening any array-composed style with the engine's own `flattenStyle` before
-// it reaches a `[style]=` binding — required of app authors (see App.ts) AND of every adapter
-// component that forwards its own `style` @Input() onward (see the `resolvedStyle` getters/fields
-// in virtualized-list, section-list, virtualized-section-list — flat-list's own `rowStyle` had the
-// identical landmine, always assigning an array).
-@Component({
-  selector: 'symbiote-chip-list-host',
-  standalone: true,
-  imports: [FlatList, VListItemDirective],
-  template: `
-    <FlatList
-      testID="chips-list"
-      [data]="chips"
-      [horizontal]="true"
-      [keyExtractor]="keyExtractor"
-      [getItemLayout]="getItemLayout"
-      [style]="{ height: 84 }"
-    >
-      <ng-template vListItem let-item>
-        <symbiote-view
-          [testID]="'chip-' + item.n"
-          [style]="flattenStyle([{ height: 72, width: 64 }, { backgroundColor: chipColor(item) }])"
-        >
-          <symbiote-text>{{ item.n }}</symbiote-text>
-        </symbiote-view>
-      </ng-template>
-    </FlatList>
-  `,
-})
-class ChipListHost {
-  chips = chips;
-  flattenStyle = flattenStyle;
-  keyExtractor = (item: IChip): string => item.id;
-  getItemLayout = (
-    _data: unknown,
-    index: number,
-  ): { length: number; offset: number; index: number } => ({
-    length: 64,
-    offset: 64 * index,
-    index,
-  });
-  chipColor(item: IChip): string {
-    return `hsl(${(item.n * 47) % 360}, 70%, 50%)`;
-  }
-}
-
-beforeEach(() => fabric.reset());
-afterEach(() => unmount(ROOT_TAG));
-
-function findCommitted(
-  nodes: typeof fabric.committed,
-  predicate: (n: (typeof nodes)[number]) => boolean,
-): (typeof nodes)[number] | undefined {
-  for (const node of nodes) {
-    if (predicate(node)) return node;
-    const found = findCommitted(node.children, predicate);
-    if (found !== undefined) return found;
-  }
-  return undefined;
-}
-
-describe('FlatList array-composed item style', () => {
-  it('flattens to a plain object instead of crashing ɵɵstyleMap, and commits it', async () => {
-    mount(ROOT_TAG, ChipListHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const chip0 = findCommitted(fabric.committed, node => node.props.testID === 'chip-0');
-    expect(chip0?.props).toMatchObject({
-      height: 72,
-      width: 64,
-      backgroundColor: 'hsl(0, 70%, 50%)',
-    });
-  });
-
-  it('does not free-run change detection once the window settles', async () => {
-    mount(ROOT_TAG, ChipListHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const scroll = fabric.find(node => node.viewName === 'RCTScrollView');
-    if (scroll !== undefined) {
-      fabric.fireEvent(scroll.instanceHandle, 'topLayout', {
-        layout: { x: 0, y: 0, width: 360, height: 84 },
-      });
-    }
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    let previous = fabric.counts.completeRoot;
-    let stillGrowing = false;
-    for (let tick = 0; tick < 10; tick += 1) {
-      await new Promise<void>(resolve => setTimeout(resolve, 0));
-      const current = fabric.counts.completeRoot;
-      if (current > previous) stillGrowing = true;
-      previous = current;
-    }
-    expect(stillGrowing).toBe(false);
-  });
-});

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

@@ -1,74 +0,0 @@
-// Regression test for the anchor/class bug: FlatList is its own
-// ANCHOR_HOST_COMPONENTS entry, separate from the VirtualizedList/ScrollView anchors it wraps two
-// levels down — a class= on <FlatList> resolves onto FlatList's OWN anchor and needs its OWN
-// anchorHostStyle merge (see index.ts's ngOnChanges), it is NOT transitively fixed by
-// VirtualizedList's or ScrollView's own fixes. 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 { FlatList } from './index';
-import { VListItemDirective } from '../virtualized-list/directives';
-
-const ROOT_TAG = 951;
-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-flatlist-class-host',
-  standalone: true,
-  imports: [FlatList, VListItemDirective],
-  template: `
-    <FlatList
-      class="card"
-      [data]="rows"
-      [keyExtractor]="keyExtractor"
-      [getItemLayout]="getItemLayout"
-    >
-      <ng-template vListItem let-item>
-        <symbiote-text [testID]="item.id">{{ item.id }}</symbiote-text>
-      </ng-template>
-    </FlatList>
-  `,
-})
-class FlatListClassHost {
-  rows = rows;
-  keyExtractor = (item: IRow): string => item.id;
-  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('FlatList anchor class= resolution', () => {
-  it('resolves a class= on the FlatList use site onto the real committed scroll host', async () => {
-    mount(ROOT_TAG, FlatListClassHost);
-    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/flat-list/flat-list-scroll-containment.test.ts

@@ -1,107 +0,0 @@
-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 '../../render';
-import { FlatList } from './index';
-import { VListItemDirective } from '../virtualized-list/directives';
-
-const ROOT_TAG = 907;
-const fabric = installFabric();
-
-interface IChip {
-  id: string;
-  n: number;
-}
-
-const chips: IChip[] = Array.from({ length: 24 }, (_unused, index) => ({
-  id: `c-${index}`,
-  n: index,
-}));
-
-// Mirrors examples/angular/App.ts's "FlatList · 24 chips" demo end to end: a horizontal FlatList
-// with getItemLayout. Regression coverage for a bug fixed 2026-07: cell content used to land
-// OUTSIDE the ScrollView's content view entirely — as top-level siblings
-// of the committed RCTScrollView node, instead of children of its RCTScrollContentView — which is
-// why the device screenshot showed full-width vertically-stacked chips instead of a small
-// horizontal row. Root cause was `<ng-content>` declared once per `@if`/`@else` branch in
-// scroll-view/index.ios.ts (a documented Angular limitation, angular/angular#53310); fixed by
-// collapsing to a single unconditional host tag since iOS never needed axis-specific tags to begin
-// with (`horizontal` already flows as a plain prop). This test pins the CORRECT tree shape.
-@Component({
-  selector: 'symbiote-chip-container-host',
-  standalone: true,
-  imports: [FlatList, VListItemDirective],
-  template: `
-    <FlatList
-      testID="chips-list"
-      [data]="chips"
-      [horizontal]="true"
-      [keyExtractor]="keyExtractor"
-      [getItemLayout]="getItemLayout"
-      [style]="chipListStyle"
-    >
-      <ng-template vListItem let-item>
-        <symbiote-view [testID]="'chip-' + item.n" [style]="chipCardStyle">
-          <symbiote-text>{{ item.n }}</symbiote-text>
-        </symbiote-view>
-      </ng-template>
-    </FlatList>
-  `,
-})
-class ChipContainerHost {
-  chips = chips;
-  chipListStyle = { height: 84 };
-  chipCardStyle = { width: 72, height: 64, borderRadius: 14 };
-  keyExtractor = (item: IChip): string => item.id;
-  getItemLayout = (
-    _data: unknown,
-    index: number,
-  ): { length: number; offset: number; index: number } => ({
-    length: 64,
-    offset: 64 * index,
-    index,
-  });
-}
-
-beforeEach(() => fabric.reset());
-afterEach(() => unmount(ROOT_TAG));
-
-function findWithin(
-  root: (typeof fabric.committed)[number],
-  predicate: (n: (typeof fabric.committed)[number]) => boolean,
-): (typeof fabric.committed)[number] | undefined {
-  if (predicate(root)) return root;
-  for (const child of root.children) {
-    const found = findWithin(child, predicate);
-    if (found !== undefined) return found;
-  }
-  return undefined;
-}
-
-function findTop(
-  nodes: typeof fabric.committed,
-  predicate: (n: (typeof nodes)[number]) => boolean,
-): (typeof nodes)[number] | undefined {
-  for (const node of nodes) {
-    const found = findWithin(node, predicate);
-    if (found !== undefined) return found;
-  }
-  return undefined;
-}
-
-describe('FlatList cells stay inside the ScrollView content view', () => {
-  it('nests chip cells under RCTScrollContentView, not as siblings of RCTScrollView', async () => {
-    mount(ROOT_TAG, ChipContainerHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const scroll = findTop(fabric.committed, node => node.viewName === 'RCTScrollView');
-    expect(scroll).toBeDefined();
-    if (scroll === undefined) return;
-
-    const chip0InsideScroll = findWithin(scroll, node => node.props.testID === 'chip-0');
-    expect(chip0InsideScroll).toBeDefined();
-  });
-});

package/src/components/flat-list/flat-list.test.ts

@@ -1,99 +0,0 @@
-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 '../../render';
-import { FlatList } from './index';
-import {
-  VListEmptyDirective,
-  VListFooterDirective,
-  VListHeaderDirective,
-  VListItemDirective,
-} from '../virtualized-list/directives';
-
-const ROOT_TAG = 904;
-const fabric = installFabric();
-
-interface IRow {
-  id: string;
-  n: number;
-}
-
-const rows: IRow[] = Array.from({ length: 5 }, (_unused, index) => ({
-  id: `r-${index}`,
-  n: index,
-}));
-
-// Regression coverage for a real bug: FlatList's single-column path used to forward the app's
-// <ng-template vListItem> to the inner VirtualizedList via a bare <ng-content></ng-content>
-// passthrough. Angular's @ContentChild does NOT resolve a directive across that second projection
-// hop (it only sees what was projected directly onto the querying component's own tag), so
-// VirtualizedList's itemDir stayed undefined and every cell rendered empty — a real device symptom
-// (a blank list) that headless testing never caught because no test existed for this component
-// family. Fixed by having FlatList capture its own @ContentChild (a single, direct hop) and
-// re-stamp explicit <ng-template>s onto <VirtualizedList>, mirroring VirtualizedSectionList's own
-// (already-working) re-stamp pattern. SectionList had the identical bug, fixed the same way.
-@Component({
-  selector: 'symbiote-flatlist-host',
-  standalone: true,
-  imports: [
-    FlatList,
-    VListItemDirective,
-    VListHeaderDirective,
-    VListFooterDirective,
-    VListEmptyDirective,
-  ],
-  template: `
-    <FlatList
-      testID="rows-list"
-      [data]="rows"
-      [keyExtractor]="keyExtractor"
-      [getItemLayout]="getItemLayout"
-      [style]="{ height: 120 }"
-    >
-      <ng-template vListHeader>
-        <symbiote-text testID="header">header</symbiote-text>
-      </ng-template>
-      <ng-template vListItem let-item>
-        <symbiote-text [testID]="'row-' + item.n">{{ 'row ' + item.n }}</symbiote-text>
-      </ng-template>
-      <ng-template vListFooter>
-        <symbiote-text testID="footer">footer</symbiote-text>
-      </ng-template>
-    </FlatList>
-  `,
-})
-class FlatListHost {
-  rows = rows;
-  keyExtractor = (item: IRow): string => item.id;
-  getItemLayout = (
-    _data: unknown,
-    index: number,
-  ): { length: number; offset: number; index: number } => ({
-    length: 30,
-    offset: 30 * index,
-    index,
-  });
-}
-
-beforeEach(() => fabric.reset());
-afterEach(() => unmount(ROOT_TAG));
-
-describe('FlatList', () => {
-  it('stamps the header, every row, and the footer through the projected templates', async () => {
-    mount(ROOT_TAG, FlatListHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const texts = fabric.created
-      .filter(node => node.props.testID !== undefined)
-      .map(node => node.props.testID);
-
-    expect(texts).toContain('header');
-    expect(texts).toContain('footer');
-    for (let index = 0; index < rows.length; index += 1) {
-      expect(texts).toContain(`row-${index}`);
-    }
-  });
-});