@fluentui-react-native/tester 0.82.7 → 0.82.10

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SWITCH_ON_PRESS = exports.SWITCH_TEST_COMPONENT_LABEL = exports.SWITCH_NO_A11Y_LABEL_COMPONENT = exports.SWITCH_ACCESSIBILITY_LABEL = exports.SWITCH_TEST_COMPONENT = exports.SWITCH_TESTPAGE = exports.HOMEPAGE_SWITCH_BUTTON = void 0;
+exports.HOMEPAGE_SWITCH_BUTTON = 'Homepage_Switch_Button';
+exports.SWITCH_TESTPAGE = 'Switch_TestPage';
+/* Test Switch 1 */
+exports.SWITCH_TEST_COMPONENT = 'Switch_Test_Component'; // A component on each specific test page
+exports.SWITCH_ACCESSIBILITY_LABEL = 'E2E testing Switch accessibility label';
+/* Test Switch 2 */
+exports.SWITCH_NO_A11Y_LABEL_COMPONENT = 'Switch_No_A11y_label_Component'; // A component on each specific test page
+exports.SWITCH_TEST_COMPONENT_LABEL = 'Test Switch2 - No Accessibility Label';
+exports.SWITCH_ON_PRESS = 'Switch_On_Press'; // For testing the press functionality on a Switch
+//# sourceMappingURL=consts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","sourceRoot":"","sources":["../../../src/TestComponents/Switch/consts.ts"],"names":[],"mappings":";;;AAAa,QAAA,sBAAsB,GAAG,wBAAwB,CAAC;AAClD,QAAA,eAAe,GAAG,iBAAiB,CAAC;AAEjD,mBAAmB;AACN,QAAA,qBAAqB,GAAG,uBAAuB,CAAC,CAAC,yCAAyC;AAC1F,QAAA,0BAA0B,GAAG,wCAAwC,CAAC;AAEnF,mBAAmB;AACN,QAAA,8BAA8B,GAAG,gCAAgC,CAAC,CAAC,yCAAyC;AAC5G,QAAA,2BAA2B,GAAG,uCAAuC,CAAC;AAEtE,QAAA,eAAe,GAAG,iBAAiB,CAAC,CAAC,kDAAkD"}

package/lib-commonjs/TestComponents/Switch/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Switch';
+export * from './consts';
+//# sourceMappingURL=index.d.ts.map

package/lib-commonjs/TestComponents/Switch/index.d.ts.map

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

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":"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"}
+{"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.7",
+  "version": "0.82.10",
   "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.30",
-    "@fluentui-react-native/badge": ">=0.1.15 <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.3.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,99 @@
+import {
+  SWITCH_TESTPAGE,
+  SWITCH_TEST_COMPONENT,
+  SWITCH_NO_A11Y_LABEL_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
+  SecondaryComponent, // this._secondaryComponent
+}
+
+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;
+    } else if (switchSelector === SwitchComponentSelector.SecondaryComponent) {
+      return this._secondaryComponent;
+    }
+    return this._primaryComponent;
+  }
+
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(SWITCH_TESTPAGE);
+  }
+
+  get _pageName() {
+    return SWITCH_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(SWITCH_TEST_COMPONENT);
+  }
+
+  get _secondaryComponent() {
+    return By(SWITCH_NO_A11Y_LABEL_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_SWITCH_BUTTON);
+  }
+}
+
+export default new SwitchPageObject();

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

@@ -0,0 +1,120 @@
+import NavigateAppPage from '../../common/NavigateAppPage.win';
+import SwitchPageObject from '../pages/SwitchPageObject';
+import { SwitchComponentSelector } from '../pages/SwitchPageObject';
+import { ComponentSelector } from '../../common/BasePage.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, BUTTON_A11Y_ROLE, Keys } from '../../common/consts';
+import { SWITCH_TEST_COMPONENT_LABEL, SWITCH_ACCESSIBILITY_LABEL } from '../../../TestComponents/Switch/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);
+  });
+
+  it('Switch - Set accessibilityLabel', () => {
+    expect(SwitchPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(SWITCH_ACCESSIBILITY_LABEL);
+    expect(SwitchPageObject.didAssertPopup()).toBeFalsy(SwitchPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('Switch - Do not set accessibilityLabel -> Default to Switch label', () => {
+    expect(SwitchPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(SWITCH_TEST_COMPONENT_LABEL);
+    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/Switch/E2ESwitchTest.tsx

@@ -0,0 +1,31 @@
+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_ACCESSIBILITY_LABEL,
+  SWITCH_NO_A11Y_LABEL_COMPONENT,
+  SWITCH_TEST_COMPONENT_LABEL,
+  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} accessibilityLabel={SWITCH_ACCESSIBILITY_LABEL} />
+      {switchPressed ? <Text testID={SWITCH_ON_PRESS}>Switch Toggled On</Text> : null}
+      <Switch label={SWITCH_TEST_COMPONENT_LABEL} testID={SWITCH_NO_A11Y_LABEL_COMPONENT} />
+    </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,12 @@
+export const HOMEPAGE_SWITCH_BUTTON = 'Homepage_Switch_Button';
+export const SWITCH_TESTPAGE = 'Switch_TestPage';
+
+/* Test Switch 1 */
+export const SWITCH_TEST_COMPONENT = 'Switch_Test_Component'; // A component on each specific test page
+export const SWITCH_ACCESSIBILITY_LABEL = 'E2E testing Switch accessibility label';
+
+/* Test Switch 2 */
+export const SWITCH_NO_A11Y_LABEL_COMPONENT = 'Switch_No_A11y_label_Component'; // A component on each specific test page
+export const SWITCH_TEST_COMPONENT_LABEL = 'Test Switch2 - No Accessibility Label';
+
+export const SWITCH_ON_PRESS = 'Switch_On_Press'; // For testing the press functionality on a Switch

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,