@fluentui-react-native/tester 0.170.50 → 0.170.52

package/src/TestComponents/Switch/CustomizedSwitch.tsx

@@ -1,285 +0,0 @@
-import * as React from 'react';
-import { View, TextInput, StyleSheet } from 'react-native';
-
-import type { SwitchTokens } from '@fluentui-react-native/switch';
-import { Switch } from '@fluentui-react-native/switch';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-
-import { commonTestStyles as commonStyles } from '../Common/styles';
-
-const styles = StyleSheet.create({
-  tokensRow: {
-    flexDirection: 'row',
-    marginBottom: 10,
-  },
-  tokensColumn: {
-    flexDirection: 'column',
-    margin: 10,
-  },
-});
-
-export const CustomizedSwitch: React.FunctionComponent = () => {
-  const [trackColor, setTrackColor] = React.useState<string>('blue');
-  const [thumbColorOn, setThumbColorOn] = React.useState<string>('white');
-  const [thumbColorOff, setThumbColorOff] = React.useState<string>('grey');
-  const [thumbSize, setThumbSize] = React.useState<number>(20);
-  const [trackWidth, setTrackWidth] = React.useState<number>(100);
-  const [trackHeight, setTrackHeight] = React.useState<number>(30);
-  const [focusStrokeColor, setFocusStrokeColor] = React.useState<string>('black');
-  const [focusBorderRadius, setFocusBorderRadius] = React.useState<number>(4);
-  const [focusBorderWidth, setFocusBorderWidth] = React.useState<number>(1);
-  const [thumbRadius, setThumbRadius] = React.useState<number>(20);
-  const [padding, setPadding] = React.useState<number>(4);
-  const [color, setColor] = React.useState<string>('black');
-  const [minWidth, setMinWidth] = React.useState<number>(trackWidth);
-  const [minHeight, setMinHeight] = React.useState<number>(trackHeight);
-  const [borderWidth, setBorderWidth] = React.useState<number>(1);
-  const [borderRadius, setBorderRadius] = React.useState<number>(20);
-  const [borderColor, setBorderColor] = React.useState<string>(trackColor);
-
-  const CustomSwitch = React.useMemo(() => {
-    const tokens: SwitchTokens = {
-      trackWidth,
-      trackHeight,
-      minWidth,
-      minHeight,
-      thumbSize,
-      thumbRadius,
-      padding,
-      color,
-      borderWidth,
-      borderRadius,
-
-      toggleOn: {
-        thumbColor: thumbColorOn,
-        trackColor,
-        borderColor,
-
-        hovered: {
-          borderColor,
-          trackColor,
-          thumbColor: thumbColorOn,
-        },
-
-        pressed: {
-          borderColor: trackColor,
-          trackColor,
-          thumbColor: thumbColorOn,
-        },
-      },
-
-      toggleOff: {
-        thumbColor: thumbColorOff,
-
-        hovered: {
-          thumbColor: thumbColorOff,
-        },
-
-        pressed: {
-          thumbColor: thumbColorOff,
-        },
-      },
-
-      focused: {
-        focusBorderRadius,
-        focusStrokeColor,
-        focusBorderWidth,
-      },
-    };
-    return Switch.customize(tokens);
-  }, [
-    trackColor,
-    thumbColorOn,
-    thumbColorOff,
-    thumbSize,
-    thumbRadius,
-    trackWidth,
-    trackHeight,
-    focusStrokeColor,
-    focusBorderRadius,
-    focusBorderWidth,
-    padding,
-    color,
-    minWidth,
-    minHeight,
-    borderWidth,
-    borderRadius,
-    borderColor,
-  ]);
-
-  return (
-    <View style={styles.tokensColumn}>
-      <View style={styles.tokensRow}>
-        <View>
-          <Text>Track Tokens</Text>
-          <TextInput
-            accessibilityLabel="Track color"
-            style={commonStyles.textBox}
-            placeholder="Track color"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setTrackColor(e.nativeEvent.text);
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Track border color"
-            style={commonStyles.textBox}
-            placeholder="Track border color"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setBorderColor(e.nativeEvent.text);
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Track width"
-            style={commonStyles.textBox}
-            placeholder="Track width"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setTrackWidth(parseInt(e.nativeEvent.text.toString()));
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Track height"
-            style={commonStyles.textBox}
-            placeholder="Track height"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setTrackHeight(parseInt(e.nativeEvent.text.toString()));
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Track border width"
-            style={commonStyles.textBox}
-            placeholder="Track border width"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setBorderWidth(parseInt(e.nativeEvent.text.toString()));
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Track border radius"
-            style={commonStyles.textBox}
-            placeholder="Track border radius"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setBorderRadius(parseInt(e.nativeEvent.text.toString()));
-            }}
-          />
-        </View>
-        <View>
-          <Text>Thumb Tokens</Text>
-          <TextInput
-            accessibilityLabel="Thumb on color"
-            style={commonStyles.textBox}
-            placeholder="Thumb on color"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setThumbColorOn(e.nativeEvent.text);
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Thumb off color"
-            style={commonStyles.textBox}
-            placeholder="Thumb off color"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setThumbColorOff(e.nativeEvent.text);
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Thumb size"
-            style={commonStyles.textBox}
-            placeholder="Thumb size"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setThumbSize(parseInt(e.nativeEvent.text));
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Thumb radius"
-            style={commonStyles.textBox}
-            placeholder="Thumb radius"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setThumbRadius(parseInt(e.nativeEvent.text));
-            }}
-          />
-        </View>
-      </View>
-      <View style={styles.tokensRow}>
-        <View>
-          <Text>Focus Stroke Tokens</Text>
-          <TextInput
-            accessibilityLabel="Focus stroke color"
-            style={commonStyles.textBox}
-            placeholder="Focus stroke color"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setFocusStrokeColor(e.nativeEvent.text);
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Focus stroke border radius"
-            style={commonStyles.textBox}
-            placeholder="Focus stroke border radius"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setFocusBorderRadius(parseInt(e.nativeEvent.text));
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Focus stroke border width"
-            style={commonStyles.textBox}
-            placeholder="Focus stroke border width"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setFocusBorderWidth(parseInt(e.nativeEvent.text));
-            }}
-          />
-        </View>
-        <View>
-          <Text>Other Tokens</Text>
-          <TextInput
-            accessibilityLabel="Minimum width"
-            style={commonStyles.textBox}
-            placeholder="Minimum width"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setMinWidth(parseInt(e.nativeEvent.text));
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Minimum height"
-            style={commonStyles.textBox}
-            placeholder="Minimum height"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setMinHeight(parseInt(e.nativeEvent.text));
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Padding"
-            style={commonStyles.textBox}
-            placeholder="Padding"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setPadding(parseInt(e.nativeEvent.text));
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Text colors"
-            style={commonStyles.textBox}
-            placeholder="Text colors"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setColor(e.nativeEvent.text);
-            }}
-          />
-        </View>
-      </View>
-
-      <CustomSwitch label="Custom Switch" onText="On" offText="Off" accessibilityLabel="Custom Switch" />
-    </View>
-  );
-};

