@fluentui-react-native/tester-core 0.1.1

package/src/TestComponents/Switch/CustomizedSwitch.tsx

@@ -0,0 +1,285 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,164 @@
+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

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

package/src/TestComponents/TabList/TabListE2ETest.tsx

@@ -0,0 +1,65 @@
+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>
+  );
+};