@fluentui-react-native/tester 0.170.50 → 0.170.51

package/src/TestComponents/Callout/CalloutTest.tsx

@@ -1,540 +0,0 @@
-import * as React from 'react';
-import type { KeyboardMetrics } from 'react-native';
-import { AccessibilityInfo, Platform, ScrollView, Switch, Text, View } from 'react-native';
-
-import { ButtonV1 as Button, Separator, Pressable } from '@fluentui/react-native';
-import type { IFocusable, RestoreFocusEvent, DismissBehaviors } from '@fluentui/react-native';
-import type { CalloutNativeCommands, ICalloutProps } from '@fluentui-react-native/callout';
-import { Callout } from '@fluentui-react-native/callout';
-import { CALLOUT_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-
-import { E2ECalloutTest } from './CalloutE2ETest';
-import { MenuPicker } from '../Common/MenuPicker';
-import { fluentTesterStyles } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const StandardCallout: React.FunctionComponent = () => {
-  const [showStandardCallout, setShowStandardCallout] = React.useState(false);
-  const [isStandardCalloutVisible, setIsStandardCalloutVisible] = React.useState(false);
-  const [openCalloutOnHoverAnchor, setOpenCalloutOnHoverAnchor] = React.useState(true);
-  const [calloutHovered, setCalloutHovered] = React.useState(false);
-
-  const [shouldSetInitialFocus, setShouldSetInitialFocus] = React.useState(true);
-  const onInitialFocusChange = React.useCallback((value: boolean) => setShouldSetInitialFocus(value), []);
-
-  const [customRestoreFocus, setCustomRestoreFocus] = React.useState(false);
-  const onRestoreFocusChange = React.useCallback((value) => setCustomRestoreFocus(value), []);
-
-  const [isBeakVisible, setIsBeakVisible] = React.useState(false);
-  const onIsBeakVisibleChange = React.useCallback((value) => setIsBeakVisible(value), []);
-
-  const [preventDismissOnKeyDown, setPreventDismissOnKeyDown] = React.useState(false);
-  const [preventDismissOnClickOutside, setPreventDismissOnClickOutside] = React.useState(false);
-  const [calloutDismissBehaviors, setDismissBehaviors] = React.useState<DismissBehaviors[]>([]);
-
-  const onPreventDismissOnKeyDownChange = React.useCallback(
-    (value) => {
-      setPreventDismissOnKeyDown(value);
-      if (value) {
-        setDismissBehaviors(calloutDismissBehaviors.concat('preventDismissOnKeyDown'));
-      } else {
-        const newDismissBehaviors = calloutDismissBehaviors.filter((value) => {
-          value != 'preventDismissOnKeyDown';
-        });
-        setDismissBehaviors(newDismissBehaviors);
-      }
-    },
-    [calloutDismissBehaviors],
-  );
-
-  const onPreventDismissOnClickOutsideChange = React.useCallback(
-    (value) => {
-      setPreventDismissOnClickOutside(value);
-      if (value) {
-        setDismissBehaviors(calloutDismissBehaviors.concat('preventDismissOnClickOutside'));
-      } else {
-        const newDismissBehaviors = calloutDismissBehaviors.filter((value) => {
-          value != 'preventDismissOnClickOutside';
-        });
-        setDismissBehaviors(newDismissBehaviors);
-      }
-    },
-    [calloutDismissBehaviors],
-  );
-
-  const calloutRef = React.useRef<CalloutNativeCommands>(null);
-  const calloutButtonRef = React.useRef<IFocusable>(null);
-  const redTargetRef = React.useRef<View>(null);
-  const blueTargetRef = React.useRef<View>(null);
-  const greenTargetRef = React.useRef<View>(null);
-  const decoyBtn1Ref = React.useRef<IFocusable>(null);
-  const decoyBtn2Ref = React.useRef<IFocusable>(null);
-  const [anchorRef, setAnchorRef] = React.useState<React.RefObject<View> | undefined>(redTargetRef);
-  const [hoveredTargetsCount, setHoveredTargetsCount] = React.useState(0);
-  const [displayCountHoveredTargets, setDisplayCountHoveredTargets] = React.useState(0);
-
-  const anchorRefsInfo: { hoverCount: number; isCurrentAnchor: boolean[] } = React.useMemo(() => {
-    return {
-      hoverCount: displayCountHoveredTargets,
-      isCurrentAnchor: [
-        openCalloutOnHoverAnchor && isStandardCalloutVisible && anchorRef == redTargetRef,
-        openCalloutOnHoverAnchor && isStandardCalloutVisible && anchorRef == greenTargetRef,
-        openCalloutOnHoverAnchor && isStandardCalloutVisible && anchorRef == blueTargetRef,
-      ],
-    };
-  }, [anchorRef, displayCountHoveredTargets, isStandardCalloutVisible, openCalloutOnHoverAnchor]);
-
-  // Use a timer to update the targets count and avoid jittery updates of counts on-screen
-  React.useLayoutEffect(() => {
-    const timer = setTimeout(() => {
-      setDisplayCountHoveredTargets(hoveredTargetsCount);
-    }, 50);
-
-    return () => clearTimeout(timer);
-  }, [hoveredTargetsCount]);
-
-  React.useLayoutEffect(() => {
-    // The callout may be dismissed by multiple mechanisms, depending on its active invocation
-    // mechanisms.  In each of those dismissal routes, we use this function to reset the callout's
-    // state universally.
-    if (!showStandardCallout) {
-      setIsStandardCalloutVisible(false);
-      setCalloutHovered(false);
-    }
-  }, [showStandardCallout]);
-
-  const toggleShowStandardCallout = React.useCallback(() => {
-    setShowStandardCallout(!showStandardCallout);
-  }, [showStandardCallout]);
-
-  // Set up a LayoutEffect for hover callout mechanics including:
-  //   the toggle switch for hover callout behavior
-  //   multiple hover targets (i.e. the callout and its anchor)
-  //   a dismissal timer for closing the callout with no targets hovered
-  React.useLayoutEffect(() => {
-    if (!openCalloutOnHoverAnchor) {
-      setShowStandardCallout(false);
-    } else if (openCalloutOnHoverAnchor && hoveredTargetsCount > 0) {
-      setShowStandardCallout(true);
-    } else {
-      const timer = setTimeout(() => {
-        setShowStandardCallout(false);
-      }, 2000);
-      return () => clearTimeout(timer);
-    }
-    return undefined;
-  }, [openCalloutOnHoverAnchor, hoveredTargetsCount]);
-
-  const updateCalloutTargetsHoverState = React.useCallback(
-    (show: boolean, hoverAnchorRef: React.MutableRefObject<View>) => {
-      if (hoverAnchorRef !== undefined && hoverAnchorRef !== anchorRef) {
-        return;
-      }
-
-      setHoveredTargetsCount(hoveredTargetsCount + (show ? 1 : -1));
-    },
-    [anchorRef, hoveredTargetsCount, setHoveredTargetsCount],
-  );
-
-  const calloutHoveredCallback = React.useCallback(
-    (isHovered: boolean) => {
-      updateCalloutTargetsHoverState(isHovered, undefined);
-      setCalloutHovered(isHovered);
-    },
-    [updateCalloutTargetsHoverState],
-  );
-
-  const toggleCalloutRef = React.useCallback(() => {
-    // Cycle the target ref between the RGB target views
-    setAnchorRef(anchorRef === redTargetRef ? greenTargetRef : anchorRef === greenTargetRef ? blueTargetRef : redTargetRef);
-  }, [anchorRef]);
-
-  const switchTargetRefOrRect = React.useCallback(() => {
-    // Switch between RGB views or a fixed anchor
-    setAnchorRef(anchorRef === redTargetRef || anchorRef === greenTargetRef || anchorRef == blueTargetRef ? undefined : redTargetRef);
-  }, [anchorRef]);
-
-  React.useEffect(() => {
-    if (!showStandardCallout && anchorRef === undefined) {
-      setAnchorRef(redTargetRef);
-    }
-  }, [anchorRef, setAnchorRef, showStandardCallout]);
-
-  const onShowStandardCallout = React.useCallback(() => {
-    setIsStandardCalloutVisible(true);
-  }, []);
-
-  const onDismissStandardCallout = React.useCallback(() => {
-    // setting the internal state to false will instigate unmounting the
-    // zombie Callout control.
-    setShowStandardCallout(false);
-  }, []);
-
-  const onShiftFocusToCallout = React.useCallback(() => {
-    calloutRef?.current.focusWindow();
-  }, [calloutRef]);
-  const onShiftFocusToCalloutButton = React.useCallback(() => {
-    calloutButtonRef?.current?.focus?.();
-  }, [calloutButtonRef]);
-  const onShiftFocusToPage = React.useCallback(() => {
-    calloutRef?.current.blurWindow();
-  }, [calloutRef]);
-  const onRestoreFocusStandardCallout = React.useCallback(
-    (restoreFocusEvent: RestoreFocusEvent) => {
-      if (restoreFocusEvent?.nativeEvent?.containsFocus) {
-        decoyBtn1Ref?.current?.focus?.();
-      } else {
-        decoyBtn2Ref?.current?.focus?.();
-      }
-    },
-    [decoyBtn1Ref, decoyBtn2Ref],
-  );
-
-  const colorDefault: string = 'default';
-  const colorSelections: string[] = [colorDefault, 'red', 'green', 'blue'];
-  const menuPickerColorCollection = colorSelections.map((color) => {
-    return {
-      label: color,
-      value: color,
-    };
-  });
-
-  const [selectedBackgroundColor, setSelectedBackgroundColor] = React.useState<string | undefined>(undefined);
-  const [selectedBorderColor, setSelectedBorderColor] = React.useState<string | undefined>(undefined);
-
-  const borderWidthDefault: string = Platform.OS === 'macos' ? '0' : '1';
-  const borderWidthSelections: string[] = ['0', '1', '2', '4', '10'];
-  const menuPickerBorderWidthCollection = borderWidthSelections.map((width) => {
-    return {
-      label: width,
-      value: width,
-    };
-  });
-
-  const borderRadiusDefault: string = '5';
-  const borderRadiusSelections: string[] = ['0', '5', '7', '15'];
-  const menuPickerBorderRadiusCollection = borderRadiusSelections.map((width) => {
-    return {
-      label: width,
-      value: width,
-    };
-  });
-
-  const [selectedBorderWidth, setSelectedBorderWidth] = React.useState<string | undefined>(undefined);
-  const [selectedBorderRadius, setSelectedBorderRadius] = React.useState<string | undefined>(undefined);
-
-  const [showScrollViewCallout, setShowScrollViewCalout] = React.useState(false);
-  const [scrollviewContents, setScrollviewContents] = React.useState([1, 2, 3]);
-
-  const removeButton = React.useCallback(() => {
-    const tempArray = scrollviewContents;
-    tempArray.pop();
-    setScrollviewContents([...tempArray]);
-  }, [setScrollviewContents, scrollviewContents]);
-
-  const addButton = React.useCallback(() => {
-    setScrollviewContents((arr) => [...arr, 1]);
-  }, [setScrollviewContents]);
-
-  const calloutTargetOrAnchor: Partial<ICalloutProps> = {};
-  if (anchorRef) {
-    calloutTargetOrAnchor.target = anchorRef;
-  } else {
-    calloutTargetOrAnchor.anchorRect = { screenX: 50, screenY: 50, width: 1, height: 1 };
-  }
-
-  return (
-    <View>
-      <View style={{ flexDirection: 'row', paddingVertical: 5 }}>
-        <View style={{ flexDirection: 'column', paddingHorizontal: 5 }}>
-          <View style={{ flexDirection: 'row' }}>
-            <Switch value={openCalloutOnHoverAnchor} onValueChange={setOpenCalloutOnHoverAnchor} />
-            <Text>Show Callout On Hover Anchor</Text>
-          </View>
-
-          <View style={{ flexDirection: 'row' }}>
-            <Switch value={shouldSetInitialFocus} onValueChange={onInitialFocusChange} />
-            <Text>Set Initial Focus</Text>
-          </View>
-
-          <View style={{ flexDirection: 'row' }}>
-            <Switch value={customRestoreFocus} onValueChange={onRestoreFocusChange} />
-            <Text>Customize Restore Focus</Text>
-          </View>
-
-          <View style={{ flexDirection: 'row' }}>
-            <Switch value={isBeakVisible} onValueChange={onIsBeakVisibleChange} />
-            <Text>Beak Visible</Text>
-          </View>
-
-          <View style={{ flexDirection: 'row' }}>
-            <Switch value={preventDismissOnKeyDown} onValueChange={onPreventDismissOnKeyDownChange} />
-            <Text>Prevent Dismiss On Key Down</Text>
-          </View>
-
-          <View style={{ flexDirection: 'row' }}>
-            <Switch value={preventDismissOnClickOutside} onValueChange={onPreventDismissOnClickOutsideChange} />
-            <Text>Prevent Dismiss On Click Outside</Text>
-          </View>
-
-          <View style={{ flexDirection: 'row' }}>
-            <Switch value={showScrollViewCallout} onValueChange={setShowScrollViewCalout} />
-            <Text>Enable ScrollView Callout</Text>
-          </View>
-
-          <MenuPicker
-            prompt="Background Color"
-            selected={selectedBackgroundColor || colorDefault}
-            onChange={(color) => setSelectedBackgroundColor(color === colorDefault ? undefined : color)}
-            collection={menuPickerColorCollection}
-          />
-          <MenuPicker
-            prompt="Border Color"
-            selected={selectedBorderColor || colorDefault}
-            onChange={(color) => setSelectedBorderColor(color === colorDefault ? undefined : color)}
-            collection={menuPickerColorCollection}
-          />
-          <MenuPicker
-            prompt="Border Width"
-            selected={selectedBorderWidth || borderWidthDefault}
-            onChange={(color) => setSelectedBorderWidth(color === colorDefault ? undefined : color)}
-            collection={menuPickerBorderWidthCollection}
-          />
-          <MenuPicker
-            prompt="Border Radius"
-            selected={selectedBorderRadius || borderRadiusDefault}
-            onChange={(radius) => setSelectedBorderRadius(radius === borderRadiusDefault ? undefined : radius)}
-            collection={menuPickerBorderRadiusCollection}
-          />
-        </View>
-
-        <Separator vertical />
-
-        <View style={{ flexDirection: 'column', paddingHorizontal: 5 }}>
-          <Button onClick={toggleShowStandardCallout} disabled={openCalloutOnHoverAnchor}>
-            {(openCalloutOnHoverAnchor ? 'Hover Color Anchor ' : 'Press Here ') + 'for Callout'}
-          </Button>
-          <Text>
-            <Text>Visibility: </Text>
-            {isStandardCalloutVisible ? <Text style={{ color: 'green' }}>Visible</Text> : <Text style={{ color: 'red' }}>Not Visible</Text>}
-          </Text>
-        </View>
-
-        <Separator vertical />
-
-        <View style={{ flexDirection: 'column', paddingHorizontal: 5 }}>
-          <Pressable
-            onHoverIn={() => updateCalloutTargetsHoverState(true, redTargetRef)}
-            onHoverOut={() => updateCalloutTargetsHoverState(false, redTargetRef)}
-          >
-            <View ref={redTargetRef} style={{ height: 40, width: 40, backgroundColor: 'red', padding: 5 }}>
-              {anchorRefsInfo.isCurrentAnchor[0] && <Text>{anchorRefsInfo.hoverCount}</Text>}
-            </View>
-          </Pressable>
-          <Pressable
-            onHoverIn={() => updateCalloutTargetsHoverState(true, greenTargetRef)}
-            onHoverOut={() => updateCalloutTargetsHoverState(false, greenTargetRef)}
-          >
-            <View ref={greenTargetRef} style={{ height: 40, width: 40, backgroundColor: 'green', padding: 5 }}>
-              {anchorRefsInfo.isCurrentAnchor[1] && <Text>{anchorRefsInfo.hoverCount}</Text>}
-            </View>
-          </Pressable>
-          <Pressable
-            onHoverIn={() => updateCalloutTargetsHoverState(true, blueTargetRef)}
-            onHoverOut={() => updateCalloutTargetsHoverState(false, blueTargetRef)}
-          >
-            <View ref={blueTargetRef} style={{ height: 40, width: 40, backgroundColor: 'blue', padding: 5 }}>
-              {anchorRefsInfo.isCurrentAnchor[2] && <Text style={{ color: 'white' }}>{anchorRefsInfo.hoverCount}</Text>}
-            </View>
-          </Pressable>
-        </View>
-      </View>
-
-      <Separator />
-
-      <View style={{ paddingVertical: 5 }}>
-        <Button componentRef={decoyBtn1Ref} onClick={onShiftFocusToCallout}>
-          {'Custom reFocus w/ focus in Callout'}
-        </Button>
-        <Button componentRef={decoyBtn2Ref} onClick={onShiftFocusToCalloutButton}>
-          {'Custom reFocus w/o focus in Callout'}
-        </Button>
-      </View>
-
-      {showStandardCallout && (
-        <Callout
-          componentRef={calloutRef}
-          {...{
-            doNotTakePointerCapture: openCalloutOnHoverAnchor ?? undefined,
-            ...calloutTargetOrAnchor,
-            onDismiss: onDismissStandardCallout,
-            onShow: onShowStandardCallout,
-            ...(customRestoreFocus && { onRestoreFocus: onRestoreFocusStandardCallout }),
-            accessibilityLabel: 'Standard Callout',
-            setInitialFocus: shouldSetInitialFocus,
-            isBeakVisible: isBeakVisible,
-            ...(selectedBorderColor && { borderColor: selectedBorderColor }),
-            ...(selectedBackgroundColor && { backgroundColor: selectedBackgroundColor }),
-            ...(selectedBorderWidth && { borderWidth: parseInt(selectedBorderWidth) }),
-            ...(selectedBorderRadius && { borderRadius: parseInt(selectedBorderRadius) }),
-            ...(calloutDismissBehaviors && { dismissBehaviors: calloutDismissBehaviors }),
-          }}
-        >
-          <Pressable onHoverIn={() => calloutHoveredCallback(true)} onHoverOut={() => calloutHoveredCallback(false)}>
-            {showScrollViewCallout ? (
-              <View style={fluentTesterStyles.scrollViewContainer}>
-                <ScrollView contentContainerStyle={fluentTesterStyles.scrollViewStyle} showsVerticalScrollIndicator={true}>
-                  <Button onClick={toggleCalloutRef}>{'click to change anchor'}</Button>
-                  <Button onClick={switchTargetRefOrRect}>{'click to switch between anchor and rect'}</Button>
-                  <Button style={fluentTesterStyles.testListItem} onClick={addButton}>
-                    {'Click to add a button'}
-                  </Button>
-                  <Button style={fluentTesterStyles.testListItem} onClick={removeButton}>
-                    {'Click to remove a button'}
-                  </Button>
-                  {scrollviewContents.map((value) => {
-                    return (
-                      <Button key={value} style={fluentTesterStyles.testListItem}>
-                        {'Button'}
-                      </Button>
-                    );
-                  })}
-                </ScrollView>
-              </View>
-            ) : (
-              //else
-              <View style={{ padding: 20, backgroundColor: calloutHovered ? 'lightgreen' : 'pink' }}>
-                <Button onClick={toggleCalloutRef}>{'click to change anchor'}</Button>
-                <Button onClick={onShiftFocusToCalloutButton}>{'focus last button'}</Button>
-                <Button onClick={switchTargetRefOrRect}>{'click to switch between anchor and rect'}</Button>
-                <Button componentRef={calloutButtonRef} onClick={onShiftFocusToPage}>
-                  {'Click to invoke blur()'}
-                </Button>
-              </View>
-            )}
-          </Pressable>
-        </Callout>
-      )}
-    </View>
-  );
-};
-
-const CustomCallout: React.FunctionComponent = () => {
-  const [showCustomizedCallout, setShowCustomizedCallout] = React.useState(false);
-  const [isCustomizedCalloutVisible, setIsCustomizedCalloutVisible] = React.useState(false);
-  const [shouldFocusCloseButton, setShouldFocusCloseButton] = React.useState(false);
-
-  const a11yOnShowAnnouncement = 'Be informed that a customized callout has been opened.';
-  const calloutMessage = 'This is an example message.';
-  const closeButtonRef = React.useRef(null);
-
-  const openCallout = React.useCallback((focusCloseButton: boolean) => {
-    setShowCustomizedCallout(true);
-
-    // Unmounting a callout does not invoke onDismiss; onDismiss is only invoked
-    // for dismissals generated by the native app.  When toggling to 'show',
-    // the isVisible state will be corrected to 'true' by the onShow callback.
-    setIsCustomizedCalloutVisible(false);
-    setShouldFocusCloseButton(focusCloseButton);
-  }, []);
-
-  const onClick = React.useCallback(() => {
-    openCallout(false /*focusCloseButton*/);
-  }, [openCallout]);
-
-  const onKeyDown = React.useCallback(
-    (e) => {
-      if (e.nativeEvent.key === 'Enter' || e.nativeEvent.key === ' ') {
-        openCallout(true /*focusCloseButton*/);
-      }
-    },
-    [openCallout],
-  );
-
-  React.useEffect(() => {
-    if (isCustomizedCalloutVisible && shouldFocusCloseButton) {
-      closeButtonRef.current?.focus?.();
-    }
-  }, [isCustomizedCalloutVisible, shouldFocusCloseButton]);
-
-  const onShowCustomizedCallout = React.useCallback(() => {
-    setIsCustomizedCalloutVisible(true);
-    AccessibilityInfo.announceForAccessibility(a11yOnShowAnnouncement + ' ' + calloutMessage);
-  }, []);
-
-  const onDismissCustomizedCallout = React.useCallback(() => {
-    setIsCustomizedCalloutVisible(false);
-
-    // setting the internal state to false will instigate unmounting the
-    // zombie Callout control.
-    setShowCustomizedCallout(false);
-    setShouldFocusCloseButton(false);
-  }, []);
-
-  const myRect: KeyboardMetrics = { screenX: 10, screenY: 10, width: 100, height: 100 };
-
-  return (
-    <View>
-      <View style={{ flexDirection: 'column', paddingVertical: 5 }}>
-        <Button onClick={onClick} onKeyDown={onKeyDown} onAccessibilityTap={() => openCallout(true)}>
-          {'Press for Callout'}
-        </Button>
-        <Text selectable={true}>
-          <Text>Visibility: </Text>
-          {isCustomizedCalloutVisible ? <Text style={{ color: 'green' }}>Visible</Text> : <Text style={{ color: 'red' }}>Not Visible</Text>}
-        </Text>
-      </View>
-
-      {showCustomizedCallout && (
-        <Callout
-          anchorRect={myRect}
-          onDismiss={onDismissCustomizedCallout}
-          onShow={onShowCustomizedCallout}
-          accessibilityLabel="Customized Callout"
-          accessibilityRole="alert"
-        >
-          <View style={{ padding: 20, borderWidth: 2, borderColor: 'black' }}>
-            <Text>{calloutMessage}</Text>
-            <Button componentRef={closeButtonRef} onClick={onDismissCustomizedCallout}>
-              {'Close'}
-            </Button>
-          </View>
-        </Callout>
-      )}
-    </View>
-  );
-};
-
-const calloutSections: TestSection[] = [
-  {
-    name: 'Standard Usage',
-    testID: CALLOUT_TESTPAGE,
-    component: StandardCallout,
-  },
-  {
-    name: 'Customized Usage',
-    component: CustomCallout,
-  },
-];
-
-const e2eSections: TestSection[] = [
-  {
-    name: 'E2E Testing Callout',
-    component: E2ECalloutTest,
-  },
-];
-
-export const CalloutTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Production',
-    uwpStatus: 'Backlog',
-    iosStatus: 'N/A',
-    macosStatus: 'Production',
-    androidStatus: 'N/A',
-  };
-
-  const description = 'A callout is an anchored tip that can be used to teach people or guide them through the app without blocking them.';
-
-  return <Test name="Callout Test" description={description} sections={calloutSections} status={status} e2eSections={e2eSections}></Test>;
-};

