@fluentui-react-native/tester-core 0.1.1

package/src/testPages.ts

@@ -0,0 +1,342 @@
+import * as Constants from '@fluentui-react-native/e2e-testing';
+
+import type { TestDescription } from './TestComponents';
+import { ActivityIndicatorTest } from './TestComponents/ActivityIndicator';
+import { AvatarTest, NativeAvatarTest } from './TestComponents/Avatar';
+import { BadgeTest } from './TestComponents/Badge';
+import { ButtonTest } from './TestComponents/Button';
+import { CalloutTest } from './TestComponents/Callout';
+import { CheckboxLegacyTest } from './TestComponents/CheckboxLegacy';
+import { CheckboxV1Test } from './TestComponents/CheckboxV1';
+import { ChipTest } from './TestComponents/Chip';
+import { ColorTokensTest } from './TestComponents/ColorTokens';
+import { ContextualMenuTest } from './TestComponents/ContextualMenu';
+import { CornerRadiusTokensTest } from './TestComponents/CornerRadius';
+import { DividerTest } from './TestComponents/Divider';
+import { DrawerTest } from './TestComponents/Drawer';
+// import { DropdownTest, HOMEPAGE_DROPDOWN_BUTTON } from './TestComponents/Dropdown';
+// import { ExpanderTest, Constants.HOMEPAGE_EXPANDER_BUTTON } from './TestComponents/Expander';
+import { FocusTrapTest } from './TestComponents/FocusTrapZone';
+import { FocusZoneTest } from './TestComponents/FocusZone';
+import { IconTest } from './TestComponents/Icon';
+import { InputTest } from './TestComponents/Input';
+import { LinkLegacyTest } from './TestComponents/LinkLegacy';
+import { LinkV1Test } from './TestComponents/LinkV1';
+import { MenuTest } from './TestComponents/Menu';
+import { MenuButtonLegacyTest } from './TestComponents/MenuButtonLegacy';
+import { MenuButtonV1Test } from './TestComponents/MenuButtonV1';
+import { HOMEPAGE_NATIVEDATEPICKER_BUTTON, NativeDatePickerTest } from './TestComponents/NativeDatePicker';
+import { HOMEPAGE_NOTIFICATION_BUTTON, NotificationTest } from './TestComponents/Notification';
+import { OverflowTest } from './TestComponents/Overflow/OverflowTest';
+import { PersonaTest } from './TestComponents/Persona';
+import { PersonaCoinTest } from './TestComponents/PersonaCoin';
+import { PressableTest } from './TestComponents/Pressable';
+import { RadioGroupLegacyTest } from './TestComponents/RadioGroupLegacy';
+import { RadioGroupV1Test } from './TestComponents/RadioGroupV1';
+import { SeparatorTest } from './TestComponents/Separator';
+import { ShadowTest } from './TestComponents/Shadow';
+import { ShimmerTest } from './TestComponents/Shimmer';
+import { SpacingTokensTest } from './TestComponents/Spacing';
+import { SpinnerTest } from './TestComponents/Spinner';
+import { StrokeWidthTest } from './TestComponents/StrokeWidth';
+import { RNSVGIconsTest, SvgTest } from './TestComponents/Svg';
+import { SwitchTest } from './TestComponents/Switch';
+import { TabListTest } from './TestComponents/TabList/TabListTest';
+import { TextLegacyTest } from './TestComponents/TextLegacy';
+import { TextV1Test } from './TestComponents/TextV1';
+import { ThemeTest } from './TestComponents/Theme';
+import { TooltipTest } from './TestComponents/Tooltip';
+import { VibrancyViewTest } from './TestComponents/VibrancyView';
+
+export const tests: TestDescription[] = [
+  {
+    name: 'ActivityIndicator',
+    component: ActivityIndicatorTest,
+    testPageButton: Constants.HOMEPAGE_ACTIVITY_INDICATOR_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'Avatar',
+    component: AvatarTest,
+    testPageButton: Constants.HOMEPAGE_AVATAR_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'Avatar (Native)',
+    component: NativeAvatarTest,
+    testPageButton: Constants.HOMEPAGE_NATIVE_AVATAR_BUTTON,
+    platforms: ['ios', 'macos'],
+  },
+  {
+    name: 'Badge',
+    component: BadgeTest,
+    testPageButton: Constants.HOMEPAGE_BADGE_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'Button',
+    component: ButtonTest,
+    testPageButton: Constants.HOMEPAGE_BUTTON_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'Callout',
+    component: CalloutTest,
+    testPageButton: Constants.HOMEPAGE_CALLOUT_BUTTON,
+    platforms: ['android', 'macos', 'win32'],
+  },
+  {
+    name: 'Checkbox Legacy',
+    component: CheckboxLegacyTest,
+    testPageButton: Constants.HOMEPAGE_CHECKBOX_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'Checkbox V1',
+    component: CheckboxV1Test,
+    testPageButton: Constants.HOMEPAGE_CHECKBOXV1_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32'], // 'windows': GH#935: Temporarily disabling while SVGs don't work in windows
+  },
+  {
+    name: 'Chip',
+    component: ChipTest,
+    testPageButton: Constants.HOMEPAGE_CHIP_BUTTON,
+    platforms: ['android', 'ios'],
+  },
+  {
+    name: 'Color Tokens',
+    component: ColorTokensTest,
+    testPageButton: Constants.HOMEPAGE_COLORTOKEN_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'ContextualMenu',
+    component: ContextualMenuTest,
+    testPageButton: Constants.HOMEPAGE_CONTEXTUALMENU_BUTTON,
+    platforms: ['android', 'macos', 'win32'],
+  },
+  {
+    name: 'Corner Radius Tokens',
+    component: CornerRadiusTokensTest,
+    testPageButton: Constants.HOMEPAGE_CORNERRADIUS_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'Date Picker (Native)',
+    component: NativeDatePickerTest,
+    testPageButton: HOMEPAGE_NATIVEDATEPICKER_BUTTON,
+    platforms: ['ios', 'android'],
+  },
+  {
+    name: 'Divider',
+    component: DividerTest,
+    testPageButton: Constants.HOMEPAGE_DIVIDER_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  // Temporarily disabling until Dropdown is fully implemented
+  // {
+  //   name: 'Dropdown',
+  //   component: DropdownTest,
+  //   testPageButton: HOMEPAGE_DROPDOWN_BUTTON,
+  //   platforms: ['macos', 'win32'],
+  // },
+  {
+    name: 'Drawer',
+    component: DrawerTest,
+    testPageButton: Constants.HOMEPAGE_Drawer_BUTTON,
+    platforms: ['android'],
+  },
+  // GH##1027 Temporarily disabling while the test doesn't load
+  // {
+  //   name: 'Expander',
+  //   component: ExpanderTest,
+  //   testPage: Constants.HOMEPAGE_EXPANDER_BUTTON,
+  //   platforms: ['windows'],
+  // },
+  {
+    name: 'Focus Trap Zone',
+    component: FocusTrapTest,
+    testPageButton: Constants.HOMEPAGE_FOCUSTRAPZONE_BUTTON,
+    platforms: ['win32'],
+  },
+  {
+    name: 'FocusZone',
+    component: FocusZoneTest,
+    testPageButton: Constants.HOMEPAGE_FOCUSZONE_BUTTON,
+    platforms: ['macos', 'win32'],
+  },
+  {
+    name: 'Icon',
+    component: IconTest,
+    testPageButton: Constants.HOMEPAGE_ICON_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32'],
+  },
+  {
+    name: 'Input',
+    component: InputTest,
+    testPageButton: Constants.HOMEPAGE_INPUT_BUTTON,
+    platforms: ['android', 'ios'],
+  },
+  {
+    name: 'Link Legacy',
+    component: LinkLegacyTest,
+    testPageButton: Constants.HOMEPAGE_LINK_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'Link V1',
+    component: LinkV1Test,
+    testPageButton: Constants.HOMEPAGE_LINKV1_BUTTON,
+    platforms: ['macos', 'win32', 'android', 'windows'],
+  },
+  {
+    name: 'Menu',
+    component: MenuTest,
+    testPageButton: Constants.HOMEPAGE_MENU_BUTTON,
+    platforms: ['macos', 'win32', 'android'],
+  },
+  {
+    name: 'MenuButton Legacy',
+    component: MenuButtonLegacyTest,
+    testPageButton: Constants.HOMEPAGE_MENUBUTTON_BUTTON,
+    platforms: ['macos', 'win32'],
+  },
+  {
+    name: 'MenuButton V1',
+    component: MenuButtonV1Test,
+    testPageButton: Constants.HOMEPAGE_MENUBUTTONV1_BUTTON,
+    platforms: ['macos', 'win32'],
+  },
+  {
+    name: 'Notification',
+    component: NotificationTest,
+    testPageButton: HOMEPAGE_NOTIFICATION_BUTTON,
+    platforms: ['android', 'ios'],
+  },
+  {
+    name: 'Overflow',
+    component: OverflowTest,
+    testPageButton: Constants.HOMEPAGE_OVERFLOW_BUTTON,
+    platforms: ['win32', 'macos'],
+  },
+  {
+    name: 'Persona',
+    component: PersonaTest,
+    testPageButton: Constants.HOMEPAGE_PERSONA_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'PersonaCoin',
+    component: PersonaCoinTest,
+    testPageButton: Constants.HOMEPAGE_PERSONACOIN_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'Pressable',
+    component: PressableTest,
+    testPageButton: Constants.HOMEPAGE_PRESSABLE_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'RadioGroup Legacy',
+    component: RadioGroupLegacyTest,
+    testPageButton: Constants.HOMEPAGE_RADIOGROUP_BUTTON,
+    platforms: ['macos', 'win32'],
+  },
+  {
+    name: 'RadioGroup V1',
+    component: RadioGroupV1Test,
+    testPageButton: Constants.HOMEPAGE_RADIOGROUPV1_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32'],
+  },
+  {
+    name: 'Separator',
+    component: SeparatorTest,
+    testPageButton: Constants.HOMEPAGE_SEPARATOR_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'Shadow',
+    component: ShadowTest,
+    testPageButton: Constants.HOMEPAGE_SHADOW_BUTTON,
+    platforms: ['ios', 'macos', 'win32'],
+  },
+  {
+    name: 'Shimmer',
+    component: ShimmerTest,
+    testPageButton: Constants.HOMEPAGE_SHIMMER_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32'],
+  },
+  {
+    name: 'Spacing Tokens',
+    component: SpacingTokensTest,
+    testPageButton: Constants.HOMEPAGE_SPACING_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'Spinner V1',
+    component: SpinnerTest,
+    testPageButton: Constants.HOMEPAGE_SPINNER_BUTTON,
+    platforms: ['android', 'win32'],
+  },
+  {
+    name: 'Stroke Width Tokens',
+    component: StrokeWidthTest,
+    testPageButton: Constants.HOMEPAGE_STROKEWIDTH_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'Svg rendering',
+    component: SvgTest,
+    testPageButton: Constants.HOMEPAGE_SVG_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32'],
+  },
+  {
+    name: 'Svg Icon packages',
+    component: RNSVGIconsTest,
+    testPageButton: Constants.HOMEPAGE_RNSVGIcons_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32'],
+  },
+  {
+    name: 'Switch',
+    component: SwitchTest,
+    testPageButton: Constants.HOMEPAGE_SWITCH_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'TabList',
+    component: TabListTest,
+    testPageButton: Constants.HOMEPAGE_TABLIST_BUTTON,
+    platforms: ['macos', 'win32', 'windows'],
+  },
+  {
+    name: 'Text Legacy',
+    component: TextLegacyTest,
+    testPageButton: Constants.HOMEPAGE_TEXT_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'Text V1',
+    component: TextV1Test,
+    testPageButton: Constants.HOMEPAGE_TEXTV1_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'Theme',
+    component: ThemeTest,
+    testPageButton: Constants.HOMEPAGE_THEME_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
+  {
+    name: 'Tooltip',
+    component: TooltipTest,
+    testPageButton: Constants.HOMEPAGE_TOOLTIP_BUTTON,
+    platforms: ['win32'],
+  },
+  {
+    name: 'Vibrancy View',
+    component: VibrancyViewTest,
+    testPageButton: Constants.HOMEPAGE_VIBRANCYVIEW_BUTTON,
+    platforms: ['macos'],
+  },
+];

package/src/theme/CustomThemes.ts

@@ -0,0 +1,89 @@
+import { Platform } from 'react-native';
+
+import { createAndroidTheme } from '@fluentui-react-native/android-theme';
+import { createAppleTheme } from '@fluentui-react-native/apple-theme';
+import { createDefaultTheme } from '@fluentui-react-native/default-theme';
+import { ThemeReference } from '@fluentui-react-native/theme';
+import type { ThemeOptions } from '@fluentui-react-native/theme-types';
+
+import type { OfficeBrand } from './applyBrand';
+import { applyBrand } from './applyBrand';
+import type { ThemeNames } from './applyTheme';
+import { applyTheme } from './applyTheme';
+
+const themeOptions: ThemeOptions = { paletteName: 'TaskPane', appearance: 'dynamic' };
+
+// Default applies to win32
+const baseTheme = Platform.select({
+  android: createAndroidTheme(themeOptions),
+  ios: createAppleTheme(),
+  macos: createAppleTheme(),
+  default: createDefaultTheme(themeOptions),
+});
+
+const supportsHighContrastTokens: boolean = Platform.select({
+  android: false,
+  ios: false,
+  macos: false,
+  default: true,
+});
+
+export const lightnessOptions = [
+  { label: 'Auto', value: 'dynamic' },
+  { label: 'Light', value: 'light' },
+  { label: 'Dark', value: 'dark' },
+  supportsHighContrastTokens && { label: 'High Contrast', value: 'highContrast' },
+];
+
+export class TesterThemeReference extends ThemeReference {
+  private _themeName: ThemeNames = Platform.OS === ('win32' as any) ? 'Office' : 'Default';
+  private _brand: OfficeBrand = 'Default';
+
+  private options: ThemeOptions;
+  private baseTheme: ThemeReference;
+
+  constructor() {
+    super(
+      baseTheme,
+      () => applyTheme(this._themeName, this.options.appearance),
+      (parent) => applyBrand(parent, this._brand),
+    );
+    this.baseTheme = baseTheme;
+    this.options = themeOptions;
+  }
+
+  /** get/set the currently active theme */
+  public get themeName(): ThemeNames {
+    return this._themeName;
+  }
+  public set themeName(newTheme: ThemeNames) {
+    if (newTheme !== this._themeName) {
+      this._themeName = newTheme;
+      this.invalidate();
+    }
+  }
+
+  /** get/set the theme appearance */
+  public get appearance(): ThemeOptions['appearance'] {
+    return this.options.appearance;
+  }
+  public set appearance(lightness: ThemeOptions['appearance']) {
+    if (lightness !== this.options.appearance) {
+      this.options.appearance = lightness;
+      this.baseTheme.invalidate();
+    }
+  }
+
+  /** get/set the applied brand */
+  public get brand(): OfficeBrand {
+    return this._brand;
+  }
+  public set brand(newBrand: OfficeBrand) {
+    if (newBrand !== this._brand) {
+      this._brand = newBrand;
+      this.invalidate();
+    }
+  }
+}
+
+export const testerTheme = new TesterThemeReference();

package/src/theme/ThemePickers.android.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import type { Theme } from '@fluentui-react-native/framework';
+import { useTheme } from '@fluentui-react-native/framework';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import type { PickerProps } from '@react-native-picker/picker';
+import { Picker } from '@react-native-picker/picker';
+
+import { themeChoices } from './applyTheme';
+import type { ThemeNames } from './applyTheme';
+import { lightnessOptions, testerTheme } from './CustomThemes';
+
+const getThemedDropdownStyles = themedStyleSheet((t: Theme) => {
+  return {
+    pickerRoot: {
+      flexDirection: 'row',
+      width: '100%',
+    },
+    picker: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      width: '50%',
+      padding: 4,
+    },
+    dropdown: {
+      fontSize: 12,
+      color: t.colors.bodyText,
+    },
+    dropdownBorder: {
+      borderStyle: 'solid',
+      borderColor: t.colors.disabledBodyText,
+      borderWidth: 1,
+      width: '100%',
+    },
+  };
+});
+
+const PickerLabel = Text.customize({ variant: 'subheaderSemibold' });
+
+export const ThemePickers: React.FunctionComponent = () => {
+  const onThemeSelected = React.useCallback((newTheme: string) => {
+    testerTheme.themeName = newTheme as ThemeNames;
+  }, []);
+
+  const onAppearanceChange = React.useCallback((newAppearance: string) => {
+    testerTheme.appearance = newAppearance as 'light' | 'dark' | 'dynamic';
+  }, []);
+
+  const theme = useTheme();
+  const themedPickerStyles = getThemedDropdownStyles(theme);
+
+  type DropdownEntry = { label: string; value: string };
+
+  type DropdownProps = { initial: string; onValueChange: (value: string) => void; options: DropdownEntry[]; accessibilityLabel?: string };
+
+  const dropdownProps: Omit<PickerProps, 'onValueChange' | 'selectedValue'> = {
+    style: themedPickerStyles.dropdown,
+    mode: 'dropdown',
+  };
+
+  const Dropdown = (props: DropdownProps) => {
+    const { initial, onValueChange, options, accessibilityLabel } = props;
+    return (
+      <View style={themedPickerStyles.dropdownBorder}>
+        <Picker
+          selectedValue={initial}
+          onValueChange={onValueChange}
+          dropdownIconColor={theme.colors.defaultIcon}
+          {...dropdownProps}
+          accessibilityLabel={accessibilityLabel}
+        >
+          {options.map(
+            (entry: DropdownEntry, index: number) => entry && <Picker.Item label={entry.label} value={entry.value} key={`entry${index}`} />,
+          )}
+        </Picker>
+      </View>
+    );
+  };
+
+  return (
+    <View style={themedPickerStyles.pickerRoot}>
+      <View style={themedPickerStyles.picker}>
+        <PickerLabel>Theme: </PickerLabel>
+        <Dropdown
+          accessibilityLabel="Theme Selector"
+          initial={testerTheme.themeName}
+          onValueChange={onThemeSelected}
+          options={themeChoices}
+        />
+      </View>
+
+      <View style={themedPickerStyles.picker}>
+        <PickerLabel>Light/Dark: </PickerLabel>
+        <Dropdown
+          accessibilityLabel="Light/Dark Selector"
+          initial={testerTheme.appearance}
+          onValueChange={onAppearanceChange}
+          options={lightnessOptions}
+        />
+      </View>
+    </View>
+  );
+};

package/src/theme/ThemePickers.ios.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import type { Theme } from '@fluentui-react-native/framework';
+import { useTheme } from '@fluentui-react-native/framework';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { MenuView } from '@react-native-menu/menu';
+import type { MenuAction } from '@react-native-menu/menu';
+
+import { themeChoices } from './applyTheme';
+import type { ThemeNames } from './applyTheme';
+import { testerTheme } from './CustomThemes';
+
+export const themePickerStyles = themedStyleSheet((t: Theme) => {
+  // picker, pickerItem, dropdown used in iOS dark mode
+  return {
+    pickerRoot: {
+      flexDirection: 'row',
+    },
+    picker: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      padding: 4,
+      flexShrink: 0,
+    },
+    pickerItem: {
+      color: t.colors.bodyText,
+    },
+    dropdown: {
+      height: 200,
+      width: 90,
+      fontSize: 12,
+    },
+  };
+});
+
+export const ThemePickers: React.FunctionComponent = () => {
+  const themedStyles = themePickerStyles(useTheme());
+
+  const onThemeSelected = React.useCallback((newTheme: string) => {
+    testerTheme.themeName = newTheme as ThemeNames;
+  }, []);
+
+  const themeMenuOptions: MenuAction[] = themeChoices.map((themeChoice) => ({
+    id: themeChoice.value,
+    title: themeChoice.label,
+    state: testerTheme.themeName === themeChoice.value ? 'on' : 'off',
+  }));
+
+  return (
+    <View style={themedStyles.pickerRoot}>
+      <MenuView
+        title="Theme"
+        onPressAction={({ nativeEvent }) => {
+          onThemeSelected(nativeEvent.event);
+        }}
+        actions={themeMenuOptions}
+      >
+        <Button appearance="subtle">Theme</Button>
+      </MenuView>
+    </View>
+  );
+};