@fluentui-react-native/tester-core 0.1.1

package/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+import { Text } from '@fluentui/react-native';
+import { Shadow } from '@fluentui-react-native/experimental-shadow';
+import type { Theme } from '@fluentui-react-native/framework';
+import { useFluentTheme } from '@fluentui-react-native/framework';
+import { mergeStyles } from '@fluentui-react-native/framework-base';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+
+import { shadowTestPageStyles } from './ShadowTestPageStyles';
+
+const getThemedStyles = themedStyleSheet((t: Theme) => {
+  const defaultShadowTestBoxPropsWithoutSpacing = {
+    maxWidth: 732,
+    minHeight: 64,
+    ...shadowTestPageStyles(t).backgroundColor,
+  };
+  const marginTestProps = {
+    marginVertical: 16,
+    marginHorizontal: 32,
+  };
+  const paddingTestProps = {
+    padding: 20,
+  };
+
+  return {
+    headerTextPadding: {
+      padding: 16,
+    },
+    defaultShadowTestBoxPropsWithoutSpacing,
+    defaultShadowTestBoxProps: {
+      ...defaultShadowTestBoxPropsWithoutSpacing,
+      ...marginTestProps,
+      ...paddingTestProps,
+    },
+    marginTestProps,
+    paddingTestProps,
+    borderRadiusTestProps: {
+      borderRadius: 8,
+    },
+    borderWidthTestProps: {
+      borderWidth: 2,
+      borderColor: 'black',
+    },
+    offsetTestProps: { start: 10 },
+    alignItemsTestProps: { alignItems: 'flex-start' },
+    flexDirectionTestProps: { flexDirection: 'row' },
+    flexWrapTestProps: { flexWrap: 'wrap' },
+  };
+});
+
+export const ShadowWithDifferentPropsTestSection: React.FunctionComponent = () => {
+  const theme = useFluentTheme();
+  const themedStyles = getThemedStyles(theme);
+
+  return (
+    <View style={shadowTestPageStyles(theme).backgroundColor}>
+      <Text style={themedStyles.headerTextPadding}>
+        The following tests have a Shadow16 set on a child view that has some specific props.
+      </Text>
+      <View>
+        <Shadow shadowToken={theme.shadows.shadow16}>
+          <View style={themedStyles.defaultShadowTestBoxProps}>
+            <Text variant="bodySemibold">padding: 20, marginVertical: 16, marginHorizontal: 32</Text>
+          </View>
+        </Shadow>
+        <Shadow shadowToken={theme.shadows.shadow16}>
+          <View style={mergeStyles<ViewStyle>(themedStyles.defaultShadowTestBoxPropsWithoutSpacing, themedStyles.paddingTestProps)}>
+            <Text variant="bodySemibold">padding only</Text>
+          </View>
+        </Shadow>
+        <Shadow shadowToken={theme.shadows.shadow16}>
+          <View style={mergeStyles<ViewStyle>(themedStyles.defaultShadowTestBoxPropsWithoutSpacing, themedStyles.marginTestProps)}>
+            <Text variant="bodySemibold">margins only</Text>
+          </View>
+        </Shadow>
+        <Shadow shadowToken={theme.shadows.shadow16}>
+          <View style={mergeStyles<ViewStyle>(themedStyles.defaultShadowTestBoxProps, themedStyles.borderRadiusTestProps)}>
+            <Text variant="bodySemibold">borderRadius: 8</Text>
+          </View>
+        </Shadow>
+        <Shadow shadowToken={theme.shadows.shadow16}>
+          <View
+            style={mergeStyles<ViewStyle>(
+              themedStyles.defaultShadowTestBoxProps,
+              themedStyles.borderRadiusTestProps,
+              themedStyles.borderWidthTestProps,
+            )}
+          >
+            <Text variant="bodySemibold">borderWidth: 2</Text>
+          </View>
+        </Shadow>
+        <Shadow shadowToken={theme.shadows.shadow16}>
+          <View style={mergeStyles<ViewStyle>(themedStyles.defaultShadowTestBoxProps, themedStyles.offsetTestProps)}>
+            <Text variant="bodySemibold">start: 10</Text>
+          </View>
+        </Shadow>
+        <Shadow shadowToken={theme.shadows.shadow16}>
+          <View style={mergeStyles<ViewStyle>(themedStyles.defaultShadowTestBoxProps, themedStyles.alignItemsTestProps)}>
+            <Text variant="bodySemibold">alignItems: flex-start</Text>
+          </View>
+        </Shadow>
+        <Shadow shadowToken={theme.shadows.shadow16}>
+          <View style={mergeStyles<ViewStyle>(themedStyles.defaultShadowTestBoxProps, themedStyles.flexDirectionTestProps)}>
+            <Text variant="bodySemibold">flexDirection: row</Text>
+          </View>
+        </Shadow>
+        <Shadow shadowToken={theme.shadows.shadow16}>
+          <View style={mergeStyles<ViewStyle>(themedStyles.defaultShadowTestBoxProps, themedStyles.flexWrapTestProps)}>
+            <Text variant="bodySemibold">flexWrap: wrap</Text>
+          </View>
+        </Shadow>
+      </View>
+    </View>
+  );
+};

