Add spacing E2E tests (#2446)

* Add spacing E2E tests

* Change files

* Add test ID to Spacing test page

* Change files

* Remove macOS and Win E2E tests since they don't have the Spacing test page yet

Co-authored-by: Adam Gleitman <[email protected]>

Author: amgleitman

apps/E2E/src/Spacing/pages/SpacingTokensPageObject.ts

@@ -0,0 +1,21 @@
+import { SPACING_TESTPAGE, HOMEPAGE_SPACING_BUTTON } from '../../../../fluent-tester/src/TestComponents/Spacing/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class SpacingTokensPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(SPACING_TESTPAGE);
+  }
+
+  get _pageName() {
+    return SPACING_TESTPAGE;
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_SPACING_BUTTON);
+  }
+}
+
+export default new SpacingTokensPageObject();

apps/E2E/src/Spacing/specs/SpacingTokens.spec.ios.ts

@@ -0,0 +1,22 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import SpacingTokensPageObject from '../pages/SpacingTokensPageObject';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Spacing Tokens Testing Initialization', function () {
+  it('Wait for app load', async () => {
+    await NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    await expect(await NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Spacing tokens test page', async () => {
+    await SpacingTokensPageObject.mobileScrollToComponentButton();
+    await SpacingTokensPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    await NavigateAppPage.clickAndGoToSpacingTokensPage();
+    await SpacingTokensPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    await expect(await SpacingTokensPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

apps/E2E/src/common/NavigateAppPage.ts

@@ -24,6 +24,7 @@ import { HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON } from '../../../fluent-tester
 import { HOMEPAGE_SEPARATOR_BUTTON } from '../../../fluent-tester/src/TestComponents/Separator/consts';
 import { HOMEPAGE_SHADOW_BUTTON } from '../../../fluent-tester/src/TestComponents/Shadow/consts';
 import { HOMEPAGE_SHIMMER_BUTTON } from '../../../fluent-tester/src/TestComponents/Shimmer/consts';
+import { HOMEPAGE_SPACING_BUTTON } from '../../../fluent-tester/src/TestComponents/Spacing/consts';
 import { HOMEPAGE_STROKEWIDTH_BUTTON } from '../../../fluent-tester/src/TestComponents/StrokeWidth/consts';
 import { HOMEPAGE_SVG_BUTTON } from '../../../fluent-tester/src/TestComponents/Svg/consts';
 import { HOMEPAGE_SWITCH_BUTTON } from '../../../fluent-tester/src/TestComponents/Switch/consts';
@@ -136,6 +137,10 @@ class NavigateAppPage extends BasePage {
     await (await this.shimmerPage).click();
   }
 
+  async clickAndGoToSpacingTokensPage() {
+    await (await this.spacingTokensPage).click();
+  }
+
   async clickAndGoToStrokeWidthTokensPage() {
     await (await this.strokeWidthTokensPage).click();
   }
@@ -284,6 +289,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_STROKEWIDTH_BUTTON);
   }
 
+  private get spacingTokensPage() {
+    return By(HOMEPAGE_SPACING_BUTTON);
+  }
+
   private get svgPage() {
     return By(HOMEPAGE_SVG_BUTTON);
   }

apps/fluent-tester/src/TestComponents/Spacing/SpacingTest.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { Text, View } from 'react-native';
 import { stackStyle } from '../Common/styles';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { SPACING_TESTPAGE } from './consts';
 
 const BasicUsage: React.FunctionComponent = () => {
   function spacingExample(tokenName: string, spacing?: number | string) {
@@ -62,6 +63,7 @@ export const SpacingTokensTest: React.FunctionComponent = () => {
   const spacingSections: TestSection[] = [
     {
       name: 'Basic Usage',
+      testID: SPACING_TESTPAGE,
       component: BasicUsage,
     },
   ];

change/@fluentui-react-native-e2e-testing-cd5d59f2-8d69-4083-8103-1d35f8d2da09.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add spacing E2E tests",
+  "packageName": "@fluentui-react-native/e2e-testing",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-1ce67cec-edcc-499e-a866-0e30c3b677e6.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add spacing E2E tests",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}