@fluentui-react-native/tester 0.51.5 → 0.53.0

package/src/E2E/common/BasePage.win.ts

@@ -56,14 +56,6 @@ export class BasePage {
     this._primaryComponent.click();
   }
 
-  /* ****TODO****: I need to better use the ComponentSelector for this. We shouldn't have the spec needing to import the constant string */
-  sendKey(componentID?: string, key?: string): void {
-    const component = By(componentID);
-    if (component.isDisplayed()) {
-      component.addValue(key); // Adding a value sends the key on that component
-    }
-  }
-
   /* Scrolls until the desired test page's button is displayed. We use the scroll viewer UI element as the point to start scrolling.
    * We use a negative number as the Y-coordinate because that enables us to scroll downwards */
   scrollToComponentButton(): void {
@@ -139,6 +131,23 @@ export class BasePage {
     );
   }
 
+  /* FUNCTIONALITY: Determines if an Assert has fired. True if yes; false otherwise
+   *
+   * WHY/HOW: Unfortunately, some Asserts don't take focus away from the test app. Because of this, the test execution is able
+   * to continue without realizing an assert as popped up (unless the assert is a crashing one).
+   *
+   * In order to detect an assert, this function gets the number of window handles currently open within the test app.
+   * Only one instance SHOULD be open at a time (the app itself). If another instance of the app is open, we know an assert dialogue
+   * has popped up. With this information, we know to fail the test.
+   *
+   * Additionally, you might think it's logical to simply place this in the afterEach() hook so it's called after every test (rather than duplicating this call in every test).
+   * Unfortunately, afterEach() is designed for setup/teardown - not for determining if a test should fail or not.
+   * */
+  didAssertPopup(): boolean {
+    // If more than 1 instance of the app is open, we know an assert dialogue popped up.
+    return browser.getWindowHandles().length > 1;
+  }
+
   /*****************************************/
   /**************** Getters ****************/
   /*****************************************/
@@ -180,6 +189,23 @@ export class BasePage {
     return DUMMY_CHAR;
   }
 
+  /****************** Error Messages ******************/
+  get ERRORMESSAGE_SUFFIX(): string {
+    return 'Please review logs and error screenshots for more information.';
+  }
+
+  get ERRORMESSAGE_APPLOAD(): string {
+    return 'The FluentTester app did not load correctly. ' + this.ERRORMESSAGE_SUFFIX;
+  }
+
+  get ERRORMESSAGE_PAGELOAD(): string {
+    return 'The ' + this._pageName + ' test page did not load correctly. ' + this.ERRORMESSAGE_SUFFIX;
+  }
+
+  get ERRORMESSAGE_ASSERT(): string {
+    return 'An assert popped up. ' + this.ERRORMESSAGE_SUFFIX;
+  }
+
   // Default timeout to wait until page is displayed (10s)
   waitForPageTimeout: number = 15000;
 }

package/src/FluentTester/TestComponents/ButtonExperimental/ButtonIconTestSection.tsx

@@ -1,11 +1,15 @@
 import { Button } from '@fluentui-react-native/experimental-button';
 import * as React from 'react';
-import { Platform, View } from 'react-native';
+import { Platform, View, StyleSheet } from 'react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 import TestSvg from './test.svg';
 import { SvgXml } from 'react-native-svg';
 
