From b4a70ab100849a9d517da0dc3eb859d02c7e1e97 Mon Sep 17 00:00:00 2001 From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com> Date: Mon, 27 Jan 2025 16:45:05 -0800 Subject: [PATCH] [Fabric] Add Functional Tests for Switch Component (#14297) * Add Functional Tests for Switch * Fix Tests * Update Snapshots --- .../test/SwitchComponentTest.test.ts | 37 +++++++++ .../SwitchComponentTest.test.ts.snap | 75 +++++++++++++++++++ 2 files changed, 112 insertions(+) diff --git a/packages/e2e-test-app-fabric/test/SwitchComponentTest.test.ts b/packages/e2e-test-app-fabric/test/SwitchComponentTest.test.ts index fa832493aef..3f40bae68db 100644 --- 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 index a5449d51591..7fc9c24b89c 100644 --- 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": {