package/src/TestComponents/Shadow/index.ts

@@ -0,0 +1 @@
+export * from './ShadowTest';

package/src/TestComponents/Shimmer/ShimmerE2ETest.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { SHIMMER_TEST_COMPONENT } from '@fluentui-react-native/e2e-testing';
+import { Shimmer } from '@fluentui-react-native/experimental-shimmer';
+import { Stack } from '@fluentui-react-native/stack';
+
+import { shimmerRectsAndRect } from './ShimmerTestElementSets';
+import { stackStyle } from '../Common/styles';
+import { testProps } from '../Common/TestProps';
+
+export const E2ETestingShimmer: React.FunctionComponent<Record<string, never>> = () => {
+  return (
+    <Stack style={stackStyle}>
+      <Shimmer
+        elements={shimmerRectsAndRect()}
+        duration={2000}
+        delay={1000}
+        style={{ width: 300, height: 100 }}
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(SHIMMER_TEST_COMPONENT)}
+      />
+    </Stack>
+  );
+};

package/src/TestComponents/Shimmer/ShimmerTest.tsx

@@ -0,0 +1,142 @@
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+
+import { SHIMMER_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import { Shimmer } from '@fluentui-react-native/experimental-shimmer';
+import { Stack } from '@fluentui-react-native/stack';
+
+import { E2ETestingShimmer } from './ShimmerE2ETest';
+import { shimmerBorderRadiusTests, shimmerRectsAndRect, shimmerRectsAndCircle } from './ShimmerTestElementSets';
+import { stackStyle } from '../Common/styles';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const TestCompareCustomizeShimmer = Shimmer.customize({
+  shimmerWaveColor: 'blue',
+  shimmerColor: 'orange',
+  backgroundColor: 'red',
+});
+
+const shimmerStyles = StyleSheet.create({
+  smallCustomizedShimmer: { height: 100, width: '50%', borderWidth: 2, borderColor: 'black' },
+  smallRoundedCustomizedShimmer: { height: 100, width: 150, borderRadius: 20, borderWidth: 2, borderColor: 'black' },
+  mediumShimmer: { width: 300, height: 100 },
+  largeShimmer: { width: 800, height: 400 },
+});
+
+export const CustomizeAndTokenPropsShimmers: React.FunctionComponent = () => {
+  return (
+    <Stack style={{ margin: 4 }}>
+      <TestCompareCustomizeShimmer
+        elements={shimmerRectsAndCircle()}
+        duration={2000}
+        delay={1000}
+        style={shimmerStyles.smallCustomizedShimmer}
+      />
+
+      <Shimmer
+        elements={shimmerRectsAndCircle()}
+        duration={2000}
+        delay={1000}
+        style={shimmerStyles.smallCustomizedShimmer}
+        shimmerWaveColor="blue"
+        shimmerColor="orange"
+        backgroundColor="red"
+      />
+    </Stack>
+  );
+};
+
+export const RoundedCornerClipCheckShimmer: React.FunctionComponent = () => {
+  return (
+    <Stack style={{ margin: 4 }}>
+      <Shimmer
+        elements={shimmerRectsAndCircle()}
+        duration={2000}
+        delay={1000}
+        style={shimmerStyles.smallRoundedCustomizedShimmer}
+        backgroundColor="teal"
+      />
+    </Stack>
+  );
+};
+
+const RectShimmers: React.FunctionComponent<Record<string, never>> = () => {
+  return (
+    <Stack style={stackStyle}>
+      <Shimmer elements={shimmerRectsAndRect()} style={shimmerStyles.mediumShimmer} />
+    </Stack>
+  );
+};
+
+const RectCircleShimmers: React.FunctionComponent<Record<string, never>> = () => {
+  return (
+    <Stack style={stackStyle}>
+      <Shimmer elements={shimmerRectsAndCircle()} duration={3000} delay={1000} style={shimmerStyles.mediumShimmer} />
+    </Stack>
+  );
+};
+
+const CustomizedShimmer: React.FunctionComponent<Record<string, never>> = () => {
+  return (
+    <Stack style={stackStyle}>
+      <CustomizeAndTokenPropsShimmers />
+      <RoundedCornerClipCheckShimmer />
+    </Stack>
+  );
+};
+
+const ShimmerBorderRadii: React.FunctionComponent<Record<string, never>> = () => {
+  return (
+    <Stack style={stackStyle}>
+      <Shimmer elements={shimmerBorderRadiusTests()} duration={3000} style={shimmerStyles.largeShimmer} />
+    </Stack>
+  );
+};
+
+const shimmerSections: TestSection[] = [
+  {
+    name: 'Shimmer Rects',
+    testID: SHIMMER_TESTPAGE,
+    component: RectShimmers,
+  },
+  {
+    name: 'Shimmer Rects and Circle',
+    testID: SHIMMER_TESTPAGE,
+    component: RectCircleShimmers,
+  },
+  ...Platform.select({
+    android: [null],
+    default: [
+      {
+        name: 'Border Radius Tests',
+        testID: SHIMMER_TESTPAGE,
+        component: ShimmerBorderRadii,
+      },
+      {
+        name: 'Customized Shimmer',
+        testID: SHIMMER_TESTPAGE,
+        component: CustomizedShimmer,
+      },
+    ],
+  }),
+  {
+    name: 'Shimmer for E2E Testing',
+    component: E2ETestingShimmer,
+  },
+];
+
+export const ShimmerTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Production',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Production',
+    macosStatus: 'Production',
+    androidStatus: 'Production',
+  };
+
+  const description =
+    'Shimmer is a temporary animation placeholder for when a service call takes time to return data but the rest of the UI should continue rendering.';
+
+  return <Test name="Shimmer Test" description={description} sections={shimmerSections} status={status} />;
+};

