@fluentui-react-native/tester-core 0.1.1

package/src/TestComponents/FocusZone/styles.ts

@@ -0,0 +1,79 @@
+import { Platform, StyleSheet, View } from 'react-native';
+
+import { Text } from '@fluentui/react-native';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { Icon } from '@fluentui-react-native/icon';
+
+export const focusZoneTestStyles = StyleSheet.create({
+  focusZoneViewStyle: {
+    flexDirection: 'row',
+    alignContent: 'flex-start',
+    alignItems: 'flex-start',
+    padding: 10,
+  },
+  nestedFocusZoneStyle: {
+    borderWidth: 1,
+    padding: 8,
+    margin: 8,
+  },
+  focusZoneButton: {
+    height: 30,
+    width: 100,
+    margin: 10,
+  },
+  listWrapperButton: {
+    marginVertical: 10,
+  },
+  dashedBorder: {
+    borderWidth: 1,
+    borderStyle: 'dashed',
+  },
+  radioGroup: {
+    display: 'flex',
+    flexDirection: 'row',
+    fontSize: 12,
+  },
+  scrollViewStyle: {
+    height: 100,
+    width: 300,
+  },
+  scrollViewContentStyle: {
+    backgroundColor: 'grey',
+  },
+  scrollViewButton: {
+    marginHorizontal: 20,
+    marginBottom: 100,
+  },
+  smallBoxStyle: {
+    width: 20,
+    height: 20,
+    margin: 5,
+    // something is wrong with setting the background color on this style on the Mac, and until we fix that, let's not do this
+    ...Platform.select({ macos: { borderWidth: 1 }, default: { backgroundColor: 'lightgrey' } }),
+  },
+  wideBoxStyle: {
+    width: 150,
+    height: 20,
+    margin: 5,
+    // something is wrong with setting the background color on this style on the Mac, and until we fix that, let's not do this
+    ...Platform.select({ macos: { borderWidth: 1 }, default: { backgroundColor: 'lightgrey' } }),
+  },
+});
+
+export const GridButton = Button.compose({
+  slots: {
+    root: View,
+    icon: Icon,
+    content: Text,
+  },
+  slotProps: {
+    content: {
+      style: { aspectRatio: 1, alignItems: 'center', justifyContent: 'center' },
+    },
+  },
+});
+
+export const SubheaderText = Text.customize({
+  tokens: { variant: 'subheaderSemibold' },
+  root: { style: { textDecorationLine: 'underline' } },
+});

package/src/TestComponents/Icon/IconLegacyE2ETest.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { Text } from '@fluentui/react-native';
+import { ICON_ACCESSIBILITY_LABEL } from '@fluentui-react-native/e2e-testing';
+import { Icon } from '@fluentui-react-native/icon';
+import type { RasterImageIconProps } from '@fluentui-react-native/icon';
+
+import { testImage } from '../Common/iconExamples';
+
+export const E2ETestingIcon: React.FunctionComponent = () => {
+  const rasterRainbowSpectrumProps: RasterImageIconProps = { src: testImage };
+  const rasterChessProps: RasterImageIconProps = { src: { uri: 'https://static.thenounproject.com/png/2960386-200.png' } };
+
+  const showRasterIcons = true;
+
+  return (
+    <View>
+      {showRasterIcons ? (
+        <View>
+          <Text>Raster icons</Text>
+          <Icon
+            rasterImageSource={rasterRainbowSpectrumProps}
+            width={100}
+            height={100}
+            color="green"
+            accessibilityLabel={ICON_ACCESSIBILITY_LABEL}
+          />
+          <Icon rasterImageSource={rasterChessProps} width={100} height={100} color="blue" accessibilityLabel="Chess pieces" />
+        </View>
+      ) : null}
+    </View>
+  );
+};

