@fluentui-react-native/tester 0.55.2 → 0.57.0

package/src/E2E/CheckboxExperimental/specs/ExperimentalCheckbox.spec.win.ts

@@ -1,11 +1,11 @@
 import NavigateAppPage from '../../common/NavigateAppPage.win';
-import ExperimentalCheckboxPageObject from '../pages/ExperimentalCheckboxPageObject';
+import ExperimentalCheckboxPageObject, { ExperimentalCheckboxSelector } from '../pages/ExperimentalCheckboxPageObject';
 import { ComponentSelector } from '../../common/BasePage.win';
 import {
   EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL,
   EXPERIMENTAL_CHECKBOX_ACCESSIBILITY_LABEL,
 } from '../../../FluentTester/TestComponents/CheckboxExperimental/consts';
-import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, CHECKBOX_A11Y_ROLE } from '../../common/consts';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, CHECKBOX_A11Y_ROLE, Keys } from '../../common/consts';
 
 describe('Experimental Checkbox Testing Initialization', () => {
   it('Wait for app load', () => {
@@ -28,6 +28,12 @@ describe('Experimental Checkbox Testing Initialization', () => {
 });
 
 describe('Experimental Checkbox Accessibility Testing', () => {
+  /* Scrolls and waits for the Checkbox to be visible on the Test Page */
+  beforeEach(() => {
+    ExperimentalCheckboxPageObject.scrollToTestElement();
+    ExperimentalCheckboxPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  });
+
   it('Experimental Checkbox - Validate accessibilityRole is correct', () => {
     ExperimentalCheckboxPageObject.scrollToTestElement();
     ExperimentalCheckboxPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
@@ -56,3 +62,43 @@ describe('Experimental Checkbox Accessibility Testing', () => {
     expect(ExperimentalCheckboxPageObject.didAssertPopup()).toBeFalsy(ExperimentalCheckboxPageObject.ERRORMESSAGE_ASSERT);
   });
 });
+
+describe('Checkbox Functional Testing', () => {
+  /* Scrolls and waits for the Checkbox to be visible on the Test Page AND un-checks the Checkbox */
+  beforeEach(() => {
+    ExperimentalCheckboxPageObject.scrollToTestElement();
+    ExperimentalCheckboxPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+
+    ExperimentalCheckboxPageObject.toggleCheckboxToUnchecked();
+  });
+
+  it("Click on a Checkbox -> Validate it toggles correctly AND calls the user's onChange", () => {
+    /* Validate the Checkbox is initially toggled OFF */
+    expect(ExperimentalCheckboxPageObject.isCheckboxChecked()).toBeFalsy();
+
+    /* Click on the Checkbox to toggle on */
+    ExperimentalCheckboxPageObject.clickComponent();
+    ExperimentalCheckboxPageObject.waitForCheckboxChecked(PAGE_TIMEOUT);
+
+    expect(ExperimentalCheckboxPageObject.didOnChangeCallbackFire()).toBeTruthy();
+
+    /* Validate the Checkbox is toggled ON */
+    expect(ExperimentalCheckboxPageObject.isCheckboxChecked()).toBeTruthy();
+
+    ExperimentalCheckboxPageObject.clickComponent();
+
+    /* Validate the Checkbox is toggled OFF */
+    expect(ExperimentalCheckboxPageObject.isCheckboxChecked()).toBeFalsy();
+    expect(ExperimentalCheckboxPageObject.didAssertPopup()).toBeFalsy(ExperimentalCheckboxPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('Click the "Spacebar" on a Checkbox and verify it toggles', () => {
+    /* Presses the "space bar" to select the Checkbox */
+    ExperimentalCheckboxPageObject.sendKey(ExperimentalCheckboxSelector.Primary, Keys.Spacebar);
+    ExperimentalCheckboxPageObject.waitForCheckboxChecked(PAGE_TIMEOUT);
+
+    /* Validate the Checkbox is selected */
+    expect(ExperimentalCheckboxPageObject.isCheckboxChecked()).toBeTruthy();
+    expect(ExperimentalCheckboxPageObject.didAssertPopup()).toBeFalsy(ExperimentalCheckboxPageObject.ERRORMESSAGE_ASSERT);
+  });
+});

package/src/E2E/README.md

@@ -94,6 +94,13 @@ You'll want to make one for your component under **apps/fluent-tester/src/Fluent
 
 **You can simply copy/paste a _consts.ts_ file from another component, and just change the name of the component in the const names and the values.**
 
+**This is really important!**
+
+There are a **two specific** naming conventions we need to follow to keep in-sync with the Native side.
+
+1. The button that navigates to each test page - **Homepage\_'componentName'\_Button**
+2. The test page itself that lets us validate if the page loaded - **'componentName'\_TestPage**
+
 Now, what are Page Objects and Spec Documents?
 
 ## Page Objects

package/src/E2E/common/NativeTesting/pages/NativeTestingPageObject.win.ts

@@ -0,0 +1,56 @@
+import { BasePage, By } from '../../../common/BasePage.win';
+
+const ScrollViewTestId = 'SCROLLVIEW_TEST_ID';
+
+class NativeTestingPageObject extends BasePage {
+  waitForScrollViewDisplayed(timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this.doesScrollViewParentExist();
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg:
+          'For testing purposes we require that the root view contains a non-empty, immutable ScrollView of buttons that navigate to test pages.',
+        interval: 1000,
+      },
+    );
+  }
+
+  doesScrollViewParentExist(): boolean {
+    return this._scrollViewParent.isExisting();
+  }
+
+  /* Validate the Children of the ScrollView stay intact. The children are the buttons that
+   * navigate to each test page. Also, validate these children exist with the proper testId format */
+  validateScrollViewChildren(): boolean {
+    // Gets all the children
+    const testChildren = this._scrollViewParent.$$('//*');
+    let foundValidButton = false;
+
+    // Ensure the testID (maps 1:1 to automationId) properties of the button children match the defined testing format
+    const reg = new RegExp('Homepage_[a-zA-Z]*_Button');
+
+    // Iterate through children. Validate at least one valid button exists as a child to the ScrollView.
+    // If automationId is found in the wrong format, return false.
+    for (const child of testChildren) {
+      const autoId = child.getAttribute('AutomationId');
+      if (autoId && autoId !== ScrollViewTestId) {
+        if (autoId.match(reg)) {
+          foundValidButton = true;
+        } else {
+          // The correct format for testId was not followed. Return a failure.
+          return false;
+        }
+      }
+    }
+
+    return foundValidButton;
+  }
+
+  get _scrollViewParent() {
+    return By(ScrollViewTestId);
+  }
+}
+
+export default new NativeTestingPageObject();

package/src/E2E/common/NativeTesting/specs/NativeTesting.spec.win.ts

@@ -0,0 +1,28 @@
+import NavigateAppPage from '../../../common/NavigateAppPage.win';
+import NativeTestingPageObject from '../pages/NativeTestingPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../../common/consts';
+
+describe('Native Safety Check Testing Initialization', () => {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
+  });
+
+  // The ScrollView in testing is the one that contains all the buttons that navigate to each component's
+  // test page. This is vital for our native testing, as we grab this ScrollView on the native side and
+  // to climb down the UI tree and find all of FURN's testable components.
+  // We need to make sure this ScrollView:
+  //    1) Continues to parent all the test buttons
+  //    2) Keeps testID='SCROLLVIEW_TEST_ID'
+  it('Validate the ScrollView containing all the navigational buttons exists', () => {
+    NativeTestingPageObject.waitForScrollViewDisplayed(PAGE_TIMEOUT);
+    expect(NativeTestingPageObject.doesScrollViewParentExist()).toBeTruthy();
+  });
+
+  // In addition to existing, we want to ensure the Children of the ScrollView stay intact. The children are the buttons that
+  // navigate to each test page. Validate these children exist with the proper testId format.
+  it('Validate the children of ScrollView are the buttons that navigate to each test page with proper automationId', () => {
+    NativeTestingPageObject.waitForScrollViewDisplayed(PAGE_TIMEOUT);
+    expect(NativeTestingPageObject.validateScrollViewChildren()).toBeTruthy();
+  });
+});

package/src/FluentTester/FluentTester.tsx

@@ -44,6 +44,16 @@ const getThemedStyles = themedStyleSheet((t: Theme) => {
   };
 });
 
+const HeaderSeparator = Separator.customize((t) => ({
+  color: t.colors.bodyFrameDivider,
+  separatorWidth: 2,
+}));
+
+const TestListSeparator = Separator.customize((t) => ({
+  color: t.colors.menuDivider,
+  separatorWidth: 2,
+}));
+
 export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props: FluentTesterProps) => {
   // sort tests alphabetically by name
   const sortedTestComponents = props.enabledTests.sort((a, b) => a.name.localeCompare(b.name));
@@ -66,16 +76,6 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
 
   const TestComponent = selectedTestIndex == -1 ? EmptyComponent : sortedTestComponents[selectedTestIndex].component;
 
-  const HeaderSeparator = Separator.customize((t) => ({
-    color: t.colors.bodyFrameDivider,
-    separatorWidth: 2,
-  }));
-
-  const TestListSeparator = Separator.customize((t) => ({
-    color: t.colors.menuDivider,
-    separatorWidth: 2,
-  }));
-
   const themedStyles = getThemedStyles(useTheme());
 
   const RootView = Platform.select({

package/src/FluentTester/TestComponents/ActivityIndicator/ActivityIndicatorTest.tsx

@@ -7,14 +7,30 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 import { ACTIVITY_INDICATOR_TESTPAGE } from './consts';
 import { View, Switch } from 'react-native';
 
+const basicActivityIndicator: React.FunctionComponent = () => {
+  const [animating, setAnimating] = React.useState(true);
+  const [hidesWhenStopped, setHidesWhenStopped] = React.useState(true);
+
+  return (
+    <Stack style={stackStyle}>
+      <View style={commonStyles.root}>
+        <View style={commonStyles.settings}>
+          <View style={commonStyles.switch}>
+            <Text>Animating</Text>
+            <Switch value={animating} onValueChange={setAnimating} />
+          </View>
+          <View style={commonStyles.switch}>
+            <Text>HidesWhenStopped</Text>
+            <Switch value={hidesWhenStopped} onValueChange={setHidesWhenStopped} />
+          </View>
+        </View>
+        <ActivityIndicator animating={animating} hidesWhenStopped={hidesWhenStopped} />
+      </View>
+    </Stack>
+  );
+};
+
 const activityIndicatorTest: React.FunctionComponent = () => {
-  /** Customize doesn't do anything
-   * Tried having tokens not be props, but didn't work
-   * Not sure how to test/check where the tokens are passed through other than just looking at the final render
-   */
-  const CustomizedActivityIndicator = ActivityIndicator.customize({
-    activityIndicatorColor: 'orange',
-  });
   return (
     <Stack style={stackStyle}>
       <Text>Extra Small</Text>
@@ -32,38 +48,27 @@ const activityIndicatorTest: React.FunctionComponent = () => {
       <ActivityIndicator size="xLarge" lineThickness="large" />
       <Text>Color props</Text>
       <ActivityIndicator activityIndicatorColor="orange" accessibilityLabel="orange progressbar" />
-      <Text>Customized Activity Indicator (currently not working)</Text>
-      <CustomizedActivityIndicator />
     </Stack>
   );
 };
 
-const basicActivityIndicator: React.FunctionComponent = () => {
-  const [animating, setAnimating] = React.useState(true);
-  const [hidesWhenStopped, setHidesWhenStopped] = React.useState(true);
+const CustomizedActivityIndicator = ActivityIndicator.customize({
+  activityIndicatorColor: 'orange',
+  size: 'large',
+});
 
+const customizedActivityIndicatorTest: React.FunctionComponent = () => {
   return (
     <Stack style={stackStyle}>
-      <View style={commonStyles.root}>
-        <View style={commonStyles.settings}>
-          <View style={commonStyles.switch}>
-            <Text>Animating</Text>
-            <Switch value={animating} onValueChange={setAnimating} />
-          </View>
-          <View style={commonStyles.switch}>
-            <Text>HidesWhenStopped</Text>
-            <Switch value={hidesWhenStopped} onValueChange={setHidesWhenStopped} />
-          </View>
-        </View>
-        <ActivityIndicator animating={animating} hidesWhenStopped={hidesWhenStopped} />
-      </View>
+      <Text>Customized Activity Indicator</Text>
+      <CustomizedActivityIndicator />
     </Stack>
   );
 };
 
 const activityIndicatorSections: TestSection[] = [
   {
-    name: 'BaseActivityIndicator',
+    name: 'Base ActivityIndicator',
     testID: ACTIVITY_INDICATOR_TESTPAGE,
     component: basicActivityIndicator,
   },
@@ -72,6 +77,11 @@ const activityIndicatorSections: TestSection[] = [
     testID: ACTIVITY_INDICATOR_TESTPAGE,
     component: activityIndicatorTest,
   },
+  {
+    name: 'Customized ActivityIndicator',
+    testID: ACTIVITY_INDICATOR_TESTPAGE,
+    component: customizedActivityIndicatorTest,
+  },
 ];
 
 export const ActivityIndicatorTest: React.FunctionComponent = () => {

package/src/FluentTester/TestComponents/ActivityIndicator/consts.ts

@@ -1,5 +1,5 @@
-export const HOMEPAGE_ACTIVITY_INDICATOR_BUTTON = 'HOMEPAGE_ACTIVITY_INDICATOR_BUTTON';
-export const ACTIVITY_INDICATOR_TESTPAGE = 'ACTIVITY_INDICATOR_TESTPAGE';
+export const HOMEPAGE_ACTIVITY_INDICATOR_BUTTON = 'Homepage_ActivityIndicator_Button';
+export const ACTIVITY_INDICATOR_TESTPAGE = 'ActivityIndicator_TestPage';
 
 /* Test ActivityIndicator 1 */
-export const ACTIVITY_INDICATOR_TEST_COMPONENT = 'Activity_Indicator_Test_Component'; // A component on each specific test page
+export const ACTIVITY_INDICATOR_TEST_COMPONENT = 'ActivityIndicator_Test_Component'; // A component on each specific test page

package/src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { JSAvatar, IconAlignment, JSAvatarTokens } from '@fluentui-react-native/experimental-avatar';
+import { JSAvatar, IconAlignment } from '@fluentui-react-native/experimental-avatar';
 import { Switch, View, Text, TextInput, TextStyle } from 'react-native';
 import { Slider } from '../Common/Slider';
 import { steveBallmerPhotoUrl } from './../PersonaCoin/styles';
@@ -29,36 +29,30 @@ export const CustomizeUsage: React.FunctionComponent = () => {
     borderColor: theme.colors.inputBorder,
   };
 
-  const tokens: JSAvatarTokens = {};
-  if (coinColor) {
-    tokens.backgroundColor = coinColor;
-  }
-  if (textColor) {
-    tokens.color = textColor;
-  }
-  if (horizontalAlignment) {
-    tokens.horizontalIconAlignment = horizontalAlignment;
-  }
-  if (verticalAlignment) {
-    tokens.verticalIconAlignment = verticalAlignment;
-  }
-  if (iconSize) {
-    tokens.iconSize = iconSize;
-  }
-  if (iconStrokeWidth) {
-    tokens.iconStrokeWidth = iconStrokeWidth;
-  }
-  if (iconStrokeColor) {
-    tokens.iconStrokeColor = iconStrokeColor;
-  }
-  if (initialsSize) {
-    tokens.initialsSize = initialsSize;
-  }
-  if (physicalSize) {
-    tokens.avatarSize = physicalSize;
-  }
-
-  const CustomizedAvatar = JSAvatar.customize(tokens);
+  const CustomizedAvatar = React.useMemo(() => {
+    const tokens = {
+      backgroundColor: coinColor,
+      color: textColor,
+      horizontalIconAlignment: horizontalAlignment,
+      verticalIconAlignment: verticalAlignment,
+      iconSize: iconSize,
+      iconStrokeWidth: iconStrokeWidth,
+      iconStrokeColor: iconStrokeColor,
+      initialsSize: initialsSize,
+      avatarSize: physicalSize,
+    };
+    return JSAvatar.customize(tokens);
+  }, [
+    coinColor,
+    textColor,
+    horizontalAlignment,
+    verticalAlignment,
+    iconSize,
+    iconStrokeWidth,
+    iconStrokeColor,
+    initialsSize,
+    physicalSize,
+  ]);
 
   return (
     <View style={commonStyles.root}>

package/src/FluentTester/TestComponents/Badge/BadgeTest.tsx

@@ -8,6 +8,17 @@ import BadgeSvg from './oof.svg';
 
 import { SvgIconProps } from '@fluentui-react-native/icon';
 
+const BadgeNoBorder = Badge.customize({
+  borderColor: 'transparent',
+  borderWidth: 0,
+});
+
+const StyledBadge = Badge.customize({
+  backgroundColor: 'yellow',
+  borderColor: '#f09',
+  borderWidth: 4,
+});
+
 export const BasicBadge: React.FunctionComponent = () => {
   const svgProps: SvgIconProps = {
     src: BadgeSvg,
@@ -20,17 +31,6 @@ export const BasicBadge: React.FunctionComponent = () => {
     fontSize: 16,
   };
 
-  const BadgeNoBorder = Badge.customize({
-    borderColor: 'transparent',
-    borderWidth: 0,
-  });
-
-  const StyledBadge = Badge.customize({
-    backgroundColor: 'yellow',
-    borderColor: '#f09',
-    borderWidth: 4,
-  });
-
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
   const iconProps = { svgSource: svgProps, width: 20, height: 20 };
 

package/src/FluentTester/TestComponents/Button/ButtonHOCTestSection.tsx

@@ -1,32 +1,41 @@
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { Text } from '@fluentui-react-native/experimental-text';
-import { Icon } from '@fluentui-react-native/icon';
+import { Icon, SvgIconProps } from '@fluentui-react-native/icon';
 import * as React from 'react';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';
+import TestSvg from './test.svg';
+
+const CustomText = Text.customize({ fontSize: 'header', color: 'hotpink' });
+const CustomButton = Button.customize({ backgroundColor: 'pink' });
+const CustomIconButton = Button.customize({ iconColor: 'yellow' });
+const ComposedButton = Button.compose({
+  slots: {
+    root: View,
+    icon: Icon,
+    content: CustomText,
+  },
+  slotProps: {
+    content: {
+      style: { marginTop: -1, marginBottom: 1, marginStart: 0, marginEnd: -2 },
+    },
+  },
+});
+const svgProps: SvgIconProps = {
+  src: TestSvg,
+  viewBox: '0 0 500 500',
+};
 
 export const ButtonHOCTest: React.FunctionComponent = () => {
   const buttonRef = React.useRef(null);
-  const CustomText = Text.customize({ fontSize: 'header', color: 'hotpink' });
-  const CustomButton = Button.customize({ backgroundColor: 'pink' });
-  const ComposedButton = Button.compose({
-    slots: {
-      root: View,
-      icon: Icon,
-      content: CustomText,
-    },
-    slotProps: {
-      content: {
-        style: { marginTop: -1, marginBottom: 1, marginStart: 0, marginEnd: -2 },
-      },
-    },
-  });
+  const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
 
   return (
     <View style={stackStyle}>
       <CustomButton style={commonTestStyles.vmargin} componentRef={buttonRef}>
         Customized Button with ref
       </CustomButton>
+      {svgIconsEnabled && <CustomIconButton icon={{ svgSource: svgProps }}>Customized Icon Button</CustomIconButton>}
       <Button
         style={commonTestStyles.vmargin}
         onClick={() => {

package/src/FluentTester/TestComponents/Button/ButtonSizeTestSection.tsx

@@ -11,7 +11,6 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
     viewBox: '0 0 500 500',
   };
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
-
   return (
     <View style={[stackStyle, commonTestStyles.view]}>
       {svgIconsEnabled && (

package/src/FluentTester/TestComponents/Checkbox/CheckboxTest.tsx

@@ -53,41 +53,41 @@ const otherCheckbox: React.FunctionComponent = () => {
   );
 };
 
-const tokenCheckbox: React.FunctionComponent = () => {
-  const CircularCheckbox = Checkbox.customize({ tokens: { borderRadius: 50 } });
-
-  const CircleColorCheckbox = Checkbox.customize({
-    tokens: { borderRadius: 50, checkboxBackgroundColor: 'white' },
-    _overrides: {
-      checked: {
-        tokens: {
-          checkboxBackgroundColor: 'green',
-          checkboxBorderColor: 'green',
-          checkmarkColor: 'white',
-        },
+const CircularCheckbox = Checkbox.customize({ tokens: { borderRadius: 50 } });
+
+const CircleColorCheckbox = Checkbox.customize({
+  tokens: { borderRadius: 50, checkboxBackgroundColor: 'white' },
+  _overrides: {
+    checked: {
+      tokens: {
+        checkboxBackgroundColor: 'green',
+        checkboxBorderColor: 'green',
+        checkmarkColor: 'white',
       },
-      focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-      hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-      pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
     },
-  });
-
-  const HoverCheckbox = Checkbox.customize({
-    _overrides: {
-      checked: {
-        tokens: {
-          checkboxBackgroundColor: 'black',
-          checkmarkColor: 'white',
-        },
+    focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
+    hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
+    pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
+  },
+});
+
+const HoverCheckbox = Checkbox.customize({
+  _overrides: {
+    checked: {
+      tokens: {
+        checkboxBackgroundColor: 'black',
+        checkmarkColor: 'white',
       },
-      hovered: {
-        tokens: {
-          checkmarkVisibility: 1,
-        },
+    },
+    hovered: {
+      tokens: {
+        checkmarkVisibility: 1,
       },
     },
-  });
+  },
+});
 
+const tokenCheckbox: React.FunctionComponent = () => {
   const [checkboxColor, setCheckboxColor] = React.useState('blue');
   const [checkmarkColor, setCheckmarkColor] = React.useState('white');