@fluentui-react-native/tester-core 0.1.1

package/src/TestComponents/TextLegacy/TextLegacyE2ETest.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { Text } from '@fluentui/react-native';
+import {
+  DEPRECATED_TEXT_FIRST_ACCESSIBILITY_LABEL,
+  DEPRECATED_TEXT_FIRST_COMPONENT,
+  DEPRECATED_TEXT_SECOND_COMPONENT,
+  DEPRECATED_TEXT_SECOND_COMPONENT_CONTENT,
+} from '@fluentui-react-native/e2e-testing';
+import { Stack } from '@fluentui-react-native/stack';
+
+import { stackStyle } from '../Common/styles';
+import { testProps } from '../Common/TestProps';
+
+export const TextLegacyE2ETest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle} gap={5}>
+        <Text
+          variant="captionStandard"
+          accessibilityLabel={DEPRECATED_TEXT_FIRST_ACCESSIBILITY_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(DEPRECATED_TEXT_FIRST_COMPONENT)}
+        >
+          Testing Deprecated Text Component - Accessibility Label Set
+        </Text>
+        <Text
+          variant="captionStandard"
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(DEPRECATED_TEXT_SECOND_COMPONENT)}
+        >
+          {DEPRECATED_TEXT_SECOND_COMPONENT_CONTENT}
+        </Text>
+      </Stack>
+    </View>
+  );
+};

package/src/TestComponents/TextLegacy/TextLegacyTest.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import { TEXT_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+
+import { CustomizeUsage } from './CustomizeUsage';
+import { PressableUsage } from './PressableUsage';
+import { StandardUsage } from './StandardUsage';
+import { TextLegacyE2ETest } from './TextLegacyE2ETest';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const textSections: TestSection[] = [
+  {
+    name: 'Standard Usage',
+    testID: TEXT_TESTPAGE,
+    component: StandardUsage,
+  },
+  {
+    name: 'Customize Usage',
+    component: CustomizeUsage,
+  },
+  {
+    name: 'Pressable Usage',
+    component: PressableUsage,
+  },
+];
+
+const e2eSections: TestSection[] = [
+  {
+    name: 'E2E Text Tests',
+    component: TextLegacyE2ETest,
+  },
+];
+
+export const TextLegacyTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Deprecated',
+    uwpStatus: 'Deprecated',
+    iosStatus: 'Deprecated',
+    macosStatus: 'Deprecated',
+    androidStatus: 'Deprecated',
+  };
+
+  const description = 'Text is a component for displaying text. You can use Text to standardize text across your app.';
+
+  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} e2eSections={e2eSections} />;
+};

package/src/TestComponents/TextLegacy/index.ts

@@ -0,0 +1 @@
+export * from './TextLegacyTest';

package/src/TestComponents/TextV1/CustomizeUsage.tsx

