@fluentui-react-native/tester 0.51.4 → 0.52.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
     ? {