@fluentui-react-native/tester 0.55.1 → 0.56.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.55.1",
+  "version": "0.56.1",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -27,29 +27,29 @@
   "dependencies": {
     "@fluentui-react-native/android-theme": ">=0.5.4 <1.0.0",
     "@fluentui-react-native/apple-theme": ">=0.9.10 <1.0.0",
-    "@fluentui-react-native/badge": ">=0.0.11 <1.0.0",
-    "@fluentui-react-native/button": ">=0.22.1 <1.0.0",
+    "@fluentui-react-native/badge": ">=0.0.13 <1.0.0",
+    "@fluentui-react-native/button": ">=0.22.4 <1.0.0",
     "@fluentui-react-native/default-theme": ">=0.9.10 <1.0.0",
-    "@fluentui-react-native/experimental-activity-indicator": ">=0.5.12 <1.0.0",
-    "@fluentui-react-native/experimental-avatar": ">=0.14.4 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.15.1",
-    "@fluentui-react-native/experimental-checkbox": "0.6.7",
+    "@fluentui-react-native/experimental-activity-indicator": ">=0.5.13 <1.0.0",
+    "@fluentui-react-native/experimental-avatar": ">=0.14.5 <1.0.0",
+    "@fluentui-react-native/experimental-button": "0.15.4",
+    "@fluentui-react-native/experimental-checkbox": "0.7.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.4.1 <1.0.0",
-    "@fluentui-react-native/experimental-expander": "0.3.13",
-    "@fluentui-react-native/experimental-menu-button": ">=0.3.10 <1.0.0",
-    "@fluentui-react-native/experimental-shimmer": "0.6.15",
-    "@fluentui-react-native/experimental-tabs": "0.4.21",
-    "@fluentui-react-native/experimental-text": ">=0.7.13 <1.0.0",
-    "@fluentui-react-native/framework": ">=0.7.13 <1.0.0",
-    "@fluentui-react-native/icon": "0.11.7",
-    "@fluentui-react-native/interactive-hooks": ">=0.13.1 <1.0.0",
-    "@fluentui-react-native/stack": ">=0.6.13 <1.0.0",
+    "@fluentui-react-native/experimental-expander": "0.3.14",
+    "@fluentui-react-native/experimental-menu-button": ">=0.3.13 <1.0.0",
+    "@fluentui-react-native/experimental-shimmer": "0.6.16",
+    "@fluentui-react-native/experimental-tabs": "0.4.23",
+    "@fluentui-react-native/experimental-text": ">=0.7.14 <1.0.0",
+    "@fluentui-react-native/framework": ">=0.7.14 <1.0.0",
+    "@fluentui-react-native/icon": "0.11.9",
+    "@fluentui-react-native/interactive-hooks": ">=0.13.3 <1.0.0",
+    "@fluentui-react-native/stack": ">=0.6.14 <1.0.0",
     "@fluentui-react-native/theme": ">=0.6.4 <1.0.0",
     "@fluentui-react-native/theme-types": ">=0.13.3 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.3.2",
     "@fluentui-react-native/theming-utils": ">=0.8.10 <1.0.0",
     "@fluentui-react-native/win32-theme": ">=0.14.11 <1.0.0",
-    "@fluentui/react-native": ">=0.27.31 <1.0.0",
+    "@fluentui/react-native": ">=0.27.34 <1.0.0",
     "@react-native-community/slider": "^4.2.0",
     "@react-native-menu/menu": "^0.1.2",
     "@react-native-picker/picker": "^2.2.1",
@@ -76,10 +76,9 @@
     "react-native": "^0.64.2",
     "react-native-macos": "^0.64.0",
     "react-native-svg": "^12.1.1",
-    "react-native-svg-transformer": "^0.14.3",
+    "react-native-svg-transformer": "^1.0.0",
     "react-native-windows": "^0.64.0",
     "react-test-renderer": "17.0.1",
-    "rnpm-plugin-windows": "^0.5.1-0",
     "ts-node": "^8.10.1",
     "tsconfig-paths": "^3.9.0",
     "typescript": "4.5.4",

package/src/E2E/CheckboxExperimental/pages/ExperimentalCheckboxPageObject.ts

@@ -3,10 +3,73 @@ import {
   EXPERIMENTAL_CHECKBOX_TESTPAGE,
   EXPERIMENTAL_CHECKBOX_TEST_COMPONENT,
   EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT,
+  EXPERIMENTAL_CHECKBOX_ON_PRESS,
 } from '../../../FluentTester/TestComponents/CheckboxExperimental/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
+/* This enum gives the spec file an EASY way to interact with SPECIFIC UI elements on the page.
+ * The spec file should import this enum and use it when wanting to interact with different elements on the page. */
+export const enum ExperimentalCheckboxSelector {
+  Primary, //this._primaryComponent
+}
+
 class ExperimentalCheckboxPageObject extends BasePage {
+  /******************************************************************/
+  /**************** UI Element Interaction Methods ******************/
+  /******************************************************************/
+  isCheckboxChecked(): boolean {
+    return this._primaryComponent.isSelected();
+  }
+
+  waitForCheckboxChecked(timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this.isCheckboxChecked();
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg: 'The Checkbox was not toggled correctly',
+        interval: 1000,
+      },
+    );
+  }
+
+  /* Useful in beforeEach() hook to reset the checkbox before every test */
+  toggleCheckboxToUnchecked(): void {
+    if (this.isCheckboxChecked()) {
+      this._primaryComponent.click();
+    }
+  }
+
+  didOnChangeCallbackFire(): boolean {
+    const callbackText = By(EXPERIMENTAL_CHECKBOX_ON_PRESS);
+    browser.waitUntil(
+      () => {
+        return callbackText.isDisplayed();
+      },
+      {
+        timeout: this.waitForPageTimeout,
+        timeoutMsg: 'The OnChange callback did not fire.',
+        interval: 1000,
+      },
+    );
+
+    return callbackText.isDisplayed();
+  }
+
+  /* Sends a Keyboarding command on a specific UI element */
+  sendKey(selector: ExperimentalCheckboxSelector, key: string): void {
+    this.getCheckboxSelector(selector).addValue(key);
+  }
+
+  /* Returns the correct WebDriverIO element from the Checkbox Selector */
+  getCheckboxSelector(selector?: ExperimentalCheckboxSelector): WebdriverIO.Element {
+    if (selector == ExperimentalCheckboxSelector.Primary) {
+      return this._primaryComponent;
+    }
+    return this._primaryComponent;
+  }
+
   /*****************************************/
   /**************** Getters ****************/
   /*****************************************/

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/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/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/CheckboxExperimental/CheckboxTest.tsx