package/src/TestComponents/Shimmer/ShimmerTestElementSets.tsx

@@ -0,0 +1,55 @@
+import type { ShimmerRectElement, ShimmerCircleElement } from '@fluentui-react-native/experimental-shimmer';
+
+export function shimmerRects(): Array<ShimmerRectElement | ShimmerCircleElement> {
+  return [
+    {
+      type: 'rect',
+      borderRadiusX: 3,
+      borderRadiusY: 3,
+      width: 100,
+      height: 20,
+      x: 90,
+      y: 70,
+    },
+    {
+      type: 'rect',
+      borderRadiusX: 3,
+      borderRadiusY: 3,
+      width: 150,
+      height: 20,
+      x: 90,
+      y: 42,
+    },
+    {
+      type: 'rect',
+      borderRadiusX: 3,
+      borderRadiusY: 3,
+      width: 200,
+      height: 20,
+      x: 90,
+      y: 15,
+    },
+  ];
+}
+
+export function shimmerRectsAndRect(): Array<ShimmerRectElement | ShimmerCircleElement> {
+  return shimmerRects().concat([{ type: 'rect', borderRadiusX: 3, borderRadiusY: 3, height: 60, width: 60, x: 10, y: 25 }]);
+}
+
+export function shimmerRectsAndCircle(): Array<ShimmerRectElement | ShimmerCircleElement> {
+  return shimmerRects().concat([{ type: 'circle', radius: 30, cx: 40, cy: 55 }]);
+}
+/**
+ * Matches rectsRoundRectsCircles.svg to show the border radii all create equal width/height rounded rects.
+ */
+export function shimmerBorderRadiusTests(): Array<ShimmerRectElement | ShimmerCircleElement> {
+  return [
+    { type: 'rect', x: 10, y: 10, borderRadiusX: 0, borderRadiusY: 0, width: 240, height: 120 },
+    { type: 'rect', x: 250, y: 10, borderRadiusX: 50, borderRadiusY: 30, width: 240, height: 120 },
+    { type: 'rect', x: 490, y: 10, borderRadiusX: 40, borderRadiusY: 40, width: 240, height: 120 },
+    { type: 'rect', x: 10, y: 130, borderRadiusX: 50, borderRadiusY: 30, width: 240, height: 120 },
+    { type: 'rect', x: 250, y: 130, borderRadiusX: 40, borderRadiusY: 40, width: 240, height: 120 },
+    { type: 'circle', cx: 550, cy: 190, radius: 60 },
+    { type: 'circle', cx: 670, cy: 190, radius: 60 },
+  ];
+}

