@fluentui-react-native/tester 0.58.1 → 0.58.4

package/src/FluentTester/TestComponents/Svg/SvgTest.tsx

@@ -13,7 +13,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const rect: React.FunctionComponent = () => {
+const RectTest: React.FunctionComponent = () => {
   const [useColorA, setUseColorA] = React.useState(false);
   const colorA = 'red';
   const colorB = 'green';
@@ -36,7 +36,7 @@ const rect: React.FunctionComponent = () => {
   );
 };
 
-const circle: React.FunctionComponent = () => {
+const CircleTest: React.FunctionComponent = () => {
   return (
     <Svg width="50" height="50">
       <Circle cx="25" cy="25" r="20" fill="red" stroke="black" />
@@ -44,7 +44,7 @@ const circle: React.FunctionComponent = () => {
   );
 };
 
-const line: React.FunctionComponent = () => {
+const LineTest: React.FunctionComponent = () => {
   return (
     <Svg width="50" height="50">
       <Line x1="10" y1="10" x2="20" y2="20" fill="red" stroke="black" />
@@ -52,7 +52,7 @@ const line: React.FunctionComponent = () => {
   );
 };
 
-const path: React.FunctionComponent = () => {
+const PathTest: React.FunctionComponent = () => {
   return (
     <Svg width="100" height="100">
       <Path d="M 0 0 A 10 10 0 0,1 0 100" fill="magenta" stroke="purple" id="path" />
@@ -60,7 +60,7 @@ const path: React.FunctionComponent = () => {
   );
 };
 
-const polygon: React.FunctionComponent = () => {
+const PolygonTest: React.FunctionComponent = () => {
   return (
     <Svg height="100" width="100">
       <Polygon points="40,5 70,80 25,95" fill="lime" stroke="purple" strokeWidth="1" />
@@ -68,7 +68,7 @@ const polygon: React.FunctionComponent = () => {
   );
 };
 
-const linearGradient: React.FunctionComponent = () => {
+const LinearGradientTest: React.FunctionComponent = () => {
   return (
     <Svg height="100" width="100" style={{ backgroundColor: 'black' }} viewBox="0 0 10 10" color="yellow">
       <Defs>
@@ -82,7 +82,7 @@ const linearGradient: React.FunctionComponent = () => {
   );
 };
 
-const radialGradient: React.FunctionComponent = () => {
+const RadialGradientTest: React.FunctionComponent = () => {
   return (
     <Svg height="100" width="100" style={{ backgroundColor: 'black' }} viewBox="0 0 10 10" color="yellow">
       <Defs>
@@ -96,7 +96,7 @@ const radialGradient: React.FunctionComponent = () => {
   );
 };
 
-const rectCircle: React.FunctionComponent = () => {
+const RectCircleTest: React.FunctionComponent = () => {
   return (
     <Svg height="200" width="200">
       <Defs>
@@ -113,11 +113,11 @@ const rectCircle: React.FunctionComponent = () => {
   );
 };
 
-const bundledSvg: React.FunctionComponent = () => {
+const BundledSvgTest: React.FunctionComponent = () => {
   return <TestSvg width={200} height={200} color="red" />;
 };
 
-const remoteSvg: React.FunctionComponent = () => {
+const RemoteSvgTest: React.FunctionComponent = () => {
   return (
     <View>
       <SvgCssUri
@@ -144,43 +144,43 @@ const svgSections: TestSection[] = [
   {
     name: 'Rect',
     testID: SVG_TESTPAGE,
-    component: rect,
+    component: RectTest,
   },
   {
     name: 'Circle',
-    component: circle,
+    component: CircleTest,
   },
   {
     name: 'Line',
-    component: line,
+    component: LineTest,
   },
   {
     name: 'Path',
-    component: path,
+    component: PathTest,
   },
   {
     name: 'Polygon',
-    component: polygon,
+    component: PolygonTest,
   },
   {
     name: 'Linear Gradient',
-    component: linearGradient,
+    component: LinearGradientTest,
   },
   {
     name: 'Radial Gradient',
-    component: radialGradient,
+    component: RadialGradientTest,
   },
   {
     name: 'Rect and Circle via Defs and Use',
-    component: rectCircle,
+    component: RectCircleTest,
   },
   {
     name: 'Bundled Svg',
-    component: bundledSvg,
+    component: BundledSvgTest,
   },
   {
     name: 'Remotely Retrieved Svgs',
-    component: remoteSvg,
+    component: RemoteSvgTest,
   },
 ];
 

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

@@ -7,7 +7,7 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 import { E2ETabsTest } from './TabsE2ETest';
 import TestSvg from './test.svg';
 
-const tabs: React.FunctionComponent = () => {
+const TabsMainTest: React.FunctionComponent = () => {
   return (
     <View style={stackStyle}>
       <Tabs label="Tabs">
@@ -25,7 +25,7 @@ const tabs: React.FunctionComponent = () => {
   );
 };
 
-const disabledTabs: React.FunctionComponent = () => {
+const DisabledTabs: React.FunctionComponent = () => {
   return (
     <View style={stackStyle}>
       <Tabs label="Tabs">
@@ -43,7 +43,7 @@ const disabledTabs: React.FunctionComponent = () => {
   );
 };
 
-const tabsCountIcon: React.FunctionComponent = () => {
+const TabsCountIcon: React.FunctionComponent = () => {
   const svgExample = {
     svgSource: {
       src: TestSvg,
@@ -70,7 +70,7 @@ const tabsCountIcon: React.FunctionComponent = () => {
   );
 };
 
-const onTabsClickEvent: React.FunctionComponent = () => {
+const TabsClickEventTest: React.FunctionComponent = () => {
   const [selectedKey, setSelectedKey] = React.useState('home_key');
 
   const onTabsClick = (key: string) => {
@@ -95,7 +95,7 @@ const onTabsClickEvent: React.FunctionComponent = () => {
   );
 };
 
-const tabsChangingViews: React.FunctionComponent = () => {
+const TabsChangingViews: React.FunctionComponent = () => {
   // If user wants to control what gets rendered example.
   const [selectedKey, setSelectedKey] = React.useState('Tabs #1');
 
@@ -117,7 +117,7 @@ const tabsChangingViews: React.FunctionComponent = () => {
   );
 };
 
-const tabsRenderSeparately: React.FunctionComponent = () => {
+const TabsRenderSeparately: React.FunctionComponent = () => {
   const [selectedKey, setSelectedKey] = React.useState('rectangleRed');
 
   const onTabsClick = (key: string) => {
@@ -149,7 +149,7 @@ const tabsRenderSeparately: React.FunctionComponent = () => {
   );
 };
 
-const tabsSettingSelectedKey: React.FunctionComponent = () => {
+const TabsSettingSelectedKey: React.FunctionComponent = () => {
   // If user wants to programmatically set the tab's selectedKey with a button example.
   const [selectedKey, setSelectedKey] = React.useState('home');
   const [currTabItemIndex, setCurrTabItemIndex] = React.useState(0);
@@ -179,7 +179,7 @@ const tabsSettingSelectedKey: React.FunctionComponent = () => {
   );
 };
 
-const tabsShowHideItem: React.FunctionComponent = () => {
+const TabsShowHideItem: React.FunctionComponent = () => {
   const [showFirstItem, setshowFirstItem] = React.useState(true);
 
   const toggleShowFirstItem = React.useCallback(() => {
@@ -208,7 +208,7 @@ const tabsShowHideItem: React.FunctionComponent = () => {
   );
 };
 
-const tabsWithFlexibility: React.FunctionComponent = () => {
+const TabsWithFlexibility: React.FunctionComponent = () => {
   const [selectedKey, setSelectedKey] = React.useState('home');
 
   const goHomeTab = () => {
@@ -241,35 +241,35 @@ const tabsSections: TestSection[] = [
   {
     name: 'Default Tabs',
     testID: TABS_TESTPAGE,
-    component: tabs,
+    component: TabsMainTest,
   },
   {
     name: 'Tabs with disabled',
-    component: disabledTabs,
+    component: DisabledTabs,
   },
   {
     name: 'Trigger onTabsClick event',
-    component: onTabsClickEvent,
+    component: TabsClickEventTest,
   },
   {
     name: 'User Custom Render',
-    component: tabsChangingViews,
+    component: TabsChangingViews,
   },
   {
     name: 'Render Content Separately',
-    component: tabsRenderSeparately,
+    component: TabsRenderSeparately,
   },
   {
     name: 'Override Selected Key',
-    component: tabsSettingSelectedKey,
+    component: TabsSettingSelectedKey,
   },
   {
     name: 'Show/Hide Tabs item',
-    component: tabsShowHideItem,
+    component: TabsShowHideItem,
   },
   {
     name: 'More Flexibility',
-    component: tabsWithFlexibility,
+    component: TabsWithFlexibility,
   },
   {
     name: 'E2E Tabs Test',
@@ -280,7 +280,7 @@ const tabsSections: TestSection[] = [
 if (Platform.OS !== 'windows') {
   tabsSections.push({
     name: 'Count and Icon',
-    component: tabsCountIcon,
+    component: TabsCountIcon,
   });
 }
 

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

@@ -10,7 +10,7 @@ import { SvgIconProps } from '@fluentui-react-native/icon';
 import TestSvg from './test.svg';
 import { E2ETestExperimentalTabs } from './TabsExperimentalE2ETest';
 
-const tabs: React.FunctionComponent = () => {
+const TabsMainTest: React.FunctionComponent = () => {
   return (
     <View style={stackStyle}>
       <Tabs label="Tabs">
@@ -28,7 +28,7 @@ const tabs: React.FunctionComponent = () => {
   );
 };
 
-const disabledTabs: React.FunctionComponent = () => {
+const DisabledTabs: React.FunctionComponent = () => {
   return (
     <View style={stackStyle}>
       <Tabs label="Tabs">
@@ -46,7 +46,7 @@ const disabledTabs: React.FunctionComponent = () => {
   );
 };
 
-const tabsCountIcon: React.FunctionComponent = () => {
+const TabsCountIcon: React.FunctionComponent = () => {
   const svgProps: SvgIconProps = {
     src: TestSvg,
     viewBox: '0 0 500 500',
@@ -69,7 +69,7 @@ const tabsCountIcon: React.FunctionComponent = () => {
   );
 };
 
-const onTabsClickEvent: React.FunctionComponent = () => {
+const TabsClickEventTest: React.FunctionComponent = () => {
   const [selectedKey, setSelectedKey] = React.useState('home_key');
 
   const onTabsClick = React.useCallback(
@@ -97,7 +97,7 @@ const onTabsClickEvent: React.FunctionComponent = () => {
   );
 };
 
-const tabsChangingViews: React.FunctionComponent = () => {
+const TabsChangingViews: React.FunctionComponent = () => {
   // If User wants to control what gets rendered example
   const [selectedKey, setSelectedKey] = React.useState('home');
 
@@ -124,7 +124,7 @@ const tabsChangingViews: React.FunctionComponent = () => {
   );
 };
 
-const tabsRenderSeparately: React.FunctionComponent = () => {
+const TabsRenderSeparately: React.FunctionComponent = () => {
   const [selectedKey, setSelectedKey] = React.useState('rectangleRed');
 
   const onTabsClick = React.useCallback(
@@ -159,7 +159,7 @@ const tabsRenderSeparately: React.FunctionComponent = () => {
   );
 };
 
-const tabsSettingSelectedKey: React.FunctionComponent = () => {
+const TabsSettingSelectedKey: React.FunctionComponent = () => {
   // If user wants to programmatically set the selectedKey to control the view
   const [selectedKey, setSelectedKey] = React.useState('home');
   const [currTabItemIndex, setCurrTabItemIndex] = React.useState(0);
@@ -189,7 +189,7 @@ const tabsSettingSelectedKey: React.FunctionComponent = () => {
   );
 };
 
-const tabsWithFlexibility: React.FunctionComponent = () => {
+const TabsWithFlexibility: React.FunctionComponent = () => {
   const [selectedKey, setSelectedKey] = React.useState('home');
 
   const goHomeTab = React.useCallback(() => {
@@ -225,31 +225,31 @@ const tabsSections: TestSection[] = [
   {
     name: 'Default Tabs',
     testID: EXPERIMENTAL_TABS_TESTPAGE,
-    component: tabs,
+    component: TabsMainTest,
   },
   {
     name: 'Tabs with disabled',
-    component: disabledTabs,
+    component: DisabledTabs,
   },
   {
     name: 'Trigger onTabsClick event',
-    component: onTabsClickEvent,
+    component: TabsClickEventTest,
   },
   {
     name: 'User Custom Render',
-    component: tabsChangingViews,
+    component: TabsChangingViews,
   },
   {
     name: 'Render Content Separately',
-    component: tabsRenderSeparately,
+    component: TabsRenderSeparately,
   },
   {
     name: 'Override Selected Key',
-    component: tabsSettingSelectedKey,
+    component: TabsSettingSelectedKey,
   },
   {
     name: 'More Flexibility',
-    component: tabsWithFlexibility,
+    component: TabsWithFlexibility,
   },
   {
     name: 'E2E Testing Experimental Tabs',
@@ -260,7 +260,7 @@ const tabsSections: TestSection[] = [
 if (Platform.OS !== 'windows') {
   tabsSections.push({
     name: 'Count and Icon',
-    component: tabsCountIcon,
+    component: TabsCountIcon,
   });
 }