Add ActivityIndicator Visual Snapshot Tests (#12892)

* Add ActivityIndicator Snapshot Tests

* Lint

* Adjust Snapshots for Scaling

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"

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<void | TimeoutID>();
+
+  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 (
+    <ActivityIndicator
+      animating={animating}
+      style={[styles.centering, {height: 80}]}
+      size="large"
+      testID="activity-toggle"
+      accessible
+    />
+  );
+}
+
+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 (
+        <ActivityIndicator
+          style={[styles.centering, styles.gray]}
+          color="white"
+          testID="default_activity_indicator"
+          accessibilityLabel="Wait for content to load!"
+          accessible
+        />
+      );
+    },
+  },
+  {
+    title: 'Gray',
+    render(): Node {
+      return (
+        <View>
+          <ActivityIndicator style={[styles.centering]} />
+          <ActivityIndicator
+            style={[styles.centering, styles.gray]}
+            testID="activity-gray"
+            accessible
+          />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Custom colors',
+    render(): Node {
+      return (
+        <View style={styles.horizontal} testID="activity-color" accessible>
+          <ActivityIndicator color="#0000ff" accessible />
+          <ActivityIndicator color="#aa00aa" accessible />
+          <ActivityIndicator color="#aa3300" accessible />
+          <ActivityIndicator color="#00aa00" accessible />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Large',
+    render(): Node {
+      return (
+        <ActivityIndicator
+          style={[styles.centering, styles.gray]}
+          size="large"
+          color="white"
+          testID="activity-large"
+          accessible
+        />
+      );
+    },
+  },
+  {
+    title: 'Large, custom colors',
+    render(): Node {
+      return (
+        <View
+          style={styles.horizontal}
+          testID="activity-large-color"
+          accessible>
+          <ActivityIndicator size="large" color="#0000ff" accessible />
+          <ActivityIndicator size="large" color="#aa00aa" accessible />
+          <ActivityIndicator size="large" color="#aa3300" accessible />
+          <ActivityIndicator size="large" color="#00aa00" accessible />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Start/stop',
+    render(): Node {
+      return <ToggleAnimatingActivityIndicator />;
+    },
+  },
+  {
+    title: 'Custom size',
+    render(): Node {
+      return (
+        <ActivityIndicator
+          style={[styles.centering, {transform: [{scale: 1.5}]}]}
+          size="large"
+          testID="activity-size"
+          accessible
+        />
+      );
+    },
+  },
+  {
+    platform: 'android',
+    title: 'Custom size (size: 75)',
+    render(): Node {
+      return <ActivityIndicator style={styles.centering} size={75} />;
+    },
+  },
+];

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();
+  });
+});