@fluentui-react-native/tester 0.126.16 → 0.126.17

package/src/TestComponents/CheckboxExperimental/CheckboxTest.tsx

@@ -1,226 +0,0 @@
-import * as React from 'react';
-import { EXPERIMENTAL_CHECKBOX_TESTPAGE } from '../../../../E2E/src/CheckboxExperimental/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 { E2ECheckboxExperimentalTest } from './E2ECheckboxExperimentalTest';
-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: EXPERIMENTAL_CHECKBOX_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 Experimental Checkbox',
-    component: E2ECheckboxExperimentalTest,
-  },
-];
-
-export const ExperimentalCheckboxTest: 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="Experimental Checkbox Test" description={description} sections={checkboxSections} status={status} />;
-};

package/src/TestComponents/CheckboxExperimental/E2ECheckboxExperimentalTest.tsx

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

package/src/TestComponents/CheckboxExperimental/index.ts

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

package/src/TestComponents/Icon/IconE2ETest.tsx

@@ -1,33 +0,0 @@
-/* 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/Icon/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/IconExperimental.tsx

@@ -1,58 +0,0 @@
-import React, { useMemo } from 'react';
-import { FontIcon, SvgIcon, Icon } from '@fluentui-react-native/experimental-icon';
-import { Text, View } from 'react-native';
-import TestSvg from '../../../assets/test.svg';
-import { SvgIconProps } from '@fluentui-react-native/experimental-icon';
-
-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 IconExperimental: 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/IconExperimentalE2ETest.tsx

@@ -1,54 +0,0 @@
-/* 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/Icon/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 E2ETestingExperimentalIcon: 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/Link/E2ELinkTest.tsx

@@ -1,37 +0,0 @@
-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/Link/consts';
-import { testProps } from '../Common/TestProps';
-
-export const LinkE2ETest: 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>
-  );
-};

package/src/TestComponents/Link/LinkTest.tsx

@@ -1,48 +0,0 @@
-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_TESTPAGE } from '../../../../E2E/src/Link/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
-import { LinkE2ETest } from './E2ELinkTest';
-
-const Links: React.FunctionComponent = () => {
-  const doPress = (): void => {
-    Alert.alert('Alert.', 'You have been alerted.');
-  };
-
-  return (
-    <Stack style={stackStyle}>
-      <Link url="https://www.bing.com/" content="Click to navigate." />
-      <Link onPress={doPress} content="Click to alert." />
-    </Stack>
-  );
-};
-
-const linkSections: TestSection[] = [
-  {
-    name: 'Navigation and Alert',
-    testID: LINK_TESTPAGE,
-    component: Links,
-  },
-  {
-    name: 'Link E2E Test',
-    component: LinkE2ETest,
-  },
-];
-
-export const LinkTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Beta',
-    uwpStatus: 'Experimental',
-    iosStatus: 'Experimental',
-    macosStatus: 'Beta',
-    androidStatus: 'Backlog',
-  };
-
-  const description =
-    'With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter.\n\nA Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.';
-
-  return <Test name="Link Test" description={description} sections={linkSections} status={status}></Test>;
-};

package/src/TestComponents/Link/index.ts

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

package/src/TestComponents/LinkExperimental/E2ELinkTest.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { LinkV1 as Link } from '@fluentui/react-native';
-import { Stack } from '@fluentui-react-native/stack';
-import { stackStyle } from '../Common/styles';
-import {
-  EXPERIMENTAL_LINK_TEST_COMPONENT,
-  EXPERIMENTAL_LINK_ACCESSIBILITY_LABEL,
-  EXPERIMENTAL_LINK_NO_A11Y_LABEL_COMPONENT,
-  EXPERIMENTAL_LINK_TEST_COMPONENT_LABEL,
-} from '../../../../E2E/src/LinkExperimental/consts';
-import { testProps } from '../Common/TestProps';
-
-export const LinkE2ETest: React.FunctionComponent = () => {
-  const doPress = (): void => {
-    console.log('Link pressed');
-  };
-
-  return (
-    <Stack style={stackStyle}>
-      <Link
-        url="https://www.bing.com/"
-        accessibilityLabel={EXPERIMENTAL_LINK_ACCESSIBILITY_LABEL}
-        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-        {...testProps(EXPERIMENTAL_LINK_TEST_COMPONENT)}
-      >
-        Link with Accessibility Label
-      </Link>
-      <Link
-        onPress={doPress}
-        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-        {...testProps(EXPERIMENTAL_LINK_NO_A11Y_LABEL_COMPONENT)}
-      >
-        {EXPERIMENTAL_LINK_TEST_COMPONENT_LABEL}
-      </Link>
-    </Stack>
-  );
-};