@fluentui-react-native/tester 0.126.16 → 0.126.18

package/src/TestComponents/RadioGroup/RadioGroupTest.tsx

@@ -1,79 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-import { RadioButton, RadioGroup, Separator } from '@fluentui/react-native';
-import { RADIOGROUP_TESTPAGE } from '../../../../E2E/src/RadioGroup/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
-import { E2ERadioGroupTest } from './RadioGroupE2ETest';
-
-const BasicRadioGroup: React.FunctionComponent = () => {
-  // Client's example onChange function
-  const onChange = (key: string) => {
-    console.log(key);
-  };
-
-  const [selectedKey, setSelectedKey] = React.useState('C');
-
-  const onChange2 = React.useCallback((key: string) => {
-    if (key == 'A') {
-      setSelectedKey('A');
-    } else if (key == 'B') {
-      setSelectedKey('B');
-    } else if (key == 'C') {
-      setSelectedKey('C');
-    } else if (key == 'D') {
-      setSelectedKey('D');
-    }
-  }, []);
-
-  return (
-    <View>
-      <RadioGroup label="Uncontrolled RadioGroup" defaultSelectedKey="X" onChange={onChange}>
-        <RadioButton content="Option W" buttonKey="W" accessibilityLabel="Test Accessibility Label" />
-        <RadioButton content="Option X" buttonKey="X" />
-        <RadioButton content="Option Y (disabled)" buttonKey="C" disabled={true} />
-        <RadioButton content="Option Z" buttonKey="Z" />
-      </RadioGroup>
-      <Separator />
-      <RadioGroup label="Controlled RadioGroup" selectedKey={selectedKey} onChange={onChange2}>
-        <View>
-          <RadioButton
-            content="Option A"
-            buttonKey="A"
-            accessibilityLabel="Test Accessibility Label"
-            accessibilityPositionInSet={1}
-            accessibilitySetSize={4}
-          />
-          <RadioButton content="Option B" buttonKey="B" accessibilityPositionInSet={2} accessibilitySetSize={4} />
-          <RadioButton content="Option C" buttonKey="C" accessibilityPositionInSet={3} accessibilitySetSize={4} />
-          <RadioButton content="Option D" buttonKey="D" accessibilityPositionInSet={4} accessibilitySetSize={4} />
-        </View>
-      </RadioGroup>
-    </View>
-  );
-};
-
-const radioGroupSections: TestSection[] = [
-  {
-    name: 'Basic RadioGroup Usage',
-    testID: RADIOGROUP_TESTPAGE,
-    component: BasicRadioGroup,
-  },
-  {
-    name: 'RadioGroup for E2E Testing',
-    component: E2ERadioGroupTest,
-  },
-];
-
-export const RadioGroupTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Beta',
-    uwpStatus: 'Experimental',
-    iosStatus: 'Experimental',
-    macosStatus: 'Beta',
-    androidStatus: 'Backlog',
-  };
-
-  const description = 'No description.';
-
-  return <Test name="RadioGroup Test" description={description} sections={radioGroupSections} status={status} />;
-};

package/src/TestComponents/RadioGroup/index.ts

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

package/src/TestComponents/RadioGroupExperimental/RadioGroupExperimentalE2ETest.tsx

