@symbiote-native/angular 0.6.1 → 0.7.0

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

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

@@ -1,194 +0,0 @@
-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 as AndroidScrollView } from './index.android';
-import { ScrollView } from './index.ios';
-
-const ROOT_TAG = 918;
-const fabric = installFabric();
-const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
-
-class StickyProjectionApp {}
-Component({
-  selector: 'symbiote-scroll-sticky-projection-test',
-  standalone: true,
-  imports: [ScrollView],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <ScrollView [stickyHeaderIndices]="[1]">
-      <symbiote-view testID="before"></symbiote-view>
-      <symbiote-view testID="sticky"></symbiote-view>
-      <symbiote-view testID="after"></symbiote-view>
-    </ScrollView>
-  `,
-})(StickyProjectionApp);
-
-class CustomStickyHeader {
-  static instantiated = false;
-
-  constructor() {
-    CustomStickyHeader.instantiated = true;
-  }
-}
-Component({
-  selector: 'CustomStickyHeader',
-  standalone: true,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <symbiote-view testID="custom-sticky-wrapper">
-      <ng-content></ng-content>
-    </symbiote-view>
-  `,
-})(CustomStickyHeader);
-
-class CustomStickyProjectionApp {
-  CustomStickyHeader = CustomStickyHeader;
-}
-Component({
-  selector: 'symbiote-scroll-custom-sticky-projection-test',
-  standalone: true,
-  imports: [ScrollView],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <ScrollView [stickyHeaderIndices]="[0]" [StickyHeaderComponent]="CustomStickyHeader">
-      <symbiote-view testID="sticky"></symbiote-view>
-      <symbiote-view testID="after"></symbiote-view>
-    </ScrollView>
-  `,
-})(CustomStickyProjectionApp);
-
-class IOSRefreshProjectionApp {
-  static refreshes = 0;
-
-  readonly refreshing = signal(false);
-
-  refresh = (): void => {
-    this.refreshing.set(true);
-    setTimeout(() => {
-      this.refreshing.set(false);
-      IOSRefreshProjectionApp.refreshes += 1;
-    }, 0);
-  };
-}
-Component({
-  selector: 'symbiote-scroll-ios-refresh-projection-test',
-  standalone: true,
-  imports: [ScrollView, RefreshControl],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <ScrollView>
-      <RefreshControl [refreshing]="refreshing()" (refresh)="refresh()" />
-      <symbiote-view testID="content"></symbiote-view>
-    </ScrollView>
-  `,
-})(IOSRefreshProjectionApp);
-
-class AndroidRefreshProjectionApp {
-  static refreshes = 0;
-
-  refresh = (): void => {
-    AndroidRefreshProjectionApp.refreshes += 1;
-  };
-}
-Component({
-  selector: 'symbiote-scroll-android-refresh-projection-test',
-  standalone: true,
-  imports: [AndroidScrollView, RefreshControl],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <ScrollView [style]="{ marginTop: 4, backgroundColor: 'red' }">
-      <RefreshControl [refreshing]="true" (refresh)="refresh()" />
-      <symbiote-view testID="content"></symbiote-view>
-    </ScrollView>
-  `,
-})(AndroidRefreshProjectionApp);
-
-beforeEach(() => {
-  fabric.reset();
-  CustomStickyHeader.instantiated = false;
-  IOSRefreshProjectionApp.refreshes = 0;
-  AndroidRefreshProjectionApp.refreshes = 0;
-});
-afterEach(() => unmount(ROOT_TAG));
-
-describe('Angular ScrollView projection parity', () => {
-  it('auto-wraps projected children selected by stickyHeaderIndices', async () => {
-    mount(ROOT_TAG, StickyProjectionApp);
-    await tick();
-
-    const root = fabric.appRoot();
-    expect(fabric.serialize(root.children)).toBe(
-      'RCTScrollView(RCTScrollContentView(RCTViewRCTView(RCTView)RCTView))',
-    );
-
-    const stickyWrapper = fabric.find(
-      node =>
-        node.props.collapsable === false &&
-        node.children.some(child => child.props.testID === 'sticky'),
-    );
-    expect(stickyWrapper?.props).toMatchObject({ collapsable: false, onLayout: true });
-  });
-
-  it('keeps auto StickyHeaderComponent projection on the built-in AOT-safe wrapper', async () => {
-    mount(ROOT_TAG, CustomStickyProjectionApp);
-    await tick();
-
-    expect(CustomStickyHeader.instantiated).toBe(false);
-    expect(fabric.find(node => node.props.testID === 'custom-sticky-wrapper')).toBeUndefined();
-
-    const stickyWrapper = fabric.find(
-      node =>
-        node.props.collapsable === false &&
-        node.children.some(child => child.props.testID === 'sticky'),
-    );
-    expect(stickyWrapper?.props).toMatchObject({ collapsable: false, onLayout: true });
-  });
-
-  it('renders iOS RefreshControl before content and syncs the controlled native spinner', async () => {
-    mount(ROOT_TAG, IOSRefreshProjectionApp);
-    await tick();
-
-    const root = fabric.appRoot();
-    expect(fabric.serialize(root.children)).toBe(
-      'RCTScrollView(PullToRefreshViewRCTScrollContentView(RCTView))',
-    );
-
-    const refresh = root.children[0]?.children[0];
-    expect(refresh?.viewName).toBe('PullToRefreshView');
-    fabric.fireEvent(refresh?.instanceHandle, 'topRefresh');
-    await tick();
-    await tick();
-
-    expect(IOSRefreshProjectionApp.refreshes).toBe(1);
-    expect(fabric.commands.at(-1)).toMatchObject({
-      commandName: 'setNativeRefreshing',
-      args: [false],
-    });
-    expect(fabric.commands.at(-1)?.node.tag).toBe(refresh?.tag);
-  });
-
-  it('wraps an Android projected RefreshControl around the scroll view', async () => {
-    mount(ROOT_TAG, AndroidRefreshProjectionApp);
-    await tick();
-
-    const root = fabric.appRoot();
-    expect(fabric.serialize(root.children)).toBe(
-      'PullToRefreshView(RCTScrollView(RCTScrollContentView(RCTView)))',
-    );
-
-    const refresh = root.children[0];
-    expect(refresh?.props).toMatchObject({ refreshing: true, marginTop: 4 });
-    fabric.fireEvent(refresh?.instanceHandle, 'topRefresh');
-    await tick();
-
-    expect(AndroidRefreshProjectionApp.refreshes).toBe(1);
-    expect(refresh?.children[0]?.props).toMatchObject({
-      backgroundColor: 'red',
-      nestedScrollEnabled: true,
-    });
-    expect(fabric.find(node => node.props.testID === 'content')).toBeDefined();
-  });
-});

package/src/components/switch/android-switch-class.test.ts

@@ -1,42 +0,0 @@
-// Android-specific twin of the class= regression covered for iOS in switch.test.ts. Switch's
-// hostProps getter is overridden per-platform component (index.ios.ts / index.android.ts), each
-// injecting its OWN ElementRef, so the fix needs its own coverage against the Android build too.
-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 { Switch } from './index.android';
-
-const ROOT_TAG = 942;
-const fabric = installFabric();
-
-beforeEach(() => {
-  fabric.reset();
-});
-afterEach(() => {
-  unmount(ROOT_TAG);
-  clearGlobalStyles();
-});
-
-@Component({
-  selector: 'symbiote-android-switch-class-host',
-  standalone: true,
-  imports: [Switch],
-  template: `<Switch [testID]="'switch-with-class'" class="card"></Switch>`,
-})
-class AndroidSwitchClassHost {}
-
-describe('Switch (android)', () => {
-  it('resolves a class= on the Switch use site onto the real committed view, not the anchor', async () => {
-    registerStyles({ card: { backgroundColor: 'red' } });
-
-    mount(ROOT_TAG, AndroidSwitchClassHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const node = fabric.find(n => n.props.testID === 'switch-with-class');
-    expect(node?.props.backgroundColor).toBe('red');
-  });
-});

package/src/components/switch/switch.test.ts

@@ -1,92 +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 { Switch } from './index';
-
-const ROOT_TAG = 902;
-const fabric = installFabric();
-
-let capturedHost: SwitchHost | undefined;
-
-@Component({
-  selector: 'symbiote-switch-host',
-  standalone: true,
-  imports: [Switch],
-  template: `
-    <Switch [value]="value" (valueChange)="onValueChange($event)" (change)="onChange($event)">
-    </Switch>
-  `,
-})
-class SwitchHost {
-  value = false;
-  onValueChange = vi.fn((next: boolean) => {
-    this.value = next;
-  });
-  onChange = 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('Switch', () => {
-  it('commits a controlled Switch with the resolved iOS color props', async () => {
-    mount(ROOT_TAG, SwitchHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const node = fabric.find(n => n.viewName === 'Switch');
-    expect(node, 'Switch node committed').toBeDefined();
-    expect(node?.props).toMatchObject({
-      value: false,
-    });
-  });
-
-  it('fires onValueChange and onChange when native reports a change', async () => {
-    mount(ROOT_TAG, SwitchHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const node = fabric.find(n => n.viewName === 'Switch');
-    expect(node).toBeDefined();
-
-    fabric.fireEvent(node?.instanceHandle, 'topChange', { value: true, eventCount: 1 });
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const host = capturedHost;
-    expect(host?.onValueChange).toHaveBeenCalledWith(true);
-    expect(host?.onChange).toHaveBeenCalled();
-    expect(host?.value).toBe(true);
-  });
-
-  it('resolves a class= on the Switch use site onto the real committed view, not the anchor', async () => {
-    registerStyles({ card: { backgroundColor: 'red' } });
-
-    mount(ROOT_TAG, SwitchClassHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const node = fabric.find(n => n.props.testID === 'switch-with-class');
-    expect(node?.props.backgroundColor).toBe('red');
-  });
-});
-
-@Component({
-  selector: 'symbiote-switch-class-host',
-  standalone: true,
-  imports: [Switch],
-  template: `<Switch [testID]="'switch-with-class'" class="card"></Switch>`,
-})
-class SwitchClassHost {}

package/src/components/text-input-class-style.test.ts

@@ -1,54 +0,0 @@
-// Regression test for the anchor/class bug: TextInput is its own
-// ANCHOR_HOST_COMPONENTS entry — a class= on <TextInput> resolves onto TextInput's OWN anchor and
-// needs its OWN anchorHostStyle merge (see text-input.ts's buildPassthrough), for BOTH the
-// single-line and multiline host it renders through (`@if`/`@else` picks one at runtime). 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 { TextInput } from './text-input';
-
-const ROOT_TAG = 917;
-const fabric = installFabric();
-
-@Component({
-  selector: 'symbiote-text-input-class-host',
-  standalone: true,
-  imports: [TextInput],
-  template: `
-    <TextInput [testID]="'single-line'" class="card" />
-    <TextInput [testID]="'multiline'" [multiline]="true" class="card" />
-  `,
-})
-class TextInputClassHost {}
-
-beforeEach(() => {
-  fabric.reset();
-  registerStyles({ card: { backgroundColor: 'red' } });
-});
-afterEach(() => {
-  unmount(ROOT_TAG);
-  clearGlobalStyles();
-});
-
-describe('TextInput anchor class= resolution', () => {
-  it('resolves a class= on the TextInput use site onto the real committed single-line host', async () => {
-    mount(ROOT_TAG, TextInputClassHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const node = fabric.find(n => n.props.testID === 'single-line');
-    expect(node?.props.backgroundColor).toBe('red');
-  });
-
-  it('resolves a class= on the TextInput use site onto the real committed multiline host', async () => {
-    mount(ROOT_TAG, TextInputClassHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const node = fabric.find(n => n.props.testID === 'multiline');
-    expect(node?.props.backgroundColor).toBe('red');
-  });
-});

package/src/components/touchable/touchable.test.ts

@@ -1,102 +0,0 @@
-// Regression coverage for the anchor-vs-real-content class bug (see pressable.test.ts for the
-// full writeup): a `class="..."` written on a composed component's OWN use site always resolves
-// through Angular's addClass/removeClass onto that component's non-painting ANCHOR host, never
-// onto the real committed Fabric view one (or more) levels down. Each Touchable forwards its own
-// anchor's resolved style into whatever it commits, mirroring Pressable's fix.
-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 { TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback } from './index';
-
-const ROOT_TAG = 940;
-const fabric = installFabric();
-
-beforeEach(() => {
-  fabric.reset();
-});
-afterEach(() => {
-  unmount(ROOT_TAG);
-  clearGlobalStyles();
-});
-
-@Component({
-  selector: 'symbiote-touchable-opacity-host',
-  standalone: true,
-  imports: [TouchableOpacity],
-  template: `
-    <TouchableOpacity [testID]="'opacity'" class="card">
-      <symbiote-text>Press</symbiote-text>
-    </TouchableOpacity>
-  `,
-})
-class TouchableOpacityHost {}
-
-@Component({
-  selector: 'symbiote-touchable-highlight-host',
-  standalone: true,
-  imports: [TouchableHighlight],
-  template: `
-    <TouchableHighlight [testID]="'highlight'" class="card">
-      <symbiote-text>Press</symbiote-text>
-    </TouchableHighlight>
-  `,
-})
-class TouchableHighlightHost {}
-
-@Component({
-  selector: 'symbiote-touchable-without-feedback-host',
-  standalone: true,
-  imports: [TouchableWithoutFeedback],
-  template: `
-    <TouchableWithoutFeedback [testID]="'without-feedback'" class="card">
-      <symbiote-text>Press</symbiote-text>
-    </TouchableWithoutFeedback>
-  `,
-})
-class TouchableWithoutFeedbackHost {}
-
-describe('TouchableOpacity', () => {
-  it('resolves a class= on the TouchableOpacity use site onto the real committed view, not the anchor', async () => {
-    registerStyles({ card: { backgroundColor: 'red' } });
-
-    mount(ROOT_TAG, TouchableOpacityHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    // TouchableOpacity folds its OWN class-derived style into the inner AnimatedView leaf, not
-    // the outer Pressable — mirroring React's TouchableOpacity (see adapters/react/src/components/
-    // touchable/index.ts's comment: "className is pulled out here, like style, and applied to the
-    // inner AnimatedView... it would land on the outer Pressable instead, which is not what a user
-    // expects"), so the testID-carrying outer view is NOT where the resolved style lands.
-    expect(fabric.find(n => n.props.testID === 'opacity')).toBeDefined();
-    const node = fabric.find(n => n.props.backgroundColor === 'red');
-    expect(node, 'a committed node received the class-derived style').toBeDefined();
-  });
-});
-
-describe('TouchableHighlight', () => {
-  it('resolves a class= on the TouchableHighlight use site onto the real committed view, not the anchor', async () => {
-    registerStyles({ card: { backgroundColor: 'red' } });
-
-    mount(ROOT_TAG, TouchableHighlightHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const node = fabric.find(n => n.props.testID === 'highlight');
-    expect(node?.props.backgroundColor).toBe('red');
-  });
-});
-
-describe('TouchableWithoutFeedback', () => {
-  it('resolves a class= on the TouchableWithoutFeedback use site onto the real committed view, not the anchor', async () => {
-    registerStyles({ card: { backgroundColor: 'red' } });
-
-    mount(ROOT_TAG, TouchableWithoutFeedbackHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const node = fabric.find(n => n.props.testID === 'without-feedback');
-    expect(node?.props.backgroundColor).toBe('red');
-  });
-});

package/src/components/touchable-native-feedback/touchable-native-feedback.test.ts

@@ -1,49 +0,0 @@
-// Regression coverage for the anchor-vs-real-content class bug (see pressable.test.ts for the
-// full writeup): a `class="..."` written on TouchableNativeFeedback's OWN use site always resolves
-// through Angular's addClass/removeClass onto its non-painting ANCHOR host, never onto the real
-// committed feedback <symbiote-view> one level down. TouchableNativeFeedback has no explicit
-// `style`/`class`-forwarding @Input() of its own, so the anchor's class-derived style is the
-// ONLY style source hostProps.style forwards.
-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 { TouchableNativeFeedback } from './index';
-
-const ROOT_TAG = 941;
-const fabric = installFabric();
-
-beforeEach(() => {
-  fabric.reset();
-});
-afterEach(() => {
-  unmount(ROOT_TAG);
-  clearGlobalStyles();
-});
-
-@Component({
-  selector: 'symbiote-touchable-native-feedback-host',
-  standalone: true,
-  imports: [TouchableNativeFeedback],
-  template: `
-    <TouchableNativeFeedback [testID]="'native-feedback'" class="card">
-      <symbiote-text>Press</symbiote-text>
-    </TouchableNativeFeedback>
-  `,
-})
-class TouchableNativeFeedbackHost {}
-
-describe('TouchableNativeFeedback', () => {
-  it('resolves a class= on the TouchableNativeFeedback use site onto the real committed view, not the anchor', async () => {
-    registerStyles({ card: { backgroundColor: 'red' } });
-
-    mount(ROOT_TAG, TouchableNativeFeedbackHost);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
-
-    const node = fabric.find(n => n.props.testID === 'native-feedback');
-    expect(node?.props.backgroundColor).toBe('red');
-  });
-});