@fluentui-react-native/tester 0.133.1 → 0.134.1

package/lib-commonjs/fluent-tester/src/theme/ThemePickers.android.js

@@ -7,7 +7,6 @@ var react_native_1 = require("react-native");
 var text_1 = require("@fluentui-react-native/text");
 var CustomThemes_1 = require("./CustomThemes");
 var applyTheme_1 = require("./applyTheme");
-var applyBrand_1 = require("./applyBrand");
 var framework_1 = require("@fluentui-react-native/framework");
 var themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
 var picker_1 = require("@react-native-picker/picker");
@@ -15,15 +14,15 @@ var getThemedDropdownStyles = (0, themed_stylesheet_1.themedStyleSheet)(function
     return {
         pickerRoot: {
             flexDirection: 'row',
+            width: '100%',
         },
         picker: {
             flexDirection: 'column',
             alignItems: 'center',
+            width: '50%',
             padding: 4,
         },
         dropdown: {
-            height: 30,
-            width: 120,
             fontSize: 12,
             color: t.colors.bodyText,
         },
@@ -31,14 +30,12 @@ var getThemedDropdownStyles = (0, themed_stylesheet_1.themedStyleSheet)(function
             borderStyle: 'solid',
             borderColor: t.colors.disabledBodyText,
             borderWidth: 1,
+            width: '100%',
         },
     };
 });
 var PickerLabel = text_1.TextV1.customize({ variant: 'subheaderSemibold' });
 var ThemePickers = function () {
-    var onBrandChange = React.useCallback(function (newBrand) {
-        CustomThemes_1.testerTheme.brand = newBrand;
-    }, []);
     var onThemeSelected = React.useCallback(function (newTheme) {
         CustomThemes_1.testerTheme.themeName = newTheme;
     }, []);
@@ -62,10 +59,7 @@ var ThemePickers = function () {
             React.createElement(Dropdown, { initial: CustomThemes_1.testerTheme.themeName, onValueChange: onThemeSelected, options: applyTheme_1.themeChoices })),
         React.createElement(react_native_1.View, { style: themedPickerStyles.picker },
             React.createElement(PickerLabel, null, "Light/Dark: "),
-            React.createElement(Dropdown, { initial: CustomThemes_1.testerTheme.appearance, onValueChange: onAppearanceChange, options: CustomThemes_1.lightnessOptions })),
-        React.createElement(react_native_1.View, { style: themedPickerStyles.picker },
-            React.createElement(PickerLabel, null, "Brand: "),
-            React.createElement(Dropdown, { initial: CustomThemes_1.testerTheme.brand, onValueChange: onBrandChange, options: applyBrand_1.brandOptions }))));
+            React.createElement(Dropdown, { initial: CustomThemes_1.testerTheme.appearance, onValueChange: onAppearanceChange, options: CustomThemes_1.lightnessOptions }))));
 };
 exports.ThemePickers = ThemePickers;
 //# sourceMappingURL=ThemePickers.android.js.map

