@fluentui-react-native/tester 0.133.1 → 0.134.0

package/src/TestComponents/Test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, Switch, View } from 'react-native';
 import { Text, ToggleButton, Separator, Link } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from './Common/styles';
@@ -9,12 +9,13 @@ import Svg, { G, Path } from 'react-native-svg';
 import type { SvgIconProps } from '@fluentui-react-native/icon';
 import { Button } from '@fluentui-react-native/experimental-button';
 import { testProps } from './Common/TestProps';
+import { E2E_MODE_SWITCH, E2E_TEST_SECTION } from '../../../E2E/src/index.consts';
 
 export type TestSection = {
   name: string;
   testID?: string;
   component: React.FunctionComponent;
-};
+} | null;
 
 export type Status = 'Production' | 'Beta' | 'Experimental' | 'Backlog' | 'N/A' | 'Deprecated';
 export type PlatformStatus = {
@@ -31,6 +32,7 @@ export interface TestProps {
   spec?: string;
   status: PlatformStatus;
   sections: TestSection[];
+  e2eSections?: TestSection[];
 }
 
 const definitions = {
@@ -45,6 +47,7 @@ const definitions = {
 const styles = StyleSheet.create({
   name: {
     marginTop: 4,
+    flex: Platform.select({ ios: 0, android: 0, default: 1 }),
   },
   definitionHeader: {
     marginTop: 12,
@@ -58,6 +61,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'space-between',
+    flexWrap: 'wrap',
   },
   section: {
     marginTop: 12,
@@ -79,10 +83,24 @@ const styles = StyleSheet.create({
   e2eFocusButton: {
     opacity: 0,
   },
+  e2eSection: {
+    marginBottom: 4,
+  },
+  e2eSwitch: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  e2eSwitchLabel: {
+    marginRight: 4,
+    textAlignVertical: 'center',
+  },
 });
 
 export const Test = (props: TestProps): React.ReactElement<Record<string, never>> => {
   const [showStatus, setShowStatus] = React.useState(false);
+  const [showE2E, setShowE2E] = React.useState(false);
 
   const toggleSvg: React.FunctionComponent<SvgProps> = () => {
     const plusPath =
@@ -114,6 +132,9 @@ export const Test = (props: TestProps): React.ReactElement<Record<string, never>
   };
 
   const toggleIconProps = Platform.OS === 'windows' ? { fontSource: fontIconProps } : { svgSource: svgProps, width: 12, height: 12 };
+  const { e2eSections } = props;
+
+  const isMobile = Platform.OS === 'ios' || Platform.OS === 'android';
 
   return (
     <View>
@@ -121,16 +142,41 @@ export const Test = (props: TestProps): React.ReactElement<Record<string, never>
         <Text style={styles.name} variant="heroSemibold">
           {props.name}
         </Text>
-        <Button
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps('Focus_Button')}
-          style={styles.e2eFocusButton}
-        >
-          E2E Button
-        </Button>
+        {!isMobile && (
+          <Button
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps('Focus_Button')}
+            style={styles.e2eFocusButton}
+          >
+            E2E Button
+          </Button>
+        )}
+        {props.e2eSections && (
+          <View style={styles.e2eSwitch}>
+            <Text style={styles.e2eSwitchLabel} {...(isMobile ? {} : { variant: 'body1Strong' })}>
+              E2E Mode
+            </Text>
+            <Switch onValueChange={setShowE2E} value={showE2E} {...testProps(E2E_MODE_SWITCH)} />
+          </View>
+        )}
         {props.spec && <Link url={props.spec} content="SPEC" />}
       </View>
       <Separator />
+      {e2eSections && showE2E && (
+        // We can check if the E2E section renders by checking if the "E2E Tests" header has rendered for each spec
+        <>
+          <Text variant="headerSemibold" {...testProps(E2E_TEST_SECTION)}>
+            E2E Tests
+          </Text>
+          {e2eSections.map((section, i) => {
+            if (section === null) {
+              return null;
+            }
+            const { component: E2EComponent } = section;
+            return <E2EComponent key={i} />;
+          })}
+        </>
+      )}
       <Stack style={stackStyle}>
         <Text style={styles.description}>{props.description}</Text>
       </Stack>

package/src/TestComponents/TextLegacy/TextLegacyTest.tsx

@@ -21,6 +21,9 @@ const textSections: TestSection[] = [
     name: 'Pressable Usage',
     component: PressableUsage,
   },
+];
+
+const e2eSections: TestSection[] = [
   {
     name: 'E2E Text Tests',
     component: TextLegacyE2ETest,
@@ -40,5 +43,5 @@ export const TextLegacyTest: React.FunctionComponent = () => {
 
   const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/text/SPEC.md';
 
-  return <Test name="Text Test" description={description} spec={spec} sections={textSections} status={status} />;
+  return <Test name="Text Test" description={description} spec={spec} sections={textSections} status={status} e2eSections={e2eSections} />;
 };

package/src/TestComponents/TextV1/TextV1Test.tsx

@@ -31,6 +31,9 @@ const textSections: TestSection[] = [
     name: 'Pressable Usage',
     component: PressableUsage,
   },
+];
+
+const e2eSections: TestSection[] = [
   {
     name: 'E2E Testing for TextV1',
     component: TextV1E2ETest,
@@ -48,5 +51,5 @@ export const TextV1Test: React.FunctionComponent = () => {
 
   const description = 'Text is a component for displaying text. You can use Text to standardize text across your app.';
 
-  return <Test name="TextV1 Test" description={description} sections={textSections} status={status} />;
+  return <Test name="TextV1 Test" description={description} sections={textSections} status={status} e2eSections={e2eSections} />;
 };

package/src/theme/ThemePickers.android.tsx

@@ -4,8 +4,6 @@ import { TextV1 as Text } from '@fluentui-react-native/text';
 import { lightnessOptions, testerTheme } from './CustomThemes';
 import type { ThemeNames } from './applyTheme';
 import { themeChoices } from './applyTheme';
-import type { OfficeBrand } from './applyBrand';
-import { brandOptions } from './applyBrand';
 import type { Theme } from '@fluentui-react-native/framework';
 import { useTheme } from '@fluentui-react-native/framework';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
@@ -16,15 +14,15 @@ const getThemedDropdownStyles = themedStyleSheet((t: Theme) => {
   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,
     },
@@ -32,6 +30,7 @@ const getThemedDropdownStyles = themedStyleSheet((t: Theme) => {
       borderStyle: 'solid',
       borderColor: t.colors.disabledBodyText,
       borderWidth: 1,
+      width: '100%',
     },
   };
 });
@@ -39,10 +38,6 @@ const getThemedDropdownStyles = themedStyleSheet((t: Theme) => {
 const PickerLabel = Text.customize({ variant: 'subheaderSemibold' });
 
 export const ThemePickers: React.FunctionComponent = () => {
-  const onBrandChange = React.useCallback((newBrand: string) => {
-    testerTheme.brand = newBrand as OfficeBrand;
-  }, []);
-
   const onThemeSelected = React.useCallback((newTheme: string) => {
     testerTheme.themeName = newTheme as ThemeNames;
   }, []);
@@ -87,11 +82,6 @@ export const ThemePickers: React.FunctionComponent = () => {
         <PickerLabel>Light/Dark: </PickerLabel>
         <Dropdown initial={testerTheme.appearance} onValueChange={onAppearanceChange} options={lightnessOptions} />
       </View>
-
-      <View style={themedPickerStyles.picker}>
-        <PickerLabel>Brand: </PickerLabel>
-        <Dropdown initial={testerTheme.brand} onValueChange={onBrandChange} options={brandOptions} />
-      </View>
     </View>
   );
 };