package/src/TestComponents/Switch/E2ESwitchTest.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import { Platform } from 'react-native';
-
-import {
-  SWITCH_TEST_COMPONENT,
-  SWITCH_ACCESSIBILITY_LABEL,
-  SWITCH_NO_A11Y_LABEL_COMPONENT,
-  SWITCH_TEST_COMPONENT_LABEL,
-  SWITCH_ON_PRESS,
-} from '@fluentui-react-native/e2e-testing';
-import { Stack } from '@fluentui-react-native/stack';
-import { Switch } from '@fluentui-react-native/switch';
-import { TextV1 } from '@fluentui-react-native/text';
-
-import { stackStyle, commonTestStyles } from '../Common/styles';
-import { testProps } from '../Common/TestProps';
-
-export const E2ESwitchTest: React.FunctionComponent = () => {
-  const [switchPressed, setSwitchSwitchPressed] = React.useState(false);
-
-  const memoizedStyles = React.useMemo(
-    () => (Platform.OS === 'android' ? { ...commonTestStyles.androidContainer, height: 100, marginBottom: 50 } : stackStyle),
-    [],
-  );
-
-  const onToggle = React.useCallback(
-    (_e, checked) => {
-      setSwitchSwitchPressed(checked);
-    },
-    [setSwitchSwitchPressed],
-  );
-
-  return (
-    <Stack style={memoizedStyles}>
-      <Switch
-        label={'Switch Test'}
-        onChange={onToggle}
-        accessibilityLabel={SWITCH_ACCESSIBILITY_LABEL}
-        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-        {...testProps(SWITCH_TEST_COMPONENT)}
-      />
-      {switchPressed ? (
-        <TextV1
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(SWITCH_ON_PRESS)}
-        >
-          Switch Toggled On
-        </TextV1>
-      ) : null}
-      <Switch
-        label={SWITCH_TEST_COMPONENT_LABEL}
-        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-        {...testProps(SWITCH_NO_A11Y_LABEL_COMPONENT)}
-      />
-    </Stack>
-  );
-};

