@fluentui-react-native/tester 0.166.0 → 0.167.1

package/src/TestComponents/TabsLegacy/TabsLegacyTest.tsx

@@ -1,302 +0,0 @@
-import * as React from 'react';
-import { Platform, View } from 'react-native';
-
-import { Tabs, TabsItem, Text, Button } from '@fluentui/react-native';
-
-import { TabsLegacyE2ETest } from './TabsLegacyE2ETest';
-import { TABS_TESTPAGE } from '../../../../E2E/src/TabsLegacy/consts';
-import { svgProps } from '../Common/iconExamples';
-import { stackStyle } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-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 = () => {
-  const svgExample = {
-    svgSource: svgProps,
-    width: 20,
-    height: 20,
-  };
-
-  return (
-    <View style={stackStyle}>
-      <Tabs label="Tabs">
-        <TabsItem headerText="Home" itemKey="A" icon={svgExample} itemCount={23}>
-          <Text>Tabs #1</Text>
-        </TabsItem>
-        <TabsItem itemKey="B" icon={svgExample} itemCount={0}>
-          <Text>Tabs #2</Text>
-        </TabsItem>
-        <TabsItem itemKey="C" icon={svgExample}>
-          <Text>Tabs #3</Text>
-        </TabsItem>
-      </Tabs>
-    </View>
-  );
-};
-
-const TabsClickEventTest: React.FunctionComponent = () => {
-  const [selectedKey, setSelectedKey] = React.useState('home_key');
-
-  const onTabsClick = (key: string) => {
-    setSelectedKey(key);
-  };
-
-  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('Tabs #1');
-
-  const onTabsClick = (key: string) => {
-    setSelectedKey(key);
-  };
-
-  return (
-    <View style={stackStyle}>
-      <Tabs label="Tabs" onTabsClick={onTabsClick} headersOnly={true} selectedKey={selectedKey}>
-        <TabsItem headerText="Home" itemKey="Tabs #1" />
-        <TabsItem headerText="File" itemKey="Tabs #2" />
-        <TabsItem headerText="Settings" itemKey="Tabs #3" />
-      </Tabs>
-      <View style={{ marginVertical: 1 }}>
-        <Text>{selectedKey}</Text>
-      </View>
-    </View>
-  );
-};
-
-const TabsRenderSeparately: React.FunctionComponent = () => {
-  const [selectedKey, setSelectedKey] = React.useState('rectangleRed');
-
-  const onTabsClick = (key: string) => {
-    setSelectedKey(key);
-  };
-
-  const getTabId = (key: string) => {
-    return `ShapeColorTabs_${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 tab's selectedKey with a button example.
-  const [selectedKey, setSelectedKey] = React.useState('home');
-  const [currTabItemIndex, setCurrTabItemIndex] = React.useState(0);
-  const tabItems = ['home', 'file', 'setting'];
-
-  const goToNextTab = () => {
-    const newCurrTabItemIndex = (currTabItemIndex + 1) % 3;
-    setCurrTabItemIndex(newCurrTabItemIndex);
-    setSelectedKey(tabItems[newCurrTabItemIndex]);
-  };
-
-  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 content="View Next Tab" onClick={goToNextTab} />
-    </View>
-  );
-};
-
-const TabsShowHideItem: React.FunctionComponent = () => {
-  const [showFirstItem, setshowFirstItem] = React.useState(true);
-
-  const toggleShowFirstItem = React.useCallback(() => {
-    setshowFirstItem(!showFirstItem);
-  }, [showFirstItem]);
-
-  return (
-    <View style={stackStyle}>
-      <Tabs label="Tabs">
-        {showFirstItem && (
-          <TabsItem headerText="Home" itemKey="home">
-            <Text>Click the button below to show/hide this tabs item.</Text>
-            <Text>The selected item will not change when the number of tabs items changes.</Text>
-            <Text>If the selected item was removed, the new first item will be selected.</Text>
-          </TabsItem>
-        )}
-        <TabsItem headerText="File" itemKey="file">
-          <Text>Tabs #2</Text>
-        </TabsItem>
-        <TabsItem headerText="Setting" itemKey="setting">
-          <Text>Tabs #3</Text>
-        </TabsItem>
-      </Tabs>
-      <Button content={`${showFirstItem ? 'Hide' : 'Show'} First Tabs Item`} onClick={toggleShowFirstItem} />
-    </View>
-  );
-};
-
-const TabsWithFlexibility: React.FunctionComponent = () => {
-  const [selectedKey, setSelectedKey] = React.useState('home');
-
-  const goHomeTab = () => {
-    setSelectedKey('home');
-  };
-
-  const onTabsClick = (key: string) => {
-    setSelectedKey(key);
-  };
-
-  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 content="View Home Tab" onClick={goHomeTab} />
-    </View>
-  );
-};
-
-const tabsSections: TestSection[] = [
-  {
-    name: 'Default Tabs',
-    testID: TABS_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: 'Show/Hide Tabs item',
-    component: TabsShowHideItem,
-  },
-  {
-    name: 'More Flexibility',
-    component: TabsWithFlexibility,
-  },
-];
-
-const e2eSections: TestSection[] = [
-  {
-    name: 'E2E Tabs Test',
-    component: TabsLegacyE2ETest,
-  },
-];
-
-if (Platform.OS !== 'windows') {
-  tabsSections.push({
-    name: 'Count and Icon',
-    component: TabsCountIcon,
-  });
-}
-
-export const TabsLegacyTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Experimental',
-    uwpStatus: 'Experimental',
-    iosStatus: 'Backlog',
-    macosStatus: 'Experimental',
-    androidStatus: 'Backlog',
-  };
-
-  const description = 'With Tabs, users can navigate to another view.';
-
-  return <Test name="Tabs Legacy Test" description={description} sections={tabsSections} status={status} e2eSections={e2eSections} />;
-};

package/src/TestComponents/TabsLegacy/index.ts

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

package/src/TestComponents/TabsV1/TabsV1E2ETest.tsx

@@ -1,76 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { Tabs, TabsItem } from '@fluentui-react-native/experimental-tabs';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-
-import {
-  TABSV1_TEST_COMPONENT,
-  TABSV1_ACCESSIBILITY_LABEL,
-  TABSV1_NO_A11Y_LABEL_COMPONENT,
-  TABSV1_TEST_COMPONENT_LABEL,
-  TABSITEMV1_ITEM_1,
-  TABSITEMV1_ITEM_2,
-  TABSITEMV1_ITEM_3,
-  TABSITEMV1_CONTENT_1,
-  TABSITEMV1_CONTENT_2,
-  TABSITEMV1_CONTENT_3,
-  TABSITEMV1_ITEM_1_ACCESSIBILITY_LABEL,
-  TABSITEMV1_NO_A11Y_LABEL_COMPONENT,
-  TABSITEMV1_TEST_COMPONENT_LABEL,
-} from '../../../../E2E/src/TabsV1/consts';
-import { stackStyle } from '../Common/styles';
-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_ITEM_1_ACCESSIBILITY_LABEL}
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(TABSITEMV1_ITEM_1)}
-          >
-            <Text {...testProps(TABSITEMV1_CONTENT_1)}>Tabs #1</Text>
-          </TabsItem>
-          <TabsItem headerText="Files" itemKey="B" {...testProps(TABSITEMV1_ITEM_2)}>
-            <Text {...testProps(TABSITEMV1_CONTENT_2)}>Tabs #2</Text>
-          </TabsItem>
-          <TabsItem headerText="Settings" itemKey="C" {...testProps(TABSITEMV1_ITEM_3)}>
-            <Text {...testProps(TABSITEMV1_CONTENT_3)}>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

@@ -1,279 +0,0 @@
-import * as React from 'react';
-import { View, Platform } from 'react-native';
-
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import { Tabs, TabsItem } from '@fluentui-react-native/experimental-tabs';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-
-import { TabsV1E2ETest } from './TabsV1E2ETest';
-import { TABSV1_TESTPAGE } from '../../../../E2E/src/TabsV1/consts';
-import { svgProps } from '../Common/iconExamples';
-import { stackStyle } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-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,
-  },
-];
-
-if (Platform.OS !== 'windows') {
-  tabsSections.push({
-    name: 'Count and Icon',
-    component: TabsCountIcon,
-  });
-}
-
-const e2eSections: TestSection[] = [
-  {
-    name: 'E2E Testing TabsV1',
-    component: TabsV1E2ETest,
-  },
-];
-
-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} e2eSections={e2eSections} />;
-};

package/src/TestComponents/TabsV1/index.ts

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