@@ -0,0 +1,164 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+
+import { Stack } from '@fluentui-react-native/stack';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+
+import { stackStyle } from '../Common/styles';
+
+const RedCaptionBold = Text.customize({ variant: 'captionStandard', fontWeight: '700', color: '#ff0000' });
+const OrangeSecondaryBold = Text.customize({ variant: 'secondaryStandard', fontWeight: '700', color: '#ff9900' });
+const YellowBodyBold = Text.customize({ variant: 'bodyStandard', fontWeight: '700', color: '#f3ce00' });
+const GreenSubheaderBold = Text.customize({ variant: 'subheaderStandard', fontWeight: '700', color: '#02c440' });
+const BlueHeaderBold = Text.customize({ variant: 'headerStandard', fontWeight: '700', color: '#0229c4' });
+const IndigoHeroBold = Text.customize({ variant: 'heroStandard', fontWeight: '700', color: '#4b0082' });
+const PurpleHeroLargeBold = Text.customize({ variant: 'heroLargeStandard', fontWeight: '700', color: '#8402c4' });
+
+// Android has a limited fontFamily support and unknown fonts fallback to sans-serif (Roboto).
+// Custom fonts (ttf, otf) are supported but need to be linked using 'react-native link'
+// The supported font families can be found as <aliases> at https://android.googlesource.com/platform/frameworks/base/+/master/data/fonts/fonts.xml
+const CustomFontNames = {
+  ...Platform.select({
+    android: {
+      CourierNew: 'courier new',
+      Georgia: 'georgia',
+      TimesNewRoman: 'times new roman',
+    },
+    default: {
+      CourierNew: 'Courier New',
+      Georgia: 'Georgia',
+      TimesNewRoman: 'Times New Roman',
+    },
+  }),
+};
+
+const ArialBlack = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Arial Black' });
+const BrushScriptMT = Text.customize({ variant: 'heroStandard', fontFamily: 'Brush Script MT' });
+const CourierNew = Text.customize({ variant: 'headerStandard', fontFamily: CustomFontNames.CourierNew });
+const Georgia = Text.customize({ variant: 'subheaderStandard', fontFamily: CustomFontNames.Georgia });
+const TimesNewRoman = Text.customize({ variant: 'secondaryStandard', fontFamily: CustomFontNames.TimesNewRoman });
+const Wingdings = Text.customize({ variant: 'captionStandard', fontFamily: 'Wingdings' });
+
+// Examples of supported Android fonts.
+const Casual = Text.customize({ variant: 'heroStandard', fontFamily: 'casual' });
+const Cursive = Text.customize({ variant: 'heroStandard', fontFamily: 'cursive' });
+// Examples of iOS fonts.
+const Papyrus = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Papyrus' });
+const Helvetica = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Helvetica' });
+// Fonts supported on Android and iOS
+const Arial = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'arial' });
+
+export const CustomizeUsage: React.FunctionComponent = () => {
+  const BlockText = () => {
+    return (
+      <>
+        <Text style={{ textTransform: 'uppercase' }} font="base" weight="medium" truncate>
+          I am going to be truncated since I am a very very very very very very very very very very very very very very very very very very
+          very very very very very very very very very very very very very very very very very very very very very very very very very very
+          very very very very very very very very very very very very very very very very long block text.
+        </Text>
+        <Text font="monospace" weight="semibold" wrap={false}>
+          I am not going to be wrapped since I am a very very very very very very very very very very very very very very very very very
+          very very very very very very very very very very very very very very very very very very very very very very very very very very
+          very very very very very very very very very very very very very very very very very long block text.
+        </Text>
+        <Text underline>Since text components are inside a View</Text>
+        <Text>every block of text</Text>
+        <Text underline strikethrough align="end">
+          gets its own line. This line has been underlined, striked through, and right aligned.
+        </Text>
+      </>
+    );
+  };
+
+  const NonBlockText = () => {
+    return (
+      <Text>
+        <Text italic>I am italisized inline text.</Text>
+        <Text weight="medium">Since text components are inside a Text, (medium) </Text>
+        <Text weight="bold">every block of text (bolded) </Text>
+        <Text size={600}>gets placed inline.</Text>
+      </Text>
+    );
+  };
+
+  const CustomUsageStack = () => {
+    return (
+      <Stack style={stackStyle} gap={5}>
+        <RedCaptionBold>RedCaptionBold</RedCaptionBold>
+        <OrangeSecondaryBold>OrangeSecondaryBold</OrangeSecondaryBold>
+        <YellowBodyBold>YellowBodyBold</YellowBodyBold>
+        <GreenSubheaderBold>GreenSubheaderBold</GreenSubheaderBold>
+        <BlueHeaderBold>BlueHeaderBold</BlueHeaderBold>
+        <IndigoHeroBold>IndigoHeroBold</IndigoHeroBold>
+        <PurpleHeroLargeBold>PurpleHeroLargeBold</PurpleHeroLargeBold>
+      </Stack>
+    );
+  };
+
+  const CustomFontStack = () => {
+    return (
+      <Stack style={stackStyle} gap={5}>
+        <ArialBlack>Arial Black</ArialBlack>
+        <BrushScriptMT>Brush Script MT</BrushScriptMT>
+        <CourierNew>Courier New</CourierNew>
+        <Georgia>Georgia</Georgia>
+        <TimesNewRoman>TimesNewRoman</TimesNewRoman>
+        <Wingdings>Wingdings</Wingdings>
+      </Stack>
+    );
+  };
+
+  const CustomFontStackAndroid = () => {
+    return (
+      <Stack style={stackStyle} gap={5}>
+        <Arial>Arial</Arial>
+        <Casual>Casual</Casual>
+        <Cursive>Cursive</Cursive>
+        <CourierNew>Courier New</CourierNew>
+        <Georgia>Georgia</Georgia>
+        <TimesNewRoman>TimesNewRoman</TimesNewRoman>
+      </Stack>
+    );
+  };
+  const CustomFontStackiOS = () => {
+    return (
+      <Stack style={stackStyle} gap={5}>
+        <Arial>Arial</Arial>
+        <Papyrus>Papyrus</Papyrus>
+        <Helvetica>Helvetica</Helvetica>
+        <CourierNew>Courier New</CourierNew>
+        <Georgia>Georgia</Georgia>
+        <TimesNewRoman>TimesNewRoman</TimesNewRoman>
+      </Stack>
+    );
+  };
+
+  switch (Platform.OS) {
+    case 'android':
+      return (
+        <View>
+          <CustomUsageStack />
+          <CustomFontStackAndroid />
+        </View>
+      );
+    case 'ios':
+      return (
+        <View>
+          <CustomUsageStack />
+          <CustomFontStackiOS />
+        </View>
+      );
+    default:
+      return (
+        <View>
+          <BlockText />
+          <Text>{'\n'}</Text>
+          <NonBlockText />
+          <Text>{'\n'}</Text>
+          <CustomUsageStack />
+          <CustomFontStack />
+        </View>
+      );
+  }
+};

