Overhaul Tests + Errors for Avatar and Callout (#2423)

* Redid deprecated Button tests

* Overhaul avatar tests

* Overhaul Callout tests

* Overhaul checkbox deprecated tests

* Overhaul CheckboxV1 tests

* Remove un-needed overrided method for Callout tests

* Change files

* Address comments and nits

* Missed some changes

* Re-did some of the checkbox page object methods

* More nits

* Address comments, add comments to funcs

* Nits fixed

* Fix errors not displaying for waiting methods on specs

* More consistency across individual test names

* Align test names for checkbox windows spec

* Typo fix

* Remove instances of '->' in test labels

* Rephrase test names: action -> expectation format

* Reduce scope of PR

* Updating change message

Author: lawrencewin

apps/E2E/src/Avatar/consts.ts

@@ -10,9 +10,3 @@ export const AVATAR_ACCESSIBILITY_ROLE = 'link';
 
 export const AVATAR_TEST_COMPONENT = 'AVATAR_TEST_COMPONENT';
 export const AVATAR_SECONDARY_TEST_COMPONENT = 'AVATAR_SECONDARY_TEST_COMPONENT';
-
-export const ACCESSIBILITY_LABEL_ATTR = 'Name';
-export const ACCESSIBILITY_HINT_ATTRIBUTE = 'HelpText';
-export const ACCESSIBILITY_ROLE_ATTRIBUTE = 'ControlType';
-export const ACCESSIBILITY_ROLE_IMAGE = 'ControlType.Image';
-export const ACCESSIBILITY_ROLE_LINK = 'ControlType.HyperLink';

apps/E2E/src/Avatar/pages/AvatarPageObject.ts

@@ -5,37 +5,7 @@ import {
   AVATAR_SECONDARY_TEST_COMPONENT,
 } from '../consts';
 import { BasePage, By } from '../../common/BasePage';
-
-export const enum AvatarComponentSelector {
-  PrimaryComponent, //this._primaryComponent
-  SecondaryComponent, //this._secondaryComponent
-}
 class AvatarPageObject extends BasePage {
-  async getPrimaryComponentAttribute(attribute: string): Promise<string> {
-    return await (await this._primaryComponent).getAttribute(attribute);
-  }
-
-  async getSecondaryComponentAttribute(attribute: string): Promise<string> {
-    return await (await this._secondaryComponent).getAttribute(attribute);
-  }
-
-  async getAvatarAccessibilityLabel(componentSelector: AvatarComponentSelector): Promise<string> {
-    return componentSelector == AvatarComponentSelector.SecondaryComponent
-      ? await (await this._secondaryComponent).getAttribute('Name')
-      : await (await this._primaryComponent).getAttribute('Name');
-  }
-
-  async getAvatarAccessibilityHint(componentSelector: AvatarComponentSelector): Promise<string> {
-    return componentSelector == AvatarComponentSelector.SecondaryComponent
-      ? await (await this._secondaryComponent).getAttribute('HelpText')
-      : await (await this._primaryComponent).getAttribute('HelpText');
-  }
-
-  async getAvatarAccessibilityRole(componentSelector: AvatarComponentSelector): Promise<string> {
-    return componentSelector == AvatarComponentSelector.SecondaryComponent
-      ? await (await this._secondaryComponent).getAttribute('ControlType')
-      : await (await this._primaryComponent).getAttribute('ControlType');
-  }
   /*****************************************/
   /**************** Getters ****************/
   /*****************************************/

apps/E2E/src/Avatar/specs/Avatar.spec.win.ts

@@ -1,16 +1,7 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
 import AvatarPageObject from '../pages/AvatarPageObject';
-import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
-import {
-  AVATAR_ACCESSIBILITY_LABEL,
-  AVATAR_ACCESSIBILITY_LABEL_BY_NAME,
-  AVATAR_ACCESSIBILITY_HINT,
-  ACCESSIBILITY_LABEL_ATTR,
-  ACCESSIBILITY_HINT_ATTRIBUTE,
-  ACCESSIBILITY_ROLE_ATTRIBUTE,
-  ACCESSIBILITY_ROLE_IMAGE,
-  ACCESSIBILITY_ROLE_LINK,
-} from '../consts';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, Attribute, LINK_A11Y_ROLE, IMAGE_A11Y_ROLE } from '../../common/consts';
+import { AVATAR_ACCESSIBILITY_LABEL, AVATAR_ACCESSIBILITY_LABEL_BY_NAME, AVATAR_ACCESSIBILITY_HINT } from '../consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Avatar Testing Initialization', function () {
@@ -34,30 +25,47 @@ describe('Avatar Accessibility Testing', () => {
     await AvatarPageObject.scrollToTestElement();
   });
 
-  it('Validate accessibilityLabel', async () => {
-    await expect(await AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_LABEL_ATTR)).toEqual(AVATAR_ACCESSIBILITY_LABEL);
+  it('Set "accessibilityLabel" prop. Validate "accessibilityLabel" value propagates to "Name" element attribute.', async () => {
+    await expect(
+      await AvatarPageObject.compareAttribute(AvatarPageObject._primaryComponent, Attribute.AccessibilityLabel, AVATAR_ACCESSIBILITY_LABEL),
+    ).toBeTrue();
+
     await expect(await AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
 
-  it('Validate accessibilityLabel from `name` prop', async () => {
-    await expect(await AvatarPageObject.getSecondaryComponentAttribute(ACCESSIBILITY_LABEL_ATTR)).toEqual(
-      AVATAR_ACCESSIBILITY_LABEL_BY_NAME,
-    );
+  it('Set "name" prop without setting "accessibilityLabel". Validate "accessibilityLabel" value defaults to "{name}, available".', async () => {
+    await expect(
+      await AvatarPageObject.compareAttribute(
+        AvatarPageObject._secondaryComponent,
+        Attribute.AccessibilityLabel,
+        AVATAR_ACCESSIBILITY_LABEL_BY_NAME,
+      ),
+    ).toBeTrue();
+
     await expect(await AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
 
-  it('Validate accessibilityHint', async () => {
-    await expect(await AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_HINT_ATTRIBUTE)).toEqual(AVATAR_ACCESSIBILITY_HINT);
+  it('Set "accessibilityHint". Validate "accessibilityHint" value propagates to "HelpText" element attribute.', async () => {
+    await expect(
+      await AvatarPageObject.compareAttribute(AvatarPageObject._primaryComponent, Attribute.AccessibilityHint, AVATAR_ACCESSIBILITY_HINT),
+    ).toBeTrue();
+
     await expect(await AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
 
-  it('Validate accessibilityRole', async () => {
-    await expect(await AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_ROLE_ATTRIBUTE)).toEqual(ACCESSIBILITY_ROLE_LINK);
+  it('Set "accessibilityRole" prop. Validate "accessibilityRole" value propagates to "ControlType" attribute.', async () => {
+    await expect(
+      await AvatarPageObject.compareAttribute(AvatarPageObject._primaryComponent, Attribute.AccessibilityRole, LINK_A11Y_ROLE),
+    ).toBeTrue();
+
     await expect(await AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
 
-  it('Validate default accessibilityRole', async () => {
-    await expect(await AvatarPageObject.getSecondaryComponentAttribute(ACCESSIBILITY_ROLE_ATTRIBUTE)).toEqual(ACCESSIBILITY_ROLE_IMAGE);
+  it('Do NOT set "accessibilityRole". Validate "accessibilityRole" value defaults to "Image" ControlType.', async () => {
+    await expect(
+      await AvatarPageObject.compareAttribute(AvatarPageObject._secondaryComponent, Attribute.AccessibilityRole, IMAGE_A11Y_ROLE),
+    ).toBeTrue();
+
     await expect(await AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
 });

apps/E2E/src/Callout/pages/CalloutPageObject.win.ts

@@ -10,36 +10,26 @@ class CalloutPageObject extends BasePage {
   /******************************************************************/
   /**************** UI Element Interaction Methods ******************/
   /******************************************************************/
-  async didCalloutLoad(): Promise<boolean> {
+  async isCalloutOpen(): Promise<boolean> {
     return await (await this._primaryComponent).isDisplayed();
   }
 
-  /* OVERRIDE: This must scroll to the button that opens the callout, not the callout (since it's not visible on load.) */
-  async scrollToTestElement(): Promise<void> {
-    // on win32, adding a blank value to an element automatically scrolls to it
-    await (await this._buttonToOpenCallout).addValue('');
-  }
-
-  async openCallout(): Promise<void> {
-    await (await this._buttonToOpenCallout).click();
+  // This both opens and waits for it to go in view
+  async openCalloutAndWaitForLoad(): Promise<void> {
+    if (!(await this.isCalloutOpen())) {
+      await (await this._buttonToOpenCallout).click();
+      await this.waitForCondition(
+        async () => await this.isCalloutOpen(),
+        'Clicked the button to open the Callout, but the Callout did not open correctly.',
+      );
+    }
   }
 
   async closeCallout(): Promise<void> {
     // all we have to do is click outside the callout
     await (await this._testPage).click();
   }
 
-  async waitForCalloutComponentInView(timeout?: number): Promise<void> {
-    await browser.waitUntil(
-      async () => {
-        return await this.didCalloutLoad();
-      },
-      {
-        timeout: timeout ?? this.waitForUiEvent,
-      },
-    );
-  }
-
   /*****************************************/
   /**************** Getters ****************/
   /*****************************************/

apps/E2E/src/Callout/specs/Callout.spec.win.ts

@@ -1,8 +1,7 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
 import CalloutPageObject from '../pages/CalloutPageObject.win';
 import { CALLOUT_ACCESSIBILITY_LABEL } from '../consts';
-import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, CALLOUT_A11Y_ROLE } from '../../common/consts';
-import { ComponentSelector } from '../../common/BasePage';
+import { Attribute, PAGE_TIMEOUT, BOOT_APP_TIMEOUT, CALLOUT_A11Y_ROLE } from '../../common/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Callout Testing Initialization', function () {
@@ -23,18 +22,27 @@ describe('Callout Testing Initialization', function () {
 
 describe('Callout Accessibility Testing', () => {
   beforeAll(async () => {
-    await CalloutPageObject.scrollToTestElement();
-    await CalloutPageObject.openCallout();
-    await CalloutPageObject.waitForCalloutComponentInView(PAGE_TIMEOUT);
+    await CalloutPageObject.scrollToTestElement(await CalloutPageObject._buttonToOpenCallout);
+    await CalloutPageObject.openCalloutAndWaitForLoad();
   });
 
-  it('Validate accessibilityRole is correct', async () => {
-    await expect(await CalloutPageObject.getAccessibilityRole()).toEqual(CALLOUT_A11Y_ROLE);
+  it('Validate "accessibilityRole" prop has correct value, propagates to "ControlType" element attribute.', async () => {
+    await expect(
+      await CalloutPageObject.compareAttribute(CalloutPageObject._primaryComponent, Attribute.AccessibilityRole, CALLOUT_A11Y_ROLE),
+    ).toBeTrue();
+
     await expect(await CalloutPageObject.didAssertPopup()).toBeFalsy(CalloutPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
   });
 
-  it('Set accessibilityLabel', async () => {
-    await expect(await CalloutPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(CALLOUT_ACCESSIBILITY_LABEL);
+  it('Set "accessibilityLabel" prop. Validate "accessibilityLabel" value propagates to "Name" element attribute.', async () => {
+    await expect(
+      await CalloutPageObject.compareAttribute(
+        CalloutPageObject._primaryComponent,
+        Attribute.AccessibilityLabel,
+        CALLOUT_ACCESSIBILITY_LABEL,
+      ),
+    ).toBeTrue();
+
     await expect(await CalloutPageObject.didAssertPopup()).toBeFalsy(CalloutPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
   });
 
@@ -45,13 +53,12 @@ describe('Callout Accessibility Testing', () => {
 
 describe('Callout Functional Testing', () => {
   beforeEach(async () => {
-    await CalloutPageObject.scrollToTestElement();
-    await CalloutPageObject.openCallout();
-    await CalloutPageObject.waitForCalloutComponentInView(PAGE_TIMEOUT);
+    await CalloutPageObject.scrollToTestElement(await CalloutPageObject._buttonToOpenCallout);
+    await CalloutPageObject.openCalloutAndWaitForLoad();
   });
 
-  it('Open the callout and validate it loaded correctly (visible)', async () => {
-    await expect(await CalloutPageObject.didCalloutLoad()).toBeTruthy();
+  it('Open Callout by clicking a button. Validate that the Callout is displayed.', async () => {
+    await expect(await CalloutPageObject.isCalloutOpen()).toBeTruthy('The callout failed to visibly display.');
   });
 
   afterEach(async () => {

apps/E2E/src/common/consts.ts

@@ -4,6 +4,7 @@ export const ROOT_VIEW = 'Fluent_Tester_Root_View';
 export const BUTTON_A11Y_ROLE = 'ControlType.Button';
 export const CALLOUT_A11Y_ROLE = 'ControlType.Group';
 export const CHECKBOX_A11Y_ROLE = 'ControlType.CheckBox';
+export const IMAGE_A11Y_ROLE = 'ControlType.Image';
 export const LINK_A11Y_ROLE = 'ControlType.HyperLink';
 export const MENUBUTTON_A11Y_ROLE = 'ControlType.Button';
 export const MENU_A11Y_ROLE = 'ControlType.Menu';
@@ -19,6 +20,7 @@ export const BOOT_APP_TIMEOUT = 60000;
 export const PAGE_TIMEOUT = 15000;
 
 export const enum Attribute {
+  AccessibilityHint = 'HelpText',
   AccessibilityLabel = 'Name',
   AccessibilityRole = 'ControlType',
   ExpandCollapseState = 'ExpandCollapse.ExpandCollapseState',
@@ -31,6 +33,7 @@ export const enum Attribute {
 }
 
 export const attributeToEnumName = {
+  [Attribute.AccessibilityHint]: 'AccessibilityHint',
   [Attribute.AccessibilityLabel]: 'AccessibilityLabel',
   [Attribute.AccessibilityRole]: 'AccessibilityRole',
   [Attribute.ExpandCollapseState]: 'ExpandCollapseState',

change/@fluentui-react-native-e2e-testing-d5039679-6015-478a-b8dd-40f18ea71b05.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Clean up and overhaul Avatar and Callout tests with better errors and cleaner PageObjects",
+  "packageName": "@fluentui-react-native/e2e-testing",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-73ebeab4-23fe-4505-8418-0398318e29e2.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Clean up and overhaul Avatar and Callout tests with better errors and cleaner PageObjects",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}