package/src/TestComponents/Shimmer/iconImageSource.tsx

@@ -0,0 +1,5 @@
+import type { ImageURISource } from 'react-native';
+
+export const icon: ImageURISource = {
+  uri: 'data:image/png;base64,/9j/4AAQSkZJRgABAQABLAEsAAD/4QCARXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAAEsAAAAAQAAASwAAAABAAKgAgAEAAAAAQAAAMigAwAEAAAAAQAAAMgAAAAA/+EJ2Wh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphZjRmMjAyMy02MmIzLTQ5MDMtOTkyOS1kNTk1MDcyNzAwYjMiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnN0b2NrOjhhYzBiZjc1LTkzZTktNGUyOC05YzY5LTA2ZjFlNmNiYmIxOSIvPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDw/eHBhY2tldCBlbmQ9InciPz4A/+0AOFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/iEXhJQ0NfUFJPRklMRQABAQAAEWhhcHBsAgAAAG1udHJHUkFZWFlaIAfcAAgAFwAPAC4AD2Fjc3BBUFBMAAAAAG5vbmUAAAAAAAAAAAAAAAAAAAAAAAD21gABAAAAANMtYXBwbAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWRlc2MAAADAAAAAeWRzY20AAAE8AAAH6GNwcnQAAAkkAAAAI3d0cHQAAAlIAAAAFGtUUkMAAAlcAAAIDGRlc2MAAAAAAAAAH0dlbmVyaWMgR3JheSBHYW1tYSAyLjIgUHJvZmlsZQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABtbHVjAAAAAAAAAB8AAAAMc2tTSwAAAC4AAAGEZGFESwAAADgAAAGyY2FFUwAAADgAAAHqdmlWTgAAAEAAAAIicHRCUgAAAEoAAAJidWtVQQAAACwAAAKsZnJGVQAAAD4AAALYaHVIVQAAADQAAAMWemhUVwAAAB4AAANKbmJOTwAAADoAAANoY3NDWgAAACgAAAOiaGVJTAAAACQAAAPKaXRJVAAAAE4AAAPucm9STwAAACoAAAQ8ZGVERQAAAE4AAARma29LUgAAACIAAAS0c3ZTRQAAADgAAAGyemhDTgAAAB4AAATWamFKUAAAACYAAAT0ZWxHUgAAACoAAAUacHRQTwAAAFIAAAVEbmxOTAAAAEAAAAWWZXNFUwAAAEwAAAXWdGhUSAAAADIAAAYidHJUUgAAACQAAAZUZmlGSQAAAEYAAAZ4aHJIUgAAAD4AAAa+cGxQTAAAAEoAAAb8cnVSVQAAADoAAAdGZW5VUwAAADwAAAeAYXJFRwAAACwAAAe8AFYBYQBlAG8AYgBlAGMAbgDhACAAcwBpAHYA4QAgAGcAYQBtAGEAIAAyACwAMgBHAGUAbgBlAHIAaQBzAGsAIABnAHIA5QAgADIALAAyACAAZwBhAG0AbQBhAHAAcgBvAGYAaQBsAEcAYQBtAG0AYQAgAGQAZQAgAGcAcgBpAHMAbwBzACAAZwBlAG4A6AByAGkAYwBhACAAMgAuADIAQx6lAHUAIABoAOwAbgBoACAATQDgAHUAIAB4AOEAbQAgAEMAaAB1AG4AZwAgAEcAYQBtAG0AYQAgADIALgAyAFAAZQByAGYAaQBsACAARwBlAG4A6QByAGkAYwBvACAAZABhACAARwBhAG0AYQAgAGQAZQAgAEMAaQBuAHoAYQBzACAAMgAsADIEFwQwBDMEMAQ7BEwEPQQwACAARwByAGEAeQAtBDMEMAQ8BDAAIAAyAC4AMgBQAHIAbwBmAGkAbAAgAGcA6QBuAOkAcgBpAHEAdQBlACAAZwByAGkAcwAgAGcAYQBtAG0AYQAgADIALAAyAMEAbAB0AGEAbADhAG4AbwBzACAAcwB6APwAcgBrAGUAIABnAGEAbQBtAGEAIAAyAC4AMpAadShwcJaOUUlepgAgADIALgAyACCCcl9pY8+P8ABHAGUAbgBlAHIAaQBzAGsAIABnAHIA5QAgAGcAYQBtAG0AYQAgADIALAAyAC0AcAByAG8AZgBpAGwATwBiAGUAYwBuAOEAIAFhAGUAZADhACAAZwBhAG0AYQAgADIALgAyBdIF0AXeBdQAIAXQBeQF1QXoACAF2wXcBdwF2QAgADIALgAyAFAAcgBvAGYAaQBsAG8AIABnAHIAaQBnAGkAbwAgAGcAZQBuAGUAcgBpAGMAbwAgAGQAZQBsAGwAYQAgAGcAYQBtAG0AYQAgADIALAAyAEcAYQBtAGEAIABnAHIAaQAgAGcAZQBuAGUAcgBpAGMBAwAgADIALAAyAEEAbABsAGcAZQBtAGUAaQBuAGUAcwAgAEcAcgBhAHUAcwB0AHUAZgBlAG4ALQBQAHIAbwBmAGkAbAAgAEcAYQBtAG0AYQAgADIALAAyx3y8GAAg1ozAyQAgrBC5yAAgADIALgAyACDVBLhc0wzHfGZukBpwcF6mfPtlcAAgADIALgAyACBjz4/wZYdO9k4AgiwwsDDsMKQwrDDzMN4AIAAyAC4AMgAgMNcw7TDVMKEwpDDrA5MDtQO9A7kDugPMACADkwO6A8EDuQAgA5MDrAO8A7wDsQAgADIALgAyAFAAZQByAGYAaQBsACAAZwBlAG4A6QByAGkAYwBvACAAZABlACAAYwBpAG4AegBlAG4AdABvAHMAIABkAGEAIABHAGEAbQBtAGEAIAAyACwAMgBBAGwAZwBlAG0AZQBlAG4AIABnAHIAaQBqAHMAIABnAGEAbQBtAGEAIAAyACwAMgAtAHAAcgBvAGYAaQBlAGwAUABlAHIAZgBpAGwAIABnAGUAbgDpAHIAaQBjAG8AIABkAGUAIABnAGEAbQBtAGEAIABkAGUAIABnAHIAaQBzAGUAcwAgADIALAAyDiMOMQ4HDioONQ5BDgEOIQ4hDjIOQA4BDiMOIg5MDhcOMQ5IDicORA4bACAAMgAuADIARwBlAG4AZQBsACAARwByAGkAIABHAGEAbQBhACAAMgAsADIAWQBsAGUAaQBuAGUAbgAgAGgAYQByAG0AYQBhAG4AIABnAGEAbQBtAGEAIAAyACwAMgAgAC0AcAByAG8AZgBpAGkAbABpAEcAZQBuAGUAcgBpAQ0AawBpACAARwByAGEAeQAgAEcAYQBtAG0AYQAgADIALgAyACAAcAByAG8AZgBpAGwAVQBuAGkAdwBlAHIAcwBhAGwAbgB5ACAAcAByAG8AZgBpAGwAIABzAHoAYQByAG8BWwBjAGkAIABnAGEAbQBtAGEAIAAyACwAMgQeBDEESQQwBE8AIARBBDUEQAQwBE8AIAQzBDAEPAQ8BDAAIAAyACwAMgAtBD8EQAQ+BEQEOAQ7BEwARwBlAG4AZQByAGkAYwAgAEcAcgBhAHkAIABHAGEAbQBtAGEAIAAyAC4AMgAgAFAAcgBvAGYAaQBsAGUGOgYnBkUGJwAgADIALgAyACAGRAZIBkYAIAYxBkUGJwYvBkoAIAY5BicGRXRleHQAAAAAQ29weXJpZ2h0IEFwcGxlIEluYy4sIDIwMTIAAFhZWiAAAAAAAADzUQABAAAAARbMY3VydgAAAAAAAAQAAAAABQAKAA8AFAAZAB4AIwAoAC0AMgA3ADsAQABFAEoATwBUAFkAXgBjAGgAbQByAHcAfACBAIYAiwCQAJUAmgCfAKQAqQCuALIAtwC8AMEAxgDLANAA1QDbAOAA5QDrAPAA9gD7AQEBBwENARMBGQEfASUBKwEyATgBPgFFAUwBUgFZAWABZwFuAXUBfAGDAYsBkgGaAaEBqQGxAbkBwQHJAdEB2QHhAekB8gH6AgMCDAIUAh0CJgIvAjgCQQJLAlQCXQJnAnECegKEAo4CmAKiAqwCtgLBAssC1QLgAusC9QMAAwsDFgMhAy0DOANDA08D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',
+};