package/lib-commonjs/fluent-tester/src/theme/ThemePickers.android.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemePickers.android.js","sourceRoot":"","sources":["../../../../src/theme/ThemePickers.android.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ThemePickers.android.js","sourceRoot":"","sources":["../../../../src/theme/ThemePickers.android.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.133.1",
+  "version": "0.134.1",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -35,34 +35,34 @@
   "dependencies": {
     "@fluentui-react-native/android-theme": ">=0.16.6 <1.0.0",
     "@fluentui-react-native/apple-theme": ">=0.18.11 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.6.5",
-    "@fluentui-react-native/badge": ">=0.4.26 <1.0.0",
-    "@fluentui-react-native/button": ">=0.32.31 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.6.6",
+    "@fluentui-react-native/badge": ">=0.4.27 <1.0.0",
+    "@fluentui-react-native/button": ">=0.32.32 <1.0.0",
     "@fluentui-react-native/default-theme": ">=0.17.1 <1.0.0",
     "@fluentui-react-native/divider": "^0.2.0",
-    "@fluentui-react-native/dropdown": ">=0.7.28 <1.0.0",
+    "@fluentui-react-native/dropdown": ">=0.7.29 <1.0.0",
     "@fluentui-react-native/experimental-activity-indicator": ">=0.7.18 <1.0.0",
     "@fluentui-react-native/experimental-appearance-additions": "^0.3.1",
     "@fluentui-react-native/experimental-avatar": ">=0.17.15 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.16.89",
-    "@fluentui-react-native/experimental-checkbox": "0.13.37",
+    "@fluentui-react-native/experimental-button": "0.16.90",
+    "@fluentui-react-native/experimental-checkbox": "0.13.38",
     "@fluentui-react-native/experimental-expander": "0.5.18",
-    "@fluentui-react-native/experimental-menu-button": ">=0.6.30 <1.0.0",
+    "@fluentui-react-native/experimental-menu-button": ">=0.6.31 <1.0.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.7.5 <1.0.0",
-    "@fluentui-react-native/experimental-radio-group": "^0.9.18",
-    "@fluentui-react-native/experimental-shadow": "0.2.67",
-    "@fluentui-react-native/experimental-shimmer": "0.8.19",
+    "@fluentui-react-native/experimental-radio-group": "^0.9.19",
+    "@fluentui-react-native/experimental-shadow": "0.2.68",
+    "@fluentui-react-native/experimental-shimmer": "0.8.20",
     "@fluentui-react-native/experimental-tabs": "0.8.32",
     "@fluentui-react-native/experimental-text": ">=0.11.51 <1.0.0",
     "@fluentui-react-native/framework": ">=0.9.1 <1.0.0",
     "@fluentui-react-native/icon": "0.17.12",
     "@fluentui-react-native/interactive-hooks": ">=0.22.18 <1.0.0",
-    "@fluentui-react-native/menu": "^1.4.2",
+    "@fluentui-react-native/menu": "^1.4.3",
     "@fluentui-react-native/merge-props": ">=0.5.2 <1.0.0",
-    "@fluentui-react-native/notification": "0.21.31",
+    "@fluentui-react-native/notification": "0.21.32",
     "@fluentui-react-native/separator": "^0.14.15",
     "@fluentui-react-native/stack": ">=0.7.52 <1.0.0",
-    "@fluentui-react-native/switch": "^0.8.25",
+    "@fluentui-react-native/switch": "^0.8.26",
     "@fluentui-react-native/text": ">=0.19.20 <1.0.0",
     "@fluentui-react-native/theme": ">=0.8.0 <1.0.0",
     "@fluentui-react-native/theme-tokens": "^0.24.2",
@@ -70,7 +70,7 @@
     "@fluentui-react-native/themed-stylesheet": "^1.4.2",
     "@fluentui-react-native/theming-utils": ">=0.23.3 <1.0.0",
     "@fluentui-react-native/win32-theme": ">=0.25.1 <1.0.0",
-    "@fluentui/react-native": ">=0.36.1 <1.0.0",
+    "@fluentui/react-native": ">=0.36.2 <1.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.0",

package/src/FluentTester.tsx

@@ -1,5 +1,5 @@
 import type { Theme } from '@fluentui-react-native/framework';
-import { Separator, Text } from '@fluentui/react-native';
+import { Separator, TextV1 as Text } from '@fluentui/react-native';
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 import * as React from 'react';

package/src/TestComponents/Avatar/AvatarTest.tsx

@@ -20,14 +20,17 @@ const avatarSections: TestSection[] = [
         name: 'Customize Usage',
         component: CustomizeUsage,
       },
-      {
-        name: 'Avatar E2E',
-        component: E2EAvatarTest,
-      },
     ],
   }),
 ];
 
