@fluentui-react-native/tester 0.126.16 → 0.126.18

package/src/TestComponents/CheckboxLegacy/CheckboxLegacyTest.tsx

@@ -0,0 +1,188 @@
+import { Checkbox } from '@fluentui/react-native';
+import { Theme, useTheme } from '@fluentui-react-native/theme-types';
+import * as React from 'react';
+import { View, TextInput } from 'react-native';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+import { CHECKBOX_TESTPAGE } from '../../../../E2E/src/CheckboxLegacy/consts';
+import { CheckboxLegacyE2ETest } from './CheckboxLegacyE2ETest';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+
+function onChangeUncontrolled(isChecked: boolean) {
+  console.log(isChecked);
+}
+
+const BasicCheckbox: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
+      <Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} />
+      <Checkbox
+        label="Checked checkbox (uncontrolled)"
+        onChange={onChangeUncontrolled}
+        defaultChecked={true}
+        accessibilityLabel="Hello there"
+      />
+      <Checkbox label="Disabled checkbox" onChange={onChangeUncontrolled} defaultChecked={false} disabled={true} />
+      <Checkbox label="Disabled checked checkbox" onChange={onChangeUncontrolled} defaultChecked={true} disabled={true} />
+      <Checkbox label="Checkbox will display a tooltip" onChange={onChangeUncontrolled} tooltip="This is a tooltip" />
+    </View>
+  );
+};
+
+const OtherCheckbox: React.FunctionComponent = () => {
+  const [isCheckedControlled1, setCheckedControlled1] = React.useState(false);
+  const onChangeControlled1 = React.useCallback((checked) => {
+    setCheckedControlled1(checked);
+  }, []);
+
+  const [isCheckedControlled2, setCheckedControlled2] = React.useState(true);
+  const onChangeControlled2 = React.useCallback((checked) => {
+    setCheckedControlled2(checked);
+  }, []);
+
+  return (
+    <View>
+      <Checkbox label="This is a controlled Checkbox" onChange={onChangeControlled1} checked={isCheckedControlled1} />
+      <Checkbox
+        label="Checkbox rendered with boxSide 'end' (controlled)"
+        onChange={onChangeControlled2}
+        boxSide="end"
+        checked={isCheckedControlled2}
+      />
+    </View>
+  );
+};
+
+const CircularCheckbox = Checkbox.customize({ tokens: { borderRadius: 50 } });
+
+const CircleColorCheckbox = Checkbox.customize({
+  tokens: { borderRadius: 50, checkboxBackgroundColor: 'white' },
+  _overrides: {
+    checked: {
+      tokens: {
+        checkboxBackgroundColor: 'green',
+        checkboxBorderColor: 'green',
+        checkmarkColor: 'white',
+      },
+    },
+    focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
+    hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
+    pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
+  },
+});
+
+const HoverCheckbox = Checkbox.customize({
+  _overrides: {
+    checked: {
+      tokens: {
+        checkboxBackgroundColor: 'black',
+        checkmarkColor: 'white',
+      },
+    },
+    hovered: {
+      tokens: {
+        checkmarkVisibility: 1,
+      },
+    },
+  },
+});
+
+const getThemedStyles = themedStyleSheet((t: Theme) => {
+  return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
+});
+
+const TokenCheckbox: React.FunctionComponent = () => {
+  const [checkboxColor, setCheckboxColor] = React.useState('blue');
+  const [checkmarkColor, setCheckmarkColor] = React.useState('white');
+
+  const BlueCheckbox = Checkbox.customize({
+    tokens: { checkboxBackgroundColor: 'white' },
+    _overrides: {
+      checked: {
+        tokens: {
+          checkboxBackgroundColor: checkboxColor,
+          checkboxBorderColor: checkboxColor,
+          checkmarkColor: checkmarkColor,
+        },
+      },
+      focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
+      hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
+      pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
+    },
+  });
+
+  const theme = useTheme();
+  const textBoxBorderStyle = getThemedStyles(theme);
+
+  return (
+    <View>
+      <CircularCheckbox label="A circular checkbox" onChange={onChangeUncontrolled} defaultChecked={false} />
+      <HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} defaultChecked={false} />
+      <CircleColorCheckbox label="A circular token-customized checkbox" onChange={onChangeUncontrolled} defaultChecked={true} />
+      <BlueCheckbox
+        label="Token-customized checkbox. Customizable below."
+        onChange={onChangeUncontrolled}
+        boxSide="end"
+        defaultChecked={false}
+      />
+
+      <TextInput
+        accessibilityLabel="Background color"
+        style={textBoxBorderStyle.textbox}
+        placeholder="Background color"
+        blurOnSubmit={true}
+        onSubmitEditing={(e) => {
+          setCheckboxColor(e.nativeEvent.text);
+        }}
+      />
+
+      <TextInput
+        accessibilityLabel="Checkmark color"
+        style={textBoxBorderStyle.textbox}
+        placeholder="Checkmark color"
+        blurOnSubmit={true}
+        onSubmitEditing={(e) => {
+          setCheckmarkColor(e.nativeEvent.text);
+        }}
+      />
+    </View>
+  );
+};
+
+const checkboxSections: TestSection[] = [
+  {
+    name: 'Basic Checkboxes',
+    testID: CHECKBOX_TESTPAGE,
+    component: BasicCheckbox,
+  },
+  {
+    name: 'Other Implementations',
+    component: OtherCheckbox,
+  },
+  {
+    name: 'Token Customized Checkboxes',
+    component: TokenCheckbox,
+  },
+  {
+    name: 'Checkbox for E2E Testing',
+    component: CheckboxLegacyE2ETest,
+  },
+];
+
+export const CheckboxLegacyTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Deprecated',
+    uwpStatus: 'Deprecated',
+    iosStatus: 'N/A',
+    macosStatus: 'Deprecated',
+    androidStatus: 'N/A',
+  };
+
+  const description =
+    'Checkboxes give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).';
+
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Checkbox/SPEC.md';
+
+  return <Test name="Checkbox Legacy Test" description={description} spec={spec} sections={checkboxSections} status={status} />;
+};