package/src/TestComponents/Callout/index.ts

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

package/src/TestComponents/CheckboxLegacy/CheckboxLegacyE2ETest.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { Checkbox, Text } from '@fluentui/react-native';
-import {
-  CHECKBOX_TEST_COMPONENT,
-  CHECKBOX_ON_PRESS,
-  CHECKBOX_NO_A11Y_LABEL_COMPONENT,
-  CHECKBOX_TEST_COMPONENT_LABEL,
-  CHECKBOX_ACCESSIBILITY_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 CheckboxLegacyE2ETest: React.FunctionComponent = () => {
-  const [checkboxPressed, setCheckboxPressed] = React.useState(false);
-
-  const onClick = React.useCallback(
-    (checked) => {
-      setCheckboxPressed(checked);
-    },
-    [setCheckboxPressed],
-  );
-
-  return (
-    <View>
-      <Stack style={stackStyle}>
-        <Checkbox
-          accessibilityLabel={CHECKBOX_ACCESSIBILITY_LABEL}
-          disabled={false}
-          label="Testing accessibilityLabel"
-          onChange={onClick}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(CHECKBOX_TEST_COMPONENT)}
-        />
-        <Checkbox
-          label={CHECKBOX_TEST_COMPONENT_LABEL}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(CHECKBOX_NO_A11Y_LABEL_COMPONENT)}
-        />
-        {checkboxPressed ? (
-          <Text /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(CHECKBOX_ON_PRESS)}
-          >
-            Checkbox Selected
-          </Text>
-        ) : null}
-      </Stack>
-    </View>
-  );
-};