@symbiote-native/angular 0.6.1 → 0.6.2

package/src/renderer/renderer.test.ts

@@ -1,203 +0,0 @@
-// Co-located headless test for the Angular renderer seam. Drives SymbioteRenderer
-// directly — no Angular runtime, no compiler — against the shared fake Fabric slot, proving
-// each Renderer2 method maps onto the engine mutation API and commits a correct Fabric tree.
-// The bootstrap (mount → createComponent) is validated separately on a real host / the AOT
-// example; this isolates the seam, which is the deterministic, framework-free half.
-
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import {
-  clearGlobalStyles,
-  createSurface,
-  disposeRoot,
-  isAnchor,
-  isSymbioteNode,
-  registerStyles,
-} from '@symbiote-native/engine';
-import { installFabric } from '@symbiote-native/test-utils';
-import { SymbioteRenderer, SymbioteRendererFactory } from './index';
-import { registerComposedComponent } from '../anchor-host-registry';
-
-const ROOT_TAG = 707;
-const PROBE_ID = 'probe';
-
-const fabric = installFabric();
-
-// A macrotask boundary drains the engine's coalesced (requestCommit) commit before asserting.
-const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
-
-function setup(): { surface: ReturnType<typeof createSurface>; renderer: SymbioteRenderer } {
-  const surface = createSurface(ROOT_TAG);
-  const renderer = new SymbioteRendererFactory(surface).createRenderer(null, null);
-  if (!(renderer instanceof SymbioteRenderer))
-    throw new Error('unreachable: factory built the renderer');
-  return { surface, renderer };
-}
-
-beforeEach(() => fabric.reset());
-afterEach(() => {
-  disposeRoot(ROOT_TAG);
-  clearGlobalStyles();
-});
-
-describe('Angular SymbioteRenderer drives the engine', () => {
-  it('maps createElement / createText / appendChild into a committed Fabric tree', async () => {
-    const { surface, renderer } = setup();
-    const view = renderer.createElement('symbiote-view');
-    const text = renderer.createElement('symbiote-text');
-    const raw = renderer.createText('Hello');
-    renderer.appendChild(text, raw);
-    renderer.appendChild(view, text);
-    renderer.appendChild(surface, view);
-    await tick();
-
-    // The engine wraps surface.children in the synthetic box-none AppContainer root.
-    const root = fabric.appRoot();
-    expect(fabric.serialize(root.children)).toBe('RCTView(RCTText(RCTRawText "Hello"))');
-  });
-
-  it('maps additional symbiote intrinsics through the shared descriptor table', async () => {
-    const { surface, renderer } = setup();
-    const spinner = renderer.createElement('symbiote-activity-indicator');
-    renderer.setProperty(spinner, 'testID', 'spinner');
-    renderer.setProperty(spinner, 'animating', true);
-    const image = renderer.createElement('symbiote-image');
-    renderer.setProperty(image, 'testID', 'image');
-    renderer.setProperty(image, 'source', { uri: 'https://example.invalid/image.png' });
-    renderer.appendChild(surface, spinner);
-    renderer.appendChild(surface, image);
-    await tick();
-
-    const committed = fabric.find(node => node.props.testID === 'spinner');
-    expect(committed?.viewName).toBe('ActivityIndicatorView');
-    expect(committed?.props.animating).toBe(true);
-    const committedImage = fabric.find(node => node.props.testID === 'image');
-    expect(committedImage?.viewName).toBe('RCTImageView');
-    expect(committedImage?.props.source).toEqual({ uri: 'https://example.invalid/image.png' });
-  });
-
-  it('commits setProperty and merges per-key setStyle into one style prop', async () => {
-    const { surface, renderer } = setup();
-    const view = renderer.createElement('symbiote-view');
-    renderer.setProperty(view, 'nativeID', PROBE_ID);
-    renderer.setStyle(view, 'padding', 24);
-    renderer.setStyle(view, 'opacity', 0.5);
-    renderer.appendChild(surface, view);
-    await tick();
-
-    const committed = fabric.find(node => node.props.nativeID === PROBE_ID);
-    expect(committed, 'the probed RCTView committed').toBeDefined();
-    // Angular emits a [style] binding as per-key setStyle; the seam folds them into one style
-    // object, then the engine HOISTS style keys to top-level Fabric props (RN's flat C++ props
-    // contract — style is never a nested key on a committed node).
-    expect(committed?.props).toMatchObject({ nativeID: PROBE_ID, padding: 24, opacity: 0.5 });
-  });
-
-  it('resolves addClass tokens through the shared style registry and lets explicit style win', async () => {
-    registerStyles({ card: { padding: 10, backgroundColor: 'red' } });
-    const { surface, renderer } = setup();
-    const view = renderer.createElement('symbiote-view');
-    renderer.setProperty(view, 'nativeID', PROBE_ID);
-    // Ivy compiles class="card highlight" to one addClass call per token, never a single string.
-    renderer.addClass(view, 'card');
-    renderer.addClass(view, 'highlight');
-    renderer.setStyle(view, 'backgroundColor', 'blue');
-    renderer.appendChild(surface, view);
-    await tick();
-
-    const committed = fabric.find(node => node.props.nativeID === PROBE_ID);
-    // padding comes from the class; backgroundColor is explicit style, so it wins over the
-    // class-derived red — same precedence Vue's class="..."/:style="..." merge guarantees.
-    expect(committed?.props).toMatchObject({ padding: 10, backgroundColor: 'blue' });
-  });
-
-  it('removeClass drops a token and recomputes the resolved style', async () => {
-    registerStyles({ card: { padding: 10 }, highlight: { opacity: 0.5 } });
-    const { surface, renderer } = setup();
-    const view = renderer.createElement('symbiote-view');
-    renderer.setProperty(view, 'nativeID', PROBE_ID);
-    renderer.addClass(view, 'card');
-    renderer.addClass(view, 'highlight');
-    renderer.removeClass(view, 'highlight');
-    renderer.appendChild(surface, view);
-    await tick();
-
-    const committed = fabric.find(node => node.props.nativeID === PROBE_ID);
-    expect(committed?.props.padding).toBe(10);
-    expect(committed?.props.opacity).toBeUndefined();
-  });
-
-  it('removeChild detaches a node from the next commit', async () => {
-    const { surface, renderer } = setup();
-    const keep = renderer.createElement('symbiote-view');
-    const drop = renderer.createElement('symbiote-view');
-    renderer.setProperty(drop, 'nativeID', PROBE_ID);
-    renderer.appendChild(surface, keep);
-    renderer.appendChild(surface, drop);
-    await tick();
-    expect(
-      fabric.find(node => node.props.nativeID === PROBE_ID),
-      'present before remove',
-    ).toBeDefined();
-
-    fabric.reset();
-    renderer.removeChild(surface, drop);
-    await tick();
-    expect(
-      fabric.find(node => node.props.nativeID === PROBE_ID),
-      'gone after remove',
-    ).toBeUndefined();
-  });
-
-  it('createComment yields an anchor the commit walk skips but flattens its children', async () => {
-    const { surface, renderer } = setup();
-    const anchor = renderer.createComment();
-    renderer.appendChild(anchor, renderer.createElement('symbiote-view'));
-    renderer.appendChild(surface, anchor);
-    renderer.appendChild(surface, renderer.createElement('symbiote-text'));
-    await tick();
-
-    // The anchor never reaches Fabric; its child keeps the same sibling position. Angular
-    // composed components use this to make their framework host element disappear.
-    const root = fabric.appRoot();
-    expect(fabric.serialize(root.children)).toBe('RCTViewRCTText');
-  });
-
-  it('listen attaches an explicit event listener and the unlisten fn removes it', () => {
-    const { renderer } = setup();
-    const view = renderer.createElement('symbiote-view');
-    expect(isSymbioteNode(view)).toBe(true);
-    if (!isSymbioteNode(view)) throw new Error('unreachable: createElement returns a node');
-
-    const unlisten = renderer.listen(view, 'press', () => {});
-    expect(view.listeners?.has('press'), 'listener attached under the explicit name').toBe(true);
-    unlisten();
-    expect(view.listeners?.has('press'), 'unlisten removed it').toBe(false);
-  });
-
-  it('listen on a global target (window/document) is an inert no-op', () => {
-    const { renderer } = setup();
-    expect(() => renderer.listen('window', 'resize', () => {})()).not.toThrow();
-  });
-
-  // App/third-party selectors must not be hardcoded into ANCHOR_HOST_COMPONENTS — the owning
-  // package registers itself via registerComposedComponent, same as an adapter-owned composed
-  // component. 'RefApiDemo' names examples/angular's demo component; this test never imports
-  // it, it only proves the renderer treats an unregistered selector as a raw Fabric view name,
-  // not a hardcoded anchor host. MUST run before the registration test below, since
-  // registerComposedComponent mutates the module-level Set for the rest of the file.
-  it('does not anchor-host an app-owned selector unless it self-registers', () => {
-    const { renderer } = setup();
-    const node = renderer.createElement('RefApiDemo');
-    if (!isSymbioteNode(node)) throw new Error('unreachable: createElement returns a node');
-    expect(isAnchor(node), 'falls through to a raw Fabric view, not an anchor').toBe(false);
-    expect(node.component).toBe('RefApiDemo');
-  });
-
-  it('anchor-hosts an app-owned selector once it self-registers via registerComposedComponent', () => {
-    registerComposedComponent('RefApiDemo');
-    const { renderer } = setup();
-    const node = renderer.createElement('RefApiDemo');
-    if (!isSymbioteNode(node)) throw new Error('unreachable: createElement returns a node');
-    expect(isAnchor(node)).toBe(true);
-  });
-});

