@fluentui-react-native/tester 0.126.16 → 0.126.18

package/src/TestComponents/RadioGroupLegacy/RadioGroupLegacyTest.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { RadioButton, RadioGroup, Separator } from '@fluentui/react-native';
+import { RADIOGROUP_TESTPAGE } from '../../../../E2E/src/RadioGroupLegacy/consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { RadioGroupLegacyE2ETest } from './RadioGroupLegacyE2ETest';
+
+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: RadioGroupLegacyE2ETest,
+  },
+];
+
+export const RadioGroupLegacyTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Beta',
+    uwpStatus: 'Experimental',
+    iosStatus: 'Experimental',
+    macosStatus: 'Beta',
+    androidStatus: 'Backlog',
+  };
+
+  const description = 'No description.';
+
+  return <Test name="RadioGroup Legacy Test" description={description} sections={radioGroupSections} status={status} />;
+};

package/src/TestComponents/RadioGroupLegacy/index.ts

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

package/src/TestComponents/RadioGroupV1/RadioGroupV1E2ETest.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group';
+import {
+  RADIOGROUPV1_TEST_COMPONENT,
+  RADIOGROUPV1_NO_A11Y_LABEL_COMPONENT,
+  RADIOGROUPV1_TEST_COMPONENT_LABEL,
+  RADIOGROUPV1_ACCESSIBILITY_LABEL,
+  FIRST_RADIO,
+  SECOND_RADIO,
+  THIRD_RADIO,
+  FOURTH_RADIO,
+  FIFTH_RADIO,
+  FIRST_RADIO_ACCESSIBILITY_LABEL,
+  SECOND_RADIO_LABEL,
+} from '../../../../E2E/src/RadioGroupV1/consts';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import { testProps } from '../Common/TestProps';
+
+export const RadioGroupV1E2ETest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle}>
+        <RadioGroup
+          label="RadioGroup for E2E Testing - Ally Label Set"
+          accessibilityLabel={RADIOGROUPV1_ACCESSIBILITY_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(RADIOGROUPV1_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={RADIOGROUPV1_TEST_COMPONENT_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(RADIOGROUPV1_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/RadioGroupV1/RadioGroupV1Test.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { RADIOGROUPV1_TESTPAGE } from '../../../../E2E/src/RadioGroupV1/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 { RadioGroupV1E2ETest } from './RadioGroupV1E2ETest';
+import { Test, TestSection, PlatformStatus } from '../Test';
+
+const radioGroupV1Sections: TestSection[] = [
+  {
+    name: 'Default RadioGroup Usage',
+    testID: RADIOGROUPV1_TESTPAGE,
+    component: DefaultRadioGroup,
+  },
+  {
+    name: 'Disabled RadioGroup',
+    testID: RADIOGROUPV1_TESTPAGE,
+    component: DisabledRadioGroup,
+  },
+  {
+    name: 'Required RadioGroup',
+    testID: RADIOGROUPV1_TESTPAGE,
+    component: RequiredRadioGroup,
+  },
+  {
+    name: 'RadioGroup with Label Subtext',
+    testID: RADIOGROUPV1_TESTPAGE,
+    component: SubtextRadioGroup,
+  },
+  {
+    name: 'Other Layouts',
+    testID: RADIOGROUPV1_TESTPAGE,
+    component: HorizontalRadioGroup,
+  },
+  {
+    name: 'Customized RadioGroup Usage',
+    testID: RADIOGROUPV1_TESTPAGE,
+    component: CustomizedRadioGroup,
+  },
+  {
+    name: 'RadioGroup for E2E Testing',
+    testID: RADIOGROUPV1_TESTPAGE,
+    component: RadioGroupV1E2ETest,
+  },
+];
+
+export const RadioGroupV1Test: 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="RadioGroupV1 Test" description={description} spec={spec} sections={radioGroupV1Sections} status={status} />;
+};

package/src/TestComponents/RadioGroupV1/index.ts

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

package/src/TestComponents/TabsLegacy/TabsLegacyE2ETest.tsx

@@ -0,0 +1,92 @@
+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/TabsLegacy/consts';
+import { testProps } from '../Common/TestProps';
+
+export const TabsLegacyE2ETest: 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/TabsLegacy/TabsLegacyTest.tsx

@@ -0,0 +1,296 @@
+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/TabsLegacy/consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { TabsLegacyE2ETest } from './TabsLegacyE2ETest';
+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: 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} />;
+};

package/src/TestComponents/TabsLegacy/index.ts

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