+const styles = StyleSheet.create({
+  chevron: { paddingStart: 4 },
+});
+
 export const ButtonIconTest: React.FunctionComponent = () => {
   const fontBuiltInProps = {
     fontFamily: 'Arial',
@@ -39,12 +43,6 @@ export const ButtonIconTest: React.FunctionComponent = () => {
       >
         Icon after
       </Button>
-      {svgIconsEnabled && (
-        <Button style={commonTestStyles.vmargin} icon={{ svgSource: svgProps }}>
-          Icon Button and Chevron
-          <SvgXml xml={chevronXml} />
-        </Button>
-      )}
       <Button icon={{ fontSource: fontBuiltInProps }} style={commonTestStyles.vmargin}>
         Font icon
       </Button>
@@ -67,6 +65,14 @@ export const ButtonIconTest: React.FunctionComponent = () => {
       <Button icon={testImage} style={commonTestStyles.vmargin}>
         PNG
       </Button>
+      {svgIconsEnabled && (
+        <Button style={commonTestStyles.vmargin} icon={{ svgSource: svgProps }}>
+          Icon Button and Chevron
+          <View style={styles.chevron}>
+            <SvgXml xml={chevronXml} />
+          </View>
+        </Button>
+      )}
     </View>
   );
 };

package/src/FluentTester/TestComponents/ButtonExperimental/ButtonSizeTestSection.tsx

@@ -16,9 +16,27 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
     <View style={[stackStyle, commonTestStyles.view]}>
       {svgIconsEnabled && (
         <>
-          <Button iconOnly size="small" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
-          <Button iconOnly size="medium" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
-          <Button iconOnly size="large" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
+          <Button
+            iconOnly
+            size="small"
+            icon={{ svgSource: svgProps }}
+            accessibilityLabel="Small size button with accessibility icon"
+            style={commonTestStyles.vmargin}
+          />
+          <Button
+            iconOnly
+            size="medium"
+            icon={{ svgSource: svgProps }}
+            accessibilityLabel="Medium size button with accessibility icon"
+            style={commonTestStyles.vmargin}
+          />
+          <Button
+            iconOnly
+            size="large"
+            icon={{ svgSource: svgProps }}
+            accessibilityLabel="Large size button with accessibility icon"
+            style={commonTestStyles.vmargin}
+          />
           <Button size="small" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
             Small Button with icon
           </Button>

package/src/FluentTester/TestComponents/ContextualMenu/E2EContextualMenuTest.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { Text, View, Switch } from 'react-native';
 import { Button, ContextualMenu, ContextualMenuItem, Separator } from '@fluentui/react-native';
-import { CONTEXTUALMENUITEM_TEST_COMPONENT } from './consts';
+import { CONTEXTUALMENUITEM_TEST_COMPONENT, CONTEXTUALMENU_TEST_COMPONENT } from './consts';
 
 export const E2EContextualMenuTest: React.FunctionComponent = () => {
   const stdBtnRef = React.useRef(null);
@@ -75,7 +75,12 @@ export const E2EContextualMenuTest: React.FunctionComponent = () => {
               <Text style={{ color: 'blue' }}>none</Text>
             )}
           </Text>
-          <Button content="Press for ContextualMenu" onClick={toggleShowContextualMenu} componentRef={stdBtnRef} />
+          <Button
+            content="Press for ContextualMenu"
+            onClick={toggleShowContextualMenu}
+            componentRef={stdBtnRef}
+            testID={CONTEXTUALMENU_TEST_COMPONENT}
+          />
         </View>
       </View>
 

package/src/FluentTester/TestComponents/MenuButton/consts.ts

@@ -1,9 +1,10 @@
-export const HOMEPAGE_MENU_BUTTON = 'Homepage_Menu_Button';
-export const MENU_BUTTON_TESTPAGE = 'Menu_Button_TestPage';
+export const HOMEPAGE_MENU_BUTTON = 'Homepage_MenuButton_Button';
+export const MENU_BUTTON_TESTPAGE = 'MenuButton_TestPage';
 
 /* E2E Testing Menu_Button 1 */
 export const MENU_BUTTON_TEST_COMPONENT = 'Menu_Button_Test_Component'; // A component on each specific test page
 export const MENU_BUTTON_ACCESSIBILITY_LABEL = 'E2E testing Menu_Button accessibility label';
+export const MENU_ITEM_1_COMPONENT = 'Menu_Item_1_Component'; // The first menu item component
 
 /* E2E Testing Menu_Button 2 */
 export const MENU_BUTTON_NO_A11Y_LABEL_COMPONENT = 'Menu_Button_No_A11y_label_Component';

package/src/FluentTester/TestComponents/MenuButton/testData.ts

@@ -3,6 +3,7 @@ import { MenuButtonItemProps } from '@fluentui/react-native';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 export const testImage = require('../Button/icon_24x24.png');
 import TestSvg from '../Button/test.svg';
+import { MENU_ITEM_1_COMPONENT } from './consts';
 
 const svgProps: SvgIconProps = {
   src: TestSvg,
@@ -14,6 +15,7 @@ export const menuItems: MenuButtonItemProps[] = [
     itemKey: '1',
     text: 'MenuItem 1',
     icon: testImage,
+    testID: MENU_ITEM_1_COMPONENT,
   },
   {
     itemKey: '2',

package/src/FluentTester/TestComponents/RadioGroup/RadioGroupE2ETest.tsx

@@ -6,10 +6,12 @@ import {
   RADIOGROUP_NO_A11Y_LABEL_COMPONENT,
   RADIOGROUP_TEST_COMPONENT_LABEL,
   RADIOGROUP_ACCESSIBILITY_LABEL,
-  RADIOBUTTON_TEST_COMPONENT,
-  RADIOBUTTON_ACCESSIBILITY_LABEL,
-  RADIOBUTTON_NO_A11Y_LABEL_COMPONENT,
-  RADIOBUTTON_TEST_COMPONENT_LABEL,
+  FIRST_RADIO_BUTTON,
+  SECOND_RADIO_BUTTON,
+  THIRD_RADIO_BUTTON,
+  FOURTH_RADIO_BUTTON,
+  FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL,
+  SECOND_RADIO_BUTTON_LABEL,
 } from './consts';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
@@ -23,18 +25,18 @@ export const E2ERadioGroupTest: React.FunctionComponent = () => {
           accessibilityLabel={RADIOGROUP_ACCESSIBILITY_LABEL}
           testID={RADIOGROUP_TEST_COMPONENT}
         >
-          <RadioButton content="Option A" buttonKey="A" />
           <RadioButton
-            content="Option B"
-            buttonKey="B"
-            testID={RADIOBUTTON_TEST_COMPONENT}
-            accessibilityLabel={RADIOBUTTON_ACCESSIBILITY_LABEL}
+            content="Option A"
+            buttonKey="A"
+            testID={FIRST_RADIO_BUTTON}
+            accessibilityLabel={FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL}
           />
-          <RadioButton content="Option C (disabled)" buttonKey="C" disabled={true} />
-          <RadioButton content="Option D" buttonKey="C" />
+          <RadioButton content={SECOND_RADIO_BUTTON_LABEL} buttonKey="B" testID={SECOND_RADIO_BUTTON} />
+          <RadioButton content="Option C (disabled)" buttonKey="C" disabled={true} testID={THIRD_RADIO_BUTTON} />
+          <RadioButton content="Option D" buttonKey="C" testID={FOURTH_RADIO_BUTTON} />
         </RadioGroup>
         <RadioGroup label={RADIOGROUP_TEST_COMPONENT_LABEL} testID={RADIOGROUP_NO_A11Y_LABEL_COMPONENT}>
-          <RadioButton content={RADIOBUTTON_TEST_COMPONENT_LABEL} buttonKey="W" testID={RADIOBUTTON_NO_A11Y_LABEL_COMPONENT} />
+          <RadioButton content="Option W" buttonKey="W" />
           <RadioButton content="Option X" buttonKey="X" />
           <RadioButton content="Option Y (disabled)" buttonKey="C" disabled={true} />
           <RadioButton content="Option Z" buttonKey="Z" />

package/src/FluentTester/TestComponents/RadioGroup/consts.ts

@@ -1,20 +1,30 @@
 export const HOMEPAGE_RADIOGROUP_BUTTON = 'Homepage_RadioGroup_Button';
 export const RADIOGROUP_TESTPAGE = 'RadioGroup_TestPage';
 
-/* E2E Testing RadioGroup 1 */
-export const RADIOGROUP_TEST_COMPONENT = 'RadioGroup_Test_Component'; // A component on each specific test page
+/********************************************************************/
+/********************* E2E Testing RadioGroup 1 *********************/
+/********************************************************************/
+export const RADIOGROUP_TEST_COMPONENT = 'RadioGroup_Test_Component';
 export const RADIOGROUP_ACCESSIBILITY_LABEL = 'E2E testing RadioGroup accessibility label';
 
-/* E2E Testing RadioGroup 2 */
-export const RADIOGROUP_NO_A11Y_LABEL_COMPONENT = 'RadioGroup_No_A11y_label_Component';
-export const RADIOGROUP_TEST_COMPONENT_LABEL = 'Test RadioGroup2 - No Accessibility Label'; // A component on each specific test page
+/* E2E Testing RadioButton 1 (1 of 4) */
+export const FIRST_RADIO_BUTTON = 'First_Radio_Button';
+export const FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL = 'E2E testing RadioButton accessibility label';
+
+/* E2E Testing RadioButton 1 (2 of 4) No accessibilityLabel */
+export const SECOND_RADIO_BUTTON = 'Second_Radio_Button';
+export const SECOND_RADIO_BUTTON_LABEL = 'Test RadioGroup2 - No Accessibility Label';
 
-/* E2E Testing RadioButton 1 */
-export const RADIOBUTTON_TEST_COMPONENT = 'RadioButton_Test_Component'; // A component on each specific test page
-export const RADIOBUTTON_ACCESSIBILITY_LABEL = 'E2E testing RadioButton accessibility label';
+/* E2E Testing RadioButton 1 (3 of 4) */
+export const THIRD_RADIO_BUTTON = 'Third_Radio_Button';
 
-/* E2E Testing RadioButton 2 */
-export const RADIOBUTTON_NO_A11Y_LABEL_COMPONENT = 'RadioButton_No_A11y_label_Component';
-export const RADIOBUTTON_TEST_COMPONENT_LABEL = 'Test RadioButton2 - No Accessibility Label'; // A component on each specific test page
+/* E2E Testing RadioButton 1 (4 of 4) */
+export const FOURTH_RADIO_BUTTON = 'Fourth_Radio_Button';
+
+/********************************************************************/
+/********************* E2E Testing RadioGroup 2 *********************/
+/********************************************************************/
+export const RADIOGROUP_NO_A11Y_LABEL_COMPONENT = 'RadioGroup_No_A11y_label_Component';
+export const RADIOGROUP_TEST_COMPONENT_LABEL = 'Test RadioGroup2 - No Accessibility Label'; // A component on each specific test page
 
 export const RADIOGROUP_ON_PRESS = 'RadioGroup_On_Press'; // For testing the press functionality on a button

package/src/FluentTester/TestComponents/Tabs/TabsE2ETest.tsx

@@ -5,12 +5,16 @@ import { stackStyle } from '../Common/styles';
 import {
   TABS_TEST_COMPONENT,
   TABS_ACCESSIBILITY_LABEL,
-  TABS_ITEM_TEST_COMPONENT,
-  TABS_ITEM_ACCESSIBILITY_LABEL,
-  TABS_ITEM_NO_A11Y_LABEL_COMPONENT,
   TABS_TEST_COMPONENT_LABEL,
-  TABS_ITEM_TEST_COMPONENT_LABEL,
   TABS_NO_A11Y_LABEL_COMPONENT,
+  SECOND_TABS_ITEM_CONTENT,
+  FIRST_TABS_ITEM,
+  SECOND_TABS_ITEM,
+  THIRD_TABS_ITEM,
+  FIRST_TABS_ITEM_ACCESSIBILITY_LABEL,
+  THIRD_TABS_ITEM_LABEL,
+  THIRD_TABS_ITEM_CONTENT,
+  FIRST_TABS_ITEM_CONTENT,
 } from './consts';
 
 export const E2ETabsTest: React.FunctionComponent = () => {
@@ -18,20 +22,20 @@ export const E2ETabsTest: React.FunctionComponent = () => {
     <View>
       <View style={stackStyle}>
         <Tabs label="Tabs" testID={TABS_TEST_COMPONENT} accessibilityLabel={TABS_ACCESSIBILITY_LABEL}>
-          <TabsItem headerText="Home" itemKey="A" testID={TABS_ITEM_TEST_COMPONENT} accessibilityLabel={TABS_ITEM_ACCESSIBILITY_LABEL}>
-            <Text>Tabs #1</Text>
+          <TabsItem headerText="Home" itemKey="A" testID={FIRST_TABS_ITEM} accessibilityLabel={FIRST_TABS_ITEM_ACCESSIBILITY_LABEL}>
+            <Text testID={FIRST_TABS_ITEM_CONTENT}>Tabs #1</Text>
           </TabsItem>
-          <TabsItem headerText="Files" itemKey="B">
-            <Text>Tabs #2</Text>
+          <TabsItem headerText="Files" itemKey="B" testID={SECOND_TABS_ITEM}>
+            <Text testID={SECOND_TABS_ITEM_CONTENT}>Tabs #2</Text>
           </TabsItem>
-          <TabsItem headerText="Settings" itemKey="C">
-            <Text>Tabs #3</Text>
+          <TabsItem headerText={THIRD_TABS_ITEM_LABEL} itemKey="C" testID={THIRD_TABS_ITEM}>
+            <Text testID={THIRD_TABS_ITEM_CONTENT}>Tabs #3</Text>
           </TabsItem>
         </Tabs>
       </View>
       <View style={stackStyle}>
         <Tabs label={TABS_TEST_COMPONENT_LABEL} testID={TABS_NO_A11Y_LABEL_COMPONENT}>
-          <TabsItem headerText={TABS_ITEM_TEST_COMPONENT_LABEL} itemKey="A" testID={TABS_ITEM_NO_A11Y_LABEL_COMPONENT}>
+          <TabsItem headerText="Home" itemKey="A">
             <Text>Tabs #1</Text>
           </TabsItem>
           <TabsItem headerText="Files" itemKey="B">

package/src/FluentTester/TestComponents/Tabs/consts.ts

@@ -1,18 +1,24 @@
 export const HOMEPAGE_TABS_BUTTON = 'Homepage_Tabs_Button';
 export const TABS_TESTPAGE = 'Tabs_TestPage';
 
-/* E2E Testing Tabs 1 */
-export const TABS_TEST_COMPONENT = 'Tabs_Test_Component'; // A component on each specific test page
+/* E2E Testing Tabs 1. This Tabs group has THREE Tab Items, all listed below. */
+export const TABS_TEST_COMPONENT = 'Tabs_Test_Component';
 export const TABS_ACCESSIBILITY_LABEL = 'E2E testing Tabs accessibility label';
 
+/* E2E Testing TabItem 1 (1 of 3) */
+export const FIRST_TABS_ITEM = 'First_Tabs_Item';
+export const FIRST_TABS_ITEM_ACCESSIBILITY_LABEL = 'E2E testing TabItem accessibility label';
+export const FIRST_TABS_ITEM_CONTENT = 'Tabs #1 content'; // Content to be shown when TabItem is clicked
+
+/* E2E Testing TabItem 2 (2 of 3) */
+export const SECOND_TABS_ITEM = 'Second_Tabs_Item';
+export const SECOND_TABS_ITEM_CONTENT = 'Tabs #2 content'; // Content to be shown when TabItem is clicked
+
+/* E2E Testing TabItem 3 (3 of 3) This is used to test the case of not setting accessibilityLabel */
+export const THIRD_TABS_ITEM = 'Third_Tabs_Item';
+export const THIRD_TABS_ITEM_LABEL = 'Test TabItem2 - No Accessibility Label';
+export const THIRD_TABS_ITEM_CONTENT = 'Tabs #3 content'; // Content to be shown when TabItem is clicked
+
 /* E2E Testing Tabs 2 */
 export const TABS_NO_A11Y_LABEL_COMPONENT = 'Tabs_No_A11y_label_Component';
 export const TABS_TEST_COMPONENT_LABEL = 'Test Tabs2 - No Accessibility Label'; // A component on each specific test page
-
-/* E2E Testing TabItem 1 */
-export const TABS_ITEM_TEST_COMPONENT = 'TabItem_Test_Component'; // A component on each specific test page
-export const TABS_ITEM_ACCESSIBILITY_LABEL = 'E2E testing TabItem accessibility label';
-
-/* E2E Testing TabItem 2 */
-export const TABS_ITEM_NO_A11Y_LABEL_COMPONENT = 'TabItem_No_A11y_label_Component';
-export const TABS_ITEM_TEST_COMPONENT_LABEL = 'Test TabItem2 - No Accessibility Label'; // A component on each specific test page

package/src/FluentTester/theme/CustomThemes.ts

@@ -42,7 +42,7 @@ export class TesterThemeReference extends ThemeReference {
     super(
       baseTheme,
       (parent) => applyTheme(parent, this._themeName, this.options.appearance),
-      () => applyBrand(this._themeName, this._brand),
+      (parent) => applyBrand(parent, this._themeName, this._brand),
     );
     this.baseTheme = baseTheme;
     this.options = themeOptions;

package/src/FluentTester/theme/applyBrand.ts

@@ -1,4 +1,4 @@
-import { PartialTheme } from '@fluentui-react-native/theme-types';
+import { PartialTheme, Theme } from '@fluentui-react-native/theme-types';
 import { getCurrentBrandAliasTokens } from '@fluentui-react-native/win32-theme';
 
 export type OfficeBrand = 'Default' | 'Office' | 'Word' | 'Excel' | 'Powerpoint' | 'Outlook';
@@ -123,7 +123,11 @@ const brandColors: BrandRamps = {
 
 export const brandOptions = Object.keys(brandColors).map((brand) => ({ label: brand, value: brand }));
 
-export const applyBrand = (themeName: string, currentBrand: string): PartialTheme => {
+export const applyBrand = (parent: Theme, themeName: string, currentBrand: string): PartialTheme => {
+  if (parent.name === 'HighContrast') {
+    return {};
+  }
+
   const ramp = brandColors[currentBrand];
   return ramp
     ? {