Skip to content

Remove ReactNativeElement from Fantom tests (nullthrows/HostInstance/HTMLElement) #57468

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
rubennorte wants to merge 1 commit into from
Closed

Remove ReactNativeElement from Fantom tests (nullthrows/HostInstance/HTMLElement) #57468

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 18 additions & 30 deletions packages/react-native/Libraries/Animated/__tests__/Animated-itest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';

import type {HostInstance} from 'react-native';

import ensureInstance from '../../../src/private/__tests__/utilities/ensureInstance';
import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
import * as Fantom from '@react-native/fantom';
import nullthrows from 'nullthrows';
import * as React from 'react';
import {createRef} from 'react';
import {Animated, Easing, View, useAnimatedValue} from 'react-native';
import {allowStyleProp} from 'react-native/Libraries/Animated/NativeAnimatedAllowlist';
import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';

// Deferred start outputs the initial value on the first animation frame and
// re-anchors timing on the second. This delays animation progress by one
Expand Down Expand Up @@ -54,7 +54,7 @@ test('moving box by 100 points', () => {
root.render(<MyApp />);
});

const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
const viewElement = nullthrows(viewRef.current);

expect(viewElement.getBoundingClientRect().x).toBe(0);

Expand Down Expand Up @@ -119,7 +119,7 @@ test('native-driven interpolation honors custom easing', () => {
root.render(<MyApp />);
});

const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
const viewElement = nullthrows(viewRef.current);

Fantom.runTask(() => {
Animated.timing(_progress, {
Expand Down Expand Up @@ -179,7 +179,7 @@ test('native-driven interpolation preserves easing overshoot under clamp', () =>
root.render(<MyApp />);
});

const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
const viewElement = nullthrows(viewRef.current);

Fantom.runTask(() => {
Animated.timing(_progress, {
Expand Down Expand Up @@ -231,7 +231,7 @@ function startTimingAnimationAndGetTranslateXAfterFirstFrame(): number {
root.render(<MyApp />);
});

const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
const viewElement = nullthrows(viewRef.current);

Fantom.runTask(() => {
Animated.timing(_translateX, {
Expand Down Expand Up @@ -326,11 +326,8 @@ test('animation driven by onScroll event', () => {
root.render(<PressableWithNativeDriver />);
});

const scrollViewelement = ensureInstance(
scrollViewRef.current,
ReactNativeElement,
);
const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
const scrollViewelement = nullthrows(scrollViewRef.current);
const viewElement = nullthrows(viewRef.current);

Fantom.scrollTo(scrollViewelement, {
x: 0,
Expand Down Expand Up @@ -397,10 +394,7 @@ test('animation driven by onScroll event when animated view is unmounted', () =>
root.render(<PressableWithNativeDriver mountAnimatedView={false} />);
});

const scrollViewelement = ensureInstance(
scrollViewRef.current,
ReactNativeElement,
);
const scrollViewelement = nullthrows(scrollViewRef.current);

Fantom.scrollTo(scrollViewelement, {
x: 0,
Expand Down Expand Up @@ -438,7 +432,7 @@ test('animated opacity', () => {
root.render(<MyApp />);
});

const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
const viewElement = nullthrows(viewRef.current);

expect(viewElement.getBoundingClientRect().x).toBe(0);

Expand Down Expand Up @@ -492,7 +486,7 @@ test('moving box by 50 points with offset 10', () => {
root.render(<MyApp />);
});

const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
const viewElement = nullthrows(viewRef.current);

expect(viewElement.getBoundingClientRect().x).toBe(0);

Expand Down Expand Up @@ -592,11 +586,8 @@ describe('Value.flattenOffset', () => {
_onScroll.addListener(fn);
});

const scrollViewelement = ensureInstance(
scrollViewRef.current,
ReactNativeElement,
);
const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
const scrollViewelement = nullthrows(scrollViewRef.current);
const viewElement = nullthrows(viewRef.current);

Fantom.scrollTo(scrollViewelement, {
x: 0,
Expand Down Expand Up @@ -676,11 +667,8 @@ describe('Value.extractOffset', () => {
_onScroll.addListener(fn);
});

const scrollViewelement = ensureInstance(
scrollViewRef.current,
ReactNativeElement,
);
const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
const scrollViewelement = nullthrows(scrollViewRef.current);
const viewElement = nullthrows(viewRef.current);

Fantom.scrollTo(scrollViewelement, {
x: 0,
Expand Down Expand Up @@ -751,7 +739,7 @@ test('animate layout props', () => {
root.render(<MyApp />);
});

const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
const viewElement = nullthrows(viewRef.current);

Fantom.runTask(() => {
_heightAnimation = Animated.timing(_animatedHeight, {
Expand Down Expand Up @@ -819,7 +807,7 @@ test('AnimatedValue.interpolate', () => {
root.render(<MyApp outputRangeX={1} />);
});

const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
const viewElement = nullthrows(viewRef.current);

expect(_valueX?.__getValue()).toBe(0.5);
expect(_interpolatedValueX?.__getValue()).toBe(50);
Expand Down Expand Up @@ -891,7 +879,7 @@ test('Animated.sequence', () => {
root.render(<MyApp />);
});

const element = ensureInstance(elementRef.current, ReactNativeElement);
const element = nullthrows(elementRef.current);

expect(element.getBoundingClientRect().y).toBe(0);

Expand Down
7 changes: 3 additions & 4 deletions packages/react-native/Libraries/Animated/__tests__/AnimatedBackend-itest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,12 @@ import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';

import type {HostInstance} from 'react-native';

import ensureInstance from '../../../src/private/__tests__/utilities/ensureInstance';
import * as Fantom from '@react-native/fantom';
import nullthrows from 'nullthrows';
import * as React from 'react';
import {Component, createRef, memo, useEffect, useMemo, useState} from 'react';
import {Animated, View, useAnimatedValue} from 'react-native';
import {allowStyleProp} from 'react-native/Libraries/Animated/NativeAnimatedAllowlist';
import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';

// marginLeft (and the other margin props) are only on the native animated
// allowlist when the shared backend is enabled. This test deliberately does NOT
Expand Down Expand Up @@ -108,7 +107,7 @@ test('animated opacity', () => {
root.render(<MyApp />);
});

const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
const viewElement = nullthrows(viewRef.current);

expect(viewElement.getBoundingClientRect().x).toBe(0);

Expand Down Expand Up @@ -414,7 +413,7 @@ test('animate non-layout props and rerender', () => {
root.render(<MyApp />);
});

const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
const viewElement = nullthrows(viewRef.current);

Fantom.runTask(() => {
_opacityAnimation = Animated.timing(_animatedOpacity, {
Expand Down
17 changes: 8 additions & 9 deletions .../react-native/Libraries/Components/ActivityIndicator/__tests__/ActivityIndicator-itest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,13 @@

import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';

import ensureInstance from '../../../../src/private/__tests__/utilities/ensureInstance';
import type {HostInstance} from 'react-native';

import * as Fantom from '@react-native/fantom';
import nullthrows from 'nullthrows';
import * as React from 'react';
import {createRef} from 'react';
import {ActivityIndicator} from 'react-native';
import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';

describe('<ActivityIndicator>', () => {
it('sets displayName', () => {
Expand Down Expand Up @@ -167,28 +168,26 @@ describe('<ActivityIndicator>', () => {
});

describe('ref', () => {
it('provides a valid ReactNativeElement instance', () => {
const elementRef =
createRef<React.ElementRef<typeof ActivityIndicator>>();
it('provides a valid HTMLElement instance', () => {
const elementRef = createRef<HostInstance>();
const root = Fantom.createRoot();

Fantom.runTask(() => {
root.render(<ActivityIndicator ref={elementRef} />);
});

expect(elementRef.current).toBeInstanceOf(ReactNativeElement);
expect(elementRef.current).toBeInstanceOf(HTMLElement);
});

it('has the correct tag name', () => {
const elementRef =
createRef<React.ElementRef<typeof ActivityIndicator>>();
const elementRef = createRef<HostInstance>();
const root = Fantom.createRoot();

Fantom.runTask(() => {
root.render(<ActivityIndicator ref={elementRef} />);
});

const element = ensureInstance(elementRef.current, ReactNativeElement);
const element = nullthrows(elementRef.current);
expect(element.tagName).toBe('RN:AndroidProgressBar');
});
});
Expand Down
16 changes: 8 additions & 8 deletions packages/react-native/Libraries/Components/Pressable/__tests__/Pressable-itest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,16 @@

import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';

import type {AccessibilityProps, HostInstance} from 'react-native';
import type {HostInstance} from 'react-native';
import type {AccessibilityProps} from 'react-native';

import * as Fantom from '@react-native/fantom';
import nullthrows from 'nullthrows';
import * as React from 'react';
import {createRef} from 'react';
import {Pressable} from 'react-native';
import {PlatformColor, Text} from 'react-native';
import accessibilityPropsSuite from 'react-native/src/private/__tests__/utilities/accessibilityPropsSuite';
import ensureInstance from 'react-native/src/private/__tests__/utilities/ensureInstance';
import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';

describe('<Pressable>', () => {
describe('props', () => {
Expand Down Expand Up @@ -94,7 +94,7 @@ describe('<Pressable>', () => {
);
});

const element = ensureInstance(elementRef.current, ReactNativeElement);
const element = nullthrows(elementRef.current);
Fantom.dispatchNativeEvent(element, 'click');

expect(onPressCallback).toHaveBeenCalledTimes(1);
Expand All @@ -118,7 +118,7 @@ describe('<Pressable>', () => {
);
});

const element = ensureInstance(elementRef.current, ReactNativeElement);
const element = nullthrows(elementRef.current);
Fantom.dispatchNativeEvent(element, 'change', {value: true});

expect(onPressCallback).toHaveBeenCalledTimes(0);
Expand Down Expand Up @@ -263,7 +263,7 @@ describe('<Pressable>', () => {
</Pressable>,
);
});
const element = ensureInstance(elementRef.current, ReactNativeElement);
const element = nullthrows(elementRef.current);

expect(element.childNodes.length).toBe(1);

Expand Down Expand Up @@ -302,7 +302,7 @@ describe('<Pressable>', () => {
root.render(<Pressable ref={elementRef} />);
});

expect(elementRef.current).toBeInstanceOf(ReactNativeElement);
expect(elementRef.current).toBeInstanceOf(HTMLElement);
});

it('uses the "RN:View" tag name', () => {
Expand All @@ -314,7 +314,7 @@ describe('<Pressable>', () => {
root.render(<Pressable ref={elementRef} />);
});

const element = ensureInstance(elementRef.current, ReactNativeElement);
const element = nullthrows(elementRef.current);
// Pressable is implemented with a <View> under the hood
expect(element.tagName).toBe('RN:View');
});
Expand Down
13 changes: 4 additions & 9 deletions packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-itest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@ import nullthrows from 'nullthrows';
import * as React from 'react';
import {createRef} from 'react';
import {ScrollView, Text, View} from 'react-native';
import ensureInstance from 'react-native/src/private/__tests__/utilities/ensureInstance';
import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';

describe('<ScrollView>', () => {
describe('rendering', () => {
Expand Down Expand Up @@ -93,7 +91,7 @@ describe('<ScrollView>', () => {
root.render(<ScrollView innerViewRef={ref} />);
});

expect(ref.mock.lastCall[0]).toBeInstanceOf(ReactNativeElement);
expect(ref.mock.lastCall[0]).toBeInstanceOf(HTMLElement);

Fantom.runTask(() => {
root.render(<></>);
Expand All @@ -111,14 +109,14 @@ describe('<ScrollView>', () => {
root.render(<ScrollView innerViewRef={refA} />);
});

expect(refA.mock.lastCall[0]).toBeInstanceOf(ReactNativeElement);
expect(refA.mock.lastCall[0]).toBeInstanceOf(HTMLElement);

Fantom.runTask(() => {
root.render(<ScrollView innerViewRef={refB} />);
});

expect(refA.mock.lastCall[0]).toBe(null);
expect(refB.mock.lastCall[0]).toBeInstanceOf(ReactNativeElement);
expect(refB.mock.lastCall[0]).toBeInstanceOf(HTMLElement);
});
});

Expand All @@ -131,10 +129,7 @@ describe('<ScrollView>', () => {
root.render(<ScrollView ref={ref} />);
});

const innerView = ensureInstance(
nullthrows(ref.current).getInnerViewRef(),
ReactNativeElement,
);
const innerView = nullthrows(nullthrows(ref.current).getInnerViewRef());
expect(innerView.tagName).toBe('RN:View');
});
});
Expand Down
8 changes: 4 additions & 4 deletions packages/react-native/Libraries/Components/Switch/__tests__/Switch-itest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
*/

import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';

import type {HostInstance} from 'react-native';

import * as Fantom from '@react-native/fantom';
import nullthrows from 'nullthrows';
import * as React from 'react';
import {createRef} from 'react';
import {Switch} from 'react-native';
import ensureInstance from 'react-native/src/private/__tests__/utilities/ensureInstance';
import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';

describe('<ExampleComponent>', () => {
describe('props', () => {
Expand All @@ -38,8 +38,8 @@ describe('<ExampleComponent>', () => {
root.render(<Switch ref={elementRef} />);
});

expect(elementRef.current).toBeInstanceOf(ReactNativeElement);
const element = ensureInstance(elementRef.current, ReactNativeElement);
expect(elementRef.current).toBeInstanceOf(HTMLElement);
const element = nullthrows(elementRef.current);
expect(element.tagName).toBe('RN:Switch');
});
});
Expand Down
Loading
Loading