Overhaul Menu E2E tests with better errors, refactored test code (#2447)

* Refactor Menu tests with new testing methods

* Change files

* Modify errors for menu tests, add better comments

* Remove instances of '->' in test names

* Adjust unset accessibilityRole test names

* Use === for string comparison in onClick() test

* Add waitForMenuToClose() method

Author: lawrencewin

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

@@ -4,23 +4,20 @@ import {
   MENUITEM_NO_A11Y_LABEL_COMPONENT,
   HOMEPAGE_MENU_BUTTON,
   MENUITEM_TEST_COMPONENT,
-  MENUPOPOVER_TEST_COMPONENT,
   MENUITEM_DISABLED_COMPONENT,
   MENUITEM_FOURTH_COMPONENT,
   MENU_CALLBACK_RESET_BUTTON,
   MENUITEM_CALLBACK_LABEL,
 } from '../consts';
 import { BasePage, By } from '../../common/BasePage';
-import { Keys, Attribute, AttributeValue } from '../../common/consts';
-
-/* 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 {
-  MenuTrigger = 0, //this._primaryComponent
-  FirstMenuItem,
-  SecondMenuItem,
-  ThirdMenuItem,
-  FourthMenuItem,
+import { Keys } from '../../common/consts';
+
+/** Allows a caller to get specific menu items using .getMenuItem() */
+export const enum MenuItem {
+  First,
+  Second,
+  Third,
+  Fourth,
 }
 
 class MenuPageObject extends BasePage {
@@ -35,32 +32,51 @@ class MenuPageObject extends BasePage {
    */
   async openMenu(): Promise<void> {
     if (!(await this.menuIsExpanded())) {
-      await this.clickItem(MenuComponentSelector.MenuTrigger);
+      await this.click(this._menuTrigger);
       await this.waitForMenuToOpen();
     }
   }
 
   async closeMenu(): Promise<void> {
     if (await this.menuIsExpanded()) {
-      await this.sendKey(MenuComponentSelector.FirstMenuItem, Keys.ESCAPE);
-      await this.waitForCondition(async () => (await this.menuIsExpanded()) === false, 'The Menu did not close.', this.waitForUiEvent, 500);
+      await this.sendKeys(this.getMenuItem(MenuItem.First), [Keys.ESCAPE]);
+      await this.waitForMenuToClose();
     }
   }
 
-  async waitForMenuToOpen(): Promise<boolean> {
-    await this.waitForCondition(async () => await this.menuIsExpanded(), 'The Menu did not open.', this.waitForUiEvent, 500);
+  /* Waits for menuitems to be visible. This is a separate method from openMenu() because we test multiple ways of opening the menu (mouse + keyboard). */
+  async waitForMenuToOpen(errorMsg?: string): Promise<boolean> {
+    await this.waitForCondition(
+      async () => await this.menuIsExpanded(),
+      errorMsg ?? 'The Menu did not open: It looks like the MenuItems failed to display.',
+      this.waitForUiEvent,
+      500,
+    );
     return await this.menuIsExpanded();
   }
 
+  /* Same as above -> Just waits for menuitems to not be visible. */
+  async waitForMenuToClose(errorMsg?: string): Promise<boolean> {
+    await this.waitForCondition(
+      async () => !(await this.menuIsExpanded()),
+      errorMsg ?? 'The Menu did not close: It looks like the MenuItems are still displayed.',
+      this.waitForUiEvent,
+      500,
+    );
+    return !(await this.menuIsExpanded());
+  }
+
+  /* If the first item is displayed, then it's safe to say that the rest of the menu is expanded. */
   async menuIsExpanded(): Promise<boolean> {
-    const menuItem = await this._firstMenuItem;
+    const menuItem = await this.getMenuItem(MenuItem.First);
     if (menuItem.error) {
       // Not displayed because the item can't be found by appium
       return false;
     }
     return await menuItem.isDisplayed();
   }
 
+  /* Waits for the onClick callback of menu item 1 to fire. */
   async waitForItemCallbackToFire(timesFired: number): Promise<void> {
     await this.waitForCondition(
       async () => await this.itemOnClickHasFired(timesFired),
@@ -70,57 +86,27 @@ class MenuPageObject extends BasePage {
     );
   }
 
+  /* When menu item 1 is clicked, it increments a counter variable in the test component page, which is displayed in a text box. Incrementing a counter within a label
+   * allows us to test whether the onClick() callback fires for click and keypress inputs across individual test cases without having to close the menu and reset the
+   * label per case (as you see in the button + checkbox tests). This decreases test time and improves performance for this spec. */
   async itemOnClickHasFired(timesFired: number): Promise<boolean> {
-    return (await (await this._callbackLabel).getText()).includes(timesFired.toString());
-  }
-
-  async componentIsFocused(selector: MenuComponentSelector): Promise<boolean> {
-    const component = await this.getMenuComponentSelector(selector);
-    return (await this.getElementAttribute(component, Attribute.IsFocused)) === AttributeValue.true;
-  }
-
-  async getMenuExpandCollapseState(): Promise<AttributeValue> {
-    return (await this.getElementAttribute(await this._primaryComponent, Attribute.ExpandCollapseState)) as AttributeValue;
-  }
-
-  async getMenuItemAccessibilityLabel(componentSelector: MenuComponentSelector): Promise<string> {
-    return await this.getElementAttribute(await this.getMenuComponentSelector(componentSelector), Attribute.AccessibilityLabel);
-  }
-
-  async getMenuAccessibilityRole(): Promise<string> {
-    return await this.getElementAttribute(await By(MENUPOPOVER_TEST_COMPONENT), Attribute.AccessibilityRole);
-  }
-
-  async getMenuItemAccessibilityRole(): Promise<string> {
-    return await this.getElementAttribute(await this._firstMenuItem, Attribute.AccessibilityRole);
-  }
-
-  /* Sends a Keyboarding command on a specific UI element */
-  async sendKey(menuComponentSelector: MenuComponentSelector, key: string): Promise<void> {
-    await (await this.getMenuComponentSelector(menuComponentSelector)).addValue(key);
-  }
-
-  // Renaming this function until Menu tests are refactored to use BasePage methods.
-  async clickItem(selector: MenuComponentSelector): Promise<void> {
-    await (await this.getMenuComponentSelector(selector)).click();
-  }
-
-  /* Returns the correct WebDriverIO element from the Button Selector */
-  async getMenuComponentSelector(menuComponentSelector: MenuComponentSelector): Promise<WebdriverIO.Element> {
-    switch (menuComponentSelector) {
-      case MenuComponentSelector.MenuTrigger:
-        return await this._primaryComponent;
-      case MenuComponentSelector.FirstMenuItem:
-        return await this._firstMenuItem;
-      case MenuComponentSelector.SecondMenuItem:
-        return await this._secondMenuItem;
-      case MenuComponentSelector.ThirdMenuItem:
-        return await this._thirdMenuItem;
-      case MenuComponentSelector.FourthMenuItem:
-        return await this._fourthMenuItem;
+    return (await (await this._callbackLabel).getText()) === `onClick fired ${timesFired} times`;
+  }
+
+  async getMenuItem(item: MenuItem): Promise<WebdriverIO.Element> {
+    switch (item) {
+      case MenuItem.First:
+        return await By(MENUITEM_TEST_COMPONENT);
+      case MenuItem.Second:
+        return await By(MENUITEM_DISABLED_COMPONENT);
+      case MenuItem.Third:
+        return await By(MENUITEM_NO_A11Y_LABEL_COMPONENT);
+      case MenuItem.Fourth:
+        return await By(MENUITEM_FOURTH_COMPONENT);
     }
   }
 
+  /* Closes the menu and resets the counter to 0 on the test page. */
   async resetTest() {
     // Both escape on the menu trigger to hard dismiss menu and click callback reset to reset focus
     await this.closeMenu();
@@ -138,26 +124,10 @@ class MenuPageObject extends BasePage {
     return MENU_TESTPAGE;
   }
 
-  get _primaryComponent() {
+  get _menuTrigger() {
     return By(MENUTRIGGER_TEST_COMPONENT);
   }
 
-  get _firstMenuItem() {
-    return By(MENUITEM_TEST_COMPONENT);
-  }
-
-  get _secondMenuItem() {
-    return By(MENUITEM_DISABLED_COMPONENT);
-  }
-
-  get _thirdMenuItem() {
-    return By(MENUITEM_NO_A11Y_LABEL_COMPONENT);
-  }
-
-  get _fourthMenuItem() {
-    return By(MENUITEM_FOURTH_COMPONENT);
-  }
-
   get _pageButton() {
     return By(HOMEPAGE_MENU_BUTTON);
   }