package/src/TestComponents/Switch/SwitchTest.tsx

@@ -1,164 +0,0 @@
-import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { Platform } from 'react-native';
-
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import { SWITCH_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
-import { Switch } from '@fluentui-react-native/switch';
-
-import { CustomizedSwitch } from './CustomizedSwitch';
-import { E2ESwitchTest } from './E2ESwitchTest';
-import { commonTestStyles } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const styles = StyleSheet.create({
-  square: {
-    backgroundColor: 'red',
-    width: 100,
-    height: 100,
-  },
-});
-
-const StandardUsage: React.FunctionComponent = () => {
-  const memoizedStyles = React.useMemo(
-    () => (Platform.OS === 'android' ? { ...commonTestStyles.androidContainer, height: 180 } : commonTestStyles.settingsPicker),
-    [],
-  );
-  return (
-    <View style={memoizedStyles}>
-      <Switch defaultChecked={true} label={'Default Checked True'} />
-      <Switch defaultChecked={false} label={'Default Checked False'} />
-      <Switch defaultChecked={true} label={'Disabled Default Checked True'} disabled />
-      <Switch defaultChecked={false} label={'Disabled Default Checked False'} disabled />
-    </View>
-  );
-};
-
-const OnChangeUsage: React.FunctionComponent = () => {
-  const [displaySquare, setDisplaySquare] = React.useState(true);
-
-  const defaultToggleSquare = (_e: InteractionEvent, checked: boolean) => {
-    setDisplaySquare(checked);
-  };
-
-  const memoizedStyles = React.useMemo(
-    () => (Platform.OS === 'android' ? { ...commonTestStyles.androidContainer, height: 150 } : commonTestStyles.settingsPicker),
-    [],
-  );
-
-  return (
-    <View style={memoizedStyles}>
-      <Switch label={'Toggle Square'} defaultChecked={true} onChange={defaultToggleSquare} />
-      {displaySquare && <View style={styles.square} />}
-    </View>
-  );
-};
-
-const ControlSwitchValues: React.FunctionComponent = () => {
-  const [toggleSwitch, setToggleSwitch] = React.useState(true);
-
-  const toggleSwitchTrue = () => {
-    setToggleSwitch(true);
-  };
-
-  const toggleSwitchFalse = () => {
-    setToggleSwitch(false);
-  };
-
-  const memoizedStyles = React.useMemo(
-    () => (Platform.OS === 'android' ? { ...commonTestStyles.androidContainer, height: 150 } : commonTestStyles.settingsPicker),
-    [],
-  );
-
-  return (
-    <View style={memoizedStyles}>
-      <Button onClick={toggleSwitchTrue}>Toggle Switch True</Button>
-      <Button onClick={toggleSwitchFalse}>Toggle Switch False</Button>
-      <Switch label={'Switch Value Being Controlled'} checked={toggleSwitch} />
-    </View>
-  );
-};
-
-const LabelPosition: React.FunctionComponent = () => {
-  return (
-    <View style={commonTestStyles.settingsPicker}>
-      <Switch defaultChecked={true} labelPosition={'before'} label={'before'} />
-      <Switch defaultChecked={true} labelPosition={'after'} label={'after'} />
-      {Platform.OS !== 'android' && <Switch defaultChecked={true} labelPosition={'above'} label={'above'} />}
-    </View>
-  );
-};
-
-const OnOffText: React.FunctionComponent = () => {
-  return (
-    <View style={commonTestStyles.settingsPicker}>
-      <Switch defaultChecked={true} labelPosition={'before'} label={'Autosave'} onText={'On'} offText={'Off'} />
-      <Switch defaultChecked={true} labelPosition={'above'} label={'Autosave'} onText={'On'} offText={'Off'} />
-      <Switch defaultChecked={true} labelPosition={'after'} label={'Autosave'} onText={'On'} offText={'Off'} />
-    </View>
-  );
-};
-
-const toggleSections: TestSection[] = [
-  {
-    name: 'Standard Usage',
-    testID: SWITCH_TESTPAGE,
-    component: () => <StandardUsage />,
-  },
-  {
-    name: 'onChange Usage',
-    component: () => <OnChangeUsage />,
-  },
-  {
-    name: 'Control Switch Values',
-    component: () => <ControlSwitchValues />,
-  },
-  Platform.select({
-    android: null,
-    default: {
-      name: 'Label Position',
-      component: () => <LabelPosition />,
-    },
-  }),
-  Platform.select({
-    android: null,
-    default: {
-      name: 'On/Off Text',
-      component: () => <OnOffText />,
-    },
-  }),
-  Platform.select({
-    android: null,
-    default: {
-      name: 'Customized Tokens',
-      component: () => <CustomizedSwitch />,
-    },
-  }),
-];
-
-const e2eSections: TestSection[] = [
-  {
-    name: 'Switch E2E Testing',
-    component: E2ESwitchTest,
-  },
-];
-
-export const SwitchTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Production',
-    uwpStatus: 'Backlog',
-    iosStatus: 'Production',
-    macosStatus: 'Production',
-    androidStatus: 'Production',
-  };
-
-  const description = 'Switch is a control that has two mutually exclusive states.';
-
-  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Switch/SPEC.md';
-
-  return (
-    <Test name="Switch Test" description={description} spec={spec} sections={toggleSections} status={status} e2eSections={e2eSections} />
-  );
-};

