@fluentui-react-native/tester 0.63.6 → 0.64.0

package/lib-commonjs/FluentTester/TestComponents/Menu/consts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Menu/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,yBAAyB,CAAC;AAC3D,eAAO,MAAM,aAAa,kBAAkB,CAAC"}
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Menu/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,yBAAyB,CAAC;AAC3D,eAAO,MAAM,aAAa,kBAAkB,CAAC;AAE7C,eAAO,MAAM,0BAA0B,+BAA+B,CAAC;AACvE,eAAO,MAAM,0BAA0B,+BAA+B,CAAC;AAGvE,eAAO,MAAM,uBAAuB,4BAA4B,CAAC;AACjE,eAAO,MAAM,4BAA4B,6CAA6C,CAAC;AAGvF,eAAO,MAAM,gCAAgC,qCAAqC,CAAC;AACnF,eAAO,MAAM,mBAAmB,4CAA4C,CAAC;AAE7E,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAC3C,eAAO,MAAM,aAAa,kBAAkB,CAAC"}

package/lib-commonjs/FluentTester/TestComponents/Menu/consts.js

@@ -1,6 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MENU_TESTPAGE = exports.HOMEPAGE_MENU_BUTTON = void 0;
+exports.MENU_ON_CLOSE = exports.MENU_ON_OPEN = exports.MENUITEM_TEST_LABEL = exports.MENUITEM_NO_A11Y_LABEL_COMPONENT = exports.MENUITEM_ACCESSIBILITY_LABEL = exports.MENUITEM_TEST_COMPONENT = exports.MENUPOPOVER_TEST_COMPONENT = exports.MENUTRIGGER_TEST_COMPONENT = exports.MENU_TESTPAGE = exports.HOMEPAGE_MENU_BUTTON = void 0;
 exports.HOMEPAGE_MENU_BUTTON = 'Homepage_Menu_Button';
 exports.MENU_TESTPAGE = 'Menu_TestPage';
+exports.MENUTRIGGER_TEST_COMPONENT = 'MenuTrigger_Test_Component';
+exports.MENUPOPOVER_TEST_COMPONENT = 'MenuPopover_Test_Component';
+/* Test MenuItem 1 */
+exports.MENUITEM_TEST_COMPONENT = 'MenuItem_Test_Component'; // A component on each specific test page
+exports.MENUITEM_ACCESSIBILITY_LABEL = 'E2E testing MenuItem accessibility label';
+/* Test MenuItem 2 */
+exports.MENUITEM_NO_A11Y_LABEL_COMPONENT = 'MenuItem_No_A11y_label_Component';
+exports.MENUITEM_TEST_LABEL = 'Test MenuItem2 - No Accessibility Label'; // A component on each specific test page
+exports.MENU_ON_OPEN = 'Menu_On_Open'; // For testing the open functionality of Menu
+exports.MENU_ON_CLOSE = 'Menu_On_Close'; // For testing the open functionality of Menu
 //# sourceMappingURL=consts.js.map

package/lib-commonjs/FluentTester/TestComponents/Menu/consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"consts.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Menu/consts.ts"],"names":[],"mappings":";;;AAAa,QAAA,oBAAoB,GAAG,sBAAsB,CAAC;AAC9C,QAAA,aAAa,GAAG,eAAe,CAAC"}
+{"version":3,"file":"consts.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Menu/consts.ts"],"names":[],"mappings":";;;AAAa,QAAA,oBAAoB,GAAG,sBAAsB,CAAC;AAC9C,QAAA,aAAa,GAAG,eAAe,CAAC;AAEhC,QAAA,0BAA0B,GAAG,4BAA4B,CAAC;AAC1D,QAAA,0BAA0B,GAAG,4BAA4B,CAAC;AAEvE,qBAAqB;AACR,QAAA,uBAAuB,GAAG,yBAAyB,CAAC,CAAC,yCAAyC;AAC9F,QAAA,4BAA4B,GAAG,0CAA0C,CAAC;AAEvF,qBAAqB;AACR,QAAA,gCAAgC,GAAG,kCAAkC,CAAC;AACtE,QAAA,mBAAmB,GAAG,yCAAyC,CAAC,CAAC,yCAAyC;AAE1G,QAAA,YAAY,GAAG,cAAc,CAAC,CAAC,6CAA6C;AAC5E,QAAA,aAAa,GAAG,eAAe,CAAC,CAAC,6CAA6C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.63.6",
+  "version": "0.64.0",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",

