@fluentui-react-native/tester 0.126.16 → 0.126.18

package/src/TestComponents/TabsV1/TabsV1E2ETest.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+import { Tabs, TabsItem } from '@fluentui-react-native/experimental-tabs';
+import { stackStyle } from '../Common/styles';
+import {
+  TABSV1_TEST_COMPONENT,
+  TABSV1_ACCESSIBILITY_LABEL,
+  TABSV1_NO_A11Y_LABEL_COMPONENT,
+  TABSV1_TEST_COMPONENT_LABEL,
+  TABSITEMV1_TEST_COMPONENT,
+  TABSITEMV1_ACCESSIBILITY_LABEL,
+  TABSITEMV1_NO_A11Y_LABEL_COMPONENT,
+  TABSITEMV1_TEST_COMPONENT_LABEL,
+} from '../../../../E2E/src/TabsV1/consts';
+import { testProps } from '../Common/TestProps';
+
+export const TabsV1E2ETest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <View style={stackStyle}>
+        <Tabs
+          label="Tabs"
+          accessibilityLabel={TABSV1_ACCESSIBILITY_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(TABSV1_TEST_COMPONENT)}
+        >
+          <TabsItem
+            headerText="Home"
+            itemKey="A"
+            accessibilityLabel={TABSITEMV1_ACCESSIBILITY_LABEL}
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(TABSITEMV1_TEST_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 style={stackStyle}>
+        <Tabs
+          label={TABSV1_TEST_COMPONENT_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(TABSV1_NO_A11Y_LABEL_COMPONENT)}
+        >
+          <TabsItem
+            headerText={TABSITEMV1_TEST_COMPONENT_LABEL}
+            itemKey="A"
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(TABSITEMV1_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/TestComponents/TabsV1/TabsV1Test.tsx

@@ -0,0 +1,273 @@
+import * as React from 'react';
+import { View, Platform } from 'react-native';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+import { Button } from '@fluentui-react-native/experimental-button';
+import { Tabs, TabsItem } from '@fluentui-react-native/experimental-tabs';
+import { stackStyle } from '../Common/styles';
+import { TABSV1_TESTPAGE } from '../../../../E2E/src/TabsV1/consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { TabsV1E2ETest } from './TabsV1E2ETest';
+import { svgProps } from '../Common/iconExamples';
+
+const TabsMainTest: React.FunctionComponent = () => {
+  return (
+    <View style={stackStyle}>
+      <Tabs label="Tabs">
+        <TabsItem headerText="Home" itemKey="A">
+          <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>
+  );
+};
+
+const DisabledTabs: React.FunctionComponent = () => {
+  return (
+    <View style={stackStyle}>
+      <Tabs label="Tabs">
+        <TabsItem headerText="Home" itemKey="A">
+          <Text>Tabs #1</Text>
+        </TabsItem>
+        <TabsItem headerText="Files" itemKey="B" disabled={true}>
+          <Text>Tabs #2</Text>
+        </TabsItem>
+        <TabsItem headerText="Settings" itemKey="C">
+          <Text>Tabs #3</Text>
+        </TabsItem>
+      </Tabs>
+    </View>
+  );
+};
+
+const TabsCountIcon: React.FunctionComponent = () => {
+  return (
+    <View style={stackStyle}>
+      <Tabs label="Tabs">
+        <TabsItem headerText="Home" itemKey="A" icon={{ svgSource: svgProps, width: 20, height: 20, style: { margin: 5 } }} itemCount={23}>
+          <Text>Tabs #1</Text>
+        </TabsItem>
+        <TabsItem itemKey="B" icon={{ svgSource: svgProps, width: 20, height: 20 }} itemCount={0}>
+          <Text>Tabs #2</Text>
+        </TabsItem>
+        <TabsItem itemKey="C" icon={{ svgSource: svgProps, width: 20, height: 20 }}>
+          <Text>Tabs #3</Text>
+        </TabsItem>
+      </Tabs>
+    </View>
+  );
+};
+
+const TabsClickEventTest: React.FunctionComponent = () => {
+  const [selectedKey, setSelectedKey] = React.useState('home_key');
+
+  const onTabsClick = React.useCallback(
+    (key: string) => {
+      setSelectedKey(key);
+    },
+    [setSelectedKey],
+  );
+
+  return (
+    <View style={stackStyle}>
+      <Text>{'Last onTabsClick from: ' + selectedKey}</Text>
+      <Tabs label="Tabs" onTabsClick={onTabsClick} selectedKey={selectedKey}>
+        <TabsItem headerText="Home" itemKey="home_key">
+          <Text>Tabs #1</Text>
+        </TabsItem>
+        <TabsItem headerText="Files" itemKey="files_key">
+          <Text>Tabs #2</Text>
+        </TabsItem>
+        <TabsItem headerText="Settings" itemKey="settings_key">
+          <Text>Tabs #3</Text>
+        </TabsItem>
+      </Tabs>
+    </View>
+  );
+};
+
+const TabsChangingViews: React.FunctionComponent = () => {
+  // If User wants to control what gets rendered example
+  const [selectedKey, setSelectedKey] = React.useState('home');
+
+  const onTabsClick = React.useCallback(
+    (key: string) => {
+      setSelectedKey(key);
+    },
+    [setSelectedKey],
+  );
+
+  return (
+    <View style={stackStyle}>
+      <Tabs label="Tabs" onTabsClick={onTabsClick} headersOnly={true} selectedKey={selectedKey}>
+        <TabsItem headerText="Home" itemKey="home" />
+        <TabsItem headerText="File" itemKey="file" />
+        <TabsItem headerText="Settings" itemKey="settings" />
+      </Tabs>
+      <View style={{ marginVertical: 1 }}>
+        {selectedKey == 'home' && <Text>Tabs #1</Text>}
+        {selectedKey == 'file' && <Text>Tabs #2</Text>}
+        {selectedKey == 'settings' && <Text>Tabs #3</Text>}
+      </View>
+    </View>
+  );
+};
+
+const TabsRenderSeparately: React.FunctionComponent = () => {
+  const [selectedKey, setSelectedKey] = React.useState('rectangleRed');
+
+  const onTabsClick = React.useCallback(
+    (key: string) => {
+      setSelectedKey(key);
+    },
+    [setSelectedKey],
+  );
+
+  const getTabId = (key: string) => {
+    return `ShapeColorPivot_${key}`;
+  };
+
+  return (
+    <View style={stackStyle}>
+      <View
+        accessible={true}
+        focusable={true}
+        accessibilityLabel={getTabId(selectedKey)}
+        style={{
+          width: 100,
+          height: selectedKey === 'squareRed' ? 100 : 200,
+          backgroundColor: selectedKey === 'rectangleGreen' ? 'green' : 'red',
+        }}
+      />
+      <Tabs label="Tabs" onTabsClick={onTabsClick} getTabId={getTabId} headersOnly={true} selectedKey={selectedKey}>
+        <TabsItem headerText="Rectangle Red" itemKey="rectangleRed" />
+        <TabsItem headerText="Square Red" itemKey="squareRed" />
+        <TabsItem headerText="Rectangle Green" itemKey="rectangleGreen" />
+      </Tabs>
+    </View>
+  );
+};
+
+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);
+  const tabItems = ['home', 'file', 'setting'];
+
+  const goToNextTab = React.useCallback(() => {
+    const newCurrTabItemIndex = (currTabItemIndex + 1) % 3;
+    setCurrTabItemIndex(newCurrTabItemIndex);
+    setSelectedKey(tabItems[newCurrTabItemIndex]);
+  }, [currTabItemIndex]);
+
+  return (
+    <View style={stackStyle}>
+      <Tabs label="Tabs" selectedKey={selectedKey} isCircularNavigation={true}>
+        <TabsItem headerText="Home" itemKey="home">
+          <Text>Tabs #1</Text>
+        </TabsItem>
+        <TabsItem headerText="File" itemKey="file">
+          <Text>Tabs #2</Text>
+        </TabsItem>
+        <TabsItem headerText="Setting" itemKey="setting">
+          <Text>Tabs #3</Text>
+        </TabsItem>
+      </Tabs>
+      <Button onClick={goToNextTab}>View Next Tab</Button>
+    </View>
+  );
+};
+
+const TabsWithFlexibility: React.FunctionComponent = () => {
+  const [selectedKey, setSelectedKey] = React.useState('home');
+
+  const goHomeTab = React.useCallback(() => {
+    setSelectedKey('home');
+  }, [setSelectedKey]);
+
+  const onTabsClick = React.useCallback(
+    (key: string) => {
+      setSelectedKey(key);
+    },
+    [setSelectedKey],
+  );
+
+  return (
+    <View style={stackStyle}>
+      <Tabs selectedKey={selectedKey} onTabsClick={onTabsClick} isCircularNavigation={true}>
+        <TabsItem headerText="Home" itemKey="home">
+          <Text>Tabs #1</Text>
+        </TabsItem>
+        <TabsItem headerText="File" itemKey="file">
+          <Text>Tabs #2</Text>
+        </TabsItem>
+        <TabsItem headerText="Setting" itemKey="setting">
+          <Text>Tabs #3</Text>
+        </TabsItem>
+      </Tabs>
+      <Button onClick={goHomeTab}>View Home Tab</Button>
+    </View>
+  );
+};
+
+const tabsSections: TestSection[] = [
+  {
+    name: 'Default Tabs',
+    testID: TABSV1_TESTPAGE,
+    component: TabsMainTest,
+  },
+  {
+    name: 'Tabs with disabled',
+    component: DisabledTabs,
+  },
+  {
+    name: 'Trigger onTabsClick event',
+    component: TabsClickEventTest,
+  },
+  {
+    name: 'User Custom Render',
+    component: TabsChangingViews,
+  },
+  {
+    name: 'Render Content Separately',
+    component: TabsRenderSeparately,
+  },
+  {
+    name: 'Override Selected Key',
+    component: TabsSettingSelectedKey,
+  },
+  {
+    name: 'More Flexibility',
+    component: TabsWithFlexibility,
+  },
+  {
+    name: 'E2E Testing TabsV1',
+    component: TabsV1E2ETest,
+  },
+];
+
+if (Platform.OS !== 'windows') {
+  tabsSections.push({
+    name: 'Count and Icon',
+    component: TabsCountIcon,
+  });
+}
+
+export const TabsV1Test: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Production',
+    uwpStatus: 'Experimental',
+    iosStatus: 'Backlog',
+    macosStatus: 'Experimental',
+    androidStatus: 'Backlog',
+  };
+
+  const description = 'With Tabs, users can navigate to another view.';
+
+  return <Test name="TabsV1 Test" description={description} sections={tabsSections} status={status} />;
+};

package/src/TestComponents/TabsV1/index.ts

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

package/src/TestComponents/TextLegacy/TextLegacyE2ETest.tsx

@@ -0,0 +1,36 @@
+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 {
+  DEPRECATED_TEXT_FIRST_ACCESSIBILITY_LABEL,
+  DEPRECATED_TEXT_FIRST_COMPONENT,
+  DEPRECATED_TEXT_SECOND_COMPONENT,
+  DEPRECATED_TEXT_SECOND_COMPONENT_CONTENT,
+} from '../../../../E2E/src/TextLegacy/consts';
+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,43 @@
+import * as React from 'react';
+import { StandardUsage } from './StandardUsage';
+import { CustomizeUsage } from './CustomizeUsage';
+import { PressableUsage } from './PressableUsage';
+import { TextLegacyE2ETest } from './TextLegacyE2ETest';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { TEXT_TESTPAGE } from '../../../../E2E/src/index.consts';
+
+const textSections: TestSection[] = [
+  {
+    name: 'Standard Usage',
+    testID: TEXT_TESTPAGE,
+    component: StandardUsage,
+  },
+  {
+    name: 'Customize Usage',
+    component: CustomizeUsage,
+  },
+  {
+    name: 'Pressable Usage',
+    component: PressableUsage,
+  },
+  {
+    name: 'E2E Text Tests',
+    component: TextLegacyE2ETest,
+  },
+];
+
+export const TextLegacyTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Deprecated',
+    uwpStatus: 'Experimental',
+    iosStatus: 'Experimental',
+    macosStatus: 'Experimental',
+    androidStatus: 'Beta',
+  };
+
+  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} />;
+};

package/src/TestComponents/TextLegacy/index.ts

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

package/src/TestComponents/TextV1/StandardUsage.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Text } from '@fluentui-react-native/experimental-text';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import { HOMEPAGE_TEXTV1_BUTTON } from '../../../../E2E/src/TextV1/consts';
+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,36 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Text } from '@fluentui-react-native/experimental-text';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import {
+  TEXTV1_TEST_COMPONENT,
+  TEXTV1_ACCESSIBILITY_LABEL,
+  TEXTV1_NO_A11Y_LABEL_COMPONENT,
+  TEXTV1_CONTENT,
+} from '../../../../E2E/src/TextV1/consts';
+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,51 @@
+import * as React from 'react';
+import { StandardUsage } from './StandardUsage';
+import { V2Usage } from './V2Usage';
+import { MaximumFontSizeUsage } from './MaximumFontSize';
+import { CustomizeUsage } from './CustomizeUsage';
+import { PressableUsage } from './PressableUsage';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { TextV1E2ETest } from './TextV1E2ETest';
+import { TEXTV1_TESTPAGE } from '../../../../E2E/src/TextV1/consts';
+
+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,
+  },
+  {
+    name: 'E2E Testing for TextV1',
+    component: TextV1E2ETest,
+  },
+];
+
+export const TextV1Test: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Beta',
+    uwpStatus: 'Experimental',
+    iosStatus: 'Experimental',
+    macosStatus: 'Experimental',
+    androidStatus: 'Experimental',
+  };
+
+  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} />;
+};

package/src/TestComponents/TextV1/index.ts

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