package/src/TestComponents/TextV1/MaximumFontSize.ios.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Text, View } from 'react-native';
+
+import { Separator } from '@fluentui/react-native';
+import { Stack } from '@fluentui-react-native/stack';
+import { Caption1, Title2, Title3 } from '@fluentui-react-native/text';
+
+import { stackStyle } from '../Common/styles';
+
+const maximumFontSizeStyle = { maximumFontSize: 36 };
+
+const CappedTitle2 = Title2.customize(maximumFontSizeStyle);
+const CappedTitle3 = Title3.customize(maximumFontSizeStyle);
+
+export const MaximumFontSizeUsage: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle} gap={5}>
+        <Caption1>Play with the preferred content size. The marked elements should not grow larger than 36 points.</Caption1>
+        <Separator />
+        <Title2>Title2</Title2>
+        <Title3>Title3</Title3>
+        <CappedTitle2>Title2 (capped)</CappedTitle2>
+        <CappedTitle3>Title3 (capped)</CappedTitle3>
+        <Text allowFontScaling={false} style={{ fontSize: 36, fontWeight: '600' }}>
+          This is 36 pt
+        </Text>
+      </Stack>
+    </View>
+  );
+};

package/src/TestComponents/TextV1/MaximumFontSize.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+
+export const MaximumFontSizeUsage: React.FunctionComponent = () => {
+  return <Text>Only available on iOS.</Text>;
+};

package/src/TestComponents/TextV1/PressableUsage.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Alert, Linking, View } from 'react-native';
+
+import { Stack } from '@fluentui-react-native/stack';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+import type { IKeyboardEvent, IHandledKeyboardEvent } from '@office-iss/react-native-win32';
+
+import { stackStyle } from '../Common/styles';
+
+export const PressableUsage: React.FunctionComponent = () => {
+  const _onPress = (): void => {
+    Linking.openURL('https://www.microsoft.com');
+  };
+
+  const _onKeyDown = (ev: IKeyboardEvent) => {
+    if (ev.nativeEvent.key === 'Enter' || ev.nativeEvent.key == 'Space') Linking.openURL('https://www.microsoft.com');
+  };
+
+  const _onPress2 = (): void => {
+    Alert.alert('Alert', 'Success!');
+  };
+
+  const _onPress3 = (): void => {
+    Alert.alert('Alert', 'onAccessibilityTap invoked!');
+  };
+
+  const _onKeyDown2 = (ev: IKeyboardEvent) => {
+    if (ev.nativeEvent.key === 'Enter' || ev.nativeEvent.key == ' ') Alert.alert('Alert', 'Success!');
+  };
+
+  const handledNativeKeyboardEvents: IHandledKeyboardEvent[] = [{ key: 'Enter' }, { key: 'Space' }];
+
+  return (
+    <View>
+      <Stack style={stackStyle} gap={5}>
+        <Text variant={'bodyStandard'}>
+          To learn more about microsoft, visit this{' '}
+          <Text
+            focusable
+            variant={'bodyStandard'}
+            color="blue"
+            keyDownEvents={handledNativeKeyboardEvents}
+            onPress={_onPress}
+            onKeyDown={_onKeyDown}
+          >
+            webpage
+          </Text>{' '}
+          for more details.
+        </Text>
+        <Text variant={'bodyStandard'}>
+          Press{' '}
+          <Text
+            variant={'bodyStandard'}
+            color="blue"
+            keyDownEvents={handledNativeKeyboardEvents}
+            onPress={_onPress2}
+            onKeyDown={_onKeyDown2}
+            onAccessibilityTap={_onPress3}
+          >
+            here
+          </Text>{' '}
+          to view an alert.
+        </Text>
+      </Stack>
+    </View>
+  );
+};

