@fluentui-react-native/tester 0.48.1 → 0.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.48.1",
+  "version": "0.49.0",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -23,29 +23,29 @@
   },
   "dependencies": {
     "@fluentui-react-native/android-theme": ">=0.5.0 <1.0.0",
-    "@fluentui-react-native/apple-theme": ">=0.9.0 <1.0.0",
-    "@fluentui-react-native/button": ">=0.21.0 <1.0.0",
-    "@fluentui-react-native/default-theme": ">=0.9.0 <1.0.0",
-    "@fluentui-react-native/experimental-activity-indicator": ">=0.4.0 <1.0.0",
-    "@fluentui-react-native/experimental-avatar": ">=0.13.1 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.10.0",
-    "@fluentui-react-native/experimental-checkbox": "0.4.0",
+    "@fluentui-react-native/apple-theme": ">=0.9.1 <1.0.0",
+    "@fluentui-react-native/button": ">=0.21.1 <1.0.0",
+    "@fluentui-react-native/default-theme": ">=0.9.1 <1.0.0",
+    "@fluentui-react-native/experimental-activity-indicator": ">=0.5.0 <1.0.0",
+    "@fluentui-react-native/experimental-avatar": ">=0.13.2 <1.0.0",
+    "@fluentui-react-native/experimental-button": "0.11.0",
+    "@fluentui-react-native/experimental-checkbox": "0.4.1",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.4.0 <1.0.0",
-    "@fluentui-react-native/experimental-expander": "0.3.0",
-    "@fluentui-react-native/experimental-menu-button": ">=0.1.0 <1.0.0",
-    "@fluentui-react-native/experimental-shimmer": "0.6.0",
-    "@fluentui-react-native/experimental-tabs": "0.4.0",
-    "@fluentui-react-native/experimental-text": ">=0.7.0 <1.0.0",
-    "@fluentui-react-native/framework": ">=0.7.0 <1.0.0",
-    "@fluentui-react-native/icon": "0.9.0",
-    "@fluentui-react-native/interactive-hooks": ">=0.11.0 <1.0.0",
-    "@fluentui-react-native/stack": ">=0.6.0 <1.0.0",
+    "@fluentui-react-native/experimental-expander": "0.3.1",
+    "@fluentui-react-native/experimental-menu-button": ">=0.2.0 <1.0.0",
+    "@fluentui-react-native/experimental-shimmer": "0.6.1",
+    "@fluentui-react-native/experimental-tabs": "0.4.1",
+    "@fluentui-react-native/experimental-text": ">=0.7.1 <1.0.0",
+    "@fluentui-react-native/framework": ">=0.7.1 <1.0.0",
+    "@fluentui-react-native/icon": "0.10.0",
+    "@fluentui-react-native/interactive-hooks": ">=0.11.1 <1.0.0",
+    "@fluentui-react-native/stack": ">=0.6.1 <1.0.0",
     "@fluentui-react-native/theme": ">=0.6.0 <1.0.0",
     "@fluentui-react-native/theme-types": ">=0.13.0 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.3.0",
-    "@fluentui-react-native/theming-utils": ">=0.8.0 <1.0.0",
-    "@fluentui-react-native/win32-theme": ">=0.14.0 <1.0.0",
-    "@fluentui/react-native": ">=0.27.0 <1.0.0",
+    "@fluentui-react-native/theming-utils": ">=0.8.1 <1.0.0",
+    "@fluentui-react-native/win32-theme": ">=0.14.1 <1.0.0",
+    "@fluentui/react-native": ">=0.27.1 <1.0.0",
     "@react-native-community/slider": "^4.1.12",
     "@react-native-menu/menu": "^0.1.2",
     "@react-native-picker/picker": "^1.16.7",

package/src/E2E/ButtonExperimental/pages/ButtonExperimentalPageObject.ts

@@ -0,0 +1,34 @@
+import {
+  EXPERIMENTAL_BUTTON_TEST_PAGE,
+  BUTTONEXPERIMENTAL_TEST_COMPONENT,
+  BUTTONEXPERIMENTAL_NO_A11Y_LABEL_COMPONENT,
+  HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL,
+} from '../../../FluentTester/TestComponents/ButtonExperimental/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class ButtonExperimentalPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(EXPERIMENTAL_BUTTON_TEST_PAGE);
+  }
+
+  get _pageName() {
+    return EXPERIMENTAL_BUTTON_TEST_PAGE;
+  }
+
+  get _primaryComponent() {
+    return By(BUTTONEXPERIMENTAL_TEST_COMPONENT);
+  }
+
+  get _secondaryComponent() {
+    return By(BUTTONEXPERIMENTAL_NO_A11Y_LABEL_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL);
+  }
+}
+
+export default new ButtonExperimentalPageObject();

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

