@symbiote-native/angular 0.6.0 → 0.6.2

package/src/components/modal/modal.test.ts

@@ -1,43 +0,0 @@
-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 { Modal } from './index';
-
-const ROOT_TAG = 912;
-const fabric = installFabric();
-
-@Component({
-  selector: 'symbiote-modal-host',
-  standalone: true,
-  imports: [Modal],
-  template: `
-    <Modal [visible]="true" [testID]="'modal'" class="sheet">
-      <symbiote-text>Hello</symbiote-text>
-    </Modal>
-  `,
-})
-class ModalHostFixture {}
-
-beforeEach(() => {
-  fabric.reset();
-});
-afterEach(() => {
-  unmount(ROOT_TAG);
-  clearGlobalStyles();
-});
-
-describe('Modal', () => {
-  it('resolves a class= on the Modal use site onto the real committed view, not the anchor', async () => {
-    registerStyles({ sheet: { backgroundColor: 'purple' } });
-
-    mount(ROOT_TAG, ModalHostFixture);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const node = fabric.find(n => n.props.testID === 'modal');
-    expect(node?.props.backgroundColor).toBe('purple');
-  });
-});

package/src/components/pressable/pressable.test.ts

@@ -1,85 +0,0 @@
-import '@angular/compiler';
-import { Component } from '@angular/core';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
-import { installFabric } from '@symbiote-native/test-utils';
-
-import { mount, unmount } from '../../render';
-import { Pressable } from './index';
-
-const ROOT_TAG = 903;
-const fabric = installFabric();
-
-let capturedHost: PressableHost | undefined;
-
-@Component({
-  selector: 'symbiote-pressable-host',
-  standalone: true,
-  imports: [Pressable],
-  template: `
-    <Pressable
-      [testID]="'pressable'"
-      class="card"
-      (press)="onPress($event)"
-      (pressIn)="onPressIn($event)"
-      (pressOut)="onPressOut($event)"
-    >
-      <symbiote-text>Press me</symbiote-text>
-    </Pressable>
-  `,
-})
-class PressableHost {
-  onPress = vi.fn();
-  onPressIn = vi.fn();
-  onPressOut = 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);
-  clearGlobalStyles();
-});
-
-describe('Pressable', () => {
-  it('synthesizes a press from a touch sequence and fires the lifecycle handlers', async () => {
-    mount(ROOT_TAG, PressableHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const node = fabric.find(n => n.props.testID === 'pressable');
-    expect(node, 'Pressable view committed').toBeDefined();
-
-    const now = Date.now();
-    const touch = { identifier: 1, pageX: 10, pageY: 10, timestamp: now };
-    const nativeEvent = { touches: [touch], changedTouches: [touch] };
-
-    fabric.fireEvent(node?.instanceHandle, 'topTouchStart', nativeEvent);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    expect(capturedHost?.onPressIn).toHaveBeenCalledOnce();
-
-    fabric.fireEvent(node?.instanceHandle, 'topTouchEnd', nativeEvent);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    expect(capturedHost?.onPress).toHaveBeenCalledOnce();
-    expect(capturedHost?.onPressOut).toHaveBeenCalledOnce();
-  });
-
-  it('resolves a class= on the Pressable use site onto the real committed view, not the anchor', async () => {
-    registerStyles({ card: { backgroundColor: 'red' } });
-
-    mount(ROOT_TAG, PressableHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const node = fabric.find(n => n.props.testID === 'pressable');
-    expect(node?.props.backgroundColor).toBe('red');
-  });
-});

package/src/components/refresh-control/refresh-control.test.ts

@@ -1,41 +0,0 @@
-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 { RefreshControl } from './index';
-
-const ROOT_TAG = 914;
-const fabric = installFabric();
-
-@Component({
-  selector: 'symbiote-refresh-control-host',
-  standalone: true,
-  imports: [RefreshControl],
-  template: `
-    <RefreshControl [refreshing]="false" [testID]="'refresh'" class="spinner"></RefreshControl>
-  `,
-})
-class RefreshControlHostFixture {}
-
-beforeEach(() => {
-  fabric.reset();
-});
-afterEach(() => {
-  unmount(ROOT_TAG);
-  clearGlobalStyles();
-});
-
-describe('RefreshControl', () => {
-  it('resolves a class= on the RefreshControl use site onto the real committed view, not the anchor', async () => {
-    registerStyles({ spinner: { backgroundColor: 'green' } });
-
-    mount(ROOT_TAG, RefreshControlHostFixture);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const node = fabric.find(n => n.props.testID === 'refresh');
-    expect(node?.props.backgroundColor).toBe('green');
-  });
-});

package/src/components/safe-area-view/safe-area-view.test.ts

@@ -1,43 +0,0 @@
-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 { SafeAreaView } from './index';
-
-const ROOT_TAG = 910;
-const fabric = installFabric();
-
-@Component({
-  selector: 'symbiote-safe-area-view-host',
-  standalone: true,
-  imports: [SafeAreaView],
-  template: `
-    <SafeAreaView [testID]="'safe-area'" class="screen">
-      <symbiote-text>Hello</symbiote-text>
-    </SafeAreaView>
-  `,
-})
-class SafeAreaViewHostFixture {}
-
-beforeEach(() => {
-  fabric.reset();
-});
-afterEach(() => {
-  unmount(ROOT_TAG);
-  clearGlobalStyles();
-});
-
-describe('SafeAreaView', () => {
-  it('resolves a class= on the SafeAreaView use site onto the real committed view, not the anchor', async () => {
-    registerStyles({ screen: { backgroundColor: 'navy' } });
-
-    mount(ROOT_TAG, SafeAreaViewHostFixture);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const node = fabric.find(n => n.props.testID === 'safe-area');
-    expect(node?.props.backgroundColor).toBe('navy');
-  });
-});

package/src/components/scroll-view/android-scroll-view-axis-projection.test.ts

@@ -1,123 +0,0 @@
-// Regression test for an Android content-projection bug:
-// ScrollView on Android picks a different native content view per axis (RCTView vs
-// AndroidHorizontalScrollContentView), which used to require a separate <ng-content> per
-// axis x refresh-control combination — and Angular only reliably projects into a component's
-// LAST-declared <ng-content> when 2+ distinct declarations exist. Fixed by routing all four
-// branches through a single shared <ng-template>/<ng-content> via a local template-outlet
-// directive (see index.android.ts). Covers all four static combinations plus a runtime axis
-// flip, which the projection.ts records/reconcile path must survive without dropping children.
-import '@angular/compiler';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, signal } from '@angular/core';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { installFabric } from '@symbiote-native/test-utils';
-import { mount, unmount } from '../../render';
-import { RefreshControl } from '../refresh-control';
-import { ScrollView } from './index.android';
-
-const ROOT_TAG = 919;
-const fabric = installFabric();
-const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
-
-function expectCellsProjected(): void {
-  expect(fabric.find(node => node.props.testID === 'a')).toBeDefined();
-  expect(fabric.find(node => node.props.testID === 'b')).toBeDefined();
-}
-
-class HorizontalNoRefreshApp {}
-Component({
-  selector: 'axis-projection-horizontal-no-refresh',
-  standalone: true,
-  imports: [ScrollView],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <ScrollView [horizontal]="true">
-      <symbiote-view testID="a"></symbiote-view>
-      <symbiote-view testID="b"></symbiote-view>
-    </ScrollView>
-  `,
-})(HorizontalNoRefreshApp);
-
-class HorizontalRefreshApp {
-  refresh = (): void => {};
-}
-Component({
-  selector: 'axis-projection-horizontal-refresh',
-  standalone: true,
-  imports: [ScrollView, RefreshControl],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <ScrollView [horizontal]="true">
-      <RefreshControl [refreshing]="true" (refresh)="refresh()" />
-      <symbiote-view testID="a"></symbiote-view>
-      <symbiote-view testID="b"></symbiote-view>
-    </ScrollView>
-  `,
-})(HorizontalRefreshApp);
-
-class VerticalNoRefreshApp {}
-Component({
-  selector: 'axis-projection-vertical-no-refresh',
-  standalone: true,
-  imports: [ScrollView],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <ScrollView>
-      <symbiote-view testID="a"></symbiote-view>
-      <symbiote-view testID="b"></symbiote-view>
-    </ScrollView>
-  `,
-})(VerticalNoRefreshApp);
-
-class AxisSwitchApp {
-  static readonly horizontal = signal(false);
-  get isHorizontal(): boolean {
-    return AxisSwitchApp.horizontal();
-  }
-}
-Component({
-  selector: 'axis-projection-axis-switch',
-  standalone: true,
-  imports: [ScrollView],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <ScrollView [horizontal]="isHorizontal">
-      <symbiote-view testID="a"></symbiote-view>
-      <symbiote-view testID="b"></symbiote-view>
-    </ScrollView>
-  `,
-})(AxisSwitchApp);
-
-beforeEach(() => fabric.reset());
-afterEach(() => unmount(ROOT_TAG));
-
-describe('Android ScrollView projects content across every axis x refresh combination', () => {
-  it('horizontal, no refresh control', async () => {
-    mount(ROOT_TAG, HorizontalNoRefreshApp);
-    await tick();
-    expectCellsProjected();
-  });
-
-  it('horizontal, with a projected refresh control', async () => {
-    mount(ROOT_TAG, HorizontalRefreshApp);
-    await tick();
-    expectCellsProjected();
-  });
-
-  it('vertical, no refresh control', async () => {
-    mount(ROOT_TAG, VerticalNoRefreshApp);
-    await tick();
-    expectCellsProjected();
-  });
-
-  it('survives a runtime vertical -> horizontal axis switch', async () => {
-    AxisSwitchApp.horizontal.set(false);
-    mount(ROOT_TAG, AxisSwitchApp);
-    await tick();
-    expectCellsProjected();
-
-    AxisSwitchApp.horizontal.set(true);
-    await tick();
-    await tick();
-    expectCellsProjected();
-  });
-});

package/src/components/scroll-view/content-container-style-class.test.ts

@@ -1,75 +0,0 @@
-// Regression guard: contentContainerStyle previously accepted ONLY a JS style object/array. It
-// now also resolves a class-name string through the shared style registry, same as `class`/
-// `style` (see shared.ts's resolvedContentContainerStyle getter). Mirrors the Vue twin
-// (content-container-style-class.test.ts) and scroll-view-class-style.test.ts's style-for-this-
-// exact-scenario 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 { ScrollView } from './index.ios';
-
-const ROOT_TAG = 952;
-const fabric = installFabric();
-const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
-
-function committedContentView(): IFakeNode {
-  const node = fabric.find(n => n.viewName === 'RCTScrollContentView');
-  expect(node, 'the scroll content view was committed').toBeDefined();
-  if (node === undefined) throw new Error('unreachable: content view missing');
-  return node;
-}
-
-@Component({
-  selector: 'symbiote-scroll-content-style-class-host',
-  standalone: true,
-  imports: [ScrollView],
-  template: `
-    <ScrollView [contentContainerStyle]="'padded'">
-      <symbiote-text>content</symbiote-text>
-    </ScrollView>
-  `,
-})
-class ScrollViewContentStyleClassHost {}
-
-@Component({
-  selector: 'symbiote-scroll-content-style-object-host',
-  standalone: true,
-  imports: [ScrollView],
-  template: `
-    <ScrollView [contentContainerStyle]="{ padding: 12 }">
-      <symbiote-text>content</symbiote-text>
-    </ScrollView>
-  `,
-})
-class ScrollViewContentStyleObjectHost {}
-
-beforeEach(() => {
-  fabric.reset();
-  registerStyles({ padded: { padding: 20 } });
-});
-afterEach(() => {
-  unmount(ROOT_TAG);
-  clearGlobalStyles();
-});
-
-describe('ScrollView contentContainerStyle class-name support', () => {
-  it('resolves a class-name string onto the content view, not the outer scroll view', async () => {
-    mount(ROOT_TAG, ScrollViewContentStyleClassHost);
-    await tick();
-
-    expect(committedContentView().props.padding).toBe(20);
-    const scrollHost = fabric.find(n => n.viewName === 'RCTScrollView');
-    expect(scrollHost?.props.padding).toBeUndefined();
-  });
-
-  it('still accepts an ordinary style object unchanged', async () => {
-    mount(ROOT_TAG, ScrollViewContentStyleObjectHost);
-    await tick();
-
-    expect(committedContentView().props.padding).toBe(12);
-  });
-});

package/src/components/scroll-view/scroll-view-class-style.test.ts

@@ -1,134 +0,0 @@
-// Regression test for the anchor/class bug: a composed component's own
-// use-site `class="..."` resolves through Angular's addClass/removeClass onto the component's
-// non-painting ANCHOR host (ANCHOR_HOST_COMPONENTS in renderer.ts), never onto the real Fabric
-// node its own template renders — so the resolved style was silently lost. Fixed via
-// anchorHostStyle(this.elementRef) merged into ScrollView's own scrollProps/androidWrappedScrollProps
-// getters (see index.ios.ts / index.android.ts). Mirrors pressable.test.ts's "resolves a class=" case,
-// covering BOTH platforms and the Android refresh-control-wrapped branch (androidWrappedScrollProps
-// is a SEPARATE override from scrollProps, since it recomputes `style` from scratch rather than
-// inheriting the base getter's result).
-import '@angular/compiler';
-import { Component, CUSTOM_ELEMENTS_SCHEMA } 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 { RefreshControl } from '../refresh-control';
-import { ScrollView as AndroidScrollView } from './index.android';
-import { ScrollView as IOSScrollView } from './index.ios';
-
-const ROOT_TAG = 950;
-const fabric = installFabric();
-const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
-
-@Component({
-  selector: 'symbiote-scroll-ios-class-host',
-  standalone: true,
-  imports: [IOSScrollView],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <ScrollView class="card">
-      <symbiote-view testID="cell"></symbiote-view>
-    </ScrollView>
-  `,
-})
-class IOSScrollViewClassHost {}
-
-@Component({
-  selector: 'symbiote-scroll-android-class-host',
-  standalone: true,
-  imports: [AndroidScrollView],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <ScrollView class="card">
-      <symbiote-view testID="cell"></symbiote-view>
-    </ScrollView>
-  `,
-})
-class AndroidScrollViewClassHost {}
-
-@Component({
-  selector: 'symbiote-scroll-android-wrapped-class-host',
-  standalone: true,
-  imports: [AndroidScrollView, RefreshControl],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <ScrollView class="card">
-      <RefreshControl [refreshing]="true" (refresh)="refresh()" />
-      <symbiote-view testID="cell"></symbiote-view>
-    </ScrollView>
-  `,
-})
-class AndroidWrappedScrollViewClassHost {
-  refresh = (): void => undefined;
-}
-
-@Component({
-  selector: 'symbiote-scroll-android-wrapped-layout-class-host',
-  standalone: true,
-  imports: [AndroidScrollView, RefreshControl],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <ScrollView class="box">
-      <RefreshControl [refreshing]="true" (refresh)="refresh()" />
-      <symbiote-view testID="cell"></symbiote-view>
-    </ScrollView>
-  `,
-})
-class AndroidWrappedScrollViewLayoutClassHost {
-  refresh = (): void => undefined;
-}
-
-beforeEach(() => {
-  fabric.reset();
-  registerStyles({ card: { backgroundColor: 'red' }, box: { flex: 1, height: 84 } });
-});
-afterEach(() => {
-  unmount(ROOT_TAG);
-  clearGlobalStyles();
-});
-
-describe('ScrollView anchor class= resolution', () => {
-  it('resolves a class= on the iOS ScrollView use site onto the real committed scroll host', async () => {
-    mount(ROOT_TAG, IOSScrollViewClassHost);
-    await tick();
-
-    const node = fabric.find(n => n.props.backgroundColor === 'red');
-    expect(node, 'a real Fabric node carries the class-derived style').toBeDefined();
-  });
-
-  it('resolves a class= on the Android ScrollView use site (no refresh control)', async () => {
-    mount(ROOT_TAG, AndroidScrollViewClassHost);
-    await tick();
-
-    const node = fabric.find(n => n.props.backgroundColor === 'red');
-    expect(node, 'a real Fabric node carries the class-derived style').toBeDefined();
-  });
-
-  it('resolves a class= on the Android ScrollView use site wrapped by a projected RefreshControl', async () => {
-    mount(ROOT_TAG, AndroidWrappedScrollViewClassHost);
-    await tick();
-
-    const node = fabric.find(n => n.props.backgroundColor === 'red');
-    expect(node, 'a real Fabric node carries the class-derived style').toBeDefined();
-  });
-
-  // Regression for a real device bug distinct from the one above: a class-derived LAYOUT
-  // property (flex/height/…) must reach the OUTER refresh-control wrapper via splitLayoutProps,
-  // not just the inner scroll view — a class carrying only a color property (the test above)
-  // never exercises this split at all, since color is never a layout key. Without
-  // `layoutSplitStyle` feeding the anchor's style INTO the split (not tacked on after), the
-  // wrapper never receives its flex/height share and collapses to zero size — the whole
-  // ScrollView renders nothing on a real Android device. Mirrors the Vue adapter's identical
-  // `layoutSplitStyle` fix (same root cause, same symptom).
-  it('resolves a class-derived LAYOUT style onto the Android outer refresh-control wrapper', async () => {
-    mount(ROOT_TAG, AndroidWrappedScrollViewLayoutClassHost);
-    await tick();
-
-    const wrapper = fabric.find(n => n.props.refreshing === true);
-    expect(wrapper, 'the outer refresh-control wrapper committed').toBeDefined();
-    expect(wrapper?.props.flex).toBe(1);
-    expect(wrapper?.props.height).toBe(84);
-  });
-});