@fluentui-react-native/tester 0.82.6 → 0.82.9

package/lib-commonjs/TestComponents/Switch/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+(0, tslib_1.__exportStar)(require("./Switch"), exports);
+(0, tslib_1.__exportStar)(require("./consts"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/TestComponents/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TestComponents/Switch/index.ts"],"names":[],"mappings":";;;AAAA,wDAAyB;AACzB,wDAAyB"}

package/lib-commonjs/testPages.win32.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testPages.win32.d.ts","sourceRoot":"","sources":["../src/testPages.win32.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAQnD,eAAO,MAAM,KAAK,EAAE,eAAe,EAmJlC,CAAC"}
+{"version":3,"file":"testPages.win32.d.ts","sourceRoot":"","sources":["../src/testPages.win32.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AASnD,eAAO,MAAM,KAAK,EAAE,eAAe,EAwJlC,CAAC"}

package/lib-commonjs/testPages.win32.js

@@ -25,6 +25,7 @@ var Icon_1 = require("./TestComponents/Icon");
 var Tabs_1 = require("./TestComponents/Tabs");
 var TabsExperimental_1 = require("./TestComponents/TabsExperimental");
 var TextExperimental_1 = require("./TestComponents/TextExperimental");
+var Switch_1 = require("./TestComponents/Switch");
 var CheckboxExperimental_1 = require("./TestComponents/CheckboxExperimental");
 var MenuButtonExperimental_1 = require("./TestComponents/MenuButtonExperimental");
 var ActivityIndicator_1 = require("./TestComponents/ActivityIndicator");
@@ -132,6 +133,11 @@ exports.tests = [
         component: Svg_1.SvgTest,
         testPage: Svg_1.HOMEPAGE_SVG_BUTTON,
     },
+    {
+        name: 'Switch Test',
+        component: Switch_1.SwitchTest,
+        testPage: Switch_1.HOMEPAGE_SWITCH_BUTTON,
+    },
     {
         name: 'Text Test',
         component: Text_1.TextTest,

package/lib-commonjs/testPages.win32.js.map

@@ -1 +1 @@
-{"version":3,"file":"testPages.win32.js","sourceRoot":"","sources":["../src/testPages.win32.ts"],"names":[],"mappings":";;;AAAA,kDAA6E;AAC7E,gDAAmE;AACnE,kDAA6E;AAC7E,oDAAgF;AAChF,sDAAmF;AACnF,kEAAqG;AACrG,gEAA8F;AAC9F,wDAAsF;AACtF,8CAAuE;AACvE,0DAAyF;AACzF,oDAAgF;AAChF,4DAA4F;AAC5F,wDAAsF;AACtF,0DAAyF;AACzF,wDAAsF;AACtF,oDAAgF;AAChF,4CAAoE;AACpE,8CAAuE;AACvE,gDAA0E;AAC1E,kDAA2E;AAC3E,8CAAuE;AACvE,8CAAuE;AACvE,sEAA4G;AAC5G,sEAA4G;AAE5G,8EAAwH;AACxH,kFAAwH;AACxH,wEAA+G;AAC/G,8CAAuE;AACvE,kDAA6E;AAC7E,6BAA6B;AAEhB,QAAA,KAAK,GAAsB;IACtC;QACE,IAAI,EAAE,wBAAwB;QAC9B,SAAS,EAAE,yCAAqB;QAChC,QAAQ,EAAE,sDAAkC;KAC7C;IACD;QACE,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,mBAAU;QACrB,QAAQ,EAAE,+BAAsB;KACjC;IACD;QACE,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,iBAAS;QACpB,QAAQ,EAAE,sBAAc;KACzB;IACD;QACE,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,mBAAU;QACrB,QAAQ,EAAE,+BAAsB;KACjC;IACD;QACE,IAAI,EAAE,cAAc;QACpB,SAAS,EAAE,qBAAW;QACtB,QAAQ,EAAE,iCAAuB;KAClC;IACD;QACE,IAAI,EAAE,eAAe;QACrB,SAAS,EAAE,uBAAY;QACvB,QAAQ,EAAE,mCAAwB;KACnC;IACD;QACE,IAAI,EAAE,uBAAuB;QAC7B,SAAS,EAAE,+CAAwB;QACnC,QAAQ,EAAE,4DAAqC;KAChD;IACD;QACE,IAAI,EAAE,qBAAqB;QAC3B,SAAS,EAAE,mCAAkB;QAC7B,QAAQ,EAAE,+CAA8B;KACzC;IACD;QACE,IAAI,EAAE,sBAAsB;QAC5B,SAAS,EAAE,6BAAa;QACxB,QAAQ,EAAE,6CAA6B;KACxC;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,yBAAa;QACxB,QAAQ,EAAE,qCAAyB;KACpC;IACD;QACE,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,eAAQ;QACnB,QAAQ,EAAE,2BAAoB;KAC/B;IACD;QACE,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,eAAQ;QACnB,QAAQ,EAAE,2BAAoB;KAC/B;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,SAAS,EAAE,2BAAc;QACzB,QAAQ,EAAE,uCAA0B;KACrC;IACD;QACE,IAAI,EAAE,cAAc;QACpB,SAAS,EAAE,qBAAW;QACtB,QAAQ,EAAE,iCAAuB;KAClC;IACD;QACE,IAAI,EAAE,kBAAkB;QACxB,SAAS,EAAE,6BAAe;QAC1B,QAAQ,EAAE,yCAA2B;KACtC;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,yBAAa;QACxB,QAAQ,EAAE,qCAAyB;KACpC;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,SAAS,EAAE,2BAAc;QACzB,QAAQ,EAAE,uCAA0B;KACrC;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,yBAAa;QACxB,QAAQ,EAAE,qCAAyB;KACpC;IACD;QACE,IAAI,EAAE,cAAc;QACpB,SAAS,EAAE,qBAAW;QACtB,QAAQ,EAAE,iCAAuB;KAClC;IACD;QACE,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,aAAO;QAClB,QAAQ,EAAE,yBAAmB;KAC9B;IACD;QACE,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,eAAQ;QACnB,QAAQ,EAAE,2BAAoB;KAC/B;IACD;QACE,IAAI,EAAE,wBAAwB;QAC9B,SAAS,EAAE,uCAAoB;QAC/B,QAAQ,EAAE,oDAAiC;KAC5C;IACD;QACE,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,iBAAS;QACpB,QAAQ,EAAE,6BAAqB;KAChC;IACD;QACE,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,eAAQ;QACnB,QAAQ,EAAE,2BAAoB;KAC/B;IACD;QACE,IAAI,EAAE,wBAAwB;QAC9B,SAAS,EAAE,uCAAoB;QAC/B,QAAQ,EAAE,oDAAiC;KAC5C;IACD;QACE,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,kBAAS;QACpB,QAAQ,EAAE,8BAAqB;KAChC;IACD;QACE,IAAI,EAAE,8BAA8B;QACpC,SAAS,EAAE,mDAA0B;QACrC,QAAQ,EAAE,0DAAiC;KAC5C;IACD;QACE,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,eAAQ;QACnB,QAAQ,EAAE,2BAAoB;KAC/B;IACD;QACE,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,mBAAU;QACrB,QAAQ,EAAE,+BAAsB;KACjC;IACD,mCAAmC;CACpC,CAAC"}
+{"version":3,"file":"testPages.win32.js","sourceRoot":"","sources":["../src/testPages.win32.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.82.6",
+  "version": "0.82.9",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -37,8 +37,8 @@
   "dependencies": {
     "@fluentui-react-native/android-theme": ">=0.11.0 <1.0.0",
     "@fluentui-react-native/apple-theme": ">=0.13.2 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.1.29",
-    "@fluentui-react-native/badge": ">=0.1.14 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.1.31",
+    "@fluentui-react-native/badge": ">=0.1.16 <1.0.0",
     "@fluentui-react-native/button": ">=0.24.13 <1.0.0",
     "@fluentui-react-native/default-theme": ">=0.14.0 <1.0.0",
     "@fluentui-react-native/experimental-activity-indicator": ">=0.6.0 <1.0.0",
@@ -58,6 +58,7 @@
     "@fluentui-react-native/menu": "^1.0.22",
     "@fluentui-react-native/notification": "0.11.4",
     "@fluentui-react-native/stack": ">=0.7.2 <1.0.0",
+    "@fluentui-react-native/switch": "^0.2.0",
     "@fluentui-react-native/text": ">=0.13.0 <1.0.0",
     "@fluentui-react-native/theme": ">=0.7.0 <1.0.0",
     "@fluentui-react-native/theme-types": ">=0.18.0 <1.0.0",

package/src/E2E/Switch/pages/SwitchPageObject.ts

@@ -0,0 +1,86 @@
+import { SWITCH_TESTPAGE, SWITCH_TEST_COMPONENT, HOMEPAGE_SWITCH_BUTTON, SWITCH_ON_PRESS } from '../../../TestComponents/Switch/consts';
+import { BasePage, By } from '../../common/BasePage.win';
+
+/* This enum gives the spec file an EASY way to interact with SPECIFIC UI elements on the page.
+ * The spec file should import this enum and use it when wanting to interact with different elements on the page. */
+export const enum SwitchComponentSelector {
+  PrimaryComponent, //this._primaryComponent
+}
+
+class SwitchPageObject extends BasePage {
+  /******************************************************************/
+  /**************** UI Element Interaction Methods ******************/
+  /******************************************************************/
+  isSwitchChecked(): boolean {
+    return this._primaryComponent.isSelected();
+  }
+
+  waitForSwitchChecked(timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this.isSwitchChecked();
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg: 'The Switch was not toggled correctly',
+        interval: 1000,
+      },
+    );
+  }
+
+  toggleSwitchToUnchecked(): void {
+    if (this.isSwitchChecked()) {
+      this._primaryComponent.click();
+    }
+  }
+
+  didOnChangeCallbackFire(): boolean {
+    const callbackText = By(SWITCH_ON_PRESS);
+    browser.waitUntil(
+      () => {
+        return callbackText.isDisplayed();
+      },
+      {
+        timeout: this.waitForPageTimeout,
+        timeoutMsg: 'The OnChange callback did not fire.',
+        interval: 1000,
+      },
+    );
+
+    return callbackText.isDisplayed();
+  }
+
+  /* Sends a Keyboarding command on a specific UI element */
+  sendKey(switchSelector: SwitchComponentSelector, key: string): void {
+    this.getButtonSelector(switchSelector).addValue(key);
+  }
+
+  /* Returns the correct WebDriverIO element from the Button Selector */
+  getButtonSelector(switchSelector?: SwitchComponentSelector): WebdriverIO.Element {
+    if (switchSelector == SwitchComponentSelector.PrimaryComponent) {
+      return this._primaryComponent;
+    }
+    return this._primaryComponent;
+  }
+
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(SWITCH_TESTPAGE);
+  }
+
+  get _pageName() {
+    return SWITCH_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(SWITCH_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_SWITCH_BUTTON);
+  }
+}
+
+export default new SwitchPageObject();

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

@@ -0,0 +1,107 @@
+import NavigateAppPage from '../../common/NavigateAppPage.win';
+import SwitchPageObject, { SwitchComponentSelector } from '../pages/SwitchPageObject';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, BUTTON_A11Y_ROLE, Keys } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Switch Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
+  });
+
+  it('Click and navigate to Switch test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    SwitchPageObject.scrollToComponentButton();
+    SwitchPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToSwitchPage();
+    SwitchPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(SwitchPageObject.isPageLoaded()).toBeTruthy(SwitchPageObject.ERRORMESSAGE_PAGELOAD);
+    expect(SwitchPageObject.didAssertPopup()).toBeFalsy(SwitchPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
+  });
+});
+
+describe('Switch Accessibility Testing', () => {
+  /* Scrolls and waits for the Switch to be visible on the Test Page */
+  beforeEach(() => {
+    SwitchPageObject.scrollToTestElement();
+    SwitchPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  });
+
+  it('Switch - Validate accessibilityRole is correct', () => {
+    expect(SwitchPageObject.getAccessibilityRole()).toEqual(BUTTON_A11Y_ROLE);
+    expect(SwitchPageObject.didAssertPopup()).toBeFalsy(SwitchPageObject.ERRORMESSAGE_ASSERT);
+  });
+});
+
+describe('Switch Functional Testing', () => {
+  /* Scrolls and waits for the Switch to be visible on the Test Page */
+  beforeEach(() => {
+    SwitchPageObject.scrollToTestElement();
+    SwitchPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  });
+
+  it("Click on a Switch -> Validate it toggles correctly AND calls the user's onChange", () => {
+    /* Validate the Switch is initially toggled OFF */
+    expect(SwitchPageObject.isSwitchChecked()).toBeFalsy();
+
+    /* Click on the Switch to toggle on */
+    SwitchPageObject.clickComponent();
+    SwitchPageObject.waitForSwitchChecked(PAGE_TIMEOUT);
+
+    expect(SwitchPageObject.didOnChangeCallbackFire()).toBeTruthy();
+
+    /* Validate the Switch is toggled ON */
+    expect(SwitchPageObject.isSwitchChecked()).toBeTruthy();
+
+    SwitchPageObject.clickComponent();
+
+    /* Validate the Switch is toggled OFF */
+    expect(SwitchPageObject.isSwitchChecked()).toBeFalsy();
+    expect(SwitchPageObject.didAssertPopup()).toBeFalsy(SwitchPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it("Click the 'Enter' on a Switch and verify it toggles correctly AND calls the user's onChange", () => {
+    /* Validate the Switch is initially toggled OFF */
+    expect(SwitchPageObject.isSwitchChecked()).toBeFalsy();
+
+    /* Presses the "Enter" to select the Switch */
+    SwitchPageObject.sendKey(SwitchComponentSelector.PrimaryComponent, Keys.Enter);
+    SwitchPageObject.waitForSwitchChecked(PAGE_TIMEOUT);
+
+    expect(SwitchPageObject.didOnChangeCallbackFire()).toBeTruthy();
+
+    /* Validate the Switch is toggled ON */
+    expect(SwitchPageObject.isSwitchChecked()).toBeTruthy();
+    expect(SwitchPageObject.didAssertPopup()).toBeFalsy(SwitchPageObject.ERRORMESSAGE_ASSERT);
+
+    SwitchPageObject.sendKey(SwitchComponentSelector.PrimaryComponent, Keys.Enter);
+
+    /* Validate the Switch is toggled OFF */
+    expect(SwitchPageObject.isSwitchChecked()).toBeFalsy();
+    expect(SwitchPageObject.didAssertPopup()).toBeFalsy(SwitchPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it("Click the 'Spacebar' on a Switch and verify it toggles correctly AND calls the user's onChange", () => {
+    /* Validate the Switch is initially toggled OFF */
+    expect(SwitchPageObject.isSwitchChecked()).toBeFalsy();
+
+    /* Presses the "space bar" to select the Switch */
+    SwitchPageObject.sendKey(SwitchComponentSelector.PrimaryComponent, Keys.Spacebar);
+    SwitchPageObject.waitForSwitchChecked(PAGE_TIMEOUT);
+
+    expect(SwitchPageObject.didOnChangeCallbackFire()).toBeTruthy();
+
+    /* Validate the Switch is toggled ON */
+    expect(SwitchPageObject.isSwitchChecked()).toBeTruthy();
+    expect(SwitchPageObject.didAssertPopup()).toBeFalsy(SwitchPageObject.ERRORMESSAGE_ASSERT);
+
+    SwitchPageObject.sendKey(SwitchComponentSelector.PrimaryComponent, Keys.Spacebar);
+
+    /* Validate the Switch is toggled OFF */
+    expect(SwitchPageObject.isSwitchChecked()).toBeFalsy();
+    expect(SwitchPageObject.didAssertPopup()).toBeFalsy(SwitchPageObject.ERRORMESSAGE_ASSERT);
+  });
+});

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

@@ -20,6 +20,7 @@ import { HOMEPAGE_RADIOGROUP_BUTTON } from '../../TestComponents/RadioGroup/cons
 import { HOMEPAGE_SEPARATOR_BUTTON } from '../../TestComponents/Separator/consts';
 import { HOMEPAGE_SHIMMER_BUTTON } from '../../TestComponents/Shimmer/consts';
 import { HOMEPAGE_SVG_BUTTON } from '../../TestComponents/Svg/consts';
+import { HOMEPAGE_SWITCH_BUTTON } from '../../TestComponents/Switch/consts';
 import { HOMEPAGE_TEXT_BUTTON } from '../../TestComponents/Text/consts';
 import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON } from '../../TestComponents/TextExperimental/consts';
 import { HOMEPAGE_TOKEN_BUTTON } from '../../TestComponents/Tokens/consts';
@@ -113,6 +114,10 @@ class NavigateAppPage extends BasePage {
     this.svgPage.click();
   }
 
+  clickAndGoToSwitchPage() {
+    this.switchPage.click();
+  }
+
   clickAndGoToTextPage() {
     this.textPage.click();
   }
@@ -229,6 +234,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_SVG_BUTTON);
   }
 
+  private get switchPage() {
+    return By(HOMEPAGE_SWITCH_BUTTON);
+  }
+
   private get textPage() {
     return By(HOMEPAGE_TEXT_BUTTON);
   }

package/src/TestComponents/Badge/BadgeTest.tsx

@@ -200,7 +200,7 @@ export const BadgeTest: React.FunctionComponent = () => {
   };
 
   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';
+    'A badge is an additional visual descriptor 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/TestComponents/Switch/E2ESwitchTest.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Stack } from '@fluentui-react-native/stack';
+import { Switch } from '@fluentui-react-native/switch';
+import { Text } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import { SWITCH_TEST_COMPONENT, SWITCH_ON_PRESS } from './consts';
+
+export const E2ESwitchTest: React.FunctionComponent = () => {
+  const [switchPressed, setSwitchSwitchPressed] = React.useState(false);
+
+  const onToggle = React.useCallback(
+    (_e, checked) => {
+      setSwitchSwitchPressed(checked);
+    },
+    [setSwitchSwitchPressed],
+  );
+
+  return (
+    <Stack style={stackStyle}>
+      <Switch testID={SWITCH_TEST_COMPONENT} label={'Switch Test'} onChange={onToggle} />
+      {switchPressed ? <Text testID={SWITCH_ON_PRESS}>Switch Toggled On</Text> : null}
+    </Stack>
+  );
+};

package/src/TestComponents/Switch/Switch.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { SWITCH_TESTPAGE } from './consts';
+import { View, StyleSheet } from 'react-native';
+import { Switch } from '@fluentui-react-native/switch';
+import { E2ESwitchTest } from './E2ESwitchTest';
+import { commonTestStyles } from '../Common/styles';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+
+const styles = StyleSheet.create({
+  square: {
+    backgroundColor: 'red',
+    width: 100,
+    height: 100,
+  },
+});
+
+const StandardUsage: React.FunctionComponent = () => {
+  return (
+    <View style={commonTestStyles.settingsPicker}>
+      <Switch defaultChecked={true} label={'Default Checked True'} />
+      <Switch defaultChecked={false} label={'Default Checked False'} />
+      <Switch defaultChecked={true} label={'Disabled Default Checked True'} disabled />
+      <Switch defaultChecked={false} label={'Disabled Default Checked False'} disabled />
+    </View>
+  );
+};
+
+const OnChangeUsage: React.FunctionComponent = () => {
+  const [displaySquare, setDisplaySquare] = React.useState(true);
+
+  const defaultToggleSquare = (_e: InteractionEvent, checked: boolean) => {
+    setDisplaySquare(checked);
+  };
+
+  return (
+    <View style={commonTestStyles.settingsPicker}>
+      <Switch label={'Toggle Square'} defaultChecked={true} onChange={defaultToggleSquare} />
+      {displaySquare && <View style={styles.square} />}
+    </View>
+  );
+};
+
+const ControlSwitchValues: React.FunctionComponent = () => {
+  const [toggleSwitch, setToggleSwitch] = React.useState(true);
+
+  const toggleSwitchTrue = () => {
+    setToggleSwitch(true);
+  };
+
+  const toggleSwitchFalse = () => {
+    setToggleSwitch(false);
+  };
+
+  return (
+    <View style={commonTestStyles.settingsPicker}>
+      <Button onClick={toggleSwitchTrue}>Toggle Switch True</Button>
+      <Button onClick={toggleSwitchFalse}>Toggle Switch False</Button>
+      <Switch label={'Switch Value Being Controlled'} checked={toggleSwitch} />
+    </View>
+  );
+};
+
+const LabelPosition: React.FunctionComponent = () => {
+  return (
+    <View style={commonTestStyles.settingsPicker}>
+      <Switch defaultChecked={true} labelPosition={'before'} label={'before'} />
+      <Switch defaultChecked={true} labelPosition={'after'} label={'after'} />
+      <Switch defaultChecked={true} labelPosition={'above'} label={'above'} />
+    </View>
+  );
+};
+
+const OnOffText: React.FunctionComponent = () => {
+  return (
+    <View style={commonTestStyles.settingsPicker}>
+      <Switch defaultChecked={true} labelPosition={'before'} label={'Autosave'} onText={'On'} offText={'Off'} />
+      <Switch defaultChecked={true} labelPosition={'after'} label={'Autosave'} onText={'On'} offText={'Off'} />
+      <Switch defaultChecked={true} labelPosition={'above'} label={'Autosave'} onText={'On'} offText={'Off'} />
+    </View>
+  );
+};
+
+const toggleSections: TestSection[] = [
+  {
+    name: 'Standard Usage',
+    testID: SWITCH_TESTPAGE,
+    component: () => <StandardUsage />,
+  },
+  {
+    name: 'onChange Usage',
+    component: () => <OnChangeUsage />,
+  },
+  {
+    name: 'Control Switch Values',
+    component: () => <ControlSwitchValues />,
+  },
+  {
+    name: 'Label Position',
+    component: () => <LabelPosition />,
+  },
+  {
+    name: 'On/Off Text',
+    component: () => <OnOffText />,
+  },
+  {
+    name: 'Switch E2E Testing',
+    component: () => <E2ESwitchTest />,
+  },
+];
+
+export const SwitchTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Experimental',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Backlog',
+    macosStatus: 'Backlog',
+    androidStatus: 'Backlog',
+  };
+
+  const description = 'Switch is a control that has two mutually exclusive states.';
+
+  return <Test name="Switch Test" description={description} sections={toggleSections} status={status}></Test>;
+};

package/src/TestComponents/Switch/consts.ts

@@ -0,0 +1,8 @@
+export const HOMEPAGE_SWITCH_BUTTON = 'Homepage_Switch_Button';
+export const SWITCH_TESTPAGE = 'Switch_TestPage';
+
+/* Text Switch 1 */
+export const SWITCH_TEST_COMPONENT = 'Switch_Test_Component';
+export const SWITCH_ACCESSIBILITY_LABEL = 'E2E testing Switch accessibility label';
+
+export const SWITCH_ON_PRESS = 'Switch_On_Press';

package/src/TestComponents/Switch/index.ts

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

package/src/testPages.win32.ts

@@ -23,6 +23,7 @@ import { HOMEPAGE_TABS_BUTTON, TabsTest } from './TestComponents/Tabs';
 import { HOMEPAGE_EXPERIMENTAL_TABS_BUTTON, ExperimentalTabsTest } from './TestComponents/TabsExperimental';
 import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON, TextExperimentalTest } from './TestComponents/TextExperimental';
 import { TestDescription } from './TestComponents';
+import { SwitchTest, HOMEPAGE_SWITCH_BUTTON } from './TestComponents/Switch';
 import { HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON, ExperimentalCheckboxTest } from './TestComponents/CheckboxExperimental';
 import { ExperimentalMenuButtonTest, HOMEPAGE_EXPERIMENTAL_MENU_BUTTON } from './TestComponents/MenuButtonExperimental';
 import { ActivityIndicatorTest, HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from './TestComponents/ActivityIndicator';
@@ -131,6 +132,11 @@ export const tests: TestDescription[] = [
     component: SvgTest,
     testPage: HOMEPAGE_SVG_BUTTON,
   },
+  {
+    name: 'Switch Test',
+    component: SwitchTest,
+    testPage: HOMEPAGE_SWITCH_BUTTON,
+  },
   {
     name: 'Text Test',
     component: TextTest,