@@ -0,0 +1,50 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import ButtonExperimentalPageObject from '../pages/ButtonExperimentalPageObject';
+import { ComponentSelector } from '../../common/BasePage';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, BUTTON_A11Y_ROLE } from '../../common/consts';
+import {
+  BUTTONEXPERIMENTAL_ACCESSIBILITY_LABEL,
+  BUTTONEXPERIMENTAL_TEST_COMPONENT_LABEL,
+} from '../../../FluentTester/TestComponents/ButtonExperimental/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Button Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Button test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    ButtonExperimentalPageObject.scrollToComponentButton();
+    ButtonExperimentalPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToExperimentalButtonPage();
+    ButtonExperimentalPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(ButtonExperimentalPageObject.isPageLoaded()).toBeTruthy();
+  });
+});
+
+describe('Button Accessibility Testing', () => {
+  it('Button - Validate accessibilityRole is correct', () => {
+    ButtonExperimentalPageObject.scrollToTestElement();
+    ButtonExperimentalPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(ButtonExperimentalPageObject.getAccessibilityRole()).toEqual(BUTTON_A11Y_ROLE);
+  });
+
+  it('Button - Set accessibilityLabel', () => {
+    ButtonExperimentalPageObject.scrollToTestElement();
+    ButtonExperimentalPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(ButtonExperimentalPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(BUTTONEXPERIMENTAL_ACCESSIBILITY_LABEL);
+  });
+
+  it('Button - Do not set accessibilityLabel -> Default to Button label', () => {
+    ButtonExperimentalPageObject.scrollToTestElement();
+    ButtonExperimentalPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(ButtonExperimentalPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(
+      BUTTONEXPERIMENTAL_TEST_COMPONENT_LABEL,
+    );
+  });
+});

package/src/E2E/ContextualMenu/pages/ContextualMenuPageObject.win.ts

@@ -0,0 +1,29 @@
+import {
+  CONTEXTUALMENU_TESTPAGE,
+  CONTEXTUALMENU_TEST_COMPONENT,
+  HOMEPAGE_CONTEXTUALMENU_BUTTON,
+} from '../../../FluentTester/TestComponents/ContextualMenu/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class ContextualMenuPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(CONTEXTUALMENU_TESTPAGE);
+  }
+
+  get _pageName() {
+    return CONTEXTUALMENU_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(CONTEXTUALMENU_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_CONTEXTUALMENU_BUTTON);
+  }
+}
+
+export default new ContextualMenuPageObject();

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

