@fluentui-react-native/tester 0.47.2 → 0.49.0

package/src/FluentTester/TestComponents/MenuButtonExperimental/StandardMenuButtonTest.tsx

@@ -79,7 +79,7 @@ export const StandardMenuButton: React.FunctionComponent = () => {
             <Separator vertical />
             <View style={columnStyle}>
               <MenuButton
-                primary
+                appearance="primary"
                 content="Primary MenuButton"
                 menuItems={menuItems}
                 onItemClick={onItemClick}
@@ -87,7 +87,7 @@ export const StandardMenuButton: React.FunctionComponent = () => {
               />
               <Text>Primary MenuButton with icon</Text>
               <MenuButton
-                primary
+                appearance="primary"
                 icon={iconToShow}
                 content="Primary MenuButton"
                 menuItems={menuItems}
@@ -95,9 +95,15 @@ export const StandardMenuButton: React.FunctionComponent = () => {
                 contextualMenu={contextualMenuProps}
               />
               <Text>Primary MenuButton with only icon</Text>
-              <MenuButton primary icon={iconToShow} menuItems={menuItems} onItemClick={onItemClick} contextualMenu={contextualMenuProps} />
+              <MenuButton
+                appearance="primary"
+                icon={iconToShow}
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+              />
               <Text>Primary Disabled MenuButton</Text>
-              <MenuButton primary disabled content="Disabled Primary MenuButton" menuItems={menuItems} />
+              <MenuButton appearance="primary" disabled content="Disabled Primary MenuButton" menuItems={menuItems} />
             </View>
           </View>
         </View>

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

@@ -1,2 +1,10 @@
 export const HOMEPAGE_PERSONA_BUTTON = 'Homepage_Persona_Button';
 export const PERSONA_TESTPAGE = 'Persona_TestPage';
+
+/* E2E Testing Persona 1 */
+export const PERSONA_TEST_COMPONENT = 'Persona_Test_Component'; // A component on each specific test page
+export const PERSONA_ACCESSIBILITY_LABEL = 'E2E testing Persona accessibility label';
+
+/* E2E Testing Persona 2 */
+export const PERSONA_NO_A11Y_LABEL_COMPONENT = 'Persona_No_A11y_label_Component';
+export const PERSONA_TEST_COMPONENT_LABEL = 'Test Persona2 - No Accessibility Label'; // A component on each specific test page

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

@@ -1,2 +1,10 @@
 export const HOMEPAGE_PERSONACOIN_BUTTON = 'Homepage_PersonaCoin_Button';
 export const PERSONACOIN_TESTPAGE = 'PersonaCoin_TestPage';
+
+/* E2E Testing PersonaCoin 1 */
+export const PERSONACOIN_TEST_COMPONENT = 'PersonaCoin_Test_Component'; // A component on each specific test page
+export const PERSONACOIN_ACCESSIBILITY_LABEL = 'E2E testing PersonaCoin accessibility label';
+
+/* E2E Testing PersonaCoin 2 */
+export const PERSONACOIN_NO_A11Y_LABEL_COMPONENT = 'PersonaCoin_No_A11y_label_Component';
+export const PERSONACOIN_TEST_COMPONENT_LABEL = 'Test PersonaCoin2 - No Accessibility Label'; // A component on each specific test page

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

@@ -1,2 +1,10 @@
 export const HOMEPAGE_PRESSABLE_BUTTON = 'Homepage_Pressable_Button';
 export const PRESSABLE_TESTPAGE = 'Pressable_TestPage';
+
+/* E2E Testing Pressable 1 */
+export const PRESSABLE_TEST_COMPONENT = 'Pressable_Test_Component'; // A component on each specific test page
+export const PRESSABLE_ACCESSIBILITY_LABEL = 'E2E testing Pressable accessibility label';
+
+/* E2E Testing Pressable 2 */
+export const PRESSABLE_NO_A11Y_LABEL_COMPONENT = 'Pressable_No_A11y_label_Component';
+export const PRESSABLE_TEST_COMPONENT_LABEL = 'Test Pressable2 - No Accessibility Label'; // A component on each specific test page

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { RadioButton, RadioGroup } from '@fluentui/react-native';
+import {
+  RADIOGROUP_TEST_COMPONENT,
+  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,
+} from './consts';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+
+export const E2ERadioGroupTest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle}>
+        <RadioGroup
+          label="RadioGroup for E2E Testing - Ally Label Set"
+          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}
+          />
+          <RadioButton content="Option C (disabled)" buttonKey="C" disabled={true} />
+          <RadioButton content="Option D" buttonKey="C" />
+        </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 X" buttonKey="X" />
+          <RadioButton content="Option Y (disabled)" buttonKey="C" disabled={true} />
+          <RadioButton content="Option Z" buttonKey="Z" />
+        </RadioGroup>
+      </Stack>
+    </View>
+  );
+};

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

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import { RadioButton, RadioGroup, Separator } from '@fluentui/react-native';
 import { RADIOGROUP_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { E2ERadioGroupTest } from './RadioGroupE2ETest';
 
 const basicRadioGroup: React.FunctionComponent = () => {
   // Client's example onChange function
@@ -57,6 +58,10 @@ const radioGroupSections: TestSection[] = [
     testID: RADIOGROUP_TESTPAGE,
     component: basicRadioGroup,
   },
+  {
+    name: 'RadioGroup for E2E Testing',
+    component: E2ERadioGroupTest,
+  },
 ];
 
 export const RadioGroupTest: React.FunctionComponent = () => {

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

@@ -1,2 +1,20 @@
 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
+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 */
+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 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
+
+export const RADIOGROUP_ON_PRESS = 'RadioGroup_On_Press'; // For testing the press functionality on a button

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

@@ -1,2 +1,8 @@
 export const HOMEPAGE_SEPARATOR_BUTTON = 'Homepage_Separator_Button';
 export const SEPARATOR_TESTPAGE = 'Separator_TestPage';
+
+/* E2E Testing Separator 1 */
+export const SEPARATOR_TEST_COMPONENT = 'Separator_Test_Component'; // A component on each specific test page
+
+/* E2E Testing Separator 2 */
+export const SEPARATOR_SECOND_TEST_COMPONENT = 'Separator_Second_Test_Component';

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

@@ -1,2 +1,10 @@
 export const HOMEPAGE_SVG_BUTTON = 'Homepage_Svg_Button';
 export const SVG_TESTPAGE = 'Svg_TestPage';
+
+/* E2E Testing Svg 1 */
+export const SVG_TEST_COMPONENT = 'Svg_Test_Component'; // A component on each specific test page
+export const SVG_ACCESSIBILITY_LABEL = 'E2E testing Svg accessibility label';
+
+/* E2E Testing Svg 2 */
+export const SVG_NO_A11Y_LABEL_COMPONENT = 'Svg_No_A11y_label_Component';
+export const SVG_TEST_COMPONENT_LABEL = 'Test Svg2 - No Accessibility Label'; // A component on each specific test page

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Tabs, TabsItem, Text } from '@fluentui/react-native';
+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,
+} from './consts';
+
+export const E2ETabsTest: React.FunctionComponent = () => {
+  return (
+    <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>
+          <TabsItem headerText="Files" itemKey="B">
+            <Text>Tabs #2</Text>
+          </TabsItem>
+          <TabsItem headerText="Settings" itemKey="C">
+            <Text>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}>
+            <Text>Tabs #1</Text>
+          </TabsItem>
+          <TabsItem headerText="Files" itemKey="B">
+            <Text>Tabs #2</Text>
+          </TabsItem>
+          <TabsItem headerText="Settings" itemKey="C">
+            <Text>Tabs #3</Text>
+          </TabsItem>
+        </Tabs>
+      </View>
+    </View>
+  );
+};

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