package/src/TestComponents/CheckboxLegacy/index.ts

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

package/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx

@@ -0,0 +1,226 @@
+import * as React from 'react';
+import { CHECKBOXV1_TESTPAGE } from '../../../../E2E/src/CheckboxV1/consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+import { Theme, useTheme } from '@fluentui-react-native/theme-types';
+import { View, TextInput, Platform } from 'react-native';
+import { commonTestStyles as commonStyles, mobileStyles } from '../Common/styles';
+import { E2ECheckboxV1Test } from './E2ECheckboxV1Test';
+import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+
+function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
+  console.log(isChecked);
+}
+
+const BasicCheckbox: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
+      <Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} />
+      <Checkbox label="Checked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked accessibilityLabel="Hello there" />
+      <Checkbox label="Disabled checkbox" disabled />
+      <Checkbox label="Disabled checked checkbox" defaultChecked disabled />
+    </View>
+  );
+};
+
+const DesktopSpecificCheckbox: React.FunctionComponent = () => {
+  return (
+    <>
+      <Checkbox label="Checkbox will display a tooltip" tooltip="This is a tooltip" />
+      <Checkbox label="A circular checkbox" shape="circular" />
+      <Checkbox label="A checkbox with label placed before" labelPosition="before" />
+      <Checkbox label="A required checkbox" required />
+    </>
+  );
+};
+
+const SizeCheckbox: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Checkbox tooltip="Medium checkbox" size="medium" />
+      <Checkbox tooltip="Large checkbox" size="large" />
+      <Checkbox label="Medium checkbox" size="medium" />
+      <Checkbox label="Large checkbox" size="large" />
+    </View>
+  );
+};
+
+const OtherCheckbox: React.FunctionComponent = () => {
+  const [isChecked, setisChecked] = React.useState(false);
+
+  const setCheckedTrue = React.useCallback(() => {
+    setisChecked(true);
+  }, []);
+
+  const setCheckedFalse = React.useCallback(() => {
+    setisChecked(false);
+  }, []);
+
+  const memoizedStyles = React.useMemo(() => (Platform.OS === 'android' ? { ...mobileStyles.containerSpacedEvenly, height: 150 } : {}), []);
+
+  return (
+    <View style={memoizedStyles}>
+      <Button onClick={setCheckedTrue} size="small">
+        Check controlled checkboxes below
+      </Button>
+      <Button onClick={setCheckedFalse} size="small">
+        Uncheck controlled checkboxes below
+      </Button>
+
+      <Checkbox label="This is a controlled Checkbox" checked={isChecked} />
+      {Platform.OS !== 'android' && (
+        <>
+          <Checkbox label="Checkbox rendered with labelPosition 'before' (controlled)" labelPosition="before" checked={isChecked} />
+          <Checkbox label="A required checkbox with other required text" required="**" />
+        </>
+      )}
+    </View>
+  );
+};
+
+const CircleColorCheckbox = Checkbox.customize({
+  checked: {
+    checkboxBackgroundColor: 'green',
+    checkboxBorderColor: 'green',
+    checkmarkColor: 'white',
+  },
+});
+
+const HoverCheckbox = Checkbox.customize({
+  hovered: {
+    checkmarkOpacity: 1,
+  },
+});
+
+const BigLabelCheckbox = Checkbox.customize({
+  label: {
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+});
+
+const ComposedCheckbox = Checkbox.compose({
+  slotProps: {
+    label: { style: { color: 'hotpink' } },
+  },
+});
+
+const getThemedStyles = themedStyleSheet((t: Theme) => {
+  return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
+});
+
+const TokenCheckbox: React.FunctionComponent = () => {
+  const [checkboxColor, setCheckboxColor] = React.useState('blue');
+  const [checkmarkColor, setCheckmarkColor] = React.useState('white');
+
+  const BlueCheckbox = Checkbox.customize({
+    checked: {
+      checkboxBackgroundColor: checkboxColor,
+      checkboxBorderColor: checkboxColor,
+      checkmarkColor: checkmarkColor,
+    },
+  });
+
+  const theme = useTheme();
+  const textBoxBorderStyle = getThemedStyles(theme);
+
+  return (
+    <View>
+      {Platform.OS !== 'android' && (
+        <>
+          <HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} />
+          <CircleColorCheckbox
+            label="A circular token-customized checkbox"
+            shape="circular"
+            onChange={onChangeUncontrolled}
+            defaultChecked
+          />
+        </>
+      )}
+
+      <BigLabelCheckbox label="A checkbox with a bold large font label" />
+      <ComposedCheckbox label="A checkbox with a hot pink label and no padding" />
+
+      <BlueCheckbox
+        label="Token-customized checkbox. Customizable below."
+        onChange={onChangeUncontrolled}
+        labelPosition="before"
+        defaultChecked={false}
+      />
+      <TextInput
+        accessibilityLabel="Background color"
+        style={textBoxBorderStyle.textbox}
+        placeholder="Background color"
+        blurOnSubmit={true}
+        onSubmitEditing={(e) => {
+          setCheckboxColor(e.nativeEvent.text);
+        }}
+      />
+
+      <TextInput
+        accessibilityLabel="Checkmark color"
+        style={textBoxBorderStyle.textbox}
+        placeholder="Checkmark color"
+        blurOnSubmit={true}
+        onSubmitEditing={(e) => {
+          setCheckmarkColor(e.nativeEvent.text);
+        }}
+      />
+    </View>
+  );
+};
+
+const checkboxSections: TestSection[] = [
+  {
+    name: 'Basic Checkboxes',
+    testID: CHECKBOXV1_TESTPAGE,
+    component: BasicCheckbox,
+  },
+  Platform.select({
+    android: null,
+    default: {
+      name: 'Size Checkboxes',
+      component: SizeCheckbox,
+    },
+  }),
+  Platform.select({
+    android: null,
+    default: {
+      name: 'Desktop Specific Checkboxes',
+      component: DesktopSpecificCheckbox,
+    },
+  }),
+  {
+    name: 'Other Implementations',
+    component: OtherCheckbox,
+  },
+  Platform.select({
+    android: null,
+    default: {
+      name: 'Token Customized Checkboxes',
+      component: TokenCheckbox,
+    },
+  }),
+  {
+    name: 'E2E Testing for CheckboxV1',
+    component: E2ECheckboxV1Test,
+  },
+];
+
+export const CheckboxV1Test: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Production',
+    uwpStatus: 'N/A',
+    iosStatus: 'N/A',
+    macosStatus: 'Experimental',
+    androidStatus: 'Experimental',
+  };
+
+  const description =
+    'Checkboxes give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).';
+
+  return <Test name="CheckboxV1 Test" description={description} sections={checkboxSections} status={status} />;
+};