@@ -0,0 +1,25 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import ContextualMenuPageObjectObject from '../pages/ContextualMenuPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('ContextualMenu Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+});
+
+describe('ContextualMenu Functional Tests', () => {
+  it('Click and navigate to ContextualMenu test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    ContextualMenuPageObjectObject.scrollToComponentButton();
+    ContextualMenuPageObjectObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToContextualMenuPage();
+    ContextualMenuPageObjectObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(ContextualMenuPageObjectObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/FocusTrapZone/pages/FocusTrapZonePageObject.win.ts

@@ -0,0 +1,36 @@
+import {
+  FOCUSTRAPZONE_TESTPAGE,
+  FOCUSTRAPZONE_TEST_COMPONENT,
+  HOMEPAGE_FOCUSTRAPZONE_BUTTON,
+} from '../../../FluentTester/TestComponents/FocusTrapZone/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class FocusTrapZonePageObject extends BasePage {
+  // OVERRIDE: We use isExisting() here instead of isDisplayed() because FocusTrapZone does not have any UI to it, it's simply
+  // a wrapper that adds keyboard focus functionality
+  waitForPrimaryElementDisplayed(timeout?: number): void {
+    const errorMsg = 'The FocusTrapZone UI Element did not load correctly. Please see logs.';
+    this.waitForCondition(() => this._primaryComponent.isExisting(), errorMsg, timeout);
+  }
+
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(FOCUSTRAPZONE_TESTPAGE);
+  }
+
+  get _pageName() {
+    return FOCUSTRAPZONE_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(FOCUSTRAPZONE_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_FOCUSTRAPZONE_BUTTON);
+  }
+}
+
+export default new FocusTrapZonePageObject();

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

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import FocusTrapZonePageObject from '../pages/FocusTrapZonePageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('FocusTrapZone Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to FocusTrapZone test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    FocusTrapZonePageObject.scrollToComponentButton();
+    FocusTrapZonePageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToFocusTrapZonePage();
+    FocusTrapZonePageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(FocusTrapZonePageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/FocusZone/pages/FocusZonePageObject.win.ts

@@ -0,0 +1,36 @@
+import {
+  FOCUSZONE_TESTPAGE,
+  FOCUSZONE_TEST_COMPONENT,
+  HOMEPAGE_FOCUSZONE_BUTTON,
+} from '../../../FluentTester/TestComponents/FocusZone/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class FocusZonePageObject extends BasePage {
+  // OVERRIDE: We use isExisting() here instead of isDisplayed() because FocusZone does not have any UI to it, it's simply
+  // a wrapper that adds keyboard focus functionality
+  waitForPrimaryElementDisplayed(timeout?: number): void {
+    const errorMsg = 'The FocusZone UI Element did not load correctly. Please see logs.';
+    this.waitForCondition(() => this._primaryComponent.isExisting(), errorMsg, timeout);
+  }
+
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(FOCUSZONE_TESTPAGE);
+  }
+
+  get _pageName() {
+    return FOCUSZONE_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(FOCUSZONE_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_FOCUSZONE_BUTTON);
+  }
+}
+
+export default new FocusZonePageObject();

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

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import FocusZonePageObject from '../pages/FocusZonePageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('FocusZone Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to FocusZone test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    FocusZonePageObject.scrollToComponentButton();
+    FocusZonePageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToFocusZonePage();
+    FocusZonePageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(FocusZonePageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/Icon/pages/IconPageObject.win.ts

@@ -0,0 +1,34 @@
+import {
+  ICON_TESTPAGE,
+  ICON_TEST_COMPONENT,
+  HOMEPAGE_ICON_BUTTON,
+  ICON_NO_A11Y_LABEL_COMPONENT,
+} from '../../../FluentTester/TestComponents/Icon/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class IconPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(ICON_TESTPAGE);
+  }
+
+  get _pageName() {
+    return ICON_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(ICON_TEST_COMPONENT);
+  }
+
+  get _secondaryComponent() {
+    return By(ICON_NO_A11Y_LABEL_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_ICON_BUTTON);
+  }
+}
+
+export default new IconPageObject();

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

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import IconPageObject from '../pages/IconPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Icon Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Icon test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    IconPageObject.scrollToComponentButton();
+    IconPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToIconPage();
+    IconPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(IconPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/MenuButton/pages/MenuButtonPageObject.win.ts

@@ -0,0 +1,34 @@
+import {
+  MENU_BUTTON_TESTPAGE,
+  MENU_BUTTON_TEST_COMPONENT,
+  HOMEPAGE_MENU_BUTTON,
+  MENU_BUTTON_NO_A11Y_LABEL_COMPONENT,
+} from '../../../FluentTester/TestComponents/MenuButton/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class MenuButtonPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(MENU_BUTTON_TESTPAGE);
+  }
+
+  get _pageName() {
+    return MENU_BUTTON_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(MENU_BUTTON_TEST_COMPONENT);
+  }
+
+  get _secondaryComponent() {
+    return By(MENU_BUTTON_NO_A11Y_LABEL_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_MENU_BUTTON);
+  }
+}
+
+export default new MenuButtonPageObject();

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