package/src/TestComponents/TextV1/StandardUsage.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { HOMEPAGE_TEXTV1_BUTTON } from '@fluentui-react-native/e2e-testing';
+import { Stack } from '@fluentui-react-native/stack';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+
+import { stackStyle } from '../Common/styles';
+import { testProps } from '../Common/TestProps';
+
+export const StandardUsage: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle} gap={5}>
+        <Text
+          variant="captionStandard"
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(HOMEPAGE_TEXTV1_BUTTON)}
+        >
+          CaptionStandard
+        </Text>
+        <Text variant="secondaryStandard">SecondaryStandard</Text>
+        <Text variant="secondarySemibold">SecondarySemibold</Text>
+        <Text variant="bodyStandard">BodyStandard</Text>
+        <Text variant="bodySemibold">BodySemibold</Text>
+        <Text variant="subheaderStandard">SubheaderStandard</Text>
+        <Text variant="subheaderSemibold">SubheaderSemibold</Text>
+        <Text variant="headerStandard">HeaderStandard</Text>
+        <Text variant="headerSemibold">HeaderSemibold</Text>
+        <Text variant="heroStandard">HeroStandard</Text>
+        <Text variant="heroSemibold">HeroSemibold</Text>
+        <Text variant="heroLargeStandard">HeroLargeStandard</Text>
+        <Text variant="heroLargeSemibold">HeroLargeSemibold</Text>
+      </Stack>
+    </View>
+  );
+};

package/src/TestComponents/TextV1/TextV1E2ETest.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import {
+  TEXTV1_TEST_COMPONENT,
+  TEXTV1_ACCESSIBILITY_LABEL,
+  TEXTV1_NO_A11Y_LABEL_COMPONENT,
+  TEXTV1_CONTENT,
+} from '@fluentui-react-native/e2e-testing';
+import { Stack } from '@fluentui-react-native/stack';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+
+import { stackStyle } from '../Common/styles';
+import { testProps } from '../Common/TestProps';
+
+export const TextV1E2ETest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle} gap={5}>
+        <Text
+          variant="captionStandard"
+          accessibilityLabel={TEXTV1_ACCESSIBILITY_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(TEXTV1_TEST_COMPONENT)}
+        >
+          Testing Text Component - Accessibility Label Set
+        </Text>
+        <Text
+          variant="captionStandard"
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(TEXTV1_NO_A11Y_LABEL_COMPONENT)}
+        >
+          {TEXTV1_CONTENT}
+        </Text>
+      </Stack>
+    </View>
+  );
+};

package/src/TestComponents/TextV1/TextV1Test.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+import { TEXTV1_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+
+import { CustomizeUsage } from './CustomizeUsage';
+import { MaximumFontSizeUsage } from './MaximumFontSize';
+import { PressableUsage } from './PressableUsage';
+import { StandardUsage } from './StandardUsage';
+import { TextV1E2ETest } from './TextV1E2ETest';
+import { V2Usage } from './V2Usage';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const textSections: TestSection[] = [
+  {
+    name: 'Standard Usage',
+    testID: TEXTV1_TESTPAGE,
+    component: StandardUsage,
+  },
+  {
+    name: 'V1/V2 Comparison',
+    component: V2Usage,
+  },
+  {
+    name: 'Maximum Font Size Usage',
+    component: MaximumFontSizeUsage,
+  },
+  {
+    name: 'Customize Usage',
+    component: CustomizeUsage,
+  },
+  {
+    name: 'Pressable Usage',
+    component: PressableUsage,
+  },
+];
+
+const e2eSections: TestSection[] = [
+  {
+    name: 'E2E Testing for TextV1',
+    component: TextV1E2ETest,
+  },
+];
+
+export const TextV1Test: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Production',
+    uwpStatus: 'Beta',
+    iosStatus: 'Production',
+    macosStatus: 'Production',
+    androidStatus: 'Production',
+  };
+
+  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} e2eSections={e2eSections} />;
+};