package/src/TestComponents/CheckboxV1/E2ECheckboxV1Test.tsx

@@ -0,0 +1,53 @@
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+import * as React from 'react';
+import { View } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import {
+  CHECKBOXV1_TEST_COMPONENT,
+  CHECKBOXV1_ACCESSIBILITY_LABEL,
+  CHECKBOXV1_NO_A11Y_LABEL_COMPONENT,
+  CHECKBOXV1_TEST_COMPONENT_LABEL,
+  CHECKBOXV1_ON_PRESS,
+} from '../../../../E2E/src/CheckboxV1/consts';
+import { Stack } from '@fluentui-react-native/stack';
+import { Text } from '@fluentui/react-native';
+import { testProps } from '../Common/TestProps';
+
+export const E2ECheckboxV1Test: React.FunctionComponent = () => {
+  const [checkboxPressed, setCheckboxPressed] = React.useState(false);
+
+  const onClick = React.useCallback(
+    (_e, checked) => {
+      setCheckboxPressed(checked);
+    },
+    [setCheckboxPressed],
+  );
+
+  return (
+    <View>
+      <Stack style={stackStyle}>
+        <Checkbox
+          accessibilityLabel={CHECKBOXV1_ACCESSIBILITY_LABEL}
+          disabled={false}
+          label="Testing accessibilityLabel"
+          onChange={onClick}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(CHECKBOXV1_TEST_COMPONENT)}
+        />
+        <Checkbox
+          label={CHECKBOXV1_TEST_COMPONENT_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(CHECKBOXV1_NO_A11Y_LABEL_COMPONENT)}
+        />
+        {checkboxPressed ? (
+          <Text
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(CHECKBOXV1_ON_PRESS)}
+          >
+            Checkbox Selected
+          </Text>
+        ) : null}
+      </Stack>
+    </View>
+  );
+};

