[Fabric] Add Functional Tests for Switch Component (#14297)

* Add Functional Tests for Switch * Fix Tests * Update Snapshots
microsoft · Jan 28, 2025 · b4a70ab · b4a70ab
1 parent 9f239d5
commit b4a70ab
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 0 deletions.
diff --git a/packages/e2e-test-app-fabric/test/SwitchComponentTest.test.ts b/packages/e2e-test-app-fabric/test/SwitchComponentTest.test.ts
@@ -10,6 +10,21 @@ import {goToComponentExample} from './RNTesterNavigation';
 import {verifyNoErrorLogs} from './Helpers';
 import {app} from '@react-native-windows/automation';
 
+const searchBox = async (input: string) => {
+  const searchBox = await app.findElementByTestID('example_search');
+  await app.waitUntil(
+    async () => {
+      await searchBox.setValue(input);
+      return (await searchBox.getText()) === input;
+    },
+    {
+      interval: 1500,
+      timeout: 5000,
+      timeoutMsg: `Unable to enter correct search text into test searchbox.`,
+    },
+  );
+};
+
 beforeAll(async () => {
   // If window is partially offscreen, tests will fail to click on certain elements
   await app.setWindowPosition(0, 0);
@@ -23,59 +38,81 @@ afterEach(async () => {
 
 describe('SwitchTests', () => {
   test('Switches can be set to true/false, initial false', async () => {
+    await searchBox('tru');
+    const component = await app.findElementByTestID('on-off-initial-off');
+    await component.waitForDisplayed({timeout: 5000});
     const dump = await dumpVisualTree('on-off-initial-off');
     expect(dump).toMatchSnapshot();
+    await component.click();
+    const dump2 = await dumpVisualTree('on-off-initial-off');
+    expect(dump2).toMatchSnapshot();
   });
 
   test('Switches can be set to true/false, initial true', async () => {
+    await searchBox('tru');
     const dump = await dumpVisualTree('on-off-initial-on');
     expect(dump).toMatchSnapshot();
   });
 
   test('Switches can be disabled, initial false', async () => {
+    await searchBox('dis');
+    const component = await app.findElementByTestID('disabled-initial-off');
+    await component.waitForDisplayed({timeout: 5000});
     const dump = await dumpVisualTree('disabled-initial-off');
     expect(dump).toMatchSnapshot();
+    await component.click();
+    const dump2 = await dumpVisualTree('disabled-initial-off');
+    expect(dump2).toMatchSnapshot();
   });
 
   test('Switches can be disabled, initial true', async () => {
+    await searchBox('dis');
     const dump = await dumpVisualTree('disabled-initial-on');
     expect(dump).toMatchSnapshot();
   });
 
   test('Custom colors can be provided, initial false', async () => {
+    await searchBox('cus');
     const dump = await dumpVisualTree('initial-false-switch');
     expect(dump).toMatchSnapshot();
   });
 
   test('Custom colors can be provided, initial true', async () => {
+    await searchBox('cus');
     const dump = await dumpVisualTree('initial-true-switch');
     expect(dump).toMatchSnapshot();
   });
 
   test('Change events can be detected, event top', async () => {
+    await searchBox('cha');
     const dump = await dumpVisualTree('event-switch-top');
     expect(dump).toMatchSnapshot();
   });
 
   test('Change events can be detected, event bottom', async () => {
+    await searchBox('cha');
     const dump = await dumpVisualTree('event-switch-bottom');
     expect(dump).toMatchSnapshot();
   });
 
   test('Change events can be detected, event regression top', async () => {
+    await searchBox('cha');
     const dump = await dumpVisualTree('event-switch-regression-top');
     expect(dump).toMatchSnapshot();
   });
 
   test('Change events can be detected, events regression bottom', async () => {
+    await searchBox('cha');
     const dump = await dumpVisualTree('event-switch-regression-bottom');
     expect(dump).toMatchSnapshot();
   });
   test('Controlled switch', async () => {
+    await searchBox('con');
     const dump = await dumpVisualTree('controlled-switch');
     expect(dump).toMatchSnapshot();
   });
   test('Switches can have customized accessibility', async () => {
+    await searchBox('acc');
     const dump = await dumpVisualTree('accessibility-switch');
     expect(dump).toMatchSnapshot();
   });

diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/SwitchComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/SwitchComponentTest.test.ts.snap
@@ -299,6 +299,43 @@ exports[`SwitchTests Switches can be disabled, initial false 1`] = `
 }
 `;
 
+exports[`SwitchTests Switches can be disabled, initial false 2`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "disabled-initial-off",
+    "ControlType": 50000,
+    "IsKeyboardFocusable": true,
+    "LocalizedControlType": "button",
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.SwitchComponentView",
+    "_Props": {
+      "TestId": "disabled-initial-off",
+    },
+  },
+  "Visual Tree": {
+    "Comment": "disabled-initial-off",
+    "Offset": "0, 0, 0",
+    "Size": "51, 31",
+    "Visual Type": "SpriteVisual",
+    "__Children": [
+      {
+        "Offset": "5.5, 5.5, 0",
+        "Size": "40, 20",
+        "Visual Type": "Visual",
+        "__Children": [
+          {
+            "Offset": "4, 4, 0",
+            "Size": "12, 12",
+            "Visual Type": "Visual",
+          },
+        ],
+      },
+    ],
+  },
+}
+`;
+
 exports[`SwitchTests Switches can be disabled, initial true 1`] = `
 {
   "Automation Tree": {
@@ -374,6 +411,44 @@ exports[`SwitchTests Switches can be set to true/false, initial false 1`] = `
 }
 `;
 
+exports[`SwitchTests Switches can be set to true/false, initial false 2`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "on-off-initial-off",
+    "ControlType": 50000,
+    "IsKeyboardFocusable": true,
+    "LocalizedControlType": "button",
+    "TogglePattern.ToggleState": "On",
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.SwitchComponentView",
+    "_Props": {
+      "TestId": "on-off-initial-off",
+    },
+  },
+  "Visual Tree": {
+    "Comment": "on-off-initial-off",
+    "Offset": "0, 0, 0",
+    "Size": "51, 31",
+    "Visual Type": "SpriteVisual",
+    "__Children": [
+      {
+        "Offset": "5.5, 5.5, 0",
+        "Size": "40, 20",
+        "Visual Type": "Visual",
+        "__Children": [
+          {
+            "Offset": "22, 3, 0",
+            "Size": "14, 14",
+            "Visual Type": "Visual",
+          },
+        ],
+      },
+    ],
+  },
+}
+`;
+
 exports[`SwitchTests Switches can be set to true/false, initial true 1`] = `
 {
   "Automation Tree": {