@@ -16,16 +16,23 @@ const basicCheckbox: React.FunctionComponent = () => {
     <View>
       <Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
       <Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} />
-      <Checkbox
-        label="Checked checkbox (uncontrolled)"
-        onChange={onChangeUncontrolled}
-        defaultChecked={true}
-        accessibilityLabel="Hello there"
-      />
-      <Checkbox label="Disabled checkbox" onChange={onChangeUncontrolled} defaultChecked={false} disabled={true} />
-      <Checkbox label="Disabled checked checkbox" onChange={onChangeUncontrolled} defaultChecked={true} disabled={true} />
-      <Checkbox label="Checkbox will display a tooltip" onChange={onChangeUncontrolled} tooltip="This is a tooltip" />
-      <Checkbox label="A circular checkbox" circular onChange={onChangeUncontrolled} defaultChecked={false} />
+      <Checkbox label="Checked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked accessibilityLabel="Hello there" />
+      <Checkbox label="Disabled checkbox" disabled />
+      <Checkbox label="Disabled checked checkbox" defaultChecked disabled />
+      <Checkbox label="Checkbox will display a tooltip" tooltip="This is a tooltip" />
+      <Checkbox label="A circular checkbox" circular />
+      <Checkbox label="A circular checkbox" labelPosition="before" />
+    </View>
+  );
+};
+
+const sizeCheckbox: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Checkbox tooltip="Medium checkbox" size="medium" />
+      <Checkbox tooltip="Large checkbox" size="large" />
+      <Checkbox label="Medium checkbox" size="medium" />
+      <Checkbox label="Large checkbox" size="large" />
     </View>
   );
 };
@@ -134,6 +141,10 @@ const checkboxSections: TestSection[] = [
     testID: EXPERIMENTAL_CHECKBOX_TESTPAGE,
     component: basicCheckbox,
   },
+  {
+    name: 'Size Checkboxes',
+    component: sizeCheckbox,
+  },
   {
     name: 'Other Implementations',
     component: otherCheckbox,

package/src/FluentTester/TestComponents/CheckboxExperimental/E2ECheckboxExperimentalTest.tsx

@@ -7,10 +7,21 @@ import {
   EXPERIMENTAL_CHECKBOX_ACCESSIBILITY_LABEL,
   EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT,
   EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL,
+  EXPERIMENTAL_CHECKBOX_ON_PRESS,
 } from './consts';
 import { Stack } from '@fluentui-react-native/stack';
+import { Text } from '@fluentui/react-native';
 
 export const E2ECheckboxExperimentalTest: React.FunctionComponent = () => {
+  const [checkboxPressed, setCheckboxPressed] = React.useState(false);
+
+  const onClick = React.useCallback(
+    (checked) => {
+      setCheckboxPressed(checked);
+    },
+    [setCheckboxPressed],
+  );
+
   return (
     <View>
       <Stack style={stackStyle}>
@@ -19,8 +30,10 @@ export const E2ECheckboxExperimentalTest: React.FunctionComponent = () => {
           disabled={false}
           label="Testing accessibilityLabel"
           testID={EXPERIMENTAL_CHECKBOX_TEST_COMPONENT}
+          onChange={onClick}
         />
         <Checkbox label={EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL} testID={EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT} />
+        {checkboxPressed ? <Text testID={EXPERIMENTAL_CHECKBOX_ON_PRESS}>Checkbox Selected</Text> : null}
       </Stack>
     </View>
   );

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

@@ -8,3 +8,5 @@ export const EXPERIMENTAL_CHECKBOX_ACCESSIBILITY_LABEL = 'E2E testing Experiment
 /* Test Experimental Checkbox 2 */
 export const EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT = 'Experimental Checkbox_No_A11y_label_Component';
 export const EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL = 'Test Experimental Checkbox2 - No Accessibility Label'; // A component on each specific test page
+
+export const EXPERIMENTAL_CHECKBOX_ON_PRESS = 'Experimental_Checkbox_On_Press'; // For testing the press functionality on a Checkbox