package/src/E2E/Menu/pages/MenuPageObject.ts

@@ -0,0 +1,119 @@
+import {
+  MENU_TESTPAGE,
+  MENUTRIGGER_TEST_COMPONENT,
+  MENUITEM_NO_A11Y_LABEL_COMPONENT,
+  HOMEPAGE_MENU_BUTTON,
+  MENU_ON_OPEN,
+  MENU_ON_CLOSE,
+  MENUITEM_TEST_COMPONENT,
+  MENUPOPOVER_TEST_COMPONENT,
+} from '../../../FluentTester/TestComponents/Menu/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 MenuComponentSelector {
+  PrimaryComponent, //this._primaryComponent
+  SecondaryComponent, //this._secondaryComponent
+  TertiaryComponent, //this._tertiaryComponent
+}
+
+class MenuPageObject extends BasePage {
+  /******************************************************************/
+  /**************** UI Element Interaction Methods ******************/
+  /******************************************************************/
+  didMenuOpen(): boolean {
+    const callbackText = By(MENU_ON_OPEN);
+    browser.waitUntil(
+      () => {
+        return callbackText.isDisplayed();
+      },
+      {
+        timeout: this.waitForPageTimeout,
+        timeoutMsg: 'The Menu did not open.',
+        interval: 1000,
+      },
+    );
+
+    return callbackText.isDisplayed();
+  }
+
+  didMenuClose(): boolean {
+    const callbackText = By(MENU_ON_CLOSE);
+    browser.waitUntil(
+      () => {
+        return callbackText.isDisplayed();
+      },
+      {
+        timeout: this.waitForPageTimeout,
+        timeoutMsg: 'The Menu did not close.',
+        interval: 1000,
+      },
+    );
+
+    return callbackText.isDisplayed();
+  }
+
+  getMenuItemAccessibilityLabel(componentSelector: MenuComponentSelector): string {
+    switch (componentSelector) {
+      case MenuComponentSelector.PrimaryComponent:
+        return this._primaryComponent.getAttribute('Name');
+
+      case MenuComponentSelector.SecondaryComponent:
+        return this._secondaryComponent.getAttribute('Name');
+
+      case MenuComponentSelector.TertiaryComponent:
+        return this._tertiaryComponent.getAttribute('Name');
+    }
+  }
+
+  getMenuAccessibilityRole(): string {
+    return By(MENUPOPOVER_TEST_COMPONENT).getAttribute('ControlType');
+  }
+
+  getMenuItemAccessibilityRole(): string {
+    return this._secondaryComponent.getAttribute('ControlType');
+  }
+
+  /* Sends a Keyboarding command on a specific UI element */
+  sendKey(menuComponentSelector: MenuComponentSelector, key: string): void {
+    this.getMenuComponentSelector(menuComponentSelector).addValue(key);
+  }
+
+  /* Returns the correct WebDriverIO element from the Button Selector */
+  getMenuComponentSelector(menuComponentSelector?: MenuComponentSelector): WebdriverIO.Element {
+    if (menuComponentSelector == MenuComponentSelector.PrimaryComponent) {
+      return this._primaryComponent;
+    }
+    return this._primaryComponent;
+  }
+
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(MENU_TESTPAGE);
+  }
+
+  get _pageName() {
+    return MENU_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(MENUTRIGGER_TEST_COMPONENT);
+  }
+
+  get _secondaryComponent() {
+    return By(MENUITEM_TEST_COMPONENT);
+  }
+
+  get _tertiaryComponent() {
+    return By(MENUITEM_NO_A11Y_LABEL_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_MENU_BUTTON);
+  }
+}
+
+export default new MenuPageObject();

package/src/E2E/Menu/specs/Menu.spec.win.ts