package/src/TestComponents/Shimmer/index.ts

@@ -0,0 +1 @@
+export * from './ShimmerTest';

package/src/TestComponents/Spacing/SpacingTest.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { Text, View } from 'react-native';
+
+import { SPACING_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import { Stack } from '@fluentui-react-native/stack';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+
+import { stackStyle } from '../Common/styles';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const BasicUsage: React.FunctionComponent = () => {
+  function spacingExample(tokenName: string, spacing?: number) {
+    return (
+      <View>
+        <Text>
+          {tokenName} ({spacing})
+        </Text>
+        <View style={{ flexDirection: 'row', alignItems: 'baseline' }}>
+          <Text style={{ padding: spacing, backgroundColor: '#f80' }}>First</Text>
+          <Text style={{ padding: spacing, backgroundColor: '#0af' }}>Second</Text>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View>
+      <Stack style={stackStyle} gap={5}>
+        {spacingExample('None', globalTokens.sizeNone)}
+        {spacingExample('size20', globalTokens.size20)}
+        {spacingExample('size40', globalTokens.size40)}
+        {spacingExample('size60', globalTokens.size60)}
+        {spacingExample('size80', globalTokens.size80)}
+        {spacingExample('size100', globalTokens.size100)}
+        {spacingExample('size120', globalTokens.size120)}
+        {spacingExample('size160', globalTokens.size160)}
+        {spacingExample('size200', globalTokens.size200)}
+        {spacingExample('size240', globalTokens.size240)}
+        {spacingExample('size280', globalTokens.size280)}
+        {spacingExample('size320', globalTokens.size320)}
+        {spacingExample('size360', globalTokens.size360)}
+        {spacingExample('size400', globalTokens.size400)}
+        {spacingExample('size480', globalTokens.size480)}
+        {spacingExample('size560', globalTokens.size560)}
+      </Stack>
+    </View>
+  );
+};
+
+export const SpacingTokensTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Production',
+    uwpStatus: 'Production',
+    iosStatus: 'Production',
+    macosStatus: 'Production',
+    androidStatus: 'Production',
+  };
+
+  const description = 'This showcases the different spacing tokens available in Fluent UI.';
+
+  const spacingSections: TestSection[] = [
+    {
+      name: 'Basic Usage',
+      testID: SPACING_TESTPAGE,
+      component: BasicUsage,
+    },
+  ];
+
+  return <Test name="Spacing Tokens Test" description={description} sections={spacingSections} status={status} />;
+};

