diff --git a/packages/@react-native-windows/tester/overrides.json b/packages/@react-native-windows/tester/overrides.json index fe4ba67179a..6499c39cdac 100644 --- a/packages/@react-native-windows/tester/overrides.json +++ b/packages/@react-native-windows/tester/overrides.json @@ -19,6 +19,13 @@ "baseFile": "packages/rn-tester/js/examples/Switch/SwitchExample.js", "baseHash": "fdf533bef0d75f8126faf21186b160ae7616e81f" }, + { + "type": "patch", + "file": "src/js/examples/ActivityIndicator/ActivityIndicatorExample.windows.js", + "baseFile": "packages/rn-tester/js/examples/ActivityIndicator/ActivityIndicatorExample.js", + "baseHash": "31eeee8ffdda9f3f235d2d3100ac3641ea4f4e4a", + "issue": 12869 + }, { "type": "platform", "file": "src/js/examples/HTTP/HTTPExample.js" @@ -67,4 +74,4 @@ "baseHash": "3ca30c3da9875e8f01acfdb575658d9996243185" } ] -} +} \ No newline at end of file diff --git a/packages/@react-native-windows/tester/src/js/examples/ActivityIndicator/ActivityIndicatorExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/ActivityIndicator/ActivityIndicatorExample.windows.js new file mode 100644 index 00000000000..e9c7492e8f5 --- /dev/null +++ b/packages/@react-native-windows/tester/src/js/examples/ActivityIndicator/ActivityIndicatorExample.windows.js @@ -0,0 +1,169 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow strict-local + */ + +import type {Node} from 'react'; + +import React, {useCallback, useEffect, useRef, useState} from 'react'; +import {ActivityIndicator, StyleSheet, View} from 'react-native'; + +function ToggleAnimatingActivityIndicator() { + const timer = useRef(); + + const [animating, setAnimating] = useState(true); + + const setToggleTimeout: () => void = useCallback(() => { + timer.current = setTimeout(() => { + setAnimating(currentState => !currentState); + setToggleTimeout(); + }, 2000); + }, []); + + useEffect(() => { + setToggleTimeout(); + + return () => { + clearTimeout(timer.current); + }; + }, [timer, setToggleTimeout]); + + return ( + + ); +} + +const styles = StyleSheet.create({ + centering: { + alignItems: 'center', + justifyContent: 'center', + padding: 8, + }, + gray: { + backgroundColor: '#cccccc', + }, + horizontal: { + flexDirection: 'row', + justifyContent: 'space-around', + padding: 8, + }, +}); + +exports.displayName = (undefined: ?string); +exports.category = 'UI'; +exports.framework = 'React'; +exports.title = 'ActivityIndicator'; +exports.documentationURL = 'https://reactnative.dev/docs/activityindicator'; +exports.description = 'Animated loading indicators.'; + +exports.examples = [ + { + title: 'Default (small, white)', + render(): Node { + return ( + + ); + }, + }, + { + title: 'Gray', + render(): Node { + return ( + + + + + ); + }, + }, + { + title: 'Custom colors', + render(): Node { + return ( + + + + + + + ); + }, + }, + { + title: 'Large', + render(): Node { + return ( + + ); + }, + }, + { + title: 'Large, custom colors', + render(): Node { + return ( + + + + + + + ); + }, + }, + { + title: 'Start/stop', + render(): Node { + return ; + }, + }, + { + title: 'Custom size', + render(): Node { + return ( + + ); + }, + }, + { + platform: 'android', + title: 'Custom size (size: 75)', + render(): Node { + return ; + }, + }, +]; diff --git a/packages/e2e-test-app-fabric/test/ActivityIndicatorComponentTest.test.ts b/packages/e2e-test-app-fabric/test/ActivityIndicatorComponentTest.test.ts new file mode 100644 index 00000000000..73170b0bda8 --- /dev/null +++ b/packages/e2e-test-app-fabric/test/ActivityIndicatorComponentTest.test.ts @@ -0,0 +1,69 @@ +/** + * Copyright (c) Microsoft Corporation. + * Licensed under the MIT License. + * + * @format + */ + +import {dumpVisualTree} from '@react-native-windows/automation-commands'; +import {goToComponentExample} from './RNTesterNavigation'; +import {app} from '@react-native-windows/automation'; +import {verifyNoErrorLogs} from './Helpers'; + +beforeAll(async () => { + // If window is partially offscreen, tests will fail to click on certain elements + await app.setWindowPosition(0, 0); + await app.setWindowSize(1000, 1250); + await goToComponentExample('ActivityIndicator'); +}); + +afterEach(async () => { + await verifyNoErrorLogs(); +}); + +describe('ActivityIndicator Tests', () => { + test('An ActivityIndicator can render', async () => { + const component = await app.findElementByTestID( + 'default_activity_indicator', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('default_activity_indicator'); + expect(dump).toMatchSnapshot(); + }); + test('An ActivityIndicator can have styling', async () => { + const component = await app.findElementByTestID('activity-gray'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('activity-gray'); + expect(dump).toMatchSnapshot(); + }); + test('An ActivityIndicator can have custom colors', async () => { + const component = await app.findElementByTestID('activity-color'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('activity-color'); + expect(dump).toMatchSnapshot(); + }); + test('An ActivityIndicator can have large sizing', async () => { + const component = await app.findElementByTestID('activity-large'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('activity-large'); + expect(dump).toMatchSnapshot(); + }); + test('An ActivityIndicator can have custom colors and large sizing', async () => { + const component = await app.findElementByTestID('activity-large-color'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('activity-large-color'); + expect(dump).toMatchSnapshot(); + }); + test('An ActivityIndicator can have toggle animation', async () => { + const component = await app.findElementByTestID('activity-toggle'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('activity-toggle'); + expect(dump).toMatchSnapshot(); + }); + test('An ActivityIndicator can have custom sizing', async () => { + const component = await app.findElementByTestID('activity-size'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('activity-size'); + expect(dump).toMatchSnapshot(); + }); +}); diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/ActivityIndicatorComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/ActivityIndicatorComponentTest.test.ts.snap new file mode 100644 index 00000000000..bb30895b5fa --- /dev/null +++ b/packages/e2e-test-app-fabric/test/__snapshots__/ActivityIndicatorComponentTest.test.ts.snap @@ -0,0 +1,949 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors 1`] = ` +{ + "Automation Tree": { + "AutomationId": "activity-color", + "Children": [ + { + "AutomationId": "", + "ControlType": 50012, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "progress bar", + "Name": "", + }, + { + "AutomationId": "", + "ControlType": 50012, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "progress bar", + "Name": "", + }, + { + "AutomationId": "", + "ControlType": 50012, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "progress bar", + "Name": "", + }, + { + "AutomationId": "", + "ControlType": 50012, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "progress bar", + "Name": "", + }, + ], + "ControlType": 50026, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "group", + "Name": "", + }, + "Visual Tree": { + "Children": [ + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 80, + 80, + ], + "Visual Type": "Visual", + }, + ], + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "Visual", + }, + ], + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Offset": [ + 111, + 8, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 80, + 80, + ], + "Visual Type": "Visual", + }, + ], + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "Visual", + }, + ], + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Offset": [ + 336, + 8, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 80, + 80, + ], + "Visual Type": "Visual", + }, + ], + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "Visual", + }, + ], + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Offset": [ + 561, + 8, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 80, + 80, + ], + "Visual Type": "Visual", + }, + ], + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "Visual", + }, + ], + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Offset": [ + 786, + 8, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "activity-color", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 36, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors and large sizing 1`] = ` +{ + "Automation Tree": { + "AutomationId": "activity-large-color", + "Children": [ + { + "AutomationId": "", + "ControlType": 50012, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "progress bar", + "Name": "", + }, + { + "AutomationId": "", + "ControlType": 50012, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "progress bar", + "Name": "", + }, + { + "AutomationId": "", + "ControlType": 50012, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "progress bar", + "Name": "", + }, + { + "AutomationId": "", + "ControlType": 50012, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "progress bar", + "Name": "", + }, + ], + "ControlType": 50026, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "group", + "Name": "", + }, + "Visual Tree": { + "Children": [ + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 36, + 36, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 80, + 80, + ], + "Visual Type": "Visual", + }, + ], + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "Visual", + }, + ], + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Offset": [ + 103, + 8, + 0, + ], + "Opacity": 1, + "Size": [ + 36, + 36, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 36, + 36, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 80, + 80, + ], + "Visual Type": "Visual", + }, + ], + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "Visual", + }, + ], + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Offset": [ + 328, + 8, + 0, + ], + "Opacity": 1, + "Size": [ + 36, + 36, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 36, + 36, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 80, + 80, + ], + "Visual Type": "Visual", + }, + ], + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "Visual", + }, + ], + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Offset": [ + 553, + 8, + 0, + ], + "Opacity": 1, + "Size": [ + 36, + 36, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 36, + 36, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 80, + 80, + ], + "Visual Type": "Visual", + }, + ], + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "Visual", + }, + ], + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Offset": [ + 778, + 8, + 0, + ], + "Opacity": 1, + "Size": [ + 36, + 36, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "activity-large-color", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 52, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`ActivityIndicator Tests An ActivityIndicator can have custom sizing 1`] = ` +{ + "Automation Tree": { + "AutomationId": "activity-size", + "ControlType": 50012, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "progress bar", + "Name": "", + }, + "Visual Tree": { + "Comment": "activity-size", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 36, + 36, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`ActivityIndicator Tests An ActivityIndicator can have large sizing 1`] = ` +{ + "Automation Tree": { + "AutomationId": "activity-large", + "ControlType": 50012, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "progress bar", + "Name": "", + }, + "Visual Tree": { + "Comment": "activity-large", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 36, + 36, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`ActivityIndicator Tests An ActivityIndicator can have styling 1`] = ` +{ + "Automation Tree": { + "AutomationId": "activity-gray", + "ControlType": 50012, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "progress bar", + "Name": "", + }, + "Visual Tree": { + "Comment": "activity-gray", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`ActivityIndicator Tests An ActivityIndicator can have toggle animation 1`] = ` +{ + "Automation Tree": { + "AutomationId": "activity-toggle", + "ControlType": 50012, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "progress bar", + "Name": "", + }, + "Visual Tree": { + "Comment": "activity-toggle", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 36, + 36, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`ActivityIndicator Tests An ActivityIndicator can render 1`] = ` +{ + "Automation Tree": { + "AutomationId": "default_activity_indicator", + "ControlType": 50012, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "progress bar", + "Name": "Wait for content to load!", + }, + "Visual Tree": { + "Comment": "default_activity_indicator", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap b/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap index aded2ead458..a83baad7de5 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap @@ -1033,6 +1033,7 @@ exports[`snapshotAllPages Accessibility Windows 5`] = ` exports[`snapshotAllPages ActivityIndicator 1`] = ` `; exports[`snapshotAllPages ActivityIndicator 3`] = ` @@ -1107,6 +1116,7 @@ exports[`snapshotAllPages ActivityIndicator 3`] = ` exports[`snapshotAllPages ActivityIndicator 4`] = ` `; exports[`snapshotAllPages ActivityIndicator 5`] = ` @@ -1155,6 +1172,7 @@ exports[`snapshotAllPages ActivityIndicator 5`] = ` exports[`snapshotAllPages ActivityIndicator 6`] = ` `; exports[`snapshotAllPages ActivityIndicator 7`] = ` `;