@@ -4,6 +4,7 @@ import { Tabs, TabsItem, Text, Button } from '@fluentui/react-native';
 import { stackStyle } from '../Common/styles';
 import { TABS_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { E2ETabsTest } from './TabsE2ETest';
 import TestSvg from './test.svg';
 
 const tabs: React.FunctionComponent = () => {
@@ -270,6 +271,10 @@ const tabsSections: TestSection[] = [
     name: 'More Flexibility',
     component: tabsWithFlexibility,
   },
+  {
+    name: 'E2E Tabs Test',
+    component: E2ETabsTest,
+  },
 ];
 
 if (Platform.OS !== 'windows') {

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

@@ -1,2 +1,18 @@
 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
+export const TABS_ACCESSIBILITY_LABEL = 'E2E testing Tabs accessibility label';
+
+/* 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/TestComponents/TabsExperimental/TabsExperimentalE2ETest.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Text } from '@fluentui-react-native/experimental-text';
+import { Tabs, TabsItem } from '@fluentui-react-native/experimental-tabs';
+import { stackStyle } from '../Common/styles';
+import {
+  EXPERIMENTAL_TABS_TEST_COMPONENT,
+  EXPERIMENTAL_TABS_ACCESSIBILITY_LABEL,
+  EXPERIMENTAL_TABS_NO_A11Y_LABEL_COMPONENT,
+  EXPERIMENTAL_TABS_TEST_COMPONENT_LABEL,
+  EXPERIMENTAL_TABS_ITEM_TEST_COMPONENT,
+  EXPERIMENTAL_TABS_ITEM_ACCESSIBILITY_LABEL,
+  EXPERIMENTAL_TABS_ITEM_NO_A11Y_LABEL_COMPONENT,
+  EXPERIMENTAL_TABS_ITEM_TEST_COMPONENT_LABEL,
+} from './consts';
+
+export const E2ETestExperimentalTabs: React.FunctionComponent = () => {
+  return (
+    <View>
+      <View style={stackStyle}>
+        <Tabs label="Tabs" testID={EXPERIMENTAL_TABS_TEST_COMPONENT} accessibilityLabel={EXPERIMENTAL_TABS_ACCESSIBILITY_LABEL}>
+          <TabsItem
+            headerText="Home"
+            itemKey="A"
+            testID={EXPERIMENTAL_TABS_ITEM_TEST_COMPONENT}
+            accessibilityLabel={EXPERIMENTAL_TABS_ITEM_ACCESSIBILITY_LABEL}
+          >
+            <Text>Tabs #1</Text>
+          </TabsItem>
+          <TabsItem headerText="Files" itemKey="B">
+            <Text>Tabs #2</Text>
+          </TabsItem>
+          <TabsItem headerText="Settings" itemKey="C">
+            <Text>Tabs #3</Text>
+          </TabsItem>
+        </Tabs>
+      </View>
+      <View style={stackStyle}>
+        <Tabs label={EXPERIMENTAL_TABS_TEST_COMPONENT_LABEL} testID={EXPERIMENTAL_TABS_NO_A11Y_LABEL_COMPONENT}>
+          <TabsItem
+            headerText={EXPERIMENTAL_TABS_ITEM_TEST_COMPONENT_LABEL}
+            itemKey="A"
+            testID={EXPERIMENTAL_TABS_ITEM_NO_A11Y_LABEL_COMPONENT}
+          >
+            <Text>Tabs #1</Text>
+          </TabsItem>
+          <TabsItem headerText="Files" itemKey="B">
+            <Text>Tabs #2</Text>
+          </TabsItem>
+          <TabsItem headerText="Settings" itemKey="C">
+            <Text>Tabs #3</Text>
+          </TabsItem>
+        </Tabs>
+      </View>
+    </View>
+  );
+};

package/src/FluentTester/TestComponents/TabsExperimental/TabsTest.tsx

@@ -8,6 +8,7 @@ import { EXPERIMENTAL_TABS_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 import TestSvg from './test.svg';
+import { E2ETestExperimentalTabs } from './TabsExperimentalE2ETest';
 
 const tabs: React.FunctionComponent = () => {
   return (
@@ -183,7 +184,7 @@ const tabsSettingSelectedKey: React.FunctionComponent = () => {
           <Text>Tabs #3</Text>
         </TabsItem>
       </Tabs>
-      <Button content="View Next Tab" onClick={goToNextTab} />
+      <Button onClick={goToNextTab}>View Next Tab</Button>
     </View>
   );
 };
@@ -215,7 +216,7 @@ const tabsWithFlexibility: React.FunctionComponent = () => {
           <Text>Tabs #3</Text>
         </TabsItem>
       </Tabs>
-      <Button content="View Home Tab" onClick={goHomeTab} />
+      <Button onClick={goHomeTab}>View Home Tab</Button>
     </View>
   );
 };
@@ -250,6 +251,10 @@ const tabsSections: TestSection[] = [
     name: 'More Flexibility',
     component: tabsWithFlexibility,
   },
+  {
+    name: 'E2E Testing Experimental Tabs',
+    component: E2ETestExperimentalTabs,
+  },
 ];
 
 if (Platform.OS !== 'windows') {

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

@@ -1,2 +1,18 @@
 export const HOMEPAGE_EXPERIMENTAL_TABS_BUTTON = 'HOMEPAGE_EXPERIMENTAL_TABS_BUTTON';
 export const EXPERIMENTAL_TABS_TESTPAGE = 'Experimental_Tabs_TestPage';
+
+/* E2E Testing Experimental Tabs 1 */
+export const EXPERIMENTAL_TABS_TEST_COMPONENT = 'Experimental_Tabs_Test_Component'; // A component on each specific test page
+export const EXPERIMENTAL_TABS_ACCESSIBILITY_LABEL = 'E2E testing Experimental_Tabs accessibility label';
+
+/* E2E Testing Experimental Tabs 2 */
+export const EXPERIMENTAL_TABS_NO_A11Y_LABEL_COMPONENT = 'Experimental_Tabs_No_A11y_label_Component';
+export const EXPERIMENTAL_TABS_TEST_COMPONENT_LABEL = 'Experimental_Test Tabs2 - No Accessibility Label'; // A component on each specific test page
+
+/* E2E Testing Experimental TabItem 1 */
+export const EXPERIMENTAL_TABS_ITEM_TEST_COMPONENT = 'Experimental_TabItem_Test_Component'; // A component on each specific test page
+export const EXPERIMENTAL_TABS_ITEM_ACCESSIBILITY_LABEL = 'E2E testing Experimental_TabItem accessibility label';
+
+/* E2E Testing Experimental TabItem 2 */
+export const EXPERIMENTAL_TABS_ITEM_NO_A11Y_LABEL_COMPONENT = 'Experimental_TabItem_No_A11y_label_Component';
+export const EXPERIMENTAL_TABS_ITEM_TEST_COMPONENT_LABEL = 'Test Experimental_TabItem2 - No Accessibility Label'; // A component on each specific test page

package/src/FluentTester/TestComponents/Test.tsx

@@ -59,7 +59,7 @@ const isMobile = Platform.OS == 'android' || (Platform.OS == 'ios' && !Platform.
 
 export const Test = (props: TestProps): React.ReactElement<Record<string, never>> => {
   return (
-    <View>
+    <View testID="ScrollViewAreaForComponents">
       <Text style={[styles.name]} variant="heroSemibold">
         {props.name}
       </Text>

package/src/FluentTester/TestComponents/Text/TextE2ETest.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Text } from '@fluentui/react-native';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import { TEXT_TEST_COMPONENT, TEXT_ACCESSIBILITY_LABEL, TEXT_NO_A11Y_LABEL_COMPONENT, TEXT_TEST_COMPONENT_LABEL } from './consts';
+
+export const E2ETextTest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle} gap={5}>
+        <Text variant="captionStandard" testID={TEXT_TEST_COMPONENT} accessibilityLabel={TEXT_ACCESSIBILITY_LABEL}>
+          Testing Text Component - AccessibilityLabel Set
+        </Text>
+        <Text variant="captionStandard" testID={TEXT_NO_A11Y_LABEL_COMPONENT}>
+          {TEXT_TEST_COMPONENT_LABEL}
+        </Text>
+      </Stack>
+    </View>
+  );
+};

package/src/FluentTester/TestComponents/Text/TextTest.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { StandardUsage } from './StandardUsage';
 import { CustomizeUsage } from './CustomizeUsage';
 import { PressableUsage } from './PressableUsage';
+import { E2ETextTest } from './TextE2ETest';
 import { Test, TestSection, PlatformStatus } from '../Test';
 
 const textSections: TestSection[] = [
@@ -17,6 +18,10 @@ const textSections: TestSection[] = [
     name: 'Pressable Usage',
     component: PressableUsage,
   },
+  {
+    name: 'E2E Text Tests',
+    component: E2ETextTest,
+  },
 ];
 
 export const TextTest: React.FunctionComponent = () => {

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

@@ -1,2 +1,10 @@
 export const HOMEPAGE_TEXT_BUTTON = 'Homepage_Text_Button';
 export const TEXT_TESTPAGE = 'Text_TestPage';
+
+/* E2E Testing Text 1 */
+export const TEXT_TEST_COMPONENT = 'Text_Test_Component'; // A component on each specific test page
+export const TEXT_ACCESSIBILITY_LABEL = 'E2E testing Text_Test_Component accessibility label';
+
+/* E2E Testing Text 2 */
+export const TEXT_NO_A11Y_LABEL_COMPONENT = 'Text_No_A11y_label_Component';
+export const TEXT_TEST_COMPONENT_LABEL = 'Test Text2 - No Accessibility Label'; // A component on each specific test page

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

@@ -1,2 +1,4 @@
 export const HOMEPAGE_THEME_BUTTON = 'Homepage_Theme_Button';
 export const THEME_TESTPAGE = 'Theme_TestPage';
+
+export const THEME_TEST_COMPONENT = 'Theme_Test_Component'; // A component on each specific test page

package/src/FluentTester/testPages.android.ts

@@ -1,8 +1,10 @@
 import { TestDescription } from './TestComponents';
+import { JSAvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
 import { ContextualMenuTest, HOMEPAGE_CONTEXTUALMENU_BUTTON } from './TestComponents/ContextualMenu';
+import { DrawerTest, HOMEPAGE_DRAWER_BUTTON } from './TestComponents/Drawer';
 import { FocusTrapTest, HOMEPAGE_FOCUSTRAPZONE_BUTTON } from './TestComponents/FocusTrapZone';
 import { HOMEPAGE_LINK_BUTTON, LinkTest } from './TestComponents/Link';
 import { HOMEPAGE_PERSONA_BUTTON, PersonaTest } from './TestComponents/Persona';
@@ -27,6 +29,11 @@ export const tests: TestDescription[] = [
     component: ActivityIndicatorTest,
     testPage: HOMEPAGE_ACTIVITYINDICATOR_BUTTON,
   },
+  {
+    name: 'Avatar Test',
+    component: JSAvatarTest,
+    testPage: HOMEPAGE_AVATAR_BUTTON,
+  },
   {
     name: 'Button Test',
     component: ButtonTest,
@@ -47,6 +54,11 @@ export const tests: TestDescription[] = [
     component: ContextualMenuTest,
     testPage: HOMEPAGE_CONTEXTUALMENU_BUTTON,
   },
+  {
+    name: 'Drawer Test',
+    component: DrawerTest,
+    testPage: HOMEPAGE_DRAWER_BUTTON,
+  },
   {
     name: 'Focus Trap Zone Test',
     component: FocusTrapTest,

package/src/FluentTester/testPages.macos.ts

@@ -24,8 +24,14 @@ import { HOMEPAGE_TABS_BUTTON, TabsTest } from './TestComponents/Tabs';
 import { HOMEPAGE_EXPERIMENTAL_TABS_BUTTON, ExperimentalTabsTest } from './TestComponents/TabsExperimental';
 import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON, TextExperimentalTest } from './TestComponents/TextExperimental';
 import { ExperimentalMenuButtonTest, HOMEPAGE_MENU_BUTTON_EXPERIMENTAL } from './TestComponents/MenuButtonExperimental';
+import { ActivityIndicatorTest, HOMEPAGE_ACTIVITYINDICATOR_BUTTON } from './TestComponents/ActivityIndicator';
 
 export const tests: TestDescription[] = [
+  {
+    name: 'ActivityIndicator Test',
+    component: ActivityIndicatorTest,
+    testPage: HOMEPAGE_ACTIVITYINDICATOR_BUTTON,
+  },
   {
     name: 'Avatar Test',
     component: AvatarTest,

package/src/FluentTester/testPages.ts

@@ -27,6 +27,11 @@ import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON, TextExperimentalTest } from './TestC
 import { ExperimentalMenuButtonTest, HOMEPAGE_MENU_BUTTON_EXPERIMENTAL } from './TestComponents/MenuButtonExperimental';
 
 export const tests: TestDescription[] = [
+  {
+    name: 'ActivityIndicator Test',
+    component: ActivityIndicatorTest,
+    testPage: HOMEPAGE_ACTIVITYINDICATOR_BUTTON,
+  },
   {
     name: 'Avatar Test',
     component: AvatarTest,

package/src/FluentTester/testPages.web.ts

@@ -1,4 +1,5 @@
 import { TestDescription } from './TestComponents';
+import { JSAvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
 import { HOMEPAGE_LINK_BUTTON, LinkTest } from './TestComponents/Link';
@@ -11,8 +12,19 @@ import { HOMEPAGE_TEXT_BUTTON, TextTest } from './TestComponents/Text';
 import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON, TextExperimentalTest } from './TestComponents/TextExperimental';
 import { HOMEPAGE_THEME_BUTTON, ThemeTest } from './TestComponents/Theme';
 import { HOMEPAGE_TOKEN_BUTTON, TokenTest } from './TestComponents/Tokens';
+import { ActivityIndicatorTest, HOMEPAGE_ACTIVITYINDICATOR_BUTTON } from './TestComponents/ActivityIndicator';
 
 export const tests: TestDescription[] = [
+  {
+    name: 'ActivityIndicator Test',
+    component: ActivityIndicatorTest,
+    testPage: HOMEPAGE_ACTIVITYINDICATOR_BUTTON,
+  },
+  {
+    name: 'Avatar Test',
+    component: JSAvatarTest,
+    testPage: HOMEPAGE_AVATAR_BUTTON,
+  },
   {
     name: 'Button Test',
     component: ButtonTest,

package/src/FluentTester/testPages.win32.ts

@@ -1,3 +1,4 @@
+import { JSAvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { ExperimentalButtonTest, HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from './TestComponents/ButtonExperimental';
 import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
@@ -24,8 +25,19 @@ import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON, TextExperimentalTest } from './TestC
 import { TestDescription } from './TestComponents';
 import { HOMEPAGE_CHECKBOX_CHECKBOXEXPERIMENTAL, ExperimentalCheckboxTest } from './TestComponents/CheckboxExperimental';
 import { ExperimentalMenuButtonTest, HOMEPAGE_MENU_BUTTON_EXPERIMENTAL } from './TestComponents/MenuButtonExperimental';
+import { ActivityIndicatorTest, HOMEPAGE_ACTIVITYINDICATOR_BUTTON } from './TestComponents/ActivityIndicator';
 
 export const tests: TestDescription[] = [
+  {
+    name: 'ActivityIndicator Test',
+    component: ActivityIndicatorTest,
+    testPage: HOMEPAGE_ACTIVITYINDICATOR_BUTTON,
+  },
+  {
+    name: 'Avatar Test',
+    component: JSAvatarTest,
+    testPage: HOMEPAGE_AVATAR_BUTTON,
+  },
   {
     name: 'Button Test',
     component: ButtonTest,

package/src/FluentTester/testPages.windows.ts

@@ -15,8 +15,14 @@ import { HOMEPAGE_TOKEN_BUTTON, TokenTest } from './TestComponents/Tokens';
 import { ExpanderTest, HOMEPAGE_EXPANDER_BUTTON } from './TestComponents/Expander';
 import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON, TextExperimentalTest } from './TestComponents/TextExperimental';
 import { ExperimentalButtonTest, HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from './TestComponents/ButtonExperimental';
+import { ActivityIndicatorTest, HOMEPAGE_ACTIVITYINDICATOR_BUTTON } from './TestComponents/ActivityIndicator';
 
 export const tests = [
+  {
+    name: 'ActivityIndicator Test',
+    component: ActivityIndicatorTest,
+    testPage: HOMEPAGE_ACTIVITYINDICATOR_BUTTON,
+  },
   {
     name: 'Button Test',
     component: ButtonTest,

package/src/FluentTester/theme/ThemePickers.ios.tsx

@@ -63,7 +63,7 @@ export const ThemePickers: React.FunctionComponent = () => {
         }}
         actions={themeMenuOptions}
       >
-        <Button subtle content="Theme" />
+        <Button appearance="subtle">Theme</Button>
       </MenuView>
       <MenuView
         title="Brand"
@@ -72,7 +72,7 @@ export const ThemePickers: React.FunctionComponent = () => {
         }}
         actions={brandMenuOptions}
       >
-        <Button subtle content="Brand" />
+        <Button appearance="subtle">Brand</Button>
       </MenuView>
     </View>
   );

package/lib/E2E/BootPage/pages/BootTestPage.win.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BootTestPage.win.d.ts","sourceRoot":"","sources":["../../../../src/E2E/BootPage/pages/BootTestPage.win.ts"],"names":[],"mappings":";AAmBA,OAAO,EAAM,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAErD,cAAM,YAAa,SAAQ,QAAQ;IACjC,sBAAsB;IAItB,uBAAuB;IAIvB,wBAAwB;IAIxB,8BAA8B;IAI9B,6BAA6B;IAI7B,yBAAyB;IAIzB,oBAAoB;IAIpB,oBAAoB;IAIpB,uBAAuB;IAIvB,2BAA2B;IAI3B,yBAAyB;IAIzB,0BAA0B;IAI1B,yBAAyB;IAIzB,mBAAmB;IAInB,oBAAoB;IAIpB,oBAAoB;IAIpB,qBAAqB;IAIrB,gCAAgC;IAQhC,IAAI,SAAS,wBAEZ;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,oBAAoB,GAE/B;CACF;;AAED,wBAAkC"}