@fluentui-react-native/tester 0.126.16 → 0.126.17

package/src/TestComponents/MenuButtonV1/StandardMenuButtonTest.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { Separator, ContextualMenuProps } from '@fluentui/react-native';
+import { Text, View, Switch, Platform } from 'react-native';
+import { menuItems, iconProps } from './testData';
+import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonV1TestStyles';
+import { IconSourcesType } from '@fluentui-react-native/icon';
+import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
+import { testImage } from '../Common/iconExamples';
+
+export const StandardMenuButton: React.FunctionComponent = () => {
+  const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
+
+  const [focusOnMount, setShouldFocusOnMount] = React.useState(true);
+  const toggleFocusOnMount = React.useCallback((value) => setShouldFocusOnMount(value), [setShouldFocusOnMount]);
+
+  const [focusOnContainer, setShouldFocusOnContainer] = React.useState(false);
+  const toggleFocusOnContainer = React.useCallback((value) => setShouldFocusOnContainer(value), [setShouldFocusOnContainer]);
+
+  const onItemClick = React.useCallback(
+    (key) => {
+      setLastMenuItemClicked(key);
+    },
+    [setLastMenuItemClicked],
+  );
+
+  const contextualMenuProps: ContextualMenuProps = {
+    accessibilityLabel: 'MenuButton',
+    shouldFocusOnMount: focusOnMount,
+    shouldFocusOnContainer: focusOnContainer,
+  };
+
+  const iconToShow: IconSourcesType = Platform.select({
+    macos: testImage, //GH #931, macOS MenuButton only supports showing PNG icons
+    default: iconProps,
+  });
+
+  return (
+    <View>
+      <View style={viewWrapperStyle}>
+        <View style={columnStyle}>
+          <View style={rowStyle}>
+            <Text>Should Focus on Mount</Text>
+            <Switch value={focusOnMount} onValueChange={toggleFocusOnMount} />
+          </View>
+
+          <View style={rowStyle}>
+            <Text>Should Focus on Container</Text>
+            <Switch value={focusOnContainer} onValueChange={toggleFocusOnContainer} />
+          </View>
+        </View>
+
+        <Separator vertical />
+
+        <View style={columnStyle}>
+          <Text>
+            <Text>Last Menu Item Clicked: </Text>
+            {lastMenuItemClicked > 0 ? <Text style={textColor}>{lastMenuItemClicked}</Text> : <Text style={textColor}>none</Text>}
+          </Text>
+          <View style={{ ...rowStyle, paddingHorizontal: 5 }}>
+            <View style={columnStyle}>
+              <MenuButton
+                content="Standard MenuButton"
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+              />
+              <Text>MenuButton with icon</Text>
+              <MenuButton
+                icon={iconToShow}
+                content="MenuButton"
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+              />
+              <Text>MenuButton with only icon</Text>
+              <MenuButton icon={iconToShow} menuItems={menuItems} onItemClick={onItemClick} contextualMenu={contextualMenuProps} />
+              <Text>Disabled MenuButton</Text>
+              <MenuButton disabled content="Disabled MenuButton" menuItems={menuItems} />
+            </View>
+            <Separator vertical />
+            <View style={columnStyle}>
+              <MenuButton
+                appearance="primary"
+                content="Primary MenuButton"
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+              />
+              <Text>Primary MenuButton with icon</Text>
+              <MenuButton
+                appearance="primary"
+                icon={iconToShow}
+                content="Primary MenuButton"
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+              />
+              <Text>Primary MenuButton with only icon</Text>
+              <MenuButton
+                appearance="primary"
+                icon={iconToShow}
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+              />
+              <Text>Primary Disabled MenuButton</Text>
+              <MenuButton appearance="primary" disabled content="Disabled Primary MenuButton" menuItems={menuItems} />
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/TestComponents/MenuButtonV1/index.ts

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

package/src/TestComponents/RadioGroupLegacy/RadioGroupLegacyE2ETest.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { RadioButton, RadioGroup } from '@fluentui/react-native';
+import {
+  RADIOGROUP_TEST_COMPONENT,
+  RADIOGROUP_NO_A11Y_LABEL_COMPONENT,
+  RADIOGROUP_TEST_COMPONENT_LABEL,
+  RADIOGROUP_ACCESSIBILITY_LABEL,
+  FIRST_RADIO_BUTTON,
+  SECOND_RADIO_BUTTON,
+  THIRD_RADIO_BUTTON,
+  FOURTH_RADIO_BUTTON,
+  FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL,
+  SECOND_RADIO_BUTTON_LABEL,
+} from '../../../../E2E/src/RadioGroupLegacy/consts';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import { testProps } from '../Common/TestProps';
+
+export const RadioGroupLegacyE2ETest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle}>
+        <RadioGroup
+          label="RadioGroup for E2E Testing - Ally Label Set"
+          accessibilityLabel={RADIOGROUP_ACCESSIBILITY_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(RADIOGROUP_TEST_COMPONENT)}
+        >
+          <RadioButton
+            content="Option A"
+            buttonKey="A"
+            accessibilityLabel={FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL}
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(FIRST_RADIO_BUTTON)}
+          />
+          <RadioButton
+            content={SECOND_RADIO_BUTTON_LABEL}
+            buttonKey="B"
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(SECOND_RADIO_BUTTON)}
+          />
+          <RadioButton
+            content="Option C (disabled)"
+            buttonKey="C"
+            disabled={true}
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(THIRD_RADIO_BUTTON)}
+          />
+          <RadioButton
+            content="Option D"
+            buttonKey="C"
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(FOURTH_RADIO_BUTTON)}
+          />
+        </RadioGroup>
+        <RadioGroup
+          label={RADIOGROUP_TEST_COMPONENT_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(RADIOGROUP_NO_A11Y_LABEL_COMPONENT)}
+        >
+          <RadioButton content="Option W" buttonKey="W" />
+          <RadioButton content="Option X" buttonKey="X" />
+          <RadioButton content="Option Y (disabled)" buttonKey="C" disabled={true} />
+          <RadioButton content="Option Z" buttonKey="Z" />
+        </RadioGroup>
+      </Stack>
+    </View>
+  );
+};

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>
+  );
+};