@@ -1,77 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group';
-import {
-  EXPERIMENTAL_RADIOGROUP_TEST_COMPONENT,
-  EXPERIMENTAL_RADIOGROUP_NO_A11Y_LABEL_COMPONENT,
-  EXPERIMENTAL_RADIOGROUP_TEST_COMPONENT_LABEL,
-  EXPERIMENTAL_RADIOGROUP_ACCESSIBILITY_LABEL,
-  FIRST_RADIO,
-  SECOND_RADIO,
-  THIRD_RADIO,
-  FOURTH_RADIO,
-  FIFTH_RADIO,
-  FIRST_RADIO_ACCESSIBILITY_LABEL,
-  SECOND_RADIO_LABEL,
-} from '../../../../E2E/src/RadioGroupExperimental/consts';
-import { Stack } from '@fluentui-react-native/stack';
-import { stackStyle } from '../Common/styles';
-import { testProps } from '../Common/TestProps';
-
-export const E2ERadioGroupExperimentalTest: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Stack style={stackStyle}>
-        <RadioGroup
-          label="RadioGroup for E2E Testing - Ally Label Set"
-          accessibilityLabel={EXPERIMENTAL_RADIOGROUP_ACCESSIBILITY_LABEL}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(EXPERIMENTAL_RADIOGROUP_TEST_COMPONENT)}
-        >
-          <Radio
-            label="Option A"
-            value="A"
-            accessibilityLabel={FIRST_RADIO_ACCESSIBILITY_LABEL}
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(FIRST_RADIO)}
-          />
-          <Radio
-            label={SECOND_RADIO_LABEL}
-            value="B"
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(SECOND_RADIO)}
-          />
-          <Radio
-            label="Option C (disabled)"
-            value="C"
-            disabled={true}
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(THIRD_RADIO)}
-          />
-          <Radio
-            label="Option D"
-            value="C"
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(FOURTH_RADIO)}
-          />
-        </RadioGroup>
-        <RadioGroup
-          label={
-            EXPERIMENTAL_RADIOGROUP_TEST_COMPONENT_LABEL
-          } /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(EXPERIMENTAL_RADIOGROUP_NO_A11Y_LABEL_COMPONENT)}
-        >
-          <Radio
-            label="Option W"
-            value="W"
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(FIFTH_RADIO)}
-          />
-          <Radio label="Option X" value="X" />
-          <Radio label="Option Y (disabled)" value="C" disabled={true} />
-          <Radio label="Option Z" value="Z" />
-        </RadioGroup>
-      </Stack>
-    </View>
-  );
-};

package/src/TestComponents/RadioGroupExperimental/RadioGroupExperimentalTest.tsx

@@ -1,73 +0,0 @@
-import * as React from 'react';
-import { RADIO_GROUP_EXPERIMENTAL_TESTPAGE } from '../../../../E2E/src/RadioGroupExperimental/consts';
-import { DefaultRadioGroup } from './DefaultRadioGroup';
-import { RequiredRadioGroup } from './RequiredRadioGroup';
-import { DisabledRadioGroup } from './DisabledRadioGroup';
-import { SubtextRadioGroup } from './SubtextRadioGroup';
-import { HorizontalRadioGroup } from './HorizontalRadioGroup';
-import { CustomizedRadioGroup } from './CustomizedRadioGroup';
-import { E2ERadioGroupExperimentalTest } from './RadioGroupExperimentalE2ETest';
-import { Test, TestSection, PlatformStatus } from '../Test';
-
-const radioGroupExperimentalSections: TestSection[] = [
-  {
-    name: 'Default RadioGroup Usage',
-    testID: RADIO_GROUP_EXPERIMENTAL_TESTPAGE,
-    component: DefaultRadioGroup,
-  },
-  {
-    name: 'Disabled RadioGroup',
-    testID: RADIO_GROUP_EXPERIMENTAL_TESTPAGE,
-    component: DisabledRadioGroup,
-  },
-  {
-    name: 'Required RadioGroup',
-    testID: RADIO_GROUP_EXPERIMENTAL_TESTPAGE,
-    component: RequiredRadioGroup,
-  },
-  {
-    name: 'RadioGroup with Label Subtext',
-    testID: RADIO_GROUP_EXPERIMENTAL_TESTPAGE,
-    component: SubtextRadioGroup,
-  },
-  {
-    name: 'Other Layouts',
-    testID: RADIO_GROUP_EXPERIMENTAL_TESTPAGE,
-    component: HorizontalRadioGroup,
-  },
-  {
-    name: 'Customized RadioGroup Usage',
-    testID: RADIO_GROUP_EXPERIMENTAL_TESTPAGE,
-    component: CustomizedRadioGroup,
-  },
-  {
-    name: 'RadioGroup for E2E Testing',
-    testID: RADIO_GROUP_EXPERIMENTAL_TESTPAGE,
-    component: E2ERadioGroupExperimentalTest,
-  },
-];
-
-export const RadioGroupExperimentalTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Beta',
-    uwpStatus: 'Experimental',
-    iosStatus: 'Experimental',
-    macosStatus: 'Backlog',
-    androidStatus: 'Backlog',
-  };
-
-  const description =
-    'RadioGroup lets users select a single option from two or more choices. Each option is represented by one Radio; a user can select only one Radio in a RadioGroup.';
-
-  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/experimental/RadioGroup/SPEC.md';
-
-  return (
-    <Test
-      name="Experimental RadioGroup Test"
-      description={description}
-      spec={spec}
-      sections={radioGroupExperimentalSections}
-      status={status}
-    />
-  );
-};