@@ -0,0 +1,121 @@
+import NavigateAppPage from '../../common/NavigateAppPage.win';
+import MenuPageObject, { MenuComponentSelector } from '../pages/MenuPageObject';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, Keys, MENUITEM_A11Y_ROLE, MENU_A11Y_ROLE } from '../../common/consts';
+import { MENUITEM_ACCESSIBILITY_LABEL, MENUITEM_TEST_LABEL } from '../../../FluentTester/TestComponents/Menu';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Experimental Button Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
+  });
+
+  it('Click and navigate to Button test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    MenuPageObject.scrollToComponentButton();
+    MenuPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToMenuPage();
+    MenuPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(MenuPageObject.isPageLoaded()).toBeTruthy(MenuPageObject.ERRORMESSAGE_PAGELOAD);
+    expect(MenuPageObject.didAssertPopup()).toBeFalsy(MenuPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
+  });
+});
+
+describe('Experimental Button Functional Testing', () => {
+  /* Scrolls and waits for the Button to be visible on the Test Page */
+  beforeEach(() => {
+    MenuPageObject.scrollToTestElement();
+    MenuPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  });
+
+  it('Validate OnOpenChange() callback was fired -> Click', () => {
+    MenuPageObject.clickComponent();
+    expect(MenuPageObject.didMenuOpen()).toBeTruthy();
+    expect(MenuPageObject.didAssertPopup()).toBeFalsy(MenuPageObject.ERRORMESSAGE_ASSERT);
+
+    MenuPageObject.clickComponent();
+    expect(MenuPageObject.didMenuClose()).toBeTruthy();
+    expect(MenuPageObject.didAssertPopup()).toBeFalsy(MenuPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('Validate OnOpenChange() callback was fired -> Type "Enter"', () => {
+    MenuPageObject.sendKey(MenuComponentSelector.PrimaryComponent, Keys.Enter);
+    expect(MenuPageObject.didMenuOpen()).toBeTruthy();
+    expect(MenuPageObject.didAssertPopup()).toBeFalsy(MenuPageObject.ERRORMESSAGE_ASSERT);
+
+    MenuPageObject.sendKey(MenuComponentSelector.PrimaryComponent, Keys.Enter);
+    expect(MenuPageObject.didMenuClose()).toBeTruthy();
+    expect(MenuPageObject.didAssertPopup()).toBeFalsy(MenuPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('Validate OnOpenChange() callback was fired -> Type "Spacebar"', () => {
+    MenuPageObject.sendKey(MenuComponentSelector.PrimaryComponent, Keys.Spacebar);
+    expect(MenuPageObject.didMenuOpen()).toBeTruthy();
+    expect(MenuPageObject.didAssertPopup()).toBeFalsy(MenuPageObject.ERRORMESSAGE_ASSERT);
+
+    MenuPageObject.sendKey(MenuComponentSelector.PrimaryComponent, Keys.Spacebar);
+    expect(MenuPageObject.didMenuClose()).toBeTruthy();
+    expect(MenuPageObject.didAssertPopup()).toBeFalsy(MenuPageObject.ERRORMESSAGE_ASSERT);
+  });
+});
+
+describe('Experimental Button Accessibility Testing', () => {
+  it('Experimental Button - Validate accessibilityRole of menu item is correct', () => {
+    MenuPageObject.scrollToTestElement();
+    MenuPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+
+    MenuPageObject.sendKey(MenuComponentSelector.PrimaryComponent, Keys.Enter);
+    expect(MenuPageObject.didMenuOpen()).toBeTruthy();
+    expect(MenuPageObject.didAssertPopup()).toBeFalsy(MenuPageObject.ERRORMESSAGE_ASSERT);
+
+    expect(MenuPageObject.getMenuItemAccessibilityRole()).toEqual(MENUITEM_A11Y_ROLE);
+    expect(MenuPageObject.didAssertPopup()).toBeFalsy(MenuPageObject.ERRORMESSAGE_ASSERT);
+
+    MenuPageObject.sendKey(MenuComponentSelector.PrimaryComponent, Keys.Enter);
+  });
+
+  it('Experimental Button - Validate accessibilityRole of menu is correct', () => {
+    MenuPageObject.scrollToTestElement();
+    MenuPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+
+    MenuPageObject.sendKey(MenuComponentSelector.PrimaryComponent, Keys.Enter);
+    expect(MenuPageObject.didMenuOpen()).toBeTruthy();
+    expect(MenuPageObject.didAssertPopup()).toBeFalsy(MenuPageObject.ERRORMESSAGE_ASSERT);
+
+    expect(MenuPageObject.getMenuAccessibilityRole()).toEqual(MENU_A11Y_ROLE);
+    expect(MenuPageObject.didAssertPopup()).toBeFalsy(MenuPageObject.ERRORMESSAGE_ASSERT);
+
+    MenuPageObject.sendKey(MenuComponentSelector.PrimaryComponent, Keys.Enter);
+  });
+
+  it('Experimental Button - Set accessibilityLabel', () => {
+    MenuPageObject.scrollToTestElement();
+    MenuPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+
+    MenuPageObject.sendKey(MenuComponentSelector.PrimaryComponent, Keys.Enter);
+    expect(MenuPageObject.didMenuOpen()).toBeTruthy();
+    expect(MenuPageObject.didAssertPopup()).toBeFalsy(MenuPageObject.ERRORMESSAGE_ASSERT);
+
+    expect(MenuPageObject.getMenuItemAccessibilityLabel(MenuComponentSelector.SecondaryComponent)).toEqual(MENUITEM_ACCESSIBILITY_LABEL);
+    expect(MenuPageObject.didAssertPopup()).toBeFalsy(MenuPageObject.ERRORMESSAGE_ASSERT);
+
+    MenuPageObject.sendKey(MenuComponentSelector.PrimaryComponent, Keys.Enter);
+  });
+
+  it('Experimental Button - Do not set accessibilityLabel -> Default to Button label', () => {
+    MenuPageObject.scrollToTestElement();
+    MenuPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+
+    MenuPageObject.sendKey(MenuComponentSelector.PrimaryComponent, Keys.Enter);
+    expect(MenuPageObject.didMenuOpen()).toBeTruthy();
+    expect(MenuPageObject.didAssertPopup()).toBeFalsy(MenuPageObject.ERRORMESSAGE_ASSERT);
+
+    expect(MenuPageObject.getMenuItemAccessibilityLabel(MenuComponentSelector.TertiaryComponent)).toEqual(MENUITEM_TEST_LABEL);
+    expect(MenuPageObject.didAssertPopup()).toBeFalsy(MenuPageObject.ERRORMESSAGE_ASSERT);
+
+    MenuPageObject.sendKey(MenuComponentSelector.PrimaryComponent, Keys.Enter);
+  });
+});

package/src/E2E/common/NavigateAppPage.win.ts

@@ -10,6 +10,7 @@ import { HOMEPAGE_FOCUSTRAPZONE_BUTTON } from '../../FluentTester/TestComponents
 import { HOMEPAGE_FOCUSZONE_BUTTON } from '../../FluentTester/TestComponents/FocusZone/consts';
 import { HOMEPAGE_ICON_BUTTON } from '../../FluentTester/TestComponents/Icon/consts';
 import { HOMEPAGE_LINK_BUTTON } from '../../FluentTester/TestComponents/Link/consts';
+import { HOMEPAGE_MENU_BUTTON } from '../../FluentTester/TestComponents/Menu/consts';
 import { HOMEPAGE_MENUBUTTON_BUTTON } from '../../FluentTester/TestComponents/MenuButton/consts';
 import { HOMEPAGE_EXPERIMENTAL_MENU_BUTTON } from '../../FluentTester/TestComponents/MenuButtonExperimental/consts';
 import { HOMEPAGE_PERSONA_BUTTON } from '../../FluentTester/TestComponents/Persona/consts';
@@ -72,6 +73,10 @@ class NavigateAppPage extends BasePage {
     this.linkPage.click();
   }
 
+  clickAndGoToMenuPage() {
+    this.menuPage.click();
+  }
+
   clickAndGoToMenuButtonPage() {
     this.menuButtonPage.click();
   }
@@ -184,6 +189,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_LINK_BUTTON);
   }
 
+  private get menuPage() {
+    return By(HOMEPAGE_MENU_BUTTON);
+  }
+
   private get menuButtonPage() {
     return By(HOMEPAGE_MENUBUTTON_BUTTON);
   }

package/src/E2E/common/consts.ts

@@ -4,6 +4,8 @@ export const CALLOUT_A11Y_ROLE = 'ControlType.Group';
 export const CHECKBOX_A11Y_ROLE = 'ControlType.CheckBox';
 export const LINK_A11Y_ROLE = 'ControlType.HyperLink';
 export const MENUBUTTON_A11Y_ROLE = 'ControlType.Button';
+export const MENU_A11Y_ROLE = 'ControlType.Menu';
+export const MENUITEM_A11Y_ROLE = 'ControlType.MenuItem';
 export const RADIOBUTTON_A11Y_ROLE = 'ControlType.RadioButton';
 export const RADIOGROUP_A11Y_ROLE = 'ControlType.List';
 export const TAB_A11Y_ROLE = 'ControlType.Tab';

package/src/FluentTester/TestComponents/Menu/E2EMenuTest.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { Text } from '@fluentui-react-native/experimental-text';
+import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui-react-native/menu';
+import {
+  MENUITEM_ACCESSIBILITY_LABEL,
+  MENUITEM_NO_A11Y_LABEL_COMPONENT,
+  MENUTRIGGER_TEST_COMPONENT,
+  MENUITEM_TEST_LABEL,
+  MENU_ON_CLOSE,
+  MENU_ON_OPEN,
+  MENUITEM_TEST_COMPONENT,
+  MENUPOPOVER_TEST_COMPONENT,
+} from './consts';
+
+export const E2EMenuTest: React.FunctionComponent = () => {
+  const [menuOpened, setMenuOpened] = React.useState(false);
+
+  const onOpenChange = React.useCallback(
+    (_e: any, isOpen: boolean) => {
+      setMenuOpened(isOpen);
+    },
+    [setMenuOpened],
+  );
+
+  return (
+    <Stack style={stackStyle}>
+      <Menu open={menuOpened} onOpenChange={onOpenChange}>
+        <MenuTrigger>
+          <Button testID={MENUTRIGGER_TEST_COMPONENT}>Test</Button>
+        </MenuTrigger>
+        <MenuPopover testID={MENUPOPOVER_TEST_COMPONENT}>
+          <MenuList>
+            <MenuItem testID={MENUITEM_TEST_COMPONENT} accessibilityLabel={MENUITEM_ACCESSIBILITY_LABEL} content="A plain MenuItem" />
+            <MenuItem disabled content="A second disabled plain MenuItem" />
+            <MenuItem testID={MENUITEM_NO_A11Y_LABEL_COMPONENT} content={MENUITEM_TEST_LABEL} />
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+
+      {menuOpened ? <Text testID={MENU_ON_OPEN}>Menu opened</Text> : <Text testID={MENU_ON_CLOSE}>Menu closed</Text>}
+    </Stack>
+  );
+};

package/src/FluentTester/TestComponents/Menu/MenuTest.tsx

@@ -14,6 +14,7 @@ import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { MENU_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { E2EMenuTest } from './E2EMenuTest';
 
 const MenuDefault: React.FunctionComponent = () => {
   return (
@@ -196,6 +197,10 @@ const menuSections: TestSection[] = [
     name: 'Menu Submenu',
     component: MenuSubMenu,
   },
+  {
+    name: 'Menu E2E',
+    component: E2EMenuTest,
+  },
 ];
 
 export const MenuTest: React.FunctionComponent = () => {
@@ -207,7 +212,8 @@ export const MenuTest: React.FunctionComponent = () => {
     androidStatus: 'Backlog',
   };
 
-  const description = '!!!!!!!TODO TODO TODO TODO!!!!!!!!';
+  const description =
+    'A Menu is an component that displays a list of options on a temporary surface. They are invoked when users interact with a button, action, or other control.';
 
   return <Test name="Menu Test" description={description} sections={menuSections} status={status}></Test>;
 };

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

@@ -1,2 +1,16 @@
 export const HOMEPAGE_MENU_BUTTON = 'Homepage_Menu_Button';
 export const MENU_TESTPAGE = 'Menu_TestPage';
+
+export const MENUTRIGGER_TEST_COMPONENT = 'MenuTrigger_Test_Component';
+export const MENUPOPOVER_TEST_COMPONENT = 'MenuPopover_Test_Component';
+
+/* Test MenuItem 1 */
+export const MENUITEM_TEST_COMPONENT = 'MenuItem_Test_Component'; // A component on each specific test page
+export const MENUITEM_ACCESSIBILITY_LABEL = 'E2E testing MenuItem accessibility label';
+
+/* Test MenuItem 2 */
+export const MENUITEM_NO_A11Y_LABEL_COMPONENT = 'MenuItem_No_A11y_label_Component';
+export const MENUITEM_TEST_LABEL = 'Test MenuItem2 - No Accessibility Label'; // A component on each specific test page
+
+export const MENU_ON_OPEN = 'Menu_On_Open'; // For testing the open functionality of Menu
+export const MENU_ON_CLOSE = 'Menu_On_Close'; // For testing the open functionality of Menu