package/src/TestComponents/Switch/index.ts

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

package/src/TestComponents/TabList/TabListE2ETest.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import {
-  TABLIST_TEST_COMPONENT,
-  TABLIST_ACCESSIBILITY_LABEL,
-  FIRST_TAB,
-  FIRST_TAB_ACCESSIBILITY_LABEL,
-  SECOND_TAB,
-  THIRD_TAB,
-  FOURTH_TAB,
-  FIFTH_TAB,
-  FIRST_TAB_KEY,
-  TABLIST_CALLBACK_TEXT,
-  FOURTH_TAB_KEY,
-  SECOND_TAB_KEY,
-  THIRD_TAB_KEY,
-  SECOND_TAB_LABEL,
-} from '@fluentui-react-native/e2e-testing';
-import { Stack } from '@fluentui-react-native/stack';
-import { TabList, Tab } from '@fluentui-react-native/tablist';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-
-import { stackStyle } from '../Common/styles';
-import { testProps } from '../Common/TestProps';
-
-export const TabListE2ETest: React.FunctionComponent = () => {
-  const [key, setKey] = React.useState(FIRST_TAB_KEY);
-  return (
-    <View>
-      <Stack style={stackStyle}>
-        <TabList
-          accessibilityLabel={TABLIST_ACCESSIBILITY_LABEL}
-          onTabSelect={setKey}
-          selectedKey={key}
-          {...testProps(TABLIST_TEST_COMPONENT)}
-        >
-          <Tab tabKey={FIRST_TAB_KEY} accessibilityLabel={FIRST_TAB_ACCESSIBILITY_LABEL} {...testProps(FIRST_TAB)}>
-            Option A
-          </Tab>
-          <Tab tabKey={SECOND_TAB_KEY} {...testProps(SECOND_TAB)}>
-            {SECOND_TAB_LABEL}
-          </Tab>
-          <Tab disabled tabKey={THIRD_TAB_KEY} {...testProps(THIRD_TAB)}>
-            Option C
-          </Tab>
-          <Tab tabKey={FOURTH_TAB_KEY} {...testProps(FOURTH_TAB)}>
-            Option D
-          </Tab>
-        </TabList>
-        <TabList>
-          <Tab tabKey="1" {...testProps(FIFTH_TAB)}>
-            Option 1
-          </Tab>
-          <Tab tabKey="2">Option 2</Tab>
-          <Tab disabled tabKey="3">
-            Option 3
-          </Tab>
-          <Tab tabKey="4">Option 4</Tab>
-        </TabList>
-        <Text {...testProps(TABLIST_CALLBACK_TEXT)}>{key}</Text>
-      </Stack>
-    </View>
-  );
-};