package/src/services/services.test.ts

@@ -1,163 +0,0 @@
-import '@angular/compiler';
-import { Component, inject } from '@angular/core';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { Appearance, Dimensions } from '@symbiote-native/engine';
-import { installFabric } from '@symbiote-native/test-utils';
-
-import { mount, unmount } from '../render';
-import { ColorSchemeService } from './color-scheme.service';
-import { WindowDimensionsService } from './window-dimensions.service';
-
-const ROOT_TAG = 900;
-const fabric = installFabric();
-
-let capturedColorSchemeService: ColorSchemeService | undefined;
-let capturedWindowDimensionsService: WindowDimensionsService | undefined;
-
-@Component({
-  selector: 'symbiote-color-scheme-consumer',
-  standalone: true,
-  providers: [ColorSchemeService],
-  template: '',
-})
-class ColorSchemeConsumer {
-  readonly service = inject(ColorSchemeService);
-  constructor() {
-    capturedColorSchemeService = this.service;
-  }
-}
-
-@Component({
-  selector: 'symbiote-window-dimensions-consumer',
-  standalone: true,
-  providers: [WindowDimensionsService],
-  template: '',
-})
-class WindowDimensionsConsumer {
-  readonly service = inject(WindowDimensionsService);
-  constructor() {
-    capturedWindowDimensionsService = this.service;
-  }
-}
-
-@Component({
-  selector: 'symbiote-root-window-dimensions-consumer',
-  standalone: true,
-  template: '',
-})
-class RootWindowDimensionsConsumer {
-  readonly service = inject(WindowDimensionsService);
-  constructor() {
-    capturedWindowDimensionsService = this.service;
-  }
-}
-
-beforeEach(() => {
-  capturedColorSchemeService = undefined;
-  capturedWindowDimensionsService = undefined;
-});
-
-afterEach(() => {
-  unmount(ROOT_TAG);
-  fabric.reset();
-  vi.restoreAllMocks();
-});
-
-describe('Angular DI services over engine modules', () => {
-  it('ColorSchemeService subscribes to Appearance and cleans up on unmount', async () => {
-    type IGenericListener = (...args: unknown[]) => void;
-    const activeListeners = new Set<IGenericListener>();
-    let emitToListeners: (preferences: { colorScheme: 'light' | 'dark' | null }) => void = () => {};
-
-    vi.spyOn(Appearance, 'getColorScheme').mockReturnValue('light');
-    vi.spyOn(Appearance, 'addChangeListener').mockImplementation(listener => {
-      activeListeners.add(listener as IGenericListener);
-      emitToListeners = preferences => {
-        for (const l of activeListeners) l(preferences);
-      };
-      return {
-        remove: () => {
-          activeListeners.delete(listener as IGenericListener);
-        },
-      };
-    });
-
-    mount(ROOT_TAG, ColorSchemeConsumer);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const service = capturedColorSchemeService;
-    if (!service) throw new Error('ColorSchemeService was not captured');
-
-    expect(service.colorScheme()).toBe('light');
-    expect(Appearance.addChangeListener).toHaveBeenCalledOnce();
-
-    emitToListeners({ colorScheme: 'dark' });
-    expect(service.colorScheme()).toBe('dark');
-
-    emitToListeners({ colorScheme: 'light' });
-    expect(service.colorScheme()).toBe('light');
-
-    unmount(ROOT_TAG);
-    expect(activeListeners.size).toBe(0);
-
-    // After unmount, the signal must stop reacting to further events.
-    emitToListeners({ colorScheme: 'dark' });
-    expect(service.colorScheme()).toBe('light');
-  });
-
-  it('provides WindowDimensionsService from the Symbiote root injector', async () => {
-    const initialMetrics = { width: 100, height: 200, scale: 1, fontScale: 1 };
-    vi.spyOn(Dimensions, 'get').mockReturnValue(initialMetrics);
-    vi.spyOn(Dimensions, 'addEventListener').mockReturnValue({ remove: vi.fn() });
-
-    mount(ROOT_TAG, RootWindowDimensionsConsumer);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    expect(capturedWindowDimensionsService?.dimensions()).toEqual(initialMetrics);
-  });
-
-  it('WindowDimensionsService subscribes to Dimensions and ignores no-op updates', async () => {
-    const remove = vi.fn();
-    let capturedListener:
-      | ((set: {
-          window: { width: number; height: number; scale: number; fontScale: number };
-          screen: { width: number; height: number; scale: number; fontScale: number };
-        }) => void)
-      | undefined;
-
-    const initialMetrics = { width: 100, height: 200, scale: 1, fontScale: 1 };
-    vi.spyOn(Dimensions, 'get').mockReturnValue(initialMetrics);
-    vi.spyOn(Dimensions, 'addEventListener').mockImplementation((_type, listener) => {
-      capturedListener = set =>
-        listener(set as { window: typeof initialMetrics; screen: typeof initialMetrics });
-      return { remove };
-    });
-
-    mount(ROOT_TAG, WindowDimensionsConsumer);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const service = capturedWindowDimensionsService;
-    if (!service) throw new Error('WindowDimensionsService was not captured');
-
-    const initial = service.dimensions();
-    expect(initial).toEqual(initialMetrics);
-    expect(Dimensions.addEventListener).toHaveBeenCalledOnce();
-
-    // Same metrics: signal identity must be preserved (equality guard).
-    capturedListener?.({
-      window: { width: 100, height: 200, scale: 1, fontScale: 1 },
-      screen: { width: 100, height: 200, scale: 1, fontScale: 1 },
-    });
-    expect(service.dimensions()).toBe(initial);
-
-    // Different metrics: signal updates.
-    capturedListener?.({
-      window: { width: 300, height: 400, scale: 2, fontScale: 2 },
-      screen: { width: 300, height: 400, scale: 2, fontScale: 2 },
-    });
-    expect(service.dimensions()).toEqual({ width: 300, height: 400, scale: 2, fontScale: 2 });
-
-    unmount(ROOT_TAG);
-    expect(remove).toHaveBeenCalledOnce();
-  });
-});