package/src/TestComponents/Spacing/index.ts

@@ -0,0 +1 @@
+export * from './SpacingTest';

package/src/TestComponents/Spinner/SpinnerE2ETest.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import { SPINNER_TEST_COMPONENT } from '@fluentui-react-native/e2e-testing';
+import { Spinner } from '@fluentui-react-native/spinner';
+import { Stack } from '@fluentui-react-native/stack';
+
+import { stackStyle } from '../Common/styles';
+import { testProps } from '../Common/TestProps';
+
+export const E2ETestingSpinner: React.FunctionComponent<Record<string, never>> = () => {
+  return (
+    <Stack style={stackStyle}>
+      <Spinner
+        size="large"
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(SPINNER_TEST_COMPONENT)}
+      />
+    </Stack>
+  );
+};

package/src/TestComponents/Spinner/SpinnerTest.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { View, Switch } from 'react-native';
+
+import { SPINNER_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import type { SpinnerStatus } from '@fluentui-react-native/spinner';
+import { Spinner } from '@fluentui-react-native/spinner';
+import { Stack } from '@fluentui-react-native/stack';
+import { Text, TextV1 } from '@fluentui-react-native/text';
+
+import { E2ETestingSpinner } from './SpinnerE2ETest';
+import { stackStyle, commonTestStyles as commonStyles, commonTestStyles } from '../Common/styles';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const BasicSpinnerTest: React.FunctionComponent = () => {
+  const [status, setStatus] = React.useState<SpinnerStatus>('active');
+  const [hidesWhenStopped, setHidesWhenStopped] = React.useState(true);
+
+  return (
+    <Stack style={stackStyle}>
+      <View style={commonStyles.root}>
+        <View style={commonStyles.settings}>
+          <View style={commonStyles.switch}>
+            <Text>Animating</Text>
+            <Switch
+              value={status === 'active'}
+              onValueChange={(value) => {
+                value ? setStatus('active') : setStatus('inactive');
+              }}
+            />
+          </View>
+          <View style={commonStyles.switch}>
+            <Text>HidesWhenStopped</Text>
+            <Switch value={hidesWhenStopped} onValueChange={setHidesWhenStopped} />
+          </View>
+        </View>
+        <Spinner status={status} hidesWhenStopped={hidesWhenStopped} />
+      </View>
+    </Stack>
+  );
+};
+
+const CustomisedSpinner = Spinner.customize({
+  trackColor: 'red',
+  size: 'medium',
+});
+
+const SpinnerSizeTest: React.FunctionComponent = () => {
+  const memoizedStyles = React.useMemo(() => ({ ...commonTestStyles.androidContainer, height: 250 }), []);
+  return (
+    <Stack style={stackStyle}>
+      <View style={memoizedStyles}>
+        <View>
+          <TextV1>xx-small</TextV1>
+          <Spinner size="xx-small" />
+        </View>
+        <View>
+          <TextV1>x-small</TextV1>
+          <Spinner size="x-small" />
+        </View>
+        <View>
+          <TextV1>medium</TextV1>
+          <Spinner size="medium" />
+        </View>
+        <View>
+          <TextV1>large</TextV1>
+          <Spinner size="large" />
+        </View>
+        <View>
+          <TextV1>x-large</TextV1>
+          <Spinner size="x-large" />
+        </View>
+      </View>
+    </Stack>
+  );
+};
+
+const spinnerSections: TestSection[] = [
+  {
+    name: 'Basic Spinner',
+    testID: SPINNER_TESTPAGE,
+    component: BasicSpinnerTest,
+  },
+  {
+    name: 'Spinner Size Test',
+    component: SpinnerSizeTest,
+  },
+  {
+    name: 'Customized Spinner Test',
+    component: () => <CustomisedSpinner />,
+  },
+  {
+    name: 'Spinner for E2E Testing',
+    component: () => <E2ETestingSpinner />,
+  },
+];
+
+export const SpinnerTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Production',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Production',
+    macosStatus: 'Production',
+    androidStatus: 'Production',
+  };
+
+  const description =
+    'Spinner is a visual representation that data is being loaded. It is implemented with a View wrapping an Animated SVG. The View is to ensure that AccessibilityRole works. AccessibilityRole currently does not work on SVGs.';
+
+  return <Test name="Spinner Test" description={description} sections={spinnerSections} status={status}></Test>;
+};