package/src/TestComponents/TextV1/V2Usage.android.tsx

@@ -0,0 +1 @@
+export { V2Usage } from './V2Usage.mobile';

package/src/TestComponents/TextV1/V2Usage.ios.tsx

@@ -0,0 +1 @@
+export { V2Usage } from './V2Usage.mobile';

package/src/TestComponents/TextV1/V2Usage.mobile.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { Stack } from '@fluentui-react-native/stack';
+import {
+  Body1,
+  Body1Strong,
+  Body2,
+  Body2Strong,
+  Caption1,
+  Caption1Strong,
+  Caption2,
+  Display,
+  LargeTitle,
+  TextV1,
+  Title1,
+  Title2,
+  Title3,
+} from '@fluentui-react-native/text';
+
+import { stackStyle } from '../Common/styles';
+
+export const V2Usage: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle} gap={5}>
+        <TextV1 variant="caption2">Caption2 v1</TextV1>
+        <Caption2>Caption2 v2</Caption2>
+        <TextV1 variant="caption1">Caption1 v1</TextV1>
+        <Caption1>Caption1 v2</Caption1>
+        <TextV1 variant="caption1Strong">Caption1Strong v1</TextV1>
+        <Caption1Strong>Caption1Strong v2</Caption1Strong>
+        <TextV1 variant="body2">Body2 v1</TextV1>
+        <Body2>Body2 v2</Body2>
+        <TextV1 variant="body2Strong">Body2Strong v1</TextV1>
+        <Body2Strong>Body2Strong v2</Body2Strong>
+        <TextV1 variant="body1">Body1 v1</TextV1>
+        <Body1>Body1 v2</Body1>
+        <TextV1 variant="body1Strong">Body1Strong v1</TextV1>
+        <Body1Strong>Body1Strong v2</Body1Strong>
+        <TextV1 variant="title3">Title3 v1</TextV1>
+        <Title3>Title3 v2</Title3>
+        <TextV1 variant="title2">Title2 v1</TextV1>
+        <Title2>Title2 v2</Title2>
+        <TextV1 variant="title1">Title1 v1</TextV1>
+        <Title1>Title1 v2</Title1>
+        <TextV1 variant="largeTitle">LargeTitle v1</TextV1>
+        <LargeTitle>LargeTitle v2</LargeTitle>
+        <TextV1 variant="display">Display v1</TextV1>
+        <Display>Display v2</Display>
+      </Stack>
+    </View>
+  );
+};

package/src/TestComponents/TextV1/V2Usage.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Platform, Text } from 'react-native';
+
+export const V2Usage: React.FunctionComponent = () => {
+  return <Text>V2 usage is not yet supported for platform &quot;{Platform.OS}&quot;.</Text>;
+};

package/src/TestComponents/TextV1/V2Usage.win32.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { Stack } from '@fluentui-react-native/stack';
+import {
+  Body1,
+  Body1Strong,
+  Body2,
+  Body2Strong,
+  Caption1,
+  Display,
+  LargeTitle,
+  Subtitle1,
+  Subtitle1Strong,
+  Subtitle2,
+  Subtitle2Strong,
+  Title1,
+  Title1Strong,
+} from '@fluentui-react-native/text';
+
+import { stackStyle } from '../Common/styles';
+
+export const V2Usage: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle} gap={5}>
+        <Caption1>Caption1</Caption1>
+        <Body1>Body1</Body1>
+        <Body1Strong>Body1Strong</Body1Strong>
+        <Body2>Body2</Body2>
+        <Body2Strong>Body2Strong</Body2Strong>
+        <Subtitle2>Subtitle2</Subtitle2>
+        <Subtitle2Strong>Subtitle2Strong</Subtitle2Strong>
+        <Subtitle1>Subtitle1</Subtitle1>
+        <Subtitle1Strong>Subtitle1Strong</Subtitle1Strong>
+        <Title1>Title1</Title1>
+        <Title1Strong>Title1Strong</Title1Strong>
+        <LargeTitle>LargeTitle</LargeTitle>
+        <Display>Display</Display>
+      </Stack>
+    </View>
+  );
+};

package/src/TestComponents/TextV1/index.ts

@@ -0,0 +1 @@
+export * from './TextV1Test';