@fluentui-react-native/tester 0.50.25 → 0.51.0

package/src/E2E/Button/pages/ButtonPageObject.ts

@@ -3,10 +3,30 @@ import {
   BUTTON_TEST_COMPONENT,
   BUTTON_NO_A11Y_LABEL_COMPONENT,
   HOMEPAGE_BUTTON_BUTTON,
+  BUTTON_ON_PRESS,
 } from '../../../FluentTester/TestComponents/Button/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
 class ButtonPageObject extends BasePage {
+  /******************************************************************/
+  /**************** UI Element Interaction Methods ******************/
+  /******************************************************************/
+  didOnClickCallbackFire(): boolean {
+    const callbackText = By(BUTTON_ON_PRESS);
+    browser.waitUntil(
+      () => {
+        return callbackText.isDisplayed();
+      },
+      {
+        timeout: this.waitForPageTimeout,
+        timeoutMsg: 'The OnClick callback did not fire.',
+        interval: 1000,
+      },
+    );
+
+    return callbackText.isDisplayed();
+  }
+
   /*****************************************/
   /**************** Getters ****************/
   /*****************************************/

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/Badge/BadgeTest.tsx

@@ -0,0 +1,93 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import * as React from 'react';
+import { BADGE_TESTPAGE } from './consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { View, Platform, Text } from 'react-native';
+import { Badge, CompressibleBadge } from '@fluentui-react-native/badge';
+import BadgeSvg from './oof.svg';
+
+import { SvgIconProps } from '@fluentui-react-native/icon';
+
+export const BasicBadge: React.FunctionComponent = () => {
+  const svgProps: SvgIconProps = {
+    src: BadgeSvg,
+    viewBox: '0 0 28 28',
+  };
+
+  const fontBuiltInProps = {
+    fontFamily: 'Arial',
+    codepoint: 0x2663,
+    fontSize: 16,
+  };
+
+  const BadgeNoBorder = Badge.customize({
+    borderColor: 'transparent',
+    borderWidth: 0,
+  });
+
+  const StyledBadge = Badge.customize({
+    backgroundColor: 'yellow',
+    borderColor: '#f09',
+    borderWidth: 4,
+  });
+
+  const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
+  const iconProps = { svgSource: svgProps, width: 20, height: 20 };
+
+  return (
+    <View>
+      <Badge />
+      <Text>Appearance</Text>
+      <Badge appearance="outline" text="Outline badge" />
+      <Text>Shape</Text>
+      <Badge shape="circular" text="Circular badge" />
+      <Badge shape="rounded" text="rounded badge" />
+      <Badge shape="square" text="Square badge" />
+      <Text>Size</Text>
+      <Badge size="smallest" shape="circular" />
+      <Badge size="smaller" shape="circular" />
+      <Badge size="small" text="Small" />
+      <Badge size="medium" text="Medium" />
+      <Badge size="large" text="Large" />
+      <Badge size="largest" text="Largest" />
+      {svgIconsEnabled && (
+        <>
+          <Text>Badge with icon</Text>
+          <Badge appearance="outline" icon={iconProps} />
+          <Badge icon={{ fontSource: { ...fontBuiltInProps }, color: '#fff' }} />
+          <Text>Badge with icon and text</Text>
+          <Badge appearance="outline" icon={iconProps} />
+        </>
+      )}
+      <Text>Customized Badge</Text>
+      <BadgeNoBorder appearance="outline" icon={iconProps} />
+      <StyledBadge appearance="outline" text="styled badge" />
+      <Text>Compressible badge</Text>
+      <CompressibleBadge />
+      <CompressibleBadge text="Basic compressible" />
+    </View>
+  );
+};
+
+const badgeSections: TestSection[] = [
+  {
+    name: 'Basic Badge',
+    testID: BADGE_TESTPAGE,
+    component: BasicBadge,
+  },
+];
+
+export const BadgeTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Beta',
+    uwpStatus: 'Experimental',
+    iosStatus: 'Experimental',
+    macosStatus: 'Experimental',
+    androidStatus: 'Backlog',
+  };
+
+  const description =
+    'A badge is an additional visual discriptor for UI elements. It can be used to denote numerical value, status or general information.\n Included in this spec are base properties for usage in all badge scenarios. Reference properties for other badge types i.e. size, layout, and style variations';
+
+  return <Test name="Badge Test" description={description} sections={badgeSections} status={status}></Test>;
+};

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