package/src/TestComponents/Icon/IconTest.tsx

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import { Platform, PlatformColor, View } from 'react-native';
+
+import { Text } from '@fluentui/react-native';
+import { ICON_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import type { RasterImageIconProps, SvgIconProps, FontIconProps } from '@fluentui-react-native/icon';
+import { Icon } from '@fluentui-react-native/icon';
+
+import { E2ETestingIcon } from './IconLegacyE2ETest';
+import { IconV1E2ETest } from './IconV1E2ETest';
+import { IconV1Test } from './IconV1Test';
+import { testImage, testTtf, svgProps } from '../Common/iconExamples';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const Icons: React.FunctionComponent = () => {
+  const fontCustomFontProps: FontIconProps = {
+    fontFamily: 'Font Awesome 5 Free',
+    fontSrcFile: testTtf,
+    codepoint: 0xf083,
+    fontSize: 32,
+  };
+
+  const fontBuiltInProps = {
+    fontFamily: 'Arial',
+    codepoint: 0x2663,
+    fontSize: 32,
+  };
+
+  // d20 icon by Lonnie Tapscott, licensed under CC BY, modified to use "currentColor"
+  // https://thenounproject.com/search/?q=d20&i=2453700
+  const svgD20DataUriProps: SvgIconProps = {
+    uri: 'data:image/svg;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeD0iMHB4IiB5PSIwcHgiPjx0aXRsZT5BcnRib2FyZCA2PC90aXRsZT48cGF0aCBkPSJNOTEuOSw2MS4zN2wtMTQtNDJhMiwyLDAsMCwwLTEuMzMtMS4yOWwtMzctMTFhMiwyLDAsMCwwLTIsLjUxbC0zMSwzMWEyLDIsMCwwLDAtLjQ4LDIuMDZsMTUsNDRBMiwyLDAsMCwwLDIyLjczLDg2bDM2LDVMNTksOTFhMiwyLDAsMCwwLDEuMzEtLjQ5bDMxLTI3QTIsMiwwLDAsMCw5MS45LDYxLjM3Wk0yNC40NCw4MiwzMS42LDQ3LjA1bDMzLjA4LDM0Wk03Ny4yNiwzMS42OSwzMi4zMyw0My42MWw3LjA2LTMxLjc1Wm0tNDcsMTIuMTJMMTEuMTYsMzkuNjYsMzYuODgsMTRaTTY2LjM4LDc5LjkyLDMyLjkxLDQ1LjUzLDc4LjM4LDMzLjQ2bC4xMi4zNS0xMiw0NlpNNzcsMjkuMjlsLTMwLjUyLTE2LDI4LDguMzFaTTEwLjY2LDQxLjZsMTkuMTYsNC4xN0wyMy4xNiw3OC4yNlpNNTguMzcsODYuODksMzUuNSw4My43MmwyNy4yMy0uNjJabTEwLjg1LTkuNDRMNzkuNjYsMzcuMjlsOCwyNC4wOFpNNDEuNjQsMzUuNWE3LDcsMCwwLDEsMS44NS0zLjgyLDE2LjkzLDE2LjkzLDAsMCwwLDEuODQtMi41OEEyLjQ0LDIuNDQsMCwwLDAsNDUuNCwyN2EyLjY3LDIuNjcsMCwwLDAtMS4xMy0xLjI4LDIuMzQsMi4zNCwwLDAsMC0xLjc0LS4yMWMtLjkuMi0xLjM4LjY0LTEuNDYsMS4zMWE0LjM1LDQuMzUsMCwwLDAsLjM2LDEuNzRsLTMsLjdhNiw2LDAsMCwxLS40Mi0zYy4yNi0xLjUxLDEuNC0yLjQ3LDMuNC0yLjkxYTYuNjIsNi42MiwwLDAsMSw0LjIxLjMxLDUuMjcsNS4yNywwLDAsMSwyLjczLDIuNzEsMy44MiwzLjgyLDAsMCwxLC4yMSwyLjg2LDcuNDYsNy40NiwwLDAsMS0xLjM1LDIuMjhsLS44NSwxLjA4cS0uODEsMS0xLjA4LDEuNDdBMi44MSwyLjgxLDAsMCwwLDQ1LDM1bDYuNjItMS43NCwxLjExLDIuNDVMNDIuMDksMzguNkE2Ljc1LDYuNzUsMCwwLDEsNDEuNjQsMzUuNVpNNTYuNTcsMjEuODFBMTMsMTMsMCwwLDEsNjAsMjYuMzZhMTAuNDgsMTAuNDgsMCwwLDEsMS40Nyw1LjI4Yy0uMSwxLjQtMS4wNiwyLjM2LTIuODcsMi44NWE1LjExLDUuMTEsMCwwLDEtNC43Ni0uODIsMTMsMTMsMCwwLDEtMy41My00LjkzLDkuNzgsOS43OCwwLDAsMS0xLjItNS4yNWMuMi0xLjMsMS4xOS0yLjE0LDMtMi41M0E1LjE4LDUuMTgsMCwwLDEsNTYuNTcsMjEuODFabS0xLjI2LDkuNjZhMi4xMywyLjEzLDAsMCwwLDIuMjUuODEsMS4yOSwxLjI5LDAsMCwwLDEtMS42NiwxMy43MiwxMy43MiwwLDAsMC0xLjMzLTMuNTcsMTUsMTUsMCwwLDAtMi4wNi0zLjM0QTIuMDksMi4wOSwwLDAsMCw1My4wNywyMywxLjI0LDEuMjQsMCwwLDAsNTIsMjQuNDYsMTIuNjcsMTIuNjcsMCwwLDAsNTMuMjMsMjgsMTUuMzMsMTUuMzMsMCwwLDAsNTUuMzEsMzEuNDdaIj48L3BhdGg+PC9zdmc+',
+    viewBox: '25 10 50 50',
+  };
+
+  // This one doesn't get tinted because it doesn't use currentColor
+  const svgUriProps: SvgIconProps = {
+    uri: 'https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg',
+    viewBox: '0 0 1000 1000',
+  };
+
+  const rasterRainbowSpectrumProps: RasterImageIconProps = { src: testImage };
+
+  // Chess icon by Justicon, licensed under CC BY
+  // https://thenounproject.com/search/?q=chess&i=2960386
+  const rasterChessProps: RasterImageIconProps = { src: { uri: 'https://static.thenounproject.com/png/2960386-200.png' } };
+
+  // These flags can be adjusted for debugging purposes
+  const showFontIcons = true;
+  const showSvgIcons = true;
+  const showRasterIcons = true;
+  const shouldShowDataUri = Platform.OS !== 'android' && Platform.OS !== ('win32' as any);
+
+  return (
+    <View>
+      {showFontIcons ? (
+        <View>
+          <Text>Font icons</Text>
+          {
+            // We've seen some issues getting Font Awesome to link properly on Apple platforms in the FURN test app specifically.
+            // This shouldn't be an issue in other apps, though, so keeping this icon Windows-only for now is an easy workaround.
+            // When Android support comes, the platform check can be adjusted accordingly.
+            Platform.OS === 'windows' ? <Icon fontSource={fontCustomFontProps} width={100} height={100} color="purple" /> : null
+          }
+          <Icon fontSource={fontBuiltInProps} width={100} height={100} color="#060" />
+        </View>
+      ) : null}
+      {showSvgIcons ? (
+        <View>
+          <Text>SVG icons</Text>
+          <Icon svgSource={svgProps} width={100} height={100} color="orange" accessibilityLabel="Wheelchair" />
+          {
+            // TODO: Causes TypeError: Network request failed on Android
+            shouldShowDataUri ? <Icon svgSource={svgD20DataUriProps} width={100} height={100} color="#7a7" /> : null
+          }
+          <Icon svgSource={svgUriProps} width={100} height={100} color="red" accessibilityLabel="Just another example" />
+          {Platform.OS === ('win32' as any) && (
+            <Icon svgSource={svgProps} width={100} height={100} color={PlatformColor('WindowText')} accessibilityLabel="Wheelchair" />
+          )}
+        </View>
+      ) : null}
+      {showRasterIcons ? (
+        <View>
+          <Text>Raster icons</Text>
+          <Icon rasterImageSource={rasterRainbowSpectrumProps} width={100} height={100} color="green" accessibilityLabel="Atom" />
+          <Icon rasterImageSource={rasterChessProps} width={100} height={100} color="blue" accessibilityLabel="Chess pieces" />
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const iconSections: TestSection[] = [
+  ...Platform.select({
+    android: [null],
+    default: [
+      {
+        name: 'Icon',
+        testID: ICON_TESTPAGE,
+        component: Icons,
+      },
+    ],
+  }),
+  {
+    name: 'Icon for E2E Testing',
+    component: E2ETestingIcon,
+  },
+  {
+    name: 'Default Icon',
+    testID: ICON_TESTPAGE,
+    component: IconV1Test,
+  },
+];
+
+const e2eSections: TestSection[] = [
+  {
+    name: 'IconV1 for E2E Testing',
+    component: IconV1E2ETest,
+  },
+];
+
+export const IconTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Production',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Production',
+    macosStatus: 'Production',
+    androidStatus: 'Production',
+  };
+
+  const description = 'Icons are styled images that can be fonts, svgs, or bitmaps';
+
+  return <Test name="Icon Test" description={description} sections={iconSections} status={status} e2eSections={e2eSections}></Test>;
+};

package/src/TestComponents/Icon/IconV1E2ETest.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { Text } from '@fluentui/react-native';
+import {
+  ICON_ACCESSIBILITY_LABEL,
+  ICON_TEST_COMPONENT,
+  ICON_FONT_TEST_COMPONENT,
+  ICON_SVG_TEST_COMPONENT,
+} from '@fluentui-react-native/e2e-testing';
+import type { FontIconPropsV1, SvgIconPropsV1 } from '@fluentui-react-native/icon';
+import { FontIcon, SvgIcon, IconV1 } from '@fluentui-react-native/icon';
+
+import TestSvg from '../../../assets/test.svg';
+
+const fontBuiltInProps: FontIconPropsV1 = {
+  fontFamily: 'Arial',
+  codepoint: 0x2663,
+  fontSize: 100,
+  color: '#f09',
+  testID: ICON_FONT_TEST_COMPONENT,
+  accessibilityLabel: ICON_ACCESSIBILITY_LABEL,
+};
+
+const svgUriProps: SvgIconPropsV1 = {
+  uri: 'https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg',
+  viewBox: '0 0 1000 1000',
+  width: 100,
+  height: 100,
+  accessibilityLabel: ICON_ACCESSIBILITY_LABEL,
+  testID: ICON_TEST_COMPONENT,
+};
+
+const svgSrcProps: SvgIconPropsV1 = {
+  viewBox: '0 0 500 500',
+  src: TestSvg,
+  width: 72,
+  height: 72,
+  testID: ICON_SVG_TEST_COMPONENT,
+  accessibilityLabel: ICON_ACCESSIBILITY_LABEL,
+};
+
+export const IconV1E2ETest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Text>Icon component</Text>
+      <IconV1 svgSource={svgUriProps} />
+
+      <Text>SVG</Text>
+      <SvgIcon {...svgSrcProps} />
+
+      <Text>FontIcon</Text>
+      <FontIcon {...fontBuiltInProps} />
+    </View>
+  );
+};

package/src/TestComponents/Icon/IconV1Test.android.tsx

@@ -0,0 +1,64 @@
+import React, { useMemo } from 'react';
+import { Text, View } from 'react-native';
+
+import type { FontIconPropsV1, SvgIconPropsV1 } from '@fluentui-react-native/icon';
+import { FontIcon, SvgIcon, IconV1 } from '@fluentui-react-native/icon';
+
+import TestSvg from '../../../assets/test.svg';
+
+const fontBuiltInProps: FontIconPropsV1 = {
+  fontFamily: 'Arial',
+  codepoint: 0x2663,
+  fontSize: 100,
+  color: '#f09',
+};
+
+const svgUriProps: SvgIconPropsV1 = {
+  uri: 'https://upload.wikimedia.org/wikipedia/commons/d/d0/Drawsvgbird.svg',
+  viewBox: '0 0 1000 1000',
+  width: 100,
+  height: 100,
+};
+
+const svgSrcProps: SvgIconPropsV1 = {
+  viewBox: '0 0 500 500',
+  src: TestSvg,
+};
+
+export const IconV1Test: React.FunctionComponent = () => {
+  const svgSource = useMemo(
+    () => ({
+      color: 'lightgreen',
+      width: 72,
+      height: 72,
+      ...svgSrcProps,
+    }),
+    [],
+  );
+  const fontSource = useMemo(
+    () => ({
+      ...fontBuiltInProps,
+      color: 'lightskyblue',
+    }),
+    [],
+  );
+
+  return (
+    <View>
+      <Text>Icon component</Text>
+      <IconV1 svgSource={svgSrcProps} color="red" size={16} />
+      <IconV1 svgSource={svgSrcProps} color="blue" size={40} />
+      <IconV1 svgSource={svgSource} />
+
+      <IconV1 svgSource={svgUriProps} />
+
+      <IconV1 fontSource={fontSource} color="red" />
+
+      <Text>SVG</Text>
+      <SvgIcon color="green" {...svgSrcProps} width={48} height={48} />
+
+      <Text>FontIcon</Text>
+      <FontIcon {...fontBuiltInProps} />
+    </View>
+  );
+};

package/src/TestComponents/Icon/IconV1Test.tsx

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import { Text, View } from 'react-native';
+
+import type { FontIconPropsV1, SvgIconPropsV1 } from '@fluentui-react-native/icon';
+import { FontIcon, SvgIcon, IconV1 } from '@fluentui-react-native/icon';
+
+import TestSvg from '../../../assets/test.svg';
+
+const fontBuiltInProps: FontIconPropsV1 = {
+  fontFamily: 'Arial',
+  codepoint: 0x2663,
+  fontSize: 100,
+  color: '#f09',
+};
+
+const svgUriProps: SvgIconPropsV1 = {
+  uri: 'https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg',
+  viewBox: '0 0 1000 1000',
+  width: 100,
+  height: 100,
+  accessibilityLabel: 'Just another example',
+};
+
+const svgSrcProps: SvgIconPropsV1 = {
+  viewBox: '0 0 500 500',
+  src: TestSvg,
+  width: 72,
+  height: 72,
+  accessibilityLabel: 'Wheelchair',
+};
+
+export const IconV1Test: React.FunctionComponent = () => {
+  const svgSource = useMemo(
+    () => ({
+      color: 'lightgreen',
+      ...svgSrcProps,
+      accessibilityLabel: 'Wheelchair',
+    }),
+    [],
+  );
+  const fontSource = useMemo(
+    () => ({
+      ...fontBuiltInProps,
+      color: 'lightskyblue',
+    }),
+    [],
+  );
+
+  return (
+    <View>
+      <Text>Icon component</Text>
+      <IconV1 svgSource={svgSource} />
+      <IconV1 svgSource={svgUriProps} />
+      <IconV1 fontSource={fontSource} />
+
+      <Text>SVG</Text>
+      <SvgIcon color="green" {...svgSrcProps} />
+
+      <Text>FontIcon</Text>
+      <FontIcon {...fontBuiltInProps} />
+    </View>
+  );
+};

package/src/TestComponents/Icon/index.ts

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

package/src/TestComponents/Input/E2EInputTest.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+
+import {
+  INPUT_TEST_COMPONENT,
+  INPUT_TEXT,
+  INPUT_TEST_COMPONENT_DISMISS_BUTTON,
+  INPUT_ERROR_STRING,
+  INPUT_ONCLICK_STRING,
+  INPUT_START_STRING,
+} from '@fluentui-react-native/e2e-testing';
+import type { IconProps } from '@fluentui-react-native/icon';
+import { Input } from '@fluentui-react-native/input';
+import { Stack } from '@fluentui-react-native/stack';
+import { Text } from '@fluentui-react-native/text';
+
+import FilledSvg from '../../../assets/filledIcon.svg';
+import OutlineSvg from '../../../assets/outlineIcon.svg';
+import { stackStyle } from '../Common/styles';
+import { testProps } from '../Common/TestProps';
+
+export const outlineIconProps: IconProps = { svgSource: { src: OutlineSvg, viewBox: '0 0 20 20' } };
+export const filledIconProps: IconProps = { svgSource: { src: FilledSvg, viewBox: '0 0 20 20' } };
+
+export const E2EInputTest: React.FunctionComponent = () => {
+  const [error, setError] = React.useState<string>('');
+  const [text, setText] = React.useState<string>(INPUT_START_STRING);
+
+  return (
+    <Stack style={stackStyle}>
+      <Text
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(INPUT_TEXT)}
+      >
+        {text}
+      </Text>
+      <Input
+        error={error}
+        defaultIcon={outlineIconProps}
+        value={text}
+        focusedStateIcon={filledIconProps}
+        textInputProps={{ autoFocus: true }}
+        placeholder="Only text upto 5 characters!"
+        assistiveText="Assistive Text"
+        label="Label"
+        onChange={(text: string) => {
+          setText(text);
+          if (text.length > 5) {
+            setError('Text must be less than 5 characters!');
+            setText(INPUT_ERROR_STRING);
+          } else {
+            setError('');
+          }
+        }}
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(INPUT_TEST_COMPONENT)}
+        accessoryIconAccessibilityLabel={INPUT_TEST_COMPONENT_DISMISS_BUTTON}
+        accessoryButtonOnPress={() => {
+          setText(INPUT_ONCLICK_STRING);
+        }}
+      />
+    </Stack>
+  );
+};

