Skip to content

Commit 168b1c1

Browse files
chiaramooneychiaramooney
authored
Add ActivityIndicator Visual Snapshot Tests (#12892)
* Add ActivityIndicator Snapshot Tests * Lint * Adjust Snapshots for Scaling
1 parent e088c33 commit 168b1c1

File tree

5 files changed

+1215
-0
lines changed

5 files changed

+1215
-0
lines changed

‎packages/@react-native-windows/tester/overrides.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,13 @@
1919
"baseFile": "packages/rn-tester/js/examples/Switch/SwitchExample.js",
2020
"baseHash": "fdf533bef0d75f8126faf21186b160ae7616e81f"
2121
},
22+
{
23+
"type": "patch",
24+
"file": "src/js/examples/ActivityIndicator/ActivityIndicatorExample.windows.js",
25+
"baseFile": "packages/rn-tester/js/examples/ActivityIndicator/ActivityIndicatorExample.js",
26+
"baseHash": "31eeee8ffdda9f3f235d2d3100ac3641ea4f4e4a",
27+
"issue": 12869
28+
},
2229
{
2330
"type": "platform",
2431
"file": "src/js/examples/HTTP/HTTPExample.js"

‎packages/@react-native-windows/tester/src/js/examples/ActivityIndicator/ActivityIndicatorExample.windows.js

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
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+
* @format
8+
* @flow strict-local
9+
*/
10+
11+
import type {Node} from 'react';
12+
13+
import React, {useCallback, useEffect, useRef, useState} from 'react';
14+
import {ActivityIndicator, StyleSheet, View} from 'react-native';
15+
16+
function ToggleAnimatingActivityIndicator() {
17+
const timer = useRef<void | TimeoutID>();
18+
19+
const [animating, setAnimating] = useState(true);
20+
21+
const setToggleTimeout: () => void = useCallback(() => {
22+
timer.current = setTimeout(() => {
23+
setAnimating(currentState => !currentState);
24+
setToggleTimeout();
25+
}, 2000);
26+
}, []);
27+
28+
useEffect(() => {
29+
setToggleTimeout();
30+
31+
return () => {
32+
clearTimeout(timer.current);
33+
};
34+
}, [timer, setToggleTimeout]);
35+
36+
return (
37+
<ActivityIndicator
38+
animating={animating}
39+
style={[styles.centering, {height: 80}]}
40+
size="large"
41+
testID="activity-toggle"
42+
accessible
43+
/>
44+
);
45+
}
46+
47+
const styles = StyleSheet.create({
48+
centering: {
49+
alignItems: 'center',
50+
justifyContent: 'center',
51+
padding: 8,
52+
},
53+
gray: {
54+
backgroundColor: '#cccccc',
55+
},
56+
horizontal: {
57+
flexDirection: 'row',
58+
justifyContent: 'space-around',
59+
padding: 8,
60+
},
61+
});
62+
63+
exports.displayName = (undefined: ?string);
64+
exports.category = 'UI';
65+
exports.framework = 'React';
66+
exports.title = 'ActivityIndicator';
67+
exports.documentationURL = 'https://reactnative.dev/docs/activityindicator';
68+
exports.description = 'Animated loading indicators.';
69+
70+
exports.examples = [
71+
{
72+
title: 'Default (small, white)',
73+
render(): Node {
74+
return (
75+
<ActivityIndicator
76+
style={[styles.centering, styles.gray]}
77+
color="white"
78+
testID="default_activity_indicator"
79+
accessibilityLabel="Wait for content to load!"
80+
accessible
81+
/>
82+
);
83+
},
84+
},
85+
{
86+
title: 'Gray',
87+
render(): Node {
88+
return (
89+
<View>
90+
<ActivityIndicator style={[styles.centering]} />
91+
<ActivityIndicator
92+
style={[styles.centering, styles.gray]}
93+
testID="activity-gray"
94+
accessible
95+
/>
96+
</View>
97+
);
98+
},
99+
},
100+
{
101+
title: 'Custom colors',
102+
render(): Node {
103+
return (
104+
<View style={styles.horizontal} testID="activity-color" accessible>
105+
<ActivityIndicator color="#0000ff" accessible />
106+
<ActivityIndicator color="#aa00aa" accessible />
107+
<ActivityIndicator color="#aa3300" accessible />
108+
<ActivityIndicator color="#00aa00" accessible />
109+
</View>
110+
);
111+
},
112+
},
113+
{
114+
title: 'Large',
115+
render(): Node {
116+
return (
117+
<ActivityIndicator
118+
style={[styles.centering, styles.gray]}
119+
size="large"
120+
color="white"
121+
testID="activity-large"
122+
accessible
123+
/>
124+
);
125+
},
126+
},
127+
{
128+
title: 'Large, custom colors',
129+
render(): Node {
130+
return (
131+
<View
132+
style={styles.horizontal}
133+
testID="activity-large-color"
134+
accessible>
135+
<ActivityIndicator size="large" color="#0000ff" accessible />
136+
<ActivityIndicator size="large" color="#aa00aa" accessible />
137+
<ActivityIndicator size="large" color="#aa3300" accessible />
138+
<ActivityIndicator size="large" color="#00aa00" accessible />
139+
</View>
140+
);
141+
},
142+
},
143+
{
144+
title: 'Start/stop',
145+
render(): Node {
146+
return <ToggleAnimatingActivityIndicator />;
147+
},
148+
},
149+
{
150+
title: 'Custom size',
151+
render(): Node {
152+
return (
153+
<ActivityIndicator
154+
style={[styles.centering, {transform: [{scale: 1.5}]}]}
155+
size="large"
156+
testID="activity-size"
157+
accessible
158+
/>
159+
);
160+
},
161+
},
162+
{
163+
platform: 'android',
164+
title: 'Custom size (size: 75)',
165+
render(): Node {
166+
return <ActivityIndicator style={styles.centering} size={75} />;
167+
},
168+
},
169+
];

‎packages/e2e-test-app-fabric/test/ActivityIndicatorComponentTest.test.ts

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/**
2+
* Copyright (c) Microsoft Corporation.
3+
* Licensed under the MIT License.
4+
*
5+
* @format
6+
*/
7+
8+
import {dumpVisualTree} from '@react-native-windows/automation-commands';
9+
import {goToComponentExample} from './RNTesterNavigation';
10+
import {app} from '@react-native-windows/automation';
11+
import {verifyNoErrorLogs} from './Helpers';
12+
13+
beforeAll(async () => {
14+
// If window is partially offscreen, tests will fail to click on certain elements
15+
await app.setWindowPosition(0, 0);
16+
await app.setWindowSize(1000, 1250);
17+
await goToComponentExample('ActivityIndicator');
18+
});
19+
20+
afterEach(async () => {
21+
await verifyNoErrorLogs();
22+
});
23+
24+
describe('ActivityIndicator Tests', () => {
25+
test('An ActivityIndicator can render', async () => {
26+
const component = await app.findElementByTestID(
27+
'default_activity_indicator',
28+
);
29+
await component.waitForDisplayed({timeout: 5000});
30+
const dump = await dumpVisualTree('default_activity_indicator');
31+
expect(dump).toMatchSnapshot();
32+
});
33+
test('An ActivityIndicator can have styling', async () => {
34+
const component = await app.findElementByTestID('activity-gray');
35+
await component.waitForDisplayed({timeout: 5000});
36+
const dump = await dumpVisualTree('activity-gray');
37+
expect(dump).toMatchSnapshot();
38+
});
39+
test('An ActivityIndicator can have custom colors', async () => {
40+
const component = await app.findElementByTestID('activity-color');
41+
await component.waitForDisplayed({timeout: 5000});
42+
const dump = await dumpVisualTree('activity-color');
43+
expect(dump).toMatchSnapshot();
44+
});
45+
test('An ActivityIndicator can have large sizing', async () => {
46+
const component = await app.findElementByTestID('activity-large');
47+
await component.waitForDisplayed({timeout: 5000});
48+
const dump = await dumpVisualTree('activity-large');
49+
expect(dump).toMatchSnapshot();
50+
});
51+
test('An ActivityIndicator can have custom colors and large sizing', async () => {
52+
const component = await app.findElementByTestID('activity-large-color');
53+
await component.waitForDisplayed({timeout: 5000});
54+
const dump = await dumpVisualTree('activity-large-color');
55+
expect(dump).toMatchSnapshot();
56+
});
57+
test('An ActivityIndicator can have toggle animation', async () => {
58+
const component = await app.findElementByTestID('activity-toggle');
59+
await component.waitForDisplayed({timeout: 5000});
60+
const dump = await dumpVisualTree('activity-toggle');
61+
expect(dump).toMatchSnapshot();
62+
});
63+
test('An ActivityIndicator can have custom sizing', async () => {
64+
const component = await app.findElementByTestID('activity-size');
65+
await component.waitForDisplayed({timeout: 5000});
66+
const dump = await dumpVisualTree('activity-size');
67+
expect(dump).toMatchSnapshot();
68+
});
69+
});

0 commit comments

Comments
 (0)