+const e2eSections: TestSection[] = [
+  {
+    name: 'Avatar E2E',
+    component: E2EAvatarTest,
+  },
+];
+
 export const AvatarTest: React.FunctionComponent = () => {
   const status: PlatformStatus = {
     win32Status: 'Production',
@@ -42,5 +45,7 @@ export const AvatarTest: React.FunctionComponent = () => {
 
   const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Avatar/SPEC.md';
 
-  return <Test name="Avatar Test" description={description} spec={spec} sections={avatarSections} status={status} />;
+  return (
+    <Test name="Avatar Test" description={description} spec={spec} sections={avatarSections} status={status} e2eSections={e2eSections} />
+  );
 };

package/src/TestComponents/Button/ButtonTest.tsx

@@ -61,10 +61,6 @@ const buttonSections: TestSection[] = [
         name: 'Deprecated Icon Button',
         component: ButtonIconTest_deprecated,
       },
-      {
-        name: 'Deprecated E2E Button Testing',
-        component: E2EButtonTest_deprecated,
-      },
     ],
   }),
   {
@@ -73,6 +69,17 @@ const buttonSections: TestSection[] = [
   },
 ];
 
+const e2eSections: TestSection[] = [
+  {
+    name: 'E2E Button Testing',
+    component: E2EButtonTest,
+  },
+  {
+    name: 'Deprecated E2E Button Testing',
+    component: E2EButtonTest_deprecated,
+  },
+];
+
 export const ButtonTest: React.FunctionComponent = () => {
   const status: PlatformStatus = {
     win32Status: 'Production',
@@ -87,5 +94,7 @@ export const ButtonTest: React.FunctionComponent = () => {
 
   const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Button/SPEC.md';
 
-  return <Test name="Button Test" description={description} spec={spec} sections={buttonSections} status={status} />;
+  return (
+    <Test name="Button Test" description={description} spec={spec} sections={buttonSections} status={status} e2eSections={e2eSections} />
+  );
 };

package/src/TestComponents/Callout/CalloutTest.tsx

@@ -418,6 +418,9 @@ const calloutSections: TestSection[] = [
     name: 'Customized Usage',
     component: CustomCallout,
   },
+];
+
+const e2eSections: TestSection[] = [
   {
     name: 'E2E Testing Callout',
     component: E2ECalloutTest,
@@ -435,5 +438,5 @@ export const CalloutTest: React.FunctionComponent = () => {
 
   const description = 'A callout is an anchored tip that can be used to teach people or guide them through the app without blocking them.';
 
-  return <Test name="Callout Test" description={description} sections={calloutSections} status={status}></Test>;
+  return <Test name="Callout Test" description={description} sections={calloutSections} status={status} e2eSections={e2eSections}></Test>;
 };

package/src/TestComponents/CheckboxLegacy/CheckboxLegacyTest.tsx

@@ -166,6 +166,9 @@ const checkboxSections: TestSection[] = [
     name: 'Token Customized Checkboxes',
     component: TokenCheckbox,
   },
+];
+
+const e2eSections: TestSection[] = [
   {
     name: 'Checkbox for E2E Testing',
     component: CheckboxLegacyE2ETest,
@@ -186,5 +189,14 @@ export const CheckboxLegacyTest: React.FunctionComponent = () => {
 
   const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Checkbox/SPEC.md';
 
-  return <Test name="Checkbox Legacy Test" description={description} spec={spec} sections={checkboxSections} status={status} />;
+  return (
+    <Test
+      name="Checkbox Legacy Test"
+      description={description}
+      spec={spec}
+      sections={checkboxSections}
+      status={status}
+      e2eSections={e2eSections}
+    />
+  );
 };

package/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx

@@ -206,6 +206,9 @@ const checkboxSections: TestSection[] = [
       component: TokenCheckbox,
     },
   }),
+];
+
+const e2eSections: TestSection[] = [
   {
     name: 'E2E Testing for CheckboxV1',
     component: E2ECheckboxV1Test,
@@ -224,5 +227,5 @@ export const CheckboxV1Test: React.FunctionComponent = () => {
   const description =
     'Checkboxes give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).';
 
-  return <Test name="CheckboxV1 Test" description={description} sections={checkboxSections} status={status} />;
+  return <Test name="CheckboxV1 Test" description={description} sections={checkboxSections} status={status} e2eSections={e2eSections} />;
 };

package/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx

@@ -501,6 +501,9 @@ const contextualMenuSections: TestSection[] = [
     name: 'ContextalMenu with ScrollView',
     component: ScrollViewContextualMenu,
   },
+];
+
+const e2eSections: TestSection[] = [
   {
     name: 'ContextualMenu E2E Test',
     component: E2EContextualMenuTest,
@@ -519,5 +522,13 @@ export const ContextualMenuTest: React.FunctionComponent = () => {
   const description =
     'ContextualMenus are lists of commands that are based on the context of selection, mouse hover or keyboard focus. They are one of the most effective and highly used command surfaces, and can be used in a variety of places.\n\nThere are variants that originate from a command bar, or from cursor or focus. Those that come from CommandBars use a beak that is horizontally centered on the button. Ones that come from right click and menu button do not have a beak, but appear to the right and below the cursor. ContextualMenus can have submenus from commands, show selection checks, and icons.\n\nOrganize commands in groups divided by rules. This helps users remember command locations, or find less used commands based on proximity to others. One should also group sets of mutually exclusive or multiple selectable options. Use icons sparingly, for high value commands, and don’t mix icons with selection checks, as it makes parsing commands difficult. Avoid submenus of submenus as they can be difficult to invoke or remember.';
 
-  return <Test name="ContextualMenu Test" description={description} sections={contextualMenuSections} status={status}></Test>;
+  return (
+    <Test
+      name="ContextualMenu Test"
+      description={description}
+      sections={contextualMenuSections}
+      status={status}
+      e2eSections={e2eSections}
+    ></Test>
+  );
 };

package/src/TestComponents/FocusZone/FocusZoneTest.tsx

@@ -188,6 +188,9 @@ const focusZoneSections: TestSection[] = [
     name: 'Nested FocusZone',
     component: NestedFocusZone,
   },
+];
+
+const e2eSections: TestSection[] = [
   {
     name: '2D Navigation + E2E Testing',
     component: FocusZone2D,
@@ -203,5 +206,7 @@ export const FocusZoneTest: React.FunctionComponent = () => {
     androidStatus: 'Backlog',
   };
 
-  return <Test name="FocusZone Test" description={'No description.'} sections={focusZoneSections} status={status} />;
+  return (
+    <Test name="FocusZone Test" description={'No description.'} sections={focusZoneSections} status={status} e2eSections={e2eSections} />
+  );
 };

package/src/TestComponents/Icon/IconTest.tsx

@@ -104,6 +104,9 @@ const iconSections: TestSection[] = [
     name: 'Default Icon',
     component: IconV1Test,
   },
+];
+
+const e2eSections: TestSection[] = [
   {
     name: 'IconV1 for E2E Testing',
     component: IconV1E2ETest,
@@ -121,5 +124,5 @@ export const IconTest: React.FunctionComponent = () => {
 
   const description = 'Icons are styled images that can be fonts, svgs, or bitmaps';
 
-  return <Test name="Icon Test" description={description} sections={iconSections} status={status}></Test>;
+  return <Test name="Icon Test" description={description} sections={iconSections} status={status} e2eSections={e2eSections}></Test>;
 };

package/src/TestComponents/LinkLegacy/LinkLegacyTest.tsx

@@ -27,6 +27,9 @@ const linkSections: TestSection[] = [
     testID: LINK_TESTPAGE,
     component: Links,
   },
+];
+
+const e2eSections: TestSection[] = [
   {
     name: 'Link E2E Test',
     component: E2ELinkLegacyTest,
@@ -45,5 +48,5 @@ export const LinkLegacyTest: React.FunctionComponent = () => {
   const description =
     'With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter.\n\nA Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.';
 
-  return <Test name="Link Legacy Test" description={description} sections={linkSections} status={status}></Test>;
+  return <Test name="Link Legacy Test" description={description} sections={linkSections} status={status} e2eSections={e2eSections}></Test>;
 };

package/src/TestComponents/LinkV1/LinkV1Test.tsx

@@ -169,7 +169,9 @@ const linkSections: TestSection[] = [
       component: CustomLinks,
     },
   }),
+];
 
+const e2eSections: TestSection[] = [
   {
     name: 'Link E2E Test',
     component: E2ELinkV1Test,
@@ -188,5 +190,5 @@ export const LinkV1Test: React.FunctionComponent = () => {
   const description =
     'With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter.\n\nA Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.';
 
-  return <Test name="LinkV1 Test" description={description} sections={linkSections} status={status}></Test>;
+  return <Test name="LinkV1 Test" description={description} sections={linkSections} status={status} e2eSections={e2eSections}></Test>;
 };

package/src/TestComponents/Menu/MenuTest.tsx

@@ -291,6 +291,9 @@ const menuSections: TestSection[] = [
     name: 'Menu Refs',
     component: MenuTriggerChildRef,
   },
+];
+
+const e2eSections: TestSection[] = [
   {
     name: 'Menu E2E',
     component: E2EMenuTest,
@@ -311,5 +314,5 @@ export const MenuTest: React.FunctionComponent = () => {
 
   const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Menu/SPEC.md';
 
-  return <Test name="Menu Test" description={description} spec={spec} sections={menuSections} status={status} />;
+  return <Test name="Menu Test" description={description} spec={spec} sections={menuSections} status={status} e2eSections={e2eSections} />;
 };

package/src/TestComponents/MenuButtonLegacy/MenuButtonLegacyTest.tsx

@@ -21,6 +21,9 @@ const menuButtonSections: TestSection[] = [
     name: 'MenuButton with customized UI',
     component: CustomizedMenuButton,
   },
+];
+
+const e2eSections: TestSection[] = [
   {
     name: 'MenuButton for E2E Testing',
     component: MenuButtonLegacyE2ETest,
@@ -39,5 +42,7 @@ export const MenuButtonLegacyTest: React.FunctionComponent = () => {
   const description =
     'MenuButton is a component which contains ContextualMenu and Button components. This control combines and simplifies the API for customers.\nClicking on MenuButton opens ContextualMenu. It can have Submenu. But selection checks and a beak are not implemented.';
 
-  return <Test name="MenuButton Legacy Test" description={description} sections={menuButtonSections} status={status} />;
+  return (
+    <Test name="MenuButton Legacy Test" description={description} sections={menuButtonSections} status={status} e2eSections={e2eSections} />
+  );
 };

package/src/TestComponents/MenuButtonV1/MenuButtonV1Test.tsx

@@ -21,6 +21,9 @@ const menuButtonSections: TestSection[] = [
     name: 'MenuButton with customized UI',
     component: CustomizedMenuButton,
   },
+];
+
+const e2eSections: TestSection[] = [
   {
     name: 'E2E Testing MenuButton',
     component: MenuButtonV1E2ETest,
@@ -39,5 +42,7 @@ export const MenuButtonV1Test: React.FunctionComponent = () => {
   const description =
     'MenuButton is a component which contains ContextualMenu and Button components. This control combines and simplifies the API for customers.\nClicking on MenuButton opens ContextualMenu. It can have Submenu. But selection checks and a beak are not implemented.';
 
-  return <Test name="MenuButtonV1 Test" description={description} sections={menuButtonSections} status={status} />;
+  return (
+    <Test name="MenuButtonV1 Test" description={description} sections={menuButtonSections} status={status} e2eSections={e2eSections} />
+  );
 };

package/src/TestComponents/RadioGroupLegacy/RadioGroupLegacyTest.tsx

@@ -59,6 +59,9 @@ const radioGroupSections: TestSection[] = [
     testID: RADIOGROUP_TESTPAGE,
     component: BasicRadioGroup,
   },
+];
+
+const e2eSections: TestSection[] = [
   {
     name: 'RadioGroup for E2E Testing',
     component: RadioGroupLegacyE2ETest,
@@ -76,5 +79,7 @@ export const RadioGroupLegacyTest: React.FunctionComponent = () => {
 
   const description = 'No description.';
 
-  return <Test name="RadioGroup Legacy Test" description={description} sections={radioGroupSections} status={status} />;
+  return (
+    <Test name="RadioGroup Legacy Test" description={description} sections={radioGroupSections} status={status} e2eSections={e2eSections} />
+  );
 };

package/src/TestComponents/RadioGroupV1/RadioGroupV1Test.tsx

@@ -47,6 +47,9 @@ const radioGroupV1Sections: TestSection[] = [
       },
     ],
   }),
+];
+
+const e2eSections: TestSection[] = [
   {
     name: 'RadioGroup for E2E Testing',
     testID: RADIOGROUPV1_TESTPAGE,
@@ -68,5 +71,14 @@ export const RadioGroupV1Test: React.FunctionComponent = () => {
 
   const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/experimental/RadioGroup/SPEC.md';
 
-  return <Test name="RadioGroupV1 Test" description={description} spec={spec} sections={radioGroupV1Sections} status={status} />;
+  return (
+    <Test
+      name="RadioGroupV1 Test"
+      description={description}
+      spec={spec}
+      sections={radioGroupV1Sections}
+      status={status}
+      e2eSections={e2eSections}
+    />
+  );
 };

package/src/TestComponents/Switch/SwitchTest.tsx

@@ -133,9 +133,12 @@ const toggleSections: TestSection[] = [
       component: () => <CustomizedSwitch />,
     },
   }),
+];
+
+const e2eSections: TestSection[] = [
   {
     name: 'Switch E2E Testing',
-    component: () => <E2ESwitchTest />,
+    component: E2ESwitchTest,
   },
 ];
 
@@ -152,5 +155,7 @@ export const SwitchTest: React.FunctionComponent = () => {
 
   const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/experimental/Switch/SPEC.md';
 
-  return <Test name="Switch Test" description={description} spec={spec} sections={toggleSections} status={status} />;
+  return (
+    <Test name="Switch Test" description={description} spec={spec} sections={toggleSections} status={status} e2eSections={e2eSections} />
+  );
 };

package/src/TestComponents/TabsLegacy/TabsLegacyTest.tsx

@@ -269,6 +269,9 @@ const tabsSections: TestSection[] = [
     name: 'More Flexibility',
     component: TabsWithFlexibility,
   },
+];
+
+const e2eSections: TestSection[] = [
   {
     name: 'E2E Tabs Test',
     component: TabsLegacyE2ETest,
@@ -293,5 +296,5 @@ export const TabsLegacyTest: React.FunctionComponent = () => {
 
   const description = 'With Tabs, users can navigate to another view.';
 
-  return <Test name="Tabs Legacy Test" description={description} sections={tabsSections} status={status} />;
+  return <Test name="Tabs Legacy Test" description={description} sections={tabsSections} status={status} e2eSections={e2eSections} />;
 };

package/src/TestComponents/TabsV1/TabsV1Test.tsx

@@ -246,10 +246,6 @@ const tabsSections: TestSection[] = [
     name: 'More Flexibility',
     component: TabsWithFlexibility,
   },
-  {
-    name: 'E2E Testing TabsV1',
-    component: TabsV1E2ETest,
-  },
 ];
 
 if (Platform.OS !== 'windows') {
@@ -259,6 +255,13 @@ if (Platform.OS !== 'windows') {
   });
 }
 
+const e2eSections: TestSection[] = [
+  {
+    name: 'E2E Testing TabsV1',
+    component: TabsV1E2ETest,
+  },
+];
+
 export const TabsV1Test: React.FunctionComponent = () => {
   const status: PlatformStatus = {
     win32Status: 'Production',
@@ -270,5 +273,5 @@ export const TabsV1Test: React.FunctionComponent = () => {
 
   const description = 'With Tabs, users can navigate to another view.';
 
-  return <Test name="TabsV1 Test" description={description} sections={tabsSections} status={status} />;
+  return <Test name="TabsV1 Test" description={description} sections={tabsSections} status={status} e2eSections={e2eSections} />;
 };