@@ -0,0 +1,46 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import MenuButtonPageObject from '../pages/MenuButtonPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, MENUBUTTON_A11Y_ROLE } from '../../common/consts';
+import { MENU_BUTTON_ACCESSIBILITY_LABEL, MENU_BUTTON_TEST_COMPONENT_LABEL } from '../../../FluentTester/TestComponents/MenuButton/consts';
+import { ComponentSelector } from '../../common/BasePage';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('MenuButton Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to MenuButton test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    MenuButtonPageObject.scrollToComponentButton();
+    MenuButtonPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToMenuButtonPage();
+    MenuButtonPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(MenuButtonPageObject.isPageLoaded()).toBeTruthy();
+  });
+});
+
+/* This will be re-enabled with a MenuButton Bug is fixed. Currently in PR - "Integrating accessibilityLabel functionality for MenuButton #1117" */
+describe('MenuButton Accessibility Testing', () => {
+  it('MenuButton - Validate accessibilityRole is correct', () => {
+    MenuButtonPageObject.scrollToTestElement();
+    MenuButtonPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(MenuButtonPageObject.getAccessibilityRole()).toEqual(MENUBUTTON_A11Y_ROLE);
+  });
+
+  it('MenuButton - Set accessibilityLabel', () => {
+    MenuButtonPageObject.scrollToTestElement();
+    MenuButtonPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(MenuButtonPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(MENU_BUTTON_ACCESSIBILITY_LABEL);
+  });
+
+  it('Do not set accessibilityLabel -> Default to MenuButton label', () => {
+    MenuButtonPageObject.scrollToTestElement();
+    MenuButtonPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(MenuButtonPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(MENU_BUTTON_TEST_COMPONENT_LABEL);
+  });
+});

package/src/E2E/Persona/pages/PersonaPageObject.win.ts

@@ -0,0 +1,25 @@
+import { PERSONA_TESTPAGE, PERSONA_TEST_COMPONENT, HOMEPAGE_PERSONA_BUTTON } from '../../../FluentTester/TestComponents/Persona/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class PersonaPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(PERSONA_TESTPAGE);
+  }
+
+  get _pageName() {
+    return PERSONA_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(PERSONA_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_PERSONA_BUTTON);
+  }
+}
+
+export default new PersonaPageObject();

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

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import PersonaPageObject from '../pages/PersonaPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Persona Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Persona test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    PersonaPageObject.scrollToComponentButton();
+    PersonaPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToPersonaPage();
+    PersonaPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(PersonaPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/PersonaCoin/pages/PersonaCoinPageObject.win.ts

@@ -0,0 +1,29 @@
+import {
+  PERSONACOIN_TESTPAGE,
+  PERSONACOIN_TEST_COMPONENT,
+  HOMEPAGE_PERSONACOIN_BUTTON,
+} from '../../../FluentTester/TestComponents/PersonaCoin/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class PersonaCoinPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(PERSONACOIN_TESTPAGE);
+  }
+
+  get _pageName() {
+    return PERSONACOIN_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(PERSONACOIN_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_PERSONACOIN_BUTTON);
+  }
+}
+
+export default new PersonaCoinPageObject();

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

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import PersonaCoinPageObject from '../pages/PersonaCoinPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('PersonaCoin Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to PersonaCoin test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    PersonaCoinPageObject.scrollToComponentButton();
+    PersonaCoinPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToPersonaCoinPage();
+    PersonaCoinPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(PersonaCoinPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/Pressable/pages/PressablePageObject.win.ts

@@ -0,0 +1,29 @@
+import {
+  PRESSABLE_TESTPAGE,
+  PRESSABLE_TEST_COMPONENT,
+  HOMEPAGE_PRESSABLE_BUTTON,
+} from '../../../FluentTester/TestComponents/Pressable/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class PressablePageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(PRESSABLE_TESTPAGE);
+  }
+
+  get _pageName() {
+    return PRESSABLE_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(PRESSABLE_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_PRESSABLE_BUTTON);
+  }
+}
+
+export default new PressablePageObject();

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

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import PressablePageObject from '../pages/PressablePageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Pressable Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Pressable test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    PressablePageObject.scrollToComponentButton();
+    PressablePageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToPressablePage();
+    PressablePageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(PressablePageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/README.md

@@ -72,8 +72,8 @@ The benefit is that if the UI changes for the test page, the tests themselves do
 Page Objects should be put in apps/fluent-tester/src/E2E/_ *ComponentToBeTested* _/pages/.
 
 ```
-// CheckboxTestPage.win.ts
-class CheckboxTestPage extends BasePage {
+// CheckboxPageObject.win.ts
+class CheckboxPageObject extends BasePage {
   // This function clicks on the Checkbox component you selected below
   toggleCheckbox() {
     this._testPage.click();
@@ -85,7 +85,7 @@ class CheckboxTestPage extends BasePage {
   }
 }
 
-export default new CheckboxTestPage();
+export default new CheckboxPageObject();
 ```
 
 ### More on Page Objects (Technical Information)
@@ -114,7 +114,7 @@ Spec documents should be put in apps/fluent-tester/src/E2E/\_ _ComponentToBeTest
 describe('Click on each test page and check if it renders', function() {
   it('Checkbox Test Page', () => {
     NavigateAppPage.clickAndGoToCheckboxPage();
-    expect(CheckboxTestPage.isPageLoaded()).toBeTruthy();
+    expect(CheckboxPageObject.isPageLoaded()).toBeTruthy();
   });
 });
 ```