@symbiote-native/angular 0.6.0 → 0.6.2

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 '../renderer';
-
-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();
-  });
-});

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