From b74c19f2481c98db9e26183ed09daee50eb1ccad Mon Sep 17 00:00:00 2001 From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com> Date: Thu, 28 Mar 2024 11:14:16 -0700 Subject: [PATCH 1/3] Add ActivityIndicator Snapshot Tests --- .../tester/overrides.json | 9 +- .../ActivityIndicatorExample.windows.js | 162 +++ .../ActivityIndicatorComponentTest.test.ts | 67 ++ ...ctivityIndicatorComponentTest.test.ts.snap | 949 ++++++++++++++++++ 4 files changed, 1186 insertions(+), 1 deletion(-) create mode 100644 packages/@react-native-windows/tester/src/js/examples/ActivityIndicator/ActivityIndicatorExample.windows.js create mode 100644 packages/e2e-test-app-fabric/test/ActivityIndicatorComponentTest.test.ts create mode 100644 packages/e2e-test-app-fabric/test/__snapshots__/ActivityIndicatorComponentTest.test.ts.snap 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..dc9790019e2 --- /dev/null +++ b/packages/@react-native-windows/tester/src/js/examples/ActivityIndicator/ActivityIndicatorExample.windows.js @@ -0,0 +1,162 @@ +/** + * 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..0f3a60b9dad --- /dev/null +++ b/packages/e2e-test-app-fabric/test/ActivityIndicatorComponentTest.test.ts @@ -0,0 +1,67 @@ +/** + * 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..87b375ab68f --- /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": [ + 30, + 30, + ], + "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, + 12, + 0, + ], + "Opacity": 1, + "Size": [ + 30, + 30, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 30.000022888183594, + 30, + ], + "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": [ + 315, + 12, + 0, + ], + "Opacity": 1, + "Size": [ + 30.000022888183594, + 30, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 30, + 30, + ], + "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": [ + 528, + 12, + 0, + ], + "Opacity": 1, + "Size": [ + 30, + 30, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 30, + 30, + ], + "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": [ + 740, + 12, + 0, + ], + "Opacity": 1, + "Size": [ + 30, + 30, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "activity-color", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 873, + 54.00004577636719, + ], + "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": [ + 54, + 54, + ], + "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": [ + 91, + 12, + 0, + ], + "Opacity": 1, + "Size": [ + 54, + 54, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 54.000022888183594, + 54, + ], + "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": [ + 303, + 12, + 0, + ], + "Opacity": 1, + "Size": [ + 54.000022888183594, + 54, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 54, + 54, + ], + "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": [ + 516, + 12, + 0, + ], + "Opacity": 1, + "Size": [ + 54, + 54, + ], + "Visual Type": "SpriteVisual", + }, + { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 54, + 54, + ], + "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": [ + 728, + 12, + 0, + ], + "Opacity": 1, + "Size": [ + 54, + 54, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "activity-large-color", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 873, + 78, + ], + "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": [ + 54, + 54, + ], + "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": [ + 54, + 54, + ], + "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": [ + 30, + 30, + ], + "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": [ + 54, + 54, + ], + "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": [ + 30, + 30, + ], + "Visual Type": "SpriteVisual", + }, +} +`; From bebdbca7895280947c6da28670feb6469195f6c3 Mon Sep 17 00:00:00 2001 From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com> Date: Thu, 28 Mar 2024 12:05:24 -0700 Subject: [PATCH 2/3] Lint --- .../ActivityIndicatorExample.windows.js | 29 ++++++++++++------- .../ActivityIndicatorComponentTest.test.ts | 4 ++- 2 files changed, 21 insertions(+), 12 deletions(-) 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 index dc9790019e2..e9c7492e8f5 100644 --- 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 @@ -88,7 +88,11 @@ exports.examples = [ return ( - + ); }, @@ -98,10 +102,10 @@ exports.examples = [ render(): Node { return ( - - - - + + + + ); }, @@ -114,7 +118,7 @@ exports.examples = [ style={[styles.centering, styles.gray]} size="large" color="white" - testID='activity-large' + testID="activity-large" accessible /> ); @@ -124,11 +128,14 @@ exports.examples = [ title: 'Large, custom colors', 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 index 0f3a60b9dad..73170b0bda8 100644 --- a/packages/e2e-test-app-fabric/test/ActivityIndicatorComponentTest.test.ts +++ b/packages/e2e-test-app-fabric/test/ActivityIndicatorComponentTest.test.ts @@ -23,7 +23,9 @@ afterEach(async () => { describe('ActivityIndicator Tests', () => { test('An ActivityIndicator can render', async () => { - const component = await app.findElementByTestID('default_activity_indicator'); + const component = await app.findElementByTestID( + 'default_activity_indicator', + ); await component.waitForDisplayed({timeout: 5000}); const dump = await dumpVisualTree('default_activity_indicator'); expect(dump).toMatchSnapshot(); From 9e54ecececeb860702dde559d14cd1ed262cb9b0 Mon Sep 17 00:00:00 2001 From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com> Date: Thu, 28 Mar 2024 13:17:17 -0700 Subject: [PATCH 3/3] Adjust Snapshots for Scaling --- ...ctivityIndicatorComponentTest.test.ts.snap | 124 +++++++++--------- .../__snapshots__/snapshotPages.test.js.snap | 21 +++ 2 files changed, 83 insertions(+), 62 deletions(-) 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 index 87b375ab68f..bb30895b5fa 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/ActivityIndicatorComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/ActivityIndicatorComponentTest.test.ts.snap @@ -61,8 +61,8 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors 1`] ], "Opacity": 1, "Size": [ - 30, - 30, + 20, + 20, ], "Visual Type": "SpriteVisual", }, @@ -124,14 +124,14 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors 1`] }, ], "Offset": [ - 103, - 12, + 111, + 8, 0, ], "Opacity": 1, "Size": [ - 30, - 30, + 20, + 20, ], "Visual Type": "SpriteVisual", }, @@ -145,8 +145,8 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors 1`] ], "Opacity": 1, "Size": [ - 30.000022888183594, - 30, + 20, + 20, ], "Visual Type": "SpriteVisual", }, @@ -208,14 +208,14 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors 1`] }, ], "Offset": [ - 315, - 12, + 336, + 8, 0, ], "Opacity": 1, "Size": [ - 30.000022888183594, - 30, + 20, + 20, ], "Visual Type": "SpriteVisual", }, @@ -229,8 +229,8 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors 1`] ], "Opacity": 1, "Size": [ - 30, - 30, + 20, + 20, ], "Visual Type": "SpriteVisual", }, @@ -292,14 +292,14 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors 1`] }, ], "Offset": [ - 528, - 12, + 561, + 8, 0, ], "Opacity": 1, "Size": [ - 30, - 30, + 20, + 20, ], "Visual Type": "SpriteVisual", }, @@ -313,8 +313,8 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors 1`] ], "Opacity": 1, "Size": [ - 30, - 30, + 20, + 20, ], "Visual Type": "SpriteVisual", }, @@ -376,14 +376,14 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors 1`] }, ], "Offset": [ - 740, - 12, + 786, + 8, 0, ], "Opacity": 1, "Size": [ - 30, - 30, + 20, + 20, ], "Visual Type": "SpriteVisual", }, @@ -396,8 +396,8 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors 1`] ], "Opacity": 1, "Size": [ - 873, - 54.00004577636719, + 916, + 36, ], "Visual Type": "SpriteVisual", }, @@ -465,8 +465,8 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors and ], "Opacity": 1, "Size": [ - 54, - 54, + 36, + 36, ], "Visual Type": "SpriteVisual", }, @@ -528,14 +528,14 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors and }, ], "Offset": [ - 91, - 12, + 103, + 8, 0, ], "Opacity": 1, "Size": [ - 54, - 54, + 36, + 36, ], "Visual Type": "SpriteVisual", }, @@ -549,8 +549,8 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors and ], "Opacity": 1, "Size": [ - 54.000022888183594, - 54, + 36, + 36, ], "Visual Type": "SpriteVisual", }, @@ -612,14 +612,14 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors and }, ], "Offset": [ - 303, - 12, + 328, + 8, 0, ], "Opacity": 1, "Size": [ - 54.000022888183594, - 54, + 36, + 36, ], "Visual Type": "SpriteVisual", }, @@ -633,8 +633,8 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors and ], "Opacity": 1, "Size": [ - 54, - 54, + 36, + 36, ], "Visual Type": "SpriteVisual", }, @@ -696,14 +696,14 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors and }, ], "Offset": [ - 516, - 12, + 553, + 8, 0, ], "Opacity": 1, "Size": [ - 54, - 54, + 36, + 36, ], "Visual Type": "SpriteVisual", }, @@ -717,8 +717,8 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors and ], "Opacity": 1, "Size": [ - 54, - 54, + 36, + 36, ], "Visual Type": "SpriteVisual", }, @@ -780,14 +780,14 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors and }, ], "Offset": [ - 728, - 12, + 778, + 8, 0, ], "Opacity": 1, "Size": [ - 54, - 54, + 36, + 36, ], "Visual Type": "SpriteVisual", }, @@ -800,8 +800,8 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom colors and ], "Opacity": 1, "Size": [ - 873, - 78, + 916, + 52, ], "Visual Type": "SpriteVisual", }, @@ -828,8 +828,8 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have custom sizing 1`] ], "Opacity": 1, "Size": [ - 54, - 54, + 36, + 36, ], "Visual Type": "SpriteVisual", }, @@ -856,8 +856,8 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have large sizing 1`] ], "Opacity": 1, "Size": [ - 54, - 54, + 36, + 36, ], "Visual Type": "SpriteVisual", }, @@ -884,8 +884,8 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have styling 1`] = ` ], "Opacity": 1, "Size": [ - 30, - 30, + 20, + 20, ], "Visual Type": "SpriteVisual", }, @@ -912,8 +912,8 @@ exports[`ActivityIndicator Tests An ActivityIndicator can have toggle animation ], "Opacity": 1, "Size": [ - 54, - 54, + 36, + 36, ], "Visual Type": "SpriteVisual", }, @@ -940,8 +940,8 @@ exports[`ActivityIndicator Tests An ActivityIndicator can render 1`] = ` ], "Opacity": 1, "Size": [ - 30, - 30, + 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`] = ` `;