From f69555f15643eadd37469db879ba2cb681184299 Mon Sep 17 00:00:00 2001 From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com> Date: Mon, 18 Mar 2024 09:27:15 -0700 Subject: [PATCH 1/4] Migracy Legacy Tests --- .../test/LegacyControlStyleTest.test.ts | 46 ++ .../test/LegacyImageTest.test.ts | 59 +++ .../test/LegacySelectableTextTest.test.ts | 74 +++ .../test/LegacyTextHitTestTest.test.ts | 144 ++++++ .../LegacyControlStyleTest.test.ts.snap | 61 +++ .../LegacyImageTest.test.ts.snap | 447 ++++++++++++++++++ .../LegacySelectableTextTest.test.ts.snap | 113 +++++ .../LegacyTextHitTestTest.test.ts.snap | 421 +++++++++++++++++ 8 files changed, 1365 insertions(+) create mode 100644 packages/e2e-test-app-fabric/test/LegacyControlStyleTest.test.ts create mode 100644 packages/e2e-test-app-fabric/test/LegacyImageTest.test.ts create mode 100644 packages/e2e-test-app-fabric/test/LegacySelectableTextTest.test.ts create mode 100644 packages/e2e-test-app-fabric/test/LegacyTextHitTestTest.test.ts create mode 100644 packages/e2e-test-app-fabric/test/__snapshots__/LegacyControlStyleTest.test.ts.snap create mode 100644 packages/e2e-test-app-fabric/test/__snapshots__/LegacyImageTest.test.ts.snap create mode 100644 packages/e2e-test-app-fabric/test/__snapshots__/LegacySelectableTextTest.test.ts.snap create mode 100644 packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextHitTestTest.test.ts.snap diff --git a/packages/e2e-test-app-fabric/test/LegacyControlStyleTest.test.ts b/packages/e2e-test-app-fabric/test/LegacyControlStyleTest.test.ts new file mode 100644 index 00000000000..cae052afd62 --- /dev/null +++ b/packages/e2e-test-app-fabric/test/LegacyControlStyleTest.test.ts @@ -0,0 +1,46 @@ +/** + * Copyright (c) Microsoft Corporation. + * Licensed under the MIT License. + * + * @format + */ + +import {app} from '@react-native-windows/automation'; +import {dumpVisualTree} from '@react-native-windows/automation-commands'; +import {goToComponentExample} from './RNTesterNavigation'; +import {verifyNoErrorLogs} from './Helpers'; + +beforeAll(async () => { + await goToComponentExample('LegacyControlStyleTest'); +}); + +afterEach(async () => { + await verifyNoErrorLogs(); +}); + +describe('LegacyControlStyleTest', () => { + /* Test case #1: Controls style with regular border */ + test('ControlStyleTestWithRegularBorder', async () => { + const dump = await dumpVisualTree('control-style-switch-view'); + expect(dump).toMatchSnapshot(); + }); + + /* Test case #2: Click button once, update controls style and round border*/ + test('ControlStyleTestWithRoundBorder', async () => { + await toggleControlBorder(); + const dump = await dumpVisualTree('control-style-switch-view'); + expect(dump).toMatchSnapshot(); + }); + + /* Test case #3: Click button one more, return to #1*/ + test('ControlStyleTestWithRegularBorder #2', async () => { + await toggleControlBorder(); + const dump = await dumpVisualTree('control-style-switch-view'); + expect(dump).toMatchSnapshot(); + }); +}); + +async function toggleControlBorder() { + const showBorderToggle = await app.findElementByTestID('show-border-toggle'); + await showBorderToggle.click(); +} diff --git a/packages/e2e-test-app-fabric/test/LegacyImageTest.test.ts b/packages/e2e-test-app-fabric/test/LegacyImageTest.test.ts new file mode 100644 index 00000000000..04abef25374 --- /dev/null +++ b/packages/e2e-test-app-fabric/test/LegacyImageTest.test.ts @@ -0,0 +1,59 @@ +/** + * Copyright (c) Microsoft Corporation. + * Licensed under the MIT License. + * + * @format + */ + +import {app} from '@react-native-windows/automation'; +import {dumpVisualTree} from '@react-native-windows/automation-commands'; +import {goToComponentExample} from './RNTesterNavigation'; +import {verifyNoErrorLogs} from './Helpers'; + +beforeAll(async () => { + await goToComponentExample('LegacyImageTest'); +}); + +afterEach(async () => { + await verifyNoErrorLogs(); +}); + +describe('LegacyImageTest', () => { + /* Test case #1: view and image displayed with no border and cornerRadius */ + test('ImageWithoutBorderTest', async () => { + const dump = await dumpVisualTree('image-container'); + expect(dump).toMatchSnapshot(); + }); + + /* Test case #2: Click button once, update view and image with round border*/ + test('ImageWithBorderTest', async () => { + await toggleImageBorder(); + const dump = await dumpVisualTree('image-container'); + expect(dump).toMatchSnapshot(); + }); + + /* Test case #3: Click button one more, remove border from view and image but tree structure is different from #1*/ + test('ImageWithoutBorderTestOneMoreClick', async () => { + await toggleImageBorder(); + const dump = await dumpVisualTree('image-container'); + expect(dump).toMatchSnapshot(); + }); + + test('ImageRTLTest', async () => { + await toggleRTLMode(); + const dump = await dumpVisualTree('image-container'); + expect(dump).toMatchSnapshot(); + }); +}); + +async function toggleImageBorder() { + const imageBorderToggle = await app.findElementByTestID( + 'toggle-border-button', + ); + await imageBorderToggle.click(); +} + +async function toggleRTLMode() { + const rtlToggleButton = await app.findElementByTestID('set-rtl-button'); + await rtlToggleButton.click(); +} diff --git a/packages/e2e-test-app-fabric/test/LegacySelectableTextTest.test.ts b/packages/e2e-test-app-fabric/test/LegacySelectableTextTest.test.ts new file mode 100644 index 00000000000..6099271e136 --- /dev/null +++ b/packages/e2e-test-app-fabric/test/LegacySelectableTextTest.test.ts @@ -0,0 +1,74 @@ +/** + * Copyright (c) Microsoft Corporation. + * Licensed under the MIT License. + * + * @format + */ + +import {app} from '@react-native-windows/automation'; +import {dumpVisualTree} from '@react-native-windows/automation-commands'; +import {goToComponentExample} from './RNTesterNavigation'; +import {verifyNoErrorLogs} from './Helpers'; + +beforeAll(async () => { + await goToComponentExample('LegacySelectableTextTest'); +}); + +afterEach(async () => { + await verifyNoErrorLogs(); +}); + +describe('LegacySelectableTextTest', () => { + beforeEach(async () => { + await clearState(); + }); + + test('PressableWhenNotSelectable', async () => { + const textExample = await app.findElementByTestID('text-example'); + await textExample.click(); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); + + test('DoubleClickWhenNotSelectable', async () => { + const textExample = await app.findElementByTestID('text-example'); + await textExample.doubleClick(); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); + + test('PressableWhenSelectable', async () => { + await toggleSelectable(); + const textExample = await app.findElementByTestID('text-example'); + await textExample.click(); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); + + test('DoubleClickWhenSelectable', async () => { + await toggleSelectable(); + const textExample = await app.findElementByTestID('text-example'); + await textExample.doubleClick(); + const dump = await dumpVisualTree('pressed-state'); + if (dump.Text === 'Pressed: 2 times.') { + // Due to the hardcoded speed between clicks in WinAppDriver, this test + // can be flaky on Windows Server 2022. Detect and warn here rather than + // disabling the entire test. + console.warn('DoubleClickWhenSelectable registered two clicks.'); + dump.Text = 'Pressed: 1 times.'; + } + expect(dump).toMatchSnapshot(); + }); +}); + +async function clearState() { + const clearButton = await app.findElementByTestID('clear-state-button'); + await clearButton.click(); +} + +async function toggleSelectable() { + const toggleButton = await app.findElementByTestID( + 'toggle-selectable-button', + ); + await toggleButton.click(); +} diff --git a/packages/e2e-test-app-fabric/test/LegacyTextHitTestTest.test.ts b/packages/e2e-test-app-fabric/test/LegacyTextHitTestTest.test.ts new file mode 100644 index 00000000000..60016396c0f --- /dev/null +++ b/packages/e2e-test-app-fabric/test/LegacyTextHitTestTest.test.ts @@ -0,0 +1,144 @@ +/** + * Copyright (c) Microsoft Corporation. + * Licensed under the MIT License. + * + * @format + */ + +import {app} from '@react-native-windows/automation'; +import {dumpVisualTree} from '@react-native-windows/automation-commands'; +import {goToComponentExample} from './RNTesterNavigation'; +import {verifyNoErrorLogs} from './Helpers'; + +beforeAll(async () => { + await goToComponentExample('LegacyTextHitTestTest'); +}); + +afterEach(async () => { + await verifyNoErrorLogs(); +}); + +describe('LegacyTextHitTestTest', () => { + beforeEach(async () => { + await clearState(); + }); + + test('VirtualTextPressable', async () => { + await clickAt('virtual-text', {pctX: 0.85}); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); + + test('TextPressableWithVirtualText', async () => { + await clickAt('nested-text', {pctX: 0.9}); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); + + test('MultilineTextPressable', async () => { + await clickAt('multiline-text', {pctX: 0.15, pctY: 0.75}); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); + + test('MultilineRTLTextPressable', async () => { + await clickAt('multiline-rtl-text', {pctX: 0.85, pctY: 0.25}); + await clickAt('multiline-rtl-text', {pctX: 0.1, pctY: 0.75}); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); + + test('RTLTextPressable', async () => { + await clickAt('rtl-text', {pctX: 0.85}); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); + + test('RTLTextInRTLFlowPressable', async () => { + await clickAt('rtl-rtl-flow-text', {pctX: 0.8}); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); + + test('LTRTextInRTLFlowPressable', async () => { + await clickAt('ltr-rtl-flow-text', {pctX: 0.9}); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); + + test('BidirectionalTextPressable', async () => { + await clickAt('bidirectional-text', {pctX: 0.8}); + await clickAt('bidirectional-text', {pctX: 0.95}); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); + + test('BidirectionalTextSeparateRunsPressable', async () => { + await clickAt('separate-bidirectional-text', {pctX: 0.8}); + await clickAt('separate-bidirectional-text', {pctX: 0.95}); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); + + test('BidirectionalTextSeparateRunsEdgeCasePressable', async () => { + await clickAt('separate-bidirectional-text', {pctX: 0.62}); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); + + test('InsertedVirtualTextPressable', async () => { + await clickAt('inserted-text', {pctX: 0.85}); + await clickAt('inserted-text', {pctX: 0.9}); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); + + test('ToggleVirtualTextPressable', async () => { + await clickAt('toggled-text', {pctX: 0.9}); + await clickAt('toggled-text', {pctX: 0.9}); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); + + test('WrappedLTRInRTLFlowEdgeCaseNotPressable', async () => { + await clickAt('wrapped-ltr-rtl-flow-text', {pctX: 0.85, pctY: 0.25}); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); + + test('MultilineRTLTextEdgeCaseNotPressable', async () => { + await clickAt('multiline-rtl-text', {pctX: 0.765, pctY: 0.25}); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); + + test('BidirectionalTextPressableEdgeCaseNotPressable', async () => { + await clickAt('bidirectional-text', {pctX: 0.61}); + const dump = await dumpVisualTree('pressed-state'); + expect(dump).toMatchSnapshot(); + }); +}); + +async function clearState() { + const clearButton = await app.findElementByTestID('clear-state-button'); + await clearButton.click(); +} + +async function clickAt( + name: string, + {pctX, pctY = 0.5}: {pctX: number; pctY?: number}, +) { + const target = await app.findElementByTestID(name); + const {width, height} = await target.getSize(); + + // The webdriverio package computes the offsets from the center point of the + // target. Additionally, the package uses raw pixels. To make this test more + // robust to different screen resolutions and scale settings, the test cases + // are declared using relatively percentages for where in the hit target to + // click, and subtracts the center point so the declared offsets are absolute + // relative to the origin of the target (i.e., top-left corner). + await target.click({ + x: Math.round(pctX * width - width / 2), + y: Math.round(pctY * height - height / 2), + }); +} diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyControlStyleTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyControlStyleTest.test.ts.snap new file mode 100644 index 00000000000..fd5921cd23d --- /dev/null +++ b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyControlStyleTest.test.ts.snap @@ -0,0 +1,61 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LegacyControlStyleTest ControlStyleTestWithRegularBorder #2 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": { + "Comment": "control-style-switch-view", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 984, + 180, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyControlStyleTest ControlStyleTestWithRegularBorder 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": { + "Comment": "control-style-switch-view", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 984, + 180, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyControlStyleTest ControlStyleTestWithRoundBorder 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": { + "Comment": "control-style-switch-view", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 984, + 180, + ], + "Visual Type": "SpriteVisual", + }, +} +`; diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyImageTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyImageTest.test.ts.snap new file mode 100644 index 00000000000..92588202e12 --- /dev/null +++ b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyImageTest.test.ts.snap @@ -0,0 +1,447 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LegacyImageTest ImageRTLTest 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 0, 255)", + }, + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 20, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 460, + 10, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -20, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -10, + 20, + 0, + ], + "Opacity": 1, + "Size": [ + 10, + 260, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -20, + -20, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 20, + -10, + 0, + ], + "Opacity": 1, + "Size": [ + 460, + 10, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + -20, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 20, + 0, + ], + "Opacity": 1, + "Size": [ + 10, + 260, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "image-container", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 500, + 300, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyImageTest ImageWithBorderTest 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 0, 255)", + }, + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 255, 0, 85)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 255, 0, 85)", + }, + "Offset": [ + 20, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 460, + 10, + ], + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 255, 0, 85)", + }, + "Offset": [ + -20, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 255, 0, 85)", + }, + "Offset": [ + -10, + 20, + 0, + ], + "Opacity": 1, + "Size": [ + 10, + 260, + ], + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 255, 0, 85)", + }, + "Offset": [ + -20, + -20, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 255, 0, 85)", + }, + "Offset": [ + 20, + -10, + 0, + ], + "Opacity": 1, + "Size": [ + 460, + 10, + ], + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 255, 0, 85)", + }, + "Offset": [ + 0, + -20, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 255, 0, 85)", + }, + "Offset": [ + 0, + 20, + 0, + ], + "Opacity": 1, + "Size": [ + 10, + 260, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "image-container", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 500, + 300, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyImageTest ImageWithoutBorderTest 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 0, 255)", + }, + "Comment": "image-container", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 500, + 300, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyImageTest ImageWithoutBorderTestOneMoreClick 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 0, 255)", + }, + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 20, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 460, + 10, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -20, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -10, + 20, + 0, + ], + "Opacity": 1, + "Size": [ + 10, + 260, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -20, + -20, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 20, + -10, + 0, + ], + "Opacity": 1, + "Size": [ + 460, + 10, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + -20, + 0, + ], + "Opacity": 1, + "Size": [ + 20, + 20, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 20, + 0, + ], + "Opacity": 1, + "Size": [ + 10, + 260, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "image-container", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 500, + 300, + ], + "Visual Type": "SpriteVisual", + }, +} +`; diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/LegacySelectableTextTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/LegacySelectableTextTest.test.ts.snap new file mode 100644 index 00000000000..81f2a155556 --- /dev/null +++ b/packages/e2e-test-app-fabric/test/__snapshots__/LegacySelectableTextTest.test.ts.snap @@ -0,0 +1,113 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LegacySelectableTextTest DoubleClickWhenNotSelectable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 2 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacySelectableTextTest DoubleClickWhenSelectable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 2 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacySelectableTextTest PressableWhenNotSelectable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 1 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacySelectableTextTest PressableWhenSelectable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 1 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextHitTestTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextHitTestTest.test.ts.snap new file mode 100644 index 00000000000..271e71282d5 --- /dev/null +++ b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextHitTestTest.test.ts.snap @@ -0,0 +1,421 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LegacyTextHitTestTest BidirectionalTextPressable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 2 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyTextHitTestTest BidirectionalTextPressableEdgeCaseNotPressable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 1 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyTextHitTestTest BidirectionalTextSeparateRunsEdgeCasePressable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 1 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyTextHitTestTest BidirectionalTextSeparateRunsPressable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 2 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyTextHitTestTest InsertedVirtualTextPressable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 1 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyTextHitTestTest LTRTextInRTLFlowPressable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 1 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyTextHitTestTest MultilineRTLTextEdgeCaseNotPressable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 1 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyTextHitTestTest MultilineRTLTextPressable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 2 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyTextHitTestTest MultilineTextPressable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 1 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyTextHitTestTest RTLTextInRTLFlowPressable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 1 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyTextHitTestTest RTLTextPressable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 1 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyTextHitTestTest TextPressableWithVirtualText 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 1 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyTextHitTestTest ToggleVirtualTextPressable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 1 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyTextHitTestTest VirtualTextPressable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 1 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`LegacyTextHitTestTest WrappedLTRInRTLFlowEdgeCaseNotPressable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "pressed-state", + "ControlType": 50020, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": false, + "LocalizedControlType": "text", + "Name": "Pressed: 1 times.", + }, + "Visual Tree": { + "Comment": "pressed-state", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 103, + 20, + ], + "Visual Type": "SpriteVisual", + }, +} +`; From b5603084ee8c78e44a9248fe7aa51c991b072853 Mon Sep 17 00:00:00 2001 From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com> Date: Mon, 18 Mar 2024 13:55:55 -0700 Subject: [PATCH 2/4] Add Screen Pos and Size --- packages/e2e-test-app-fabric/test/LegacyImageTest.test.ts | 3 +++ .../e2e-test-app-fabric/test/LegacySelectableTextTest.test.ts | 3 +++ .../e2e-test-app-fabric/test/LegacyTextHitTestTest.test.ts | 3 +++ 3 files changed, 9 insertions(+) diff --git a/packages/e2e-test-app-fabric/test/LegacyImageTest.test.ts b/packages/e2e-test-app-fabric/test/LegacyImageTest.test.ts index 04abef25374..fea940013ab 100644 --- a/packages/e2e-test-app-fabric/test/LegacyImageTest.test.ts +++ b/packages/e2e-test-app-fabric/test/LegacyImageTest.test.ts @@ -11,6 +11,9 @@ import {goToComponentExample} from './RNTesterNavigation'; import {verifyNoErrorLogs} from './Helpers'; beforeAll(async () => { + // If window is partially offscreen, tests will fail to click on certain elements + await app.setWindowPosition(0, 0); + await app.setWindowSize(1000, 1250); await goToComponentExample('LegacyImageTest'); }); diff --git a/packages/e2e-test-app-fabric/test/LegacySelectableTextTest.test.ts b/packages/e2e-test-app-fabric/test/LegacySelectableTextTest.test.ts index 6099271e136..7d9cc4fdb27 100644 --- a/packages/e2e-test-app-fabric/test/LegacySelectableTextTest.test.ts +++ b/packages/e2e-test-app-fabric/test/LegacySelectableTextTest.test.ts @@ -11,6 +11,9 @@ import {goToComponentExample} from './RNTesterNavigation'; import {verifyNoErrorLogs} from './Helpers'; beforeAll(async () => { + // If window is partially offscreen, tests will fail to click on certain elements + await app.setWindowPosition(0, 0); + await app.setWindowSize(1000, 1250); await goToComponentExample('LegacySelectableTextTest'); }); diff --git a/packages/e2e-test-app-fabric/test/LegacyTextHitTestTest.test.ts b/packages/e2e-test-app-fabric/test/LegacyTextHitTestTest.test.ts index 60016396c0f..dd2822e34fb 100644 --- a/packages/e2e-test-app-fabric/test/LegacyTextHitTestTest.test.ts +++ b/packages/e2e-test-app-fabric/test/LegacyTextHitTestTest.test.ts @@ -11,6 +11,9 @@ import {goToComponentExample} from './RNTesterNavigation'; import {verifyNoErrorLogs} from './Helpers'; beforeAll(async () => { + // If window is partially offscreen, tests will fail to click on certain elements + await app.setWindowPosition(0, 0); + await app.setWindowSize(1000, 1250); await goToComponentExample('LegacyTextHitTestTest'); }); From 4342b7b0953a97740eb239226c8c6b31f27ed316 Mon Sep 17 00:00:00 2001 From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com> Date: Mon, 18 Mar 2024 13:56:41 -0700 Subject: [PATCH 3/4] Add Screen Pos and Size --- .../e2e-test-app-fabric/test/LegacyControlStyleTest.test.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/e2e-test-app-fabric/test/LegacyControlStyleTest.test.ts b/packages/e2e-test-app-fabric/test/LegacyControlStyleTest.test.ts index cae052afd62..cb4e5f817f3 100644 --- a/packages/e2e-test-app-fabric/test/LegacyControlStyleTest.test.ts +++ b/packages/e2e-test-app-fabric/test/LegacyControlStyleTest.test.ts @@ -11,6 +11,9 @@ import {goToComponentExample} from './RNTesterNavigation'; import {verifyNoErrorLogs} from './Helpers'; beforeAll(async () => { + // If window is partially offscreen, tests will fail to click on certain elements + await app.setWindowPosition(0, 0); + await app.setWindowSize(1000, 1250); await goToComponentExample('LegacyControlStyleTest'); }); From 9180f381b3d72eefbb4c2631eeddc8abd204990c Mon Sep 17 00:00:00 2001 From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com> Date: Tue, 19 Mar 2024 10:34:56 -0700 Subject: [PATCH 4/4] Adjust Snapshots --- .../test/__snapshots__/LegacyControlStyleTest.test.ts.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyControlStyleTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyControlStyleTest.test.ts.snap index fd5921cd23d..0f6329291d4 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyControlStyleTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyControlStyleTest.test.ts.snap @@ -12,7 +12,7 @@ exports[`LegacyControlStyleTest ControlStyleTestWithRegularBorder #2 1`] = ` ], "Opacity": 1, "Size": [ - 984, + 998, 180, ], "Visual Type": "SpriteVisual", @@ -32,7 +32,7 @@ exports[`LegacyControlStyleTest ControlStyleTestWithRegularBorder 1`] = ` ], "Opacity": 1, "Size": [ - 984, + 998, 180, ], "Visual Type": "SpriteVisual", @@ -52,7 +52,7 @@ exports[`LegacyControlStyleTest ControlStyleTestWithRoundBorder 1`] = ` ], "Opacity": 1, "Size": [ - 984, + 998, 180, ], "Visual Type": "SpriteVisual",