package/src/TestComponents/Spinner/SpinnerTest.win32.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { View /*Switch */ } from 'react-native';
+
+//import type { SpinnerStatus } from '@fluentui-react-native/spinner';
+import { SPINNER_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import { Spinner } from '@fluentui-react-native/spinner';
+import { Stack } from '@fluentui-react-native/stack';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+
+import { E2ETestingSpinner } from './SpinnerE2ETest';
+import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const BasicSpinnerTest: React.FunctionComponent = () => {
+  return (
+    <Stack style={stackStyle}>
+      <View style={commonStyles.root}>
+        <View style={commonStyles.settings}></View>
+        <Spinner />
+      </View>
+    </Stack>
+  );
+};
+
+const SpinnerSizeTest: React.FunctionComponent = () => {
+  return (
+    <Stack style={stackStyle}>
+      <View>
+        <View>
+          <Text>tiny</Text>
+          <Spinner size="tiny" />
+        </View>
+        <View>
+          <Text>x-small</Text>
+          <Spinner size="x-small" />
+        </View>
+        <View>
+          <Text>small</Text>
+          <Spinner size="small" />
+        </View>
+        <View>
+          <Text>medium</Text>
+          <Spinner size="medium" />
+        </View>
+        <View>
+          <Text>large</Text>
+          <Spinner size="large" />
+        </View>
+        <View>
+          <Text>x-large</Text>
+          <Spinner size="x-large" />
+        </View>
+        <View>
+          <Text>huge</Text>
+          <Spinner size="huge" />
+        </View>
+      </View>
+    </Stack>
+  );
+};
+
+const spinnerSections: TestSection[] = [
+  {
+    name: 'Basic Spinner Test',
+    testID: SPINNER_TESTPAGE,
+    component: BasicSpinnerTest,
+  },
+  {
+    name: 'Spinner Size Test',
+    component: SpinnerSizeTest,
+  },
+  {
+    name: 'Spinner for E2E Testing',
+    component: () => <E2ETestingSpinner />,
+  },
+];
+
+export const SpinnerTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Experimental',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Beta',
+    macosStatus: 'Backlog',
+    androidStatus: 'Backlog',
+  };
+
+  const description =
+    'Spinner is a visual representation that data is being loaded. It is implemented with a View wrapping an Animated SVG. The View is to ensure that AccessibilityRole works. AccessibilityRole currently does not work on SVGs.';
+
+  return <Test name="Spinner Test" description={description} sections={spinnerSections} status={status}></Test>;
+};