@@ -0,0 +1,2 @@
+export const HOMEPAGE_BADGE = 'Homepage_Badge_Button';
+export const BADGE_TESTPAGE = 'Badge_TestPage';

package/src/FluentTester/TestComponents/Badge/index.ts

@@ -0,0 +1,2 @@
+export * from './BadgeTest';
+export * from './consts';

package/src/FluentTester/TestComponents/Badge/oof.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 0C6.26801 0 0 6.26801 0 14C0 21.732 6.26801 28 14 28C21.732 28 28 21.732 28 14C28 6.26801 21.732 0 14 0ZM2.80129 14C2.80129 7.81512 7.81512 2.80129 14 2.80129C20.1849 2.80129 25.1987 7.81512 25.1987 14C25.1987 20.1849 20.1849 25.1987 14 25.1987C7.81512 25.1987 2.80129 20.1849 2.80129 14ZM19.8991 9.51445C20.4461 10.0614 20.4461 10.9483 19.8991 11.4953L13.5962 17.7982C13.0492 18.3452 12.1624 18.3452 11.6154 17.7982L8.81412 14.9969C8.26714 14.4499 8.26714 13.563 8.81412 13.0161C9.36111 12.4691 10.2479 12.4691 10.7949 13.0161L12.6058 14.827L17.9183 9.51445C18.4653 8.96746 19.3522 8.96746 19.8991 9.51445Z" fill="#C239B3"/>
+</svg>

package/src/FluentTester/TestComponents/CheckboxExperimental/CheckboxTest.tsx

@@ -151,7 +151,7 @@ const checkboxSections: TestSection[] = [
 export const ExperimentalCheckboxTest: React.FunctionComponent = () => {
   const status: PlatformStatus = {
     win32Status: 'Beta',
-    uwpStatus: 'Experimental',
+    uwpStatus: 'N/A',
     iosStatus: 'N/A',
     macosStatus: 'Experimental',
     androidStatus: 'N/A',

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

package/src/FluentTester/testPages.android.ts

@@ -1,5 +1,6 @@
 import { TestDescription } from './TestComponents';
 import { JSAvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
+import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
@@ -34,6 +35,11 @@ export const tests: TestDescription[] = [
     component: JSAvatarTest,
     testPage: HOMEPAGE_AVATAR_BUTTON,
   },
+  {
+    name: 'Badge Test',
+    component: BadgeTest,
+    testPage: HOMEPAGE_BADGE,
+  },
   {
     name: 'Button Test',
     component: ButtonTest,

package/src/FluentTester/testPages.ios.ts

@@ -1,5 +1,6 @@
 import { TestDescription } from './TestComponents';
 import { AvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
+import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
 import { ExperimentalCheckboxTest, HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from './TestComponents/CheckboxExperimental';
@@ -31,6 +32,11 @@ export const tests: TestDescription[] = [
     component: AvatarTest,
     testPage: HOMEPAGE_AVATAR_BUTTON,
   },
+  {
+    name: 'Badge Test',
+    component: BadgeTest,
+    testPage: HOMEPAGE_BADGE,
+  },
   {
     name: 'Button Test',
     component: ButtonTest,

package/src/FluentTester/testPages.macos.ts

@@ -1,5 +1,6 @@
 import { TestDescription } from './TestComponents';
 import { AvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
+import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
@@ -37,6 +38,11 @@ export const tests: TestDescription[] = [
     component: AvatarTest,
     testPage: HOMEPAGE_AVATAR_BUTTON,
   },
+  {
+    name: 'Badge Test',
+    component: BadgeTest,
+    testPage: HOMEPAGE_BADGE,
+  },
   {
     name: 'Button Test',
     component: ButtonTest,