package/src/TestComponents/CheckboxV1/index.ts

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

package/src/TestComponents/Icon/IconLegacyE2ETest.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import * as React from 'react';
+import { View } from 'react-native';
+import { Text } from '@fluentui/react-native';
+import { Icon } from '@fluentui-react-native/icon';
+import { ICON_ACCESSIBILITY_LABEL } from '../../../../E2E/src/IconLegacy/consts';
+import { 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" />
+        </View>
+      ) : null}
+    </View>
+  );
+};

package/src/TestComponents/Icon/IconTest.tsx

@@ -4,10 +4,10 @@ import { Platform, PlatformColor, View } from 'react-native';
 import { Text } from '@fluentui/react-native';
 import { Icon, RasterImageIconProps, SvgIconProps, FontIconProps } from '@fluentui-react-native/icon';
 import { Test, TestSection, PlatformStatus } from '../Test';
-import { ICON_TESTPAGE } from '../../../../E2E/src/Icon/consts';
-import { E2ETestingIcon } from './IconE2ETest';
-import { E2ETestingExperimentalIcon } from './IconExperimentalE2ETest';
-import { IconExperimental } from './IconExperimental';
+import { ICON_TESTPAGE } from '../../../../E2E/src/IconLegacy/consts';
+import { E2ETestingIcon } from './IconLegacyE2ETest';
+import { IconV1E2ETest } from './IconV1E2ETest';
+import { IconV1 } from './IconV1';
 import { testImage, testTtf, svgProps } from '../Common/iconExamples';
 
 const Icons: React.FunctionComponent = () => {
@@ -100,11 +100,11 @@ const iconSections: TestSection[] = [
   },
   {
     name: 'Default Icon',
-    component: IconExperimental,
+    component: IconV1,
   },
   {
-    name: 'Icon Experimental for E2E Testing',
-    component: E2ETestingExperimentalIcon,
+    name: 'IconV1 for E2E Testing',
+    component: IconV1E2ETest,
   },
 ];
 

package/src/TestComponents/Icon/IconV1.tsx

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

package/src/TestComponents/Icon/IconV1E2ETest.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import * as React from 'react';
+import { View } from 'react-native';
+import { Text } from '@fluentui/react-native';
+import { FontIcon, SvgIcon, Icon, FontIconProps, SvgIconProps } from '@fluentui-react-native/experimental-icon';
+import {
+  ICON_ACCESSIBILITY_LABEL,
+  ICON_TEST_COMPONENT,
+  ICON_FONT_TEST_COMPONENT,
+  ICON_SVG_TEST_COMPONENT,
+} from '../../../../E2E/src/IconLegacy/consts';
+import TestSvg from '../../../assets/test.svg';
+
+const fontBuiltInProps: FontIconProps = {
+  fontFamily: 'Arial',
+  codepoint: 0x2663,
+  fontSize: 100,
+  color: '#f09',
+  testID: ICON_FONT_TEST_COMPONENT,
+  accessibilityLabel: ICON_ACCESSIBILITY_LABEL,
+};
+
+const svgUriProps: SvgIconProps = {
+  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: SvgIconProps = {
+  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>
+      <Icon svgSource={svgUriProps} />
+
+      <Text>SVG</Text>
+      <SvgIcon {...svgSrcProps} />
+
+      <Text>FontIcon</Text>
+      <FontIcon {...fontBuiltInProps} />
+    </View>
+  );
+};

package/src/TestComponents/LinkLegacy/E2ELinkLegacyTest.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Alert } from 'react-native';
+import { Link } from '@fluentui/react-native';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import {
+  LINK_TEST_COMPONENT,
+  LINK_ACCESSIBILITY_LABEL,
+  LINK_NO_A11Y_LABEL_COMPONENT,
+  LINK_TEST_COMPONENT_LABEL,
+} from '../../../../E2E/src/LinkLegacy/consts';
+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>
+  );
+};