@fluentui-react-native/tester 0.50.28 → 0.51.3

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

@@ -1,8 +1,12 @@
 import NavigateAppPage from '../../common/NavigateAppPage.win';
 import ButtonPageObject from '../pages/ButtonPageObject';
 import { ComponentSelector } from '../../common/BasePage.win';
-import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, BUTTON_A11Y_ROLE } from '../../common/consts';
-import { BUTTON_ACCESSIBILITY_LABEL, BUTTON_TEST_COMPONENT_LABEL } from '../../../FluentTester/TestComponents/Button/consts';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, BUTTON_A11Y_ROLE, Keys } from '../../common/consts';
+import {
+  BUTTON_TEST_COMPONENT,
+  BUTTON_ACCESSIBILITY_LABEL,
+  BUTTON_TEST_COMPONENT_LABEL,
+} from '../../../FluentTester/TestComponents/Button/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Button Testing Initialization', function () {
@@ -25,21 +29,48 @@ describe('Button Testing Initialization', function () {
 });
 
 describe('Button Accessibility Testing', () => {
-  it('Button - Validate accessibilityRole is correct', () => {
+  /* Scrolls and waits for the Button to be visible on the Test Page */
+  beforeEach(() => {
     ButtonPageObject.scrollToTestElement();
     ButtonPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  });
+
+  it('Button - Validate accessibilityRole is correct', () => {
     expect(ButtonPageObject.getAccessibilityRole()).toEqual(BUTTON_A11Y_ROLE);
   });
 
   it('Button - Set accessibilityLabel', () => {
-    ButtonPageObject.scrollToTestElement();
-    ButtonPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
     expect(ButtonPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(BUTTON_ACCESSIBILITY_LABEL);
   });
 
   it('Button - Do not set accessibilityLabel -> Default to Button label', () => {
+    expect(ButtonPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(BUTTON_TEST_COMPONENT_LABEL);
+  });
+});
+
+describe('Button Functional Testing', () => {
+  /* Scrolls and waits for the Button to be visible on the Test Page */
+  beforeEach(() => {
     ButtonPageObject.scrollToTestElement();
     ButtonPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
-    expect(ButtonPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(BUTTON_TEST_COMPONENT_LABEL);
+  });
+
+  it('Validate OnClick() callback was fired -> Click', () => {
+    ButtonPageObject.clickComponent();
+    expect(ButtonPageObject.didOnClickCallbackFire()).toBeTruthy();
+
+    ButtonPageObject.clickComponent(); // Reset Button State
+  });
+
+  it('Validate OnClick() callback was fired -> Type "Enter"', () => {
+    ButtonPageObject.sendKey(BUTTON_TEST_COMPONENT, Keys.Enter);
+    expect(ButtonPageObject.didOnClickCallbackFire()).toBeTruthy();
+
+    ButtonPageObject.clickComponent(); // Reset Button State
+  });
+
+  it('Validate OnClick() callback was fired -> Type "Spacebar"', () => {
+    ButtonPageObject.sendKey(BUTTON_TEST_COMPONENT, Keys.Spacebar);
+    expect(ButtonPageObject.didOnClickCallbackFire()).toBeTruthy();
   });
 });

package/src/E2E/Checkbox/pages/CheckboxPageObject.ts

@@ -3,6 +3,7 @@ import {
   CHECKBOX_TEST_COMPONENT,
   CHECKBOX_NO_A11Y_LABEL_COMPONENT,
   HOMEPAGE_CHECKBOX_BUTTON,
+  CHECKBOX_ON_PRESS,
 } from '../../../FluentTester/TestComponents/Checkbox/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
@@ -14,19 +15,42 @@ class CheckboxPageObject extends BasePage {
     return this._primaryComponent.isSelected();
   }
 
-  waitForCheckboxUnchecked(timeout?: number): void {
+  waitForCheckboxChecked(timeout?: number): void {
     browser.waitUntil(
       () => {
-        return !this.isCheckboxChecked();
+        return this.isCheckboxChecked();
       },
       {
         timeout: timeout ?? this.waitForPageTimeout,
-        timeoutMsg: 'The onPress() callback for ' + this._pageName + ' did not fire correctly.',
+        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(CHECKBOX_ON_PRESS);
+    browser.waitUntil(
+      () => {
+        return callbackText.isDisplayed();
+      },
+      {
+        timeout: this.waitForPageTimeout,
+        timeoutMsg: 'The OnChange callback did not fire.',
+        interval: 1000,
+      },
+    );
+
+    return callbackText.isDisplayed();
+  }
+
   /*****************************************/
   /**************** Getters ****************/
   /*****************************************/

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

@@ -1,8 +1,12 @@
 import NavigateAppPage from '../../common/NavigateAppPage.win';
 import CheckboxPageObject from '../pages/CheckboxPageObject';
 import { ComponentSelector } from '../../common/BasePage.win';
-import { CHECKBOX_TEST_COMPONENT_LABEL, CHECKBOX_ACCESSIBILITY_LABEL } from '../../../FluentTester/TestComponents/Checkbox/consts';
-import { CHECKBOX_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+import {
+  CHECKBOX_TEST_COMPONENT_LABEL,
+  CHECKBOX_ACCESSIBILITY_LABEL,
+  CHECKBOX_TEST_COMPONENT,
+} from '../../../FluentTester/TestComponents/Checkbox/consts';
+import { CHECKBOX_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT, Keys } from '../../common/consts';
 
 describe('Checkbox Testing Initialization', () => {
   it('Wait for app load', () => {
@@ -24,21 +28,59 @@ describe('Checkbox Testing Initialization', () => {
 });
 
 describe('Checkbox Accessibility Testing', () => {
-  it('Checkbox - Validate accessibilityRole is correct', () => {
+  /* Scrolls and waits for the Checkbox to be visible on the Test Page */
+  beforeEach(() => {
     CheckboxPageObject.scrollToTestElement();
     CheckboxPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  });
+
+  it('Checkbox - Validate accessibilityRole is correct', () => {
     expect(CheckboxPageObject.getAccessibilityRole()).toEqual(CHECKBOX_A11Y_ROLE);
   });
 
   it('Checkbox - Set accessibilityLabel', () => {
-    CheckboxPageObject.scrollToTestElement();
-    CheckboxPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
     expect(CheckboxPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(CHECKBOX_ACCESSIBILITY_LABEL);
   });
 
   it('Checkbox - Do not set accessibilityLabel -> Default to Checkbox label', () => {
+    expect(CheckboxPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(CHECKBOX_TEST_COMPONENT_LABEL);
+  });
+});
+
+describe('Checkbox Functional Testing', () => {
+  /* Scrolls and waits for the Checkbox to be visible on the Test Page AND un-checks the Checkbox */
+  beforeEach(() => {
     CheckboxPageObject.scrollToTestElement();
     CheckboxPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
-    expect(CheckboxPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(CHECKBOX_TEST_COMPONENT_LABEL);
+
+    CheckboxPageObject.toggleCheckboxToUnchecked();
+  });
+
+  it("Click on a Checkbox -> Validate it toggles correctly AND calls the user's onChange", () => {
+    /* Validate the Checkbox is initially toggled OFF */
+    expect(CheckboxPageObject.isCheckboxChecked()).toBeFalsy();
+
+    /* Click on the Checkbox to toggle on */
+    CheckboxPageObject.clickComponent();
+    CheckboxPageObject.waitForCheckboxChecked(PAGE_TIMEOUT);
+
+    expect(CheckboxPageObject.didOnChangeCallbackFire()).toBeTruthy();
+
+    /* Validate the Checkbox is toggled ON */
+    expect(CheckboxPageObject.isCheckboxChecked()).toBeTruthy();
+
+    CheckboxPageObject.clickComponent();
+
+    /* Validate the Checkbox is toggled OFF */
+    expect(CheckboxPageObject.isCheckboxChecked()).toBeFalsy();
+  });
+
+  it('Click the "Spacebar" on a Checkbox and verify it toggles', () => {
+    /* Presses the "space bar" to select the Checkbox */
+    CheckboxPageObject.sendKey(CHECKBOX_TEST_COMPONENT, Keys.Spacebar);
+    CheckboxPageObject.waitForCheckboxChecked(PAGE_TIMEOUT);
+
+    /* Validate the Checkbox is selected */
+    expect(CheckboxPageObject.isCheckboxChecked()).toBeTruthy();
   });
 });

package/src/E2E/Checkbox/specs/Checkbox.spec.windows.ts

@@ -0,0 +1,86 @@
+import NavigateAppPage from '../../common/NavigateAppPage.win';
+import CheckboxPageObject from '../pages/CheckboxPageObject';
+import { ComponentSelector } from '../../common/BasePage.win';
+import { CHECKBOX_TEST_COMPONENT_LABEL, CHECKBOX_ACCESSIBILITY_LABEL } from '../../../FluentTester/TestComponents/Checkbox/consts';
+import { CHECKBOX_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+describe('Checkbox Testing Initialization', () => {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Checkbox test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    CheckboxPageObject.scrollToComponentButton();
+    CheckboxPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToCheckboxPage();
+    CheckboxPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(CheckboxPageObject.isPageLoaded()).toBeTruthy();
+  });
+});
+
+describe('Checkbox Accessibility Testing', () => {
+  /* Scrolls and waits for the Checkbox to be visible on the Test Page */
+  beforeEach(() => {
+    CheckboxPageObject.scrollToTestElement();
+    CheckboxPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  });
+
+  it('Checkbox - Validate accessibilityRole is correct', () => {
+    expect(CheckboxPageObject.getAccessibilityRole()).toEqual(CHECKBOX_A11Y_ROLE);
+  });
+
+  it('Checkbox - Set accessibilityLabel', () => {
+    expect(CheckboxPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(CHECKBOX_ACCESSIBILITY_LABEL);
+  });
+
+  it('Checkbox - Do not set accessibilityLabel -> Default to Checkbox label', () => {
+    expect(CheckboxPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(CHECKBOX_TEST_COMPONENT_LABEL);
+  });
+});
+
+/* These currently don't work on UWP because element.isSelected() always returns false. I will need to debug and figure
+ * out why this isn't supported on UWP, and if there's a potential workaround. Task #5747337 */
+// describe('Checkbox Functional Testing', () => {
+//   /* Scrolls and waits for the Checkbox to be visible on the Test Page AND un-checks the Checkbox */
+//   beforeEach(() => {
+//     CheckboxPageObject.scrollToTestElement();
+//     CheckboxPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+
+//     CheckboxPageObject.toggleCheckboxToUnchecked();
+//   });
+
+//   it("Click on a Checkbox -> Validate it toggles correctly AND calls the user's onChange", () => {
+//     /* Validate the Checkbox is initially toggled OFF */
+//     expect(CheckboxPageObject.isCheckboxChecked()).toBeFalsy();
+//     console.log('Checkbox is checked: ' + CheckboxPageObject.isCheckboxChecked());
+
+//     /* Click on the Checkbox to toggle on */
+//     CheckboxPageObject.clickComponent();
+
+//     CheckboxPageObject.waitForCheckboxChecked(PAGE_TIMEOUT);
+
+//     expect(CheckboxPageObject.didOnChangeCallbackFire()).toBeTruthy();
+
+//     /* Validate the Checkbox is toggled ON */
+//     expect(CheckboxPageObject.isCheckboxChecked()).toBeTruthy();
+
+//     CheckboxPageObject.clickComponent();
+
+//     /* Validate the Checkbox is toggled OFF */
+//     expect(CheckboxPageObject.isCheckboxChecked()).toBeFalsy();
+//   });
+
+//   it('Click the "Spacebar" on a Checkbox and verify it toggles', () => {
+//     /* Presses the "space bar" to select the Checkbox */
+//     CheckboxPageObject.sendKey(CHECKBOX_TEST_COMPONENT, Keys.Spacebar);
+//     CheckboxPageObject.waitForCheckboxChecked(PAGE_TIMEOUT);
+
+//     /* Validate the Checkbox is selected */
+//     expect(CheckboxPageObject.isCheckboxChecked()).toBeTruthy();
+//   });
+// });

package/src/E2E/Text/pages/TextPageObject.macos.ts

@@ -1,4 +1,4 @@
-import { TEXT_TESTPAGE, TEXT_TEST_COMPONENT, HOMEPAGE_TEXT_BUTTON } from '../../../FluentTester/TestComponents/Text/consts';
+import { TEXT_TESTPAGE, FIRST_TEXT_COMPONENT, HOMEPAGE_TEXT_BUTTON } from '../../../FluentTester/TestComponents/Text/consts';
 import { BasePage, By } from '../../common/BasePage.macos';
 
 class TextPageObject extends BasePage {
@@ -14,7 +14,7 @@ class TextPageObject extends BasePage {
   }
 
   get _primaryComponent() {
-    return By(TEXT_TEST_COMPONENT);
+    return By(FIRST_TEXT_COMPONENT);
   }
 
   get _pageButton() {

package/src/E2E/Text/pages/TextPageObject.win.ts

@@ -1,4 +1,9 @@
-import { TEXT_TESTPAGE, TEXT_TEST_COMPONENT, HOMEPAGE_TEXT_BUTTON } from '../../../FluentTester/TestComponents/Text/consts';
+import {
+  TEXT_TESTPAGE,
+  FIRST_TEXT_COMPONENT,
+  HOMEPAGE_TEXT_BUTTON,
+  SECOND_TEXT_COMPONENT,
+} from '../../../FluentTester/TestComponents/Text/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
 class TextPageObject extends BasePage {
@@ -14,7 +19,11 @@ class TextPageObject extends BasePage {
   }
 
   get _primaryComponent() {
-    return By(TEXT_TEST_COMPONENT);
+    return By(FIRST_TEXT_COMPONENT);
+  }
+
+  get _secondaryComponent() {
+    return By(SECOND_TEXT_COMPONENT);
   }
 
   get _pageButton() {

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

@@ -1,6 +1,8 @@
 import NavigateAppPage from '../../common/NavigateAppPage.win';
 import TextPageObject from '../pages/TextPageObject.win';
+import { ComponentSelector } from '../../common/BasePage.win';
 import { TEXT_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+import { TEXT_ACCESSIBILITY_LABEL, TEXT_COMPONENT_CONTENT } from '../../../FluentTester/TestComponents/Text/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Text Testing Initialization', function () {
@@ -23,9 +25,20 @@ describe('Text Testing Initialization', function () {
 });
 
 describe('Text Accessibility Testing', () => {
-  it('Text - Validate accessibilityRole is correct', () => {
+  beforeEach(() => {
     TextPageObject.scrollToTestElement();
     TextPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  });
+
+  it('Text - Validate accessibilityRole is correct', () => {
     expect(TextPageObject.getAccessibilityRole()).toEqual(TEXT_A11Y_ROLE);
   });
+
+  it('Text - Set accessibilityLabel', () => {
+    expect(TextPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(TEXT_ACCESSIBILITY_LABEL);
+  });
+
+  it('Text - Do not accessibilityLabel -> Default to content', () => {
+    expect(TextPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(TEXT_COMPONENT_CONTENT);
+  });
 });

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

@@ -52,6 +52,18 @@ export class BasePage {
     return this._pageButton.isDisplayed();
   }
 
+  clickComponent(): void {
+    this._primaryComponent.click();
+  }
+
+  /* ****TODO****: I need to better use the ComponentSelector for this. We shouldn't have the spec needing to import the constant string */
+  sendKey(componentID?: string, key?: string): void {
+    const component = By(componentID);
+    if (component.isDisplayed()) {
+      component.addValue(key); // Adding a value sends the key on that component
+    }
+  }
+
   /* Scrolls until the desired test page's button is displayed. We use the scroll viewer UI element as the point to start scrolling.
    * We use a negative number as the Y-coordinate because that enables us to scroll downwards */
   scrollToComponentButton(): void {
@@ -109,6 +121,7 @@ export class BasePage {
     while (!this._primaryComponent.isDisplayed()) {
       driver.touchScroll(COMPONENT_SCROLL_COORDINATES.x, COMPONENT_SCROLL_COORDINATES.y, $('~ScrollViewAreaForComponents').elementId);
     }
+    driver.touchScroll(COMPONENT_SCROLL_COORDINATES.x, COMPONENT_SCROLL_COORDINATES.y, $('~ScrollViewAreaForComponents').elementId);
   }
 
   /* A method that allows the caller to pass in a condition. A wrapper for waitUntil(). Once testing becomes more extensive,

package/src/E2E/common/consts.ts

@@ -13,3 +13,14 @@ export const TEXT_A11Y_ROLE = 'ControlType.Text';
 /* Jasmine Timeouts */
 export const BOOT_APP_TIMEOUT = 60000;
 export const PAGE_TIMEOUT = 15000;
+
+/* Keyboard Key Constants */
+export const enum Keys {
+  Up_Arrow = 'ArrowUp',
+  Right_Arrow = 'ArrowRight',
+  Down_Arrow = 'ArrowDown',
+  Left_Arrow = 'ArrowLeft',
+  Spacebar = ' ',
+  Enter = 'Enter',
+  Escape = 'Escape',
+}

package/src/FluentTester/TestComponents/ButtonExperimental/ButtonHOCTestSection.tsx

@@ -0,0 +1,43 @@
+import { Button } from '@fluentui-react-native/experimental-button';
+import { Text } from '@fluentui-react-native/experimental-text';
+import { Icon } from '@fluentui-react-native/icon';
+import * as React from 'react';
+import { View } from 'react-native';
+import { commonTestStyles, stackStyle } from '../Common/styles';
+
+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 },
+      },
+    },
+  });
+
+  return (
+    <View style={stackStyle}>
+      <CustomButton style={commonTestStyles.vmargin} componentRef={buttonRef}>
+        Customized Button with ref
+      </CustomButton>
+      <Button
+        style={commonTestStyles.vmargin}
+        onClick={() => {
+          if (buttonRef.current) {
+            buttonRef.current.focus();
+          }
+        }}
+      >
+        Press to focus Customized Button
+      </Button>
+      <ComposedButton style={commonTestStyles.vmargin}>Composed button using customized Text for text slot</ComposedButton>
+    </View>
+  );
+};

package/src/FluentTester/TestComponents/ButtonExperimental/ButtonTest.tsx

@@ -7,6 +7,7 @@ import { ButtonIconTest } from './ButtonIconTestSection';
 import { ButtonSizeTest } from './ButtonSizeTestSection';
 import { ButtonShapeTest } from './ButtonShapeTestSection';
 import { E2EButtonExperimentalTest } from './E2EButtonTest';
+import { ButtonHOCTest } from './ButtonHOCTestSection';
 
 const buttonSections: TestSection[] = [
   {
@@ -30,6 +31,10 @@ const buttonSections: TestSection[] = [
     name: 'Sizes',
     component: ButtonSizeTest,
   },
+  {
+    name: 'Customize, Compose, and Ref',
+    component: ButtonHOCTest,
+  },
   {
     name: 'E2E Button Testing',
     component: E2EButtonExperimentalTest,

package/src/FluentTester/TestComponents/Text/TextE2ETest.tsx

@@ -3,17 +3,17 @@ import { View } from 'react-native';
 import { Text } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
-import { TEXT_TEST_COMPONENT, TEXT_ACCESSIBILITY_LABEL, TEXT_NO_A11Y_LABEL_COMPONENT, TEXT_TEST_COMPONENT_LABEL } from './consts';
+import { FIRST_TEXT_COMPONENT, TEXT_ACCESSIBILITY_LABEL, SECOND_TEXT_COMPONENT, TEXT_COMPONENT_CONTENT } from './consts';
 
 export const E2ETextTest: React.FunctionComponent = () => {
   return (
     <View>
       <Stack style={stackStyle} gap={5}>
-        <Text variant="captionStandard" testID={TEXT_TEST_COMPONENT} accessibilityLabel={TEXT_ACCESSIBILITY_LABEL}>
+        <Text variant="captionStandard" testID={FIRST_TEXT_COMPONENT} accessibilityLabel={TEXT_ACCESSIBILITY_LABEL}>
           Testing Text Component - AccessibilityLabel Set
         </Text>
-        <Text variant="captionStandard" testID={TEXT_NO_A11Y_LABEL_COMPONENT}>
-          {TEXT_TEST_COMPONENT_LABEL}
+        <Text variant="captionStandard" testID={SECOND_TEXT_COMPONENT}>
+          {TEXT_COMPONENT_CONTENT}
         </Text>
       </Stack>
     </View>

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

@@ -2,9 +2,9 @@ export const HOMEPAGE_TEXT_BUTTON = 'Homepage_Text_Button';
 export const TEXT_TESTPAGE = 'Text_TestPage';
 
 /* E2E Testing Text 1 */
-export const TEXT_TEST_COMPONENT = 'Text_Test_Component'; // A component on each specific test page
+export const FIRST_TEXT_COMPONENT = 'Text_Test_Component'; // A component on each specific test page
 export const TEXT_ACCESSIBILITY_LABEL = 'E2E testing Text_Test_Component accessibility label';
 
 /* E2E Testing Text 2 */
-export const TEXT_NO_A11Y_LABEL_COMPONENT = 'Text_No_A11y_label_Component';
-export const TEXT_TEST_COMPONENT_LABEL = 'Test Text2 - No Accessibility Label'; // A component on each specific test page
+export const SECOND_TEXT_COMPONENT = 'Text_No_A11y_label_Component';
+export const TEXT_COMPONENT_CONTENT = 'Test Text2 - No Accessibility Label'; // A component on each specific test page