package/src/TestComponents/Input/InputDefault.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { KeyboardAvoidingView } from 'react-native';
+
+import type { IconProps } from '@fluentui-react-native/icon';
+import { Input } from '@fluentui-react-native/input';
+
+import DismissSvg from '../../../assets/dismissIcon.svg';
+import FilledSvg from '../../../assets/filledIcon.svg';
+import OutlineSvg from '../../../assets/outlineIcon.svg';
+
+export const dismissIconProps: IconProps = { svgSource: { src: DismissSvg, viewBox: '0 0 20 20' } };
+export const outlineIconProps: IconProps = { svgSource: { src: OutlineSvg, viewBox: '0 0 20 20' } };
+export const filledIconProps: IconProps = { svgSource: { src: FilledSvg, viewBox: '0 0 20 20' } };
+
+export const InputDefault: React.FunctionComponent = () => {
+  const [error, setError] = React.useState<string>('');
+  const [controlText, setControlText] = React.useState<string>('Controls other text input!');
+  const textInputRef = React.useRef(null);
+
+  return (
+    <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={200} style={{ flex: 1 }}>
+      <Input
+        error={error}
+        defaultIcon={outlineIconProps}
+        focusedStateIcon={filledIconProps}
+        textInputProps={{ autoFocus: true }}
+        placeholder="Only text upto 5 characters!"
+        assistiveText="Assistive Text"
+        label="Label"
+        onChange={(text: string) => {
+          if (text.length > 5) setError('Text must be less than 5 characters!');
+          else setError('');
+        }}
+      />
+      <Input defaultIcon={outlineIconProps} placeholder="No focused state icon!" label="Label" />
+      <Input
+        placeholder="Enter text here!"
+        accessoryIcon={dismissIconProps}
+        label="Label"
+        assistiveText="Assistive Text"
+        accessoryText="Accessory"
+      />
+      <Input
+        placeholder="Enter text here!"
+        type="decimal-pad"
+        accessoryIcon={null}
+        onFocus={() => console.log('focused')}
+        onBlur={() => console.log('blurred')}
+      />
+      <Input
+        placeholder="Custom dismiss icon onPress - Blur"
+        componentRef={textInputRef}
+        accessoryIcon={outlineIconProps}
+        accessoryButtonOnPress={() => {
+          // Demonstrating blur on the text input
+          textInputRef.current.blur();
+        }}
+        accessoryText="Accessory"
+        type="email-address"
+      />
+      <Input onChange={(text) => setControlText(text)} placeholder={'Text entered here shows below too'} defaultValue={controlText} />
+      <Input value={'Controlled text - ' + controlText} />
+    </KeyboardAvoidingView>
+  );
+};

package/src/TestComponents/Input/InputTest.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import { INPUT_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+
+import { E2EInputTest } from './E2EInputTest';
+import { InputDefault } from './InputDefault';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const inputSections: TestSection[] = [
+  {
+    name: 'Input Page',
+    testID: INPUT_TESTPAGE,
+    component: InputDefault,
+  },
+];
+
+const e2eSections: TestSection[] = [
+  {
+    name: 'E2E Input Testing',
+    component: E2EInputTest,
+  },
+];
+
+export const InputTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Backlog',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Production',
+    macosStatus: 'Backlog',
+    androidStatus: 'Production',
+  };
+
+  const description = 'Input allows the user to enter and edit text.';
+
+  return <Test name="Input Test" description={description} sections={inputSections} status={status} e2eSections={e2eSections}></Test>;
+};

package/src/TestComponents/Input/index.ts

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

package/src/TestComponents/LinkLegacy/E2ELinkLegacyTest.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Alert } from 'react-native';
+
+import { Link } from '@fluentui/react-native';
+import {
+  LINK_TEST_COMPONENT,
+  LINK_ACCESSIBILITY_LABEL,
+  LINK_NO_A11Y_LABEL_COMPONENT,
+  LINK_TEST_COMPONENT_LABEL,
+} from '@fluentui-react-native/e2e-testing';
+import { Stack } from '@fluentui-react-native/stack';
+
+import { stackStyle } from '../Common/styles';
+import { testProps } from '../Common/TestProps';
+
+export const E2ELinkLegacyTest: React.FunctionComponent = () => {
+  const doPress = (): void => {
+    Alert.alert('Alert.', 'You have been alerted.');
+  };
+
+  return (
+    <Stack style={stackStyle}>
+      <Link
+        url="https://www.bing.com/"
+        content="Link with Accessibility Label."
+        accessibilityLabel={LINK_ACCESSIBILITY_LABEL}
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(LINK_TEST_COMPONENT)}
+      />
+      <Link
+        url="https://www.bing.com/"
+        onPress={doPress}
+        content={LINK_TEST_COMPONENT_LABEL}
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(LINK_NO_A11Y_LABEL_COMPONENT)}
+      />
+    </Stack>
+  );
+};