package/src/TestComponents/RadioGroupExperimental/index.ts

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

package/src/TestComponents/Tabs/TabsE2ETest.tsx

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-import { Tabs, TabsItem, Text } from '@fluentui/react-native';
-import { stackStyle } from '../Common/styles';
-import {
-  TABS_TEST_COMPONENT,
-  TABS_ACCESSIBILITY_LABEL,
-  TABS_TEST_COMPONENT_LABEL,
-  TABS_NO_A11Y_LABEL_COMPONENT,
-  SECOND_TABS_ITEM_CONTENT,
-  FIRST_TABS_ITEM,
-  SECOND_TABS_ITEM,
-  THIRD_TABS_ITEM,
-  FIRST_TABS_ITEM_ACCESSIBILITY_LABEL,
-  THIRD_TABS_ITEM_LABEL,
-  THIRD_TABS_ITEM_CONTENT,
-  FIRST_TABS_ITEM_CONTENT,
-} from '../../../../E2E/src/Tabs/consts';
-import { testProps } from '../Common/TestProps';
-
-export const E2ETabsTest: React.FunctionComponent = () => {
-  return (
-    <View>
-      <View style={stackStyle}>
-        <Tabs
-          label="Tabs"
-          accessibilityLabel={TABS_ACCESSIBILITY_LABEL}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(TABS_TEST_COMPONENT)}
-        >
-          <TabsItem
-            headerText="Home"
-            itemKey="A"
-            accessibilityLabel={FIRST_TABS_ITEM_ACCESSIBILITY_LABEL}
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(FIRST_TABS_ITEM)}
-          >
-            <Text
-              /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-              {...testProps(FIRST_TABS_ITEM_CONTENT)}
-            >
-              Tabs #1
-            </Text>
-          </TabsItem>
-          <TabsItem
-            headerText="Files"
-            itemKey="B"
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(SECOND_TABS_ITEM)}
-          >
-            <Text
-              /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-              {...testProps(SECOND_TABS_ITEM_CONTENT)}
-            >
-              Tabs #2
-            </Text>
-          </TabsItem>
-          <TabsItem
-            headerText={THIRD_TABS_ITEM_LABEL}
-            itemKey="C"
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(THIRD_TABS_ITEM)}
-          >
-            <Text
-              /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-              {...testProps(THIRD_TABS_ITEM_CONTENT)}
-            >
-              Tabs #3
-            </Text>
-          </TabsItem>
-        </Tabs>
-      </View>
-      <View style={stackStyle}>
-        <Tabs
-          label={TABS_TEST_COMPONENT_LABEL}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(TABS_NO_A11Y_LABEL_COMPONENT)}
-        >
-          <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>
-    </View>
-  );
-};

package/src/TestComponents/Tabs/TabsTest.tsx

@@ -1,296 +0,0 @@
-import * as React from 'react';
-import { Platform, View } from 'react-native';
-import { Tabs, TabsItem, Text, Button } from '@fluentui/react-native';
-import { stackStyle } from '../Common/styles';
-import { TABS_TESTPAGE } from '../../../../E2E/src/Tabs/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
-import { E2ETabsTest } from './TabsE2ETest';
-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 = () => {
-  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,
-  },
-  {
-    name: 'E2E Tabs Test',
-    component: E2ETabsTest,
-  },
-];
-
-if (Platform.OS !== 'windows') {
-  tabsSections.push({
-    name: 'Count and Icon',
-    component: TabsCountIcon,
-  });
-}
-
-export const TabsTest: 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 Test" description={description} sections={tabsSections} status={status} />;
-};

package/src/TestComponents/Tabs/index.ts

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