Skip to content

Commit 7beb8ac

Browse files
andrewdacenkofacebook-github-bot
authored andcommitted
Add base public API tests
Summary: Changelog: [Internal] Add base public API integration tests for Image component. Reviewed By: rubennorte Differential Revision: D79551685
1 parent 6b35415 commit 7beb8ac

1 file changed

Lines changed: 140 additions & 0 deletions

File tree

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow strict-local
8+
* @format
9+
*/
10+
11+
import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
12+
13+
import type {HostInstance} from 'react-native';
14+
15+
import * as Fantom from '@react-native/fantom';
16+
import * as React from 'react';
17+
import {createRef} from 'react';
18+
import {Image} from 'react-native';
19+
import ensureInstance from 'react-native/src/private/__tests__/utilities/ensureInstance';
20+
import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
21+
22+
describe('<Image>', () => {
23+
describe('props', () => {
24+
it('renders an empty element when there are no props', () => {
25+
const root = Fantom.createRoot();
26+
27+
Fantom.runTask(() => {
28+
root.render(<Image />);
29+
});
30+
31+
expect(
32+
root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
33+
).toEqual(
34+
<rn-image
35+
layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
36+
layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
37+
layoutMetrics-displayType="Flex"
38+
layoutMetrics-frame="{x:0,y:0,width:390,height:0}"
39+
layoutMetrics-layoutDirection="LeftToRight"
40+
layoutMetrics-overflowInset="{top:0,right:0,bottom:0,left:0}"
41+
layoutMetrics-pointScaleFactor="3"
42+
overflow="hidden"
43+
/>,
44+
);
45+
});
46+
47+
describe('accessibility', () => {
48+
describe('accessible', () => {
49+
it('indicates that image is an accessibility element', () => {
50+
const root = Fantom.createRoot();
51+
52+
Fantom.runTask(() => {
53+
root.render(<Image accessible={true} />);
54+
});
55+
56+
expect(
57+
root.getRenderedOutput({props: ['accessible']}).toJSX(),
58+
).toEqual(<rn-image accessible="true" />);
59+
});
60+
});
61+
62+
describe('accessibilityLabel', () => {
63+
it('provides information for screen reader', () => {
64+
const root = Fantom.createRoot();
65+
66+
Fantom.runTask(() => {
67+
root.render(<Image accessibilityLabel="React Native Logo" />);
68+
});
69+
70+
expect(
71+
root.getRenderedOutput({props: ['accessibilityLabel']}).toJSX(),
72+
).toEqual(<rn-image accessibilityLabel="React Native Logo" />);
73+
});
74+
});
75+
76+
describe('alt', () => {
77+
it('provides information for screen reader', () => {
78+
const root = Fantom.createRoot();
79+
80+
Fantom.runTask(() => {
81+
root.render(<Image alt="React Native Logo" />);
82+
});
83+
84+
expect(root.getRenderedOutput({props: ['^access']}).toJSX()).toEqual(
85+
<rn-image
86+
accessible="true"
87+
accessibilityLabel="React Native Logo"
88+
/>,
89+
);
90+
});
91+
92+
it('can be set alongside accessibilityLabel, but accessibilityLabel has higher priority', () => {
93+
const root = Fantom.createRoot();
94+
95+
Fantom.runTask(() => {
96+
root.render(
97+
<Image
98+
alt="React Native Logo"
99+
accessibilityLabel="React Native"
100+
/>,
101+
);
102+
});
103+
104+
expect(root.getRenderedOutput({props: ['^access']}).toJSX()).toEqual(
105+
<rn-image accessible="true" accessibilityLabel="React Native" />,
106+
);
107+
});
108+
});
109+
});
110+
});
111+
112+
describe('ref', () => {
113+
describe('instance', () => {
114+
it('is an element node', () => {
115+
const elementRef = createRef<HostInstance>();
116+
117+
const root = Fantom.createRoot();
118+
119+
Fantom.runTask(() => {
120+
root.render(<Image ref={elementRef} />);
121+
});
122+
123+
expect(elementRef.current).toBeInstanceOf(ReactNativeElement);
124+
});
125+
126+
it('uses the "RN:Image" tag name', () => {
127+
const elementRef = createRef<HostInstance>();
128+
129+
const root = Fantom.createRoot();
130+
131+
Fantom.runTask(() => {
132+
root.render(<Image ref={elementRef} />);
133+
});
134+
135+
const element = ensureInstance(elementRef.current, ReactNativeElement);
136+
expect(element.tagName).toBe('RN:Image');
137+
});
138+
});
139+
});
140+
});

0 commit comments

Comments
 (0)