diff --git a/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js index bd25a7d3278..09007b88afe 100644 --- a/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js +++ b/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js @@ -35,7 +35,10 @@ class ToggleDefaultPaddingExample extends React.Component< render(): React.Node { return ( - + this.setState({hasPadding: !this.state.hasPadding})}> Toggle padding @@ -122,6 +125,7 @@ class AutogrowingTextInputExample extends React.Component<{...}> { this.setState({contentSize: event.nativeEvent.contentSize}) } {...props} + testID="textinput-autogrow" /> Plain text value representation: {/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was @@ -154,6 +158,7 @@ class PressInOutEvents extends React.Component< this.setState({text: 'Holding down the click/touch'}) } onPressOut={() => this.setState({text: 'Released click/touch'})} + testID="textinput-press" /> ); @@ -197,6 +202,7 @@ function PropagationSample() { {code: 'KeyW', handledEventPhase: 3}, {code: 'KeyE', handledEventPhase: 1}, ]} + testID="textinput-propagation" /> @@ -225,6 +231,7 @@ function SpellCheckSample() { placeholder="Type text to test spell check functionality." style={[styles.singleLineWithHeightTextInput]} spellCheck={spellCheckEnabled} + testID="textinput-spellcheck" /> ); @@ -260,35 +267,42 @@ const examples: Array = [ + ]} + testID="textinput-custom-background-color"> Darker backgroundColor @@ -297,6 +311,7 @@ const examples: Array = [ defaultValue="Highlight Color is red" selectionColor={'red'} style={styles.singleLine} + testID="textinput-custom-highlight-color" /> ); @@ -310,6 +325,7 @@ const examples: Array = [ {[ 'normal', @@ -328,6 +344,7 @@ const examples: Array = [ defaultValue={`Font Weight (${fontWeight})`} key={fontWeight} style={[styles.singleLine, {fontWeight}]} + testID={'textinput-weight-' + fontWeight} /> ))} @@ -341,6 +358,7 @@ const examples: Array = [ ); }, @@ -353,18 +371,22 @@ const examples: Array = [ ); @@ -379,12 +401,14 @@ const examples: Array = [ defaultValue="iloveturtles" secureTextEntry={true} style={styles.singleLine} + testID="textinput-password" /> ); @@ -398,6 +422,7 @@ const examples: Array = [ defaultValue="Can't touch this! (>'-')> ^(' - ')^ <('-'<) (>'-')> ^(' - ')^" editable={false} style={styles.singleLine} + testID="textinput-not-editable" /> ); }, @@ -416,6 +441,7 @@ const examples: Array = [ styles.multiline, {textAlign: 'left', textAlignVertical: 'top'}, ]} + testID="textinput-multiline-topleft" /> = [ styles.multiline, {textAlign: 'center', textAlignVertical: 'center'}, ]} + testID="textinput-multiline-center" /> = [ styles.multiline, {color: 'blue'}, {textAlign: 'right', textAlignVertical: 'bottom'}, - ]}> + ]} + testID="textinput-multiline-bottomright"> multiline with children, aligned bottom-right @@ -452,21 +480,25 @@ const examples: Array = [ placeholder="editable text input using editable prop" style={styles.default} editable + testID="textinput-editable" /> ); @@ -535,21 +567,25 @@ const examples: Array = [ autoComplete="country" placeholder="country" style={styles.default} + testID="textinput-autocomplete-country" /> ); @@ -575,6 +611,7 @@ const examples: Array = [ returnKeyType={type} placeholder={'returnKeyType: ' + type} style={styles.singleLine} + testID={'textinput-return-' + type} /> ); }); @@ -585,6 +622,7 @@ const examples: Array = [ returnKeyLabel={type} placeholder={'returnKeyLabel: ' + type} style={styles.singleLine} + testID={'textinput-return-' + type} /> ); }); @@ -605,16 +643,19 @@ const examples: Array = [ inlineImageLeft="ic_menu_black_24dp" placeholder="This has drawableLeft set" style={styles.singleLine} + testID="textinput-inline-images" /> ); @@ -639,12 +680,17 @@ const examples: Array = [ return ( Default submit key (Enter): - + Custom submit key event (Shift + Enter), single-line: Custom submit key event (Shift + Enter), multi-line: = [ clearTextOnSubmit style={styles.multiline} submitKeyEvents={[{code: 'Enter', shiftKey: true}]} + testID="textinput-clear-on-submit-3" /> Submit with Enter key, return key with Shift + Enter = [ clearTextOnSubmit style={styles.multiline} submitKeyEvents={[{code: 'Enter'}]} + testID="textinput-clear-on-submit-4" /> ); diff --git a/packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts b/packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts index 23c0eb696c0..5089fc063b0 100644 --- a/packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts +++ b/packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts @@ -29,42 +29,96 @@ describe('TextInput Tests', () => { await component.waitForDisplayed({timeout: 5000}); const dump = await dumpVisualTree('rewrite_sp_underscore_input'); expect(dump).toMatchSnapshot(); + await app.waitUntil( + async () => { + await component.setValue('Hello World'); + return (await component.getText()) === 'Hello_World'; + }, + { + interval: 1500, + timeout: 5000, + timeoutMsg: `Unable to enter correct text.`, + }, + ); + expect(await component.getText()).toBe('Hello_World'); }); test('TextInputs can rewrite characters: Replace Space with No Character', async () => { const component = await app.findElementByTestID('rewrite_no_sp_input'); await component.waitForDisplayed({timeout: 5000}); const dump = await dumpVisualTree('rewrite_no_sp_input'); expect(dump).toMatchSnapshot(); + await app.waitUntil( + async () => { + await component.setValue('Hello World'); + return (await component.getText()) === 'HelloWorld'; + }, + { + interval: 1500, + timeout: 5000, + timeoutMsg: `Unable to enter correct text.`, + }, + ); + expect(await component.getText()).toBe('HelloWorld'); }); test('TextInputs can rewrite characters: Replace Space with Clear', async () => { const component = await app.findElementByTestID('rewrite_clear_input'); await component.waitForDisplayed({timeout: 5000}); const dump = await dumpVisualTree('rewrite_clear_input'); expect(dump).toMatchSnapshot(); + const clear = await app.findElementByTestID('rewrite_clear_button'); + await app.waitUntil( + async () => { + await component.setValue('Hello World'); + return (await component.getText()) === 'HelloWorld'; + }, + { + interval: 1500, + timeout: 5000, + timeoutMsg: `Unable to enter correct text.`, + }, + ); + expect(await component.getText()).toBe('HelloWorld'); + await clear.click(); + expect(await component.getText()).toBe(''); }); test('TextInputs can autocapitalize: Autocapitalize Turned Off', async () => { const component = await app.findElementByTestID('capitalize-none'); await component.waitForDisplayed({timeout: 5000}); const dump = await dumpVisualTree('capitalize-none'); expect(dump).toMatchSnapshot(); + await app.waitUntil( + async () => { + await component.setValue('Hello World'); + return (await component.getText()) === 'Hello World'; + }, + { + interval: 1500, + timeout: 5000, + timeoutMsg: `Unable to enter correct text.`, + }, + ); + expect(await component.getText()).toBe('Hello World'); }); test('TextInputs can autocapitalize: Autocapitalize Sentences', async () => { const component = await app.findElementByTestID('capitalize-sentences'); await component.waitForDisplayed({timeout: 5000}); const dump = await dumpVisualTree('capitalize-sentences'); expect(dump).toMatchSnapshot(); + // Behavior not supported yet. }); test('TextInputs can autocapitalize: Autocapitalize Words', async () => { const component = await app.findElementByTestID('capitalize-words'); await component.waitForDisplayed({timeout: 5000}); const dump = await dumpVisualTree('capitalize-words'); expect(dump).toMatchSnapshot(); + // Behavior not supported yet. }); test('TextInputs can autocapitalize: Autocapitalize Characters', async () => { const component = await app.findElementByTestID('capitalize-characters'); await component.waitForDisplayed({timeout: 5000}); const dump = await dumpVisualTree('capitalize-characters'); expect(dump).toMatchSnapshot(); + // Behavior not supported yet. }); test('TextInputs can have attributed text', async () => { const component = await app.findElementByTestID('text-input'); @@ -123,6 +177,7 @@ describe('TextInput Tests', () => { await component.waitForDisplayed({timeout: 5000}); const dump = await dumpVisualTree('style-fontFamily'); expect(dump).toMatchSnapshot(); + // Behavior not implemented yet }); test('TextInputs can have a font size', async () => { const component = await app.findElementByTestID('style-fontSize'); @@ -135,6 +190,7 @@ describe('TextInput Tests', () => { await component.waitForDisplayed({timeout: 5000}); const dump = await dumpVisualTree('style-fontStyle'); expect(dump).toMatchSnapshot(); + // Behavior not implemented yet }); test('TextInputs can have a font weight', async () => { const component = await app.findElementByTestID('style-fontWeight'); @@ -147,18 +203,21 @@ describe('TextInput Tests', () => { await component.waitForDisplayed({timeout: 5000}); const dump = await dumpVisualTree('style-letterSpacing'); expect(dump).toMatchSnapshot(); + // Behavior not implemented yet }); test('TextInputs can have customized line height', async () => { const component = await app.findElementByTestID('style-lineHeight'); await component.waitForDisplayed({timeout: 5000}); const dump = await dumpVisualTree('style-lineHeight'); expect(dump).toMatchSnapshot(); + // Behavior not implemented yet }); test('TextInputs can have text decoration lines', async () => { const component = await app.findElementByTestID('style-textDecorationLine'); await component.waitForDisplayed({timeout: 5000}); const dump = await dumpVisualTree('style-textDecorationLine'); expect(dump).toMatchSnapshot(); + // Behavior not implemented yet }); test('TextInputs can have text shadows', async () => { const component = await app.findElementByTestID('style-textShadow'); @@ -166,4 +225,420 @@ describe('TextInput Tests', () => { const dump = await dumpVisualTree('style-textShadow'); expect(dump).toMatchSnapshot(); }); + test('TextInputs can be set to not editable', async () => { + const component = await app.findElementByTestID('textinput-not-editable'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-not-editable'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can be editable', async () => { + const component = await app.findElementByTestID('textinput-editable'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-editable'); + expect(dump).toMatchSnapshot(); + await component.setValue('Hello World'); + expect(await component.getText()).toBe('Hello World'); + }); + test('TextInputs can be set to not editable 2', async () => { + const component = await app.findElementByTestID('textinput-not-editable2'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-not-editable2'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can set their readOnly prop to false', async () => { + const component = await app.findElementByTestID('textinput-readonly-false'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-readonly-false'); + expect(dump).toMatchSnapshot(); + await component.setValue('Hello World'); + expect(await component.getText()).toBe('Hello World'); + }); + test('TextInputs can set their readOnly prop to true', async () => { + const component = await app.findElementByTestID('textinput-readyonly'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-readyonly'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can clear on submit', async () => { + const component = await app.findElementByTestID( + 'textinput-clear-on-submit', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-clear-on-submit'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can clear on submit with custom submit key event (Shift + Enter), single-line', async () => { + const component = await app.findElementByTestID( + 'textinput-clear-on-submit-2', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-clear-on-submit-2'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can clear on submit with custom submit key event (Shift + Enter), multi-line', async () => { + const component = await app.findElementByTestID( + 'textinput-clear-on-submit-3', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-clear-on-submit-3'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can submit with custom key', async () => { + const component = await app.findElementByTestID( + 'textinput-clear-on-submit-4', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-clear-on-submit-4'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have inline images', async () => { + const component = await app.findElementByTestID('textinput-inline-images'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-inline-images'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have inline images, drawableLeft and drawablePadding set', async () => { + const component = await app.findElementByTestID( + 'textinput-inline-images-2', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-inline-images-2'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have inline images, drawable props not set', async () => { + const component = await app.findElementByTestID( + 'textinput-inline-images-3', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-inline-images-3'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have custom return key type, none', async () => { + const component = await app.findElementByTestID('textinput-return-none'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-return-none'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have custom return key type, go', async () => { + const component = await app.findElementByTestID('textinput-return-go'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-return-go'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have custom return key type, search', async () => { + const component = await app.findElementByTestID('textinput-return-search'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-return-search'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have custom return key type, send', async () => { + const component = await app.findElementByTestID('textinput-return-send'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-return-send'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have custom return key type, done', async () => { + const component = await app.findElementByTestID('textinput-return-done'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-return-done'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have custom return key type, previous', async () => { + const component = await app.findElementByTestID( + 'textinput-return-previous', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-return-previous'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have custom return key type, next', async () => { + const component = await app.findElementByTestID('textinput-return-next'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-return-next'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have custom return key label, Compile', async () => { + const component = await app.findElementByTestID('textinput-return-Compile'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-return-Compile'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have custom return key label, React Native', async () => { + const component = await app.findElementByTestID( + 'textinput-return-React Native', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-return-React Native'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can autocomplete, country', async () => { + const component = await app.findElementByTestID( + 'textinput-autocomplete-country', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-autocomplete-country'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can autocomplete, address country', async () => { + const component = await app.findElementByTestID( + 'textinput-autocomplete-address-country', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-autocomplete-address-country'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can autocomplete, one-time-code', async () => { + const component = await app.findElementByTestID( + 'textinput-autocomplete-one-time-code', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-autocomplete-one-time-code'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can autocomplete, sms-otp', async () => { + const component = await app.findElementByTestID( + 'textinput-autocomplete-sms-otp', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-autocomplete-sms-otp'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can be multiline, topleft alignment', async () => { + const component = await app.findElementByTestID( + 'textinput-multiline-topleft', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-multiline-topleft'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can be multiline, center alignment', async () => { + const component = await app.findElementByTestID( + 'textinput-multiline-center', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-multiline-center'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can be multiline, bottomright alignment', async () => { + const component = await app.findElementByTestID( + 'textinput-multiline-bottomright', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-multiline-bottomright'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs support secure entry', async () => { + const component = await app.findElementByTestID('textinput-password'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-password'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs support secure entry, with placeholder text', async () => { + const component = await app.findElementByTestID( + 'textinput-password-placeholder', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-password-placeholder'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have customer letter spacing, spacing=0', async () => { + const component = await app.findElementByTestID( + 'textinput-letterspacing-0', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-letterspacing-0'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have customer letter spacing, spacing=2', async () => { + const component = await app.findElementByTestID( + 'textinput-letterspacing-2', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-letterspacing-2'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have customer letter spacing, spacing=9', async () => { + const component = await app.findElementByTestID( + 'textinput-letterspacing-9', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-letterspacing-9'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have customer letter spacing, spacing=-1', async () => { + const component = await app.findElementByTestID( + 'textinput-letterspacing--1', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-letterspacing--1'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs with set height and padding from theme', async () => { + const component = await app.findElementByTestID('textinput-theme-padding'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-theme-padding'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have customized font weight, default', async () => { + const component = await app.findElementByTestID('textinput-weight-default'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-default-weight'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have customized font weight, normal', async () => { + const component = await app.findElementByTestID('textinput-weight-normal'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-default-normal'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have customized font weight, bold', async () => { + const component = await app.findElementByTestID('textinput-weight-bold'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-default-bold'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have customized font weight, 900', async () => { + const component = await app.findElementByTestID('textinput-weight-900'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-default-900'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have customized font weight, 800', async () => { + const component = await app.findElementByTestID('textinput-weight-800'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-default-800'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have customized font weight, 700', async () => { + const component = await app.findElementByTestID('textinput-weight-700'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-default-700'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have customized font weight, 600', async () => { + const component = await app.findElementByTestID('textinput-weight-600'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-default-600'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have customized font weight, 500', async () => { + const component = await app.findElementByTestID('textinput-weight-500'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-default-500'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have customized font weight, 400', async () => { + const component = await app.findElementByTestID('textinput-weight-400'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-default-400'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have customized font weight, 300', async () => { + const component = await app.findElementByTestID('textinput-weight-300'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-default-300'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have customized font weight, 200', async () => { + const component = await app.findElementByTestID('textinput-weight-200'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-default-200'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can have customized font weight, 100', async () => { + const component = await app.findElementByTestID('textinput-weight-100'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-default-100'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs have a default text color', async () => { + const component = await app.findElementByTestID('textinput-default-color'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-default-color'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs have a custom text color', async () => { + const component = await app.findElementByTestID('textinput-custom-color'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-custom-color'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs have a default placeholder text color', async () => { + const component = await app.findElementByTestID( + 'textinput-default-placeholder-color', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-default-placeholder-color'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs have a custom placeholder text color', async () => { + const component = await app.findElementByTestID( + 'textinput-custom-placeholder-color', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-custom-placeholder-color'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs have a default underline color', async () => { + const component = await app.findElementByTestID( + 'textinput-default-underline-color', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-default-underline-color'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs have a custom underline color', async () => { + const component = await app.findElementByTestID( + 'textinput-custom-underline-color', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-custom-underline-color'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs have a custom background color', async () => { + const component = await app.findElementByTestID( + 'textinput-custom-background-color', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-custom-background-color'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs have a custom highlight color', async () => { + const component = await app.findElementByTestID( + 'textinput-custom-highlight-color', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-custom-highlight-color'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can enable spellcheck', async () => { + const component = await app.findElementByTestID('textinput-spellcheck'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-spellcheck'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can propagate events', async () => { + const component = await app.findElementByTestID('textinput-propagation'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-propagation'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can register press events', async () => { + const component = await app.findElementByTestID('textinput-press'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-press'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can autogrow', async () => { + const component = await app.findElementByTestID('textinput-autogrow'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-autogrow'); + expect(dump).toMatchSnapshot(); + }); + test('TextInputs can customize its padding', async () => { + const component = await app.findElementByTestID('textinput-padding'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('textinput-padding'); + expect(dump).toMatchSnapshot(); + }); }); diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap index 27fc30223d6..7cc68553c4c 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap @@ -1208,16 +1208,16 @@ exports[`TextInput Tests TextInputs can autocapitalize: Autocapitalize Words 1`] } `; -exports[`TextInput Tests TextInputs can have a background color 1`] = ` +exports[`TextInput Tests TextInputs can autocomplete, address country 1`] = ` { "Automation Tree": { - "AutomationId": "style-backgroundColor", + "AutomationId": "textinput-autocomplete-address-country", "ControlType": 50004, - "HelpText": "", + "HelpText": "postal-address-country", "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + "Name": "postal-address-country", }, "Visual Tree": { "Children": [ @@ -1343,7 +1343,7 @@ exports[`TextInput Tests TextInputs can have a background color 1`] = ` "Visual Type": "SpriteVisual", }, ], - "Comment": "style-backgroundColor", + "Comment": "textinput-autocomplete-address-country", "Offset": [ 0, 0, @@ -1351,24 +1351,24 @@ exports[`TextInput Tests TextInputs can have a background color 1`] = ` ], "Opacity": 1, "Size": [ - 791, - 29, + 916, + 28, ], "Visual Type": "SpriteVisual", }, } `; -exports[`TextInput Tests TextInputs can have a color 1`] = ` +exports[`TextInput Tests TextInputs can autocomplete, country 1`] = ` { "Automation Tree": { - "AutomationId": "style-color", + "AutomationId": "textinput-autocomplete-country", "ControlType": 50004, - "HelpText": "", + "HelpText": "country", "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + "Name": "country", }, "Visual Tree": { "Children": [ @@ -1494,7 +1494,7 @@ exports[`TextInput Tests TextInputs can have a color 1`] = ` "Visual Type": "SpriteVisual", }, ], - "Comment": "style-color", + "Comment": "textinput-autocomplete-country", "Offset": [ 0, 0, @@ -1502,24 +1502,24 @@ exports[`TextInput Tests TextInputs can have a color 1`] = ` ], "Opacity": 1, "Size": [ - 791, - 28, + 916, + 29, ], "Visual Type": "SpriteVisual", }, } `; -exports[`TextInput Tests TextInputs can have a font family 1`] = ` +exports[`TextInput Tests TextInputs can autocomplete, one-time-code 1`] = ` { "Automation Tree": { - "AutomationId": "style-fontFamily", + "AutomationId": "textinput-autocomplete-one-time-code", "ControlType": 50004, - "HelpText": "", + "HelpText": "one-time-code", "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + "Name": "one-time-code", }, "Visual Tree": { "Children": [ @@ -1645,7 +1645,7 @@ exports[`TextInput Tests TextInputs can have a font family 1`] = ` "Visual Type": "SpriteVisual", }, ], - "Comment": "style-fontFamily", + "Comment": "textinput-autocomplete-one-time-code", "Offset": [ 0, 0, @@ -1653,7 +1653,7 @@ exports[`TextInput Tests TextInputs can have a font family 1`] = ` ], "Opacity": 1, "Size": [ - 791, + 916, 28, ], "Visual Type": "SpriteVisual", @@ -1661,16 +1661,16 @@ exports[`TextInput Tests TextInputs can have a font family 1`] = ` } `; -exports[`TextInput Tests TextInputs can have a font size 1`] = ` +exports[`TextInput Tests TextInputs can autocomplete, sms-otp 1`] = ` { "Automation Tree": { - "AutomationId": "style-fontSize", + "AutomationId": "textinput-autocomplete-sms-otp", "ControlType": 50004, - "HelpText": "", + "HelpText": "sms-otp", "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + "Name": "sms-otp", }, "Visual Tree": { "Children": [ @@ -1796,7 +1796,7 @@ exports[`TextInput Tests TextInputs can have a font size 1`] = ` "Visual Type": "SpriteVisual", }, ], - "Comment": "style-fontSize", + "Comment": "textinput-autocomplete-sms-otp", "Offset": [ 0, 0, @@ -1804,18 +1804,18 @@ exports[`TextInput Tests TextInputs can have a font size 1`] = ` ], "Opacity": 1, "Size": [ - 791, - 35, + 916, + 29, ], "Visual Type": "SpriteVisual", }, } `; -exports[`TextInput Tests TextInputs can have a font style 1`] = ` +exports[`TextInput Tests TextInputs can autogrow 1`] = ` { "Automation Tree": { - "AutomationId": "style-fontStyle", + "AutomationId": "textinput-autogrow", "ControlType": 50004, "HelpText": "", "IsEnabled": true, @@ -1823,6 +1823,53 @@ exports[`TextInput Tests TextInputs can have a font style 1`] = ` "LocalizedControlType": "edit", "Name": "", }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-autogrow", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 41, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can be editable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-editable", + "ControlType": 50004, + "HelpText": "editable text input using editable prop", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "editable text input using editable prop", + }, "Visual Tree": { "Children": [ { @@ -1947,7 +1994,7 @@ exports[`TextInput Tests TextInputs can have a font style 1`] = ` "Visual Type": "SpriteVisual", }, ], - "Comment": "style-fontStyle", + "Comment": "textinput-editable", "Offset": [ 0, 0, @@ -1955,7 +2002,7 @@ exports[`TextInput Tests TextInputs can have a font style 1`] = ` ], "Opacity": 1, "Size": [ - 791, + 916, 28, ], "Visual Type": "SpriteVisual", @@ -1963,10 +2010,10 @@ exports[`TextInput Tests TextInputs can have a font style 1`] = ` } `; -exports[`TextInput Tests TextInputs can have a font weight 1`] = ` +exports[`TextInput Tests TextInputs can be multiline, bottomright alignment 1`] = ` { "Automation Tree": { - "AutomationId": "style-fontWeight", + "AutomationId": "textinput-multiline-bottomright", "ControlType": 50004, "HelpText": "", "IsEnabled": true, @@ -1977,109 +2024,146 @@ exports[`TextInput Tests TextInputs can have a font weight 1`] = ` "Visual Tree": { "Children": [ { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, "Offset": [ 0, 0, 0, ], - "Opacity": 1, + "Opacity": 0, "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, 0, 0, ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], "Visual Type": "SpriteVisual", }, + ], + "Comment": "textinput-multiline-bottomright", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 60, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can be multiline, center alignment 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-multiline-center", + "ControlType": 50004, + "HelpText": "multiline, aligned center", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "multiline, aligned center", + }, + "Visual Tree": { + "Children": [ { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, "Offset": [ - -1, 0, 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, 0, ], - "Opacity": 1, + "Opacity": 0, "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, 0, ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], "Visual Type": "SpriteVisual", }, + ], + "Comment": "textinput-multiline-center", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 60, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can be multiline, topleft alignment 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-multiline-topleft", + "ControlType": 50004, + "HelpText": "multiline, aligned top-left", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "multiline, aligned top-left", + }, + "Visual Tree": { + "Children": [ { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, "Offset": [ 0, - -1, + 0, 0, ], - "Opacity": 1, + "Opacity": 0, "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ 0, - 1, 0, ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], "Visual Type": "SpriteVisual", }, + ], + "Comment": "textinput-multiline-topleft", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 60, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can be set to not editable 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-not-editable", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ { "Brush": { "Brush Type": "ColorBrush", @@ -2098,7 +2182,7 @@ exports[`TextInput Tests TextInputs can have a font weight 1`] = ` "Visual Type": "SpriteVisual", }, ], - "Comment": "style-fontWeight", + "Comment": "textinput-not-editable", "Offset": [ 0, 0, @@ -2106,24 +2190,24 @@ exports[`TextInput Tests TextInputs can have a font weight 1`] = ` ], "Opacity": 1, "Size": [ - 791, - 29, + 916, + 22, ], "Visual Type": "SpriteVisual", }, } `; -exports[`TextInput Tests TextInputs can have attributed text 1`] = ` +exports[`TextInput Tests TextInputs can be set to not editable 2 1`] = ` { "Automation Tree": { - "AutomationId": "text-input", + "AutomationId": "textinput-not-editable2", "ControlType": 50004, - "HelpText": "", + "HelpText": "uneditable text input using editable prop", "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + "Name": "uneditable text input using editable prop", }, "Visual Tree": { "Children": [ @@ -2249,7 +2333,7 @@ exports[`TextInput Tests TextInputs can have attributed text 1`] = ` "Visual Type": "SpriteVisual", }, ], - "Comment": "text-input", + "Comment": "textinput-not-editable2", "Offset": [ 0, 0, @@ -2258,17 +2342,17 @@ exports[`TextInput Tests TextInputs can have attributed text 1`] = ` "Opacity": 1, "Size": [ 916, - 50, + 28, ], "Visual Type": "SpriteVisual", }, } `; -exports[`TextInput Tests TextInputs can have customized letter spacing 1`] = ` +exports[`TextInput Tests TextInputs can clear on submit 1`] = ` { "Automation Tree": { - "AutomationId": "style-letterSpacing", + "AutomationId": "textinput-clear-on-submit", "ControlType": 50004, "HelpText": "", "IsEnabled": true, @@ -2279,109 +2363,193 @@ exports[`TextInput Tests TextInputs can have customized letter spacing 1`] = ` "Visual Tree": { "Children": [ { - "Offset": [ - 0, + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, 0, 0, ], - "Opacity": 1, + "Opacity": 0, "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, 0, 0, ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], "Visual Type": "SpriteVisual", }, + ], + "Comment": "textinput-clear-on-submit", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can clear on submit with custom submit key event (Shift + Enter), multi-line 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-clear-on-submit-3", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, "Offset": [ - -1, 0, 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, 0, ], - "Opacity": 1, + "Opacity": 0, "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, 0, ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], "Visual Type": "SpriteVisual", }, + ], + "Comment": "textinput-clear-on-submit-3", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 60, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can clear on submit with custom submit key event (Shift + Enter), single-line 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-clear-on-submit-2", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, "Offset": [ 0, - -1, + 0, 0, ], - "Opacity": 1, + "Opacity": 0, "Size": [ - 1, - 1, + 0, + 0, ], "Visual Type": "SpriteVisual", }, + ], + "Comment": "textinput-clear-on-submit-2", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can customize its padding 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-padding", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, "Offset": [ 0, - 1, + 0, 0, ], - "Opacity": 1, + "Opacity": 0, "Size": [ - 1, - -2, + 0, + 0, ], "Visual Type": "SpriteVisual", }, + ], + "Comment": "textinput-padding", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 19, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can enable spellcheck 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-spellcheck", + "ControlType": 50004, + "HelpText": "Type text to test spell check functionality.", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "Type text to test spell check functionality.", + }, + "Visual Tree": { + "Children": [ { "Brush": { "Brush Type": "ColorBrush", @@ -2400,7 +2568,7 @@ exports[`TextInput Tests TextInputs can have customized letter spacing 1`] = ` "Visual Type": "SpriteVisual", }, ], - "Comment": "style-letterSpacing", + "Comment": "textinput-spellcheck", "Offset": [ 0, 0, @@ -2408,18 +2576,18 @@ exports[`TextInput Tests TextInputs can have customized letter spacing 1`] = ` ], "Opacity": 1, "Size": [ - 791, - 28, + 916, + 30, ], "Visual Type": "SpriteVisual", }, } `; -exports[`TextInput Tests TextInputs can have customized line height 1`] = ` +exports[`TextInput Tests TextInputs can have a background color 1`] = ` { "Automation Tree": { - "AutomationId": "style-lineHeight", + "AutomationId": "style-backgroundColor", "ControlType": 50004, "HelpText": "", "IsEnabled": true, @@ -2551,7 +2719,7 @@ exports[`TextInput Tests TextInputs can have customized line height 1`] = ` "Visual Type": "SpriteVisual", }, ], - "Comment": "style-lineHeight", + "Comment": "style-backgroundColor", "Offset": [ 0, 0, @@ -2560,17 +2728,17 @@ exports[`TextInput Tests TextInputs can have customized line height 1`] = ` "Opacity": 1, "Size": [ 791, - 26, + 29, ], "Visual Type": "SpriteVisual", }, } `; -exports[`TextInput Tests TextInputs can have text decoration lines 1`] = ` +exports[`TextInput Tests TextInputs can have a color 1`] = ` { "Automation Tree": { - "AutomationId": "style-textDecorationLine", + "AutomationId": "style-color", "ControlType": 50004, "HelpText": "", "IsEnabled": true, @@ -2702,7 +2870,7 @@ exports[`TextInput Tests TextInputs can have text decoration lines 1`] = ` "Visual Type": "SpriteVisual", }, ], - "Comment": "style-textDecorationLine", + "Comment": "style-color", "Offset": [ 0, 0, @@ -2711,17 +2879,17 @@ exports[`TextInput Tests TextInputs can have text decoration lines 1`] = ` "Opacity": 1, "Size": [ 791, - 29, + 28, ], "Visual Type": "SpriteVisual", }, } `; -exports[`TextInput Tests TextInputs can have text shadows 1`] = ` +exports[`TextInput Tests TextInputs can have a font family 1`] = ` { "Automation Tree": { - "AutomationId": "style-textShadow", + "AutomationId": "style-fontFamily", "ControlType": 50004, "HelpText": "", "IsEnabled": true, @@ -2853,7 +3021,7 @@ exports[`TextInput Tests TextInputs can have text shadows 1`] = ` "Visual Type": "SpriteVisual", }, ], - "Comment": "style-textShadow", + "Comment": "style-fontFamily", "Offset": [ 0, 0, @@ -2869,10 +3037,10 @@ exports[`TextInput Tests TextInputs can have text shadows 1`] = ` } `; -exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with Clear 1`] = ` +exports[`TextInput Tests TextInputs can have a font size 1`] = ` { "Automation Tree": { - "AutomationId": "rewrite_clear_input", + "AutomationId": "style-fontSize", "ControlType": 50004, "HelpText": "", "IsEnabled": true, @@ -3004,7 +3172,7 @@ exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with C "Visual Type": "SpriteVisual", }, ], - "Comment": "rewrite_clear_input", + "Comment": "style-fontSize", "Offset": [ 0, 0, @@ -3012,18 +3180,18 @@ exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with C ], "Opacity": 1, "Size": [ - 867, - 28, + 791, + 35, ], "Visual Type": "SpriteVisual", }, } `; -exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with No Character 1`] = ` +exports[`TextInput Tests TextInputs can have a font style 1`] = ` { "Automation Tree": { - "AutomationId": "rewrite_no_sp_input", + "AutomationId": "style-fontStyle", "ControlType": 50004, "HelpText": "", "IsEnabled": true, @@ -3155,7 +3323,7 @@ exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with N "Visual Type": "SpriteVisual", }, ], - "Comment": "rewrite_no_sp_input", + "Comment": "style-fontStyle", "Offset": [ 0, 0, @@ -3163,7 +3331,7 @@ exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with N ], "Opacity": 1, "Size": [ - 916, + 791, 28, ], "Visual Type": "SpriteVisual", @@ -3171,10 +3339,10 @@ exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with N } `; -exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with Underscore 1`] = ` +exports[`TextInput Tests TextInputs can have a font weight 1`] = ` { "Automation Tree": { - "AutomationId": "rewrite_sp_underscore_input", + "AutomationId": "style-fontWeight", "ControlType": 50004, "HelpText": "", "IsEnabled": true, @@ -3306,7 +3474,7 @@ exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with U "Visual Type": "SpriteVisual", }, ], - "Comment": "rewrite_sp_underscore_input", + "Comment": "style-fontWeight", "Offset": [ 0, 0, @@ -3314,7 +3482,7 @@ exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with U ], "Opacity": 1, "Size": [ - 892, + 791, 29, ], "Visual Type": "SpriteVisual", @@ -3322,6 +3490,3010 @@ exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with U } `; +exports[`TextInput Tests TextInputs can have attributed text 1`] = ` +{ + "Automation Tree": { + "AutomationId": "text-input", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "text-input", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 50, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have custom return key label, Compile 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-return-Compile", + "ControlType": 50004, + "HelpText": "returnKeyLabel: Compile", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "returnKeyLabel: Compile", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-return-Compile", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 23, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have custom return key label, React Native 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-return-React Native", + "ControlType": 50004, + "HelpText": "returnKeyLabel: React Native", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "returnKeyLabel: React Native", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-return-React Native", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have custom return key type, done 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-return-done", + "ControlType": 50004, + "HelpText": "returnKeyType: done", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "returnKeyType: done", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-return-done", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have custom return key type, go 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-return-go", + "ControlType": 50004, + "HelpText": "returnKeyType: go", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "returnKeyType: go", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-return-go", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have custom return key type, next 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-return-next", + "ControlType": 50004, + "HelpText": "returnKeyType: next", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "returnKeyType: next", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-return-next", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have custom return key type, none 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-return-none", + "ControlType": 50004, + "HelpText": "returnKeyType: none", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "returnKeyType: none", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-return-none", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 23, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have custom return key type, previous 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-return-previous", + "ControlType": 50004, + "HelpText": "returnKeyType: previous", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "returnKeyType: previous", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-return-previous", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have custom return key type, search 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-return-search", + "ControlType": 50004, + "HelpText": "returnKeyType: search", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "returnKeyType: search", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-return-search", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have custom return key type, send 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-return-send", + "ControlType": 50004, + "HelpText": "returnKeyType: send", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "returnKeyType: send", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-return-send", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 23, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have customer letter spacing, spacing=-1 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-letterspacing--1", + "ControlType": 50004, + "HelpText": "letterSpacing = -1", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "letterSpacing = -1", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-letterspacing--1", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have customer letter spacing, spacing=0 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-letterspacing-0", + "ControlType": 50004, + "HelpText": "letterSpacing = 0", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "letterSpacing = 0", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-letterspacing-0", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have customer letter spacing, spacing=2 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-letterspacing-2", + "ControlType": 50004, + "HelpText": "letterSpacing = 2", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "letterSpacing = 2", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-letterspacing-2", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 23, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have customer letter spacing, spacing=9 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-letterspacing-9", + "ControlType": 50004, + "HelpText": "letterSpacing = 9", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "letterSpacing = 9", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-letterspacing-9", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have customized font weight, 100 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": {}, +} +`; + +exports[`TextInput Tests TextInputs can have customized font weight, 200 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": {}, +} +`; + +exports[`TextInput Tests TextInputs can have customized font weight, 300 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": {}, +} +`; + +exports[`TextInput Tests TextInputs can have customized font weight, 400 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": {}, +} +`; + +exports[`TextInput Tests TextInputs can have customized font weight, 500 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": {}, +} +`; + +exports[`TextInput Tests TextInputs can have customized font weight, 600 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": {}, +} +`; + +exports[`TextInput Tests TextInputs can have customized font weight, 700 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": {}, +} +`; + +exports[`TextInput Tests TextInputs can have customized font weight, 800 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": {}, +} +`; + +exports[`TextInput Tests TextInputs can have customized font weight, 900 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": {}, +} +`; + +exports[`TextInput Tests TextInputs can have customized font weight, bold 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": {}, +} +`; + +exports[`TextInput Tests TextInputs can have customized font weight, default 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": {}, +} +`; + +exports[`TextInput Tests TextInputs can have customized font weight, normal 1`] = ` +{ + "Automation Tree": {}, + "Visual Tree": {}, +} +`; + +exports[`TextInput Tests TextInputs can have customized letter spacing 1`] = ` +{ + "Automation Tree": { + "AutomationId": "style-letterSpacing", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "style-letterSpacing", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 791, + 28, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have customized line height 1`] = ` +{ + "Automation Tree": { + "AutomationId": "style-lineHeight", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "style-lineHeight", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 791, + 26, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have inline images 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-inline-images", + "ControlType": 50004, + "HelpText": "This has drawableLeft set", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "This has drawableLeft set", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-inline-images", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have inline images, drawable props not set 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-inline-images-3", + "ControlType": 50004, + "HelpText": "This does not have drawable props set", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "This does not have drawable props set", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-inline-images-3", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have inline images, drawableLeft and drawablePadding set 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-inline-images-2", + "ControlType": 50004, + "HelpText": "This has drawableLeft and drawablePadding set", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "This has drawableLeft and drawablePadding set", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-inline-images-2", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 23, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have text decoration lines 1`] = ` +{ + "Automation Tree": { + "AutomationId": "style-textDecorationLine", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "style-textDecorationLine", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 791, + 29, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can have text shadows 1`] = ` +{ + "Automation Tree": { + "AutomationId": "style-textShadow", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "style-textShadow", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 791, + 28, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can propagate events 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-propagation", + "ControlType": 50004, + "HelpText": "Click inside the box to observe events being fired.", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "Click inside the box to observe events being fired.", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-propagation", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 30, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can register press events 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-press", + "ControlType": 50004, + "HelpText": "Click inside the box to observe events being fired.", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "Click inside the box to observe events being fired.", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-press", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 30, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with Clear 1`] = ` +{ + "Automation Tree": { + "AutomationId": "rewrite_clear_input", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "rewrite_clear_input", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 867, + 28, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with No Character 1`] = ` +{ + "Automation Tree": { + "AutomationId": "rewrite_no_sp_input", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "rewrite_no_sp_input", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 28, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with Underscore 1`] = ` +{ + "Automation Tree": { + "AutomationId": "rewrite_sp_underscore_input", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "rewrite_sp_underscore_input", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 892, + 29, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can set their readOnly prop to false 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-readonly-false", + "ControlType": 50004, + "HelpText": "editable text input using readOnly prop", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "editable text input using readOnly prop", + }, + "Visual Tree": { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-readonly-false", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 29, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can set their readOnly prop to true 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-readyonly", + "ControlType": 50004, + "HelpText": "uneditable text input using readOnly prop", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "uneditable text input using readOnly prop", + }, + "Visual Tree": { + "Children": [ + { + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + -1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 1, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + -2, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + -1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + 1, + ], + "Visual Type": "SpriteVisual", + }, + { + "Offset": [ + 0, + 1, + 0, + ], + "Opacity": 1, + "Size": [ + 1, + -2, + ], + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-readyonly", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 28, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs can submit with custom key 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-clear-on-submit-4", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-clear-on-submit-4", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 60, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs have a custom background color 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-custom-background-color", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-custom-background-color", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs have a custom highlight color 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-custom-highlight-color", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-custom-highlight-color", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs have a custom placeholder text color 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-custom-placeholder-color", + "ControlType": 50004, + "HelpText": "Red placeholder text color", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "Red placeholder text color", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-custom-placeholder-color", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs have a custom text color 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-custom-color", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-custom-color", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs have a custom underline color 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-custom-underline-color", + "ControlType": 50004, + "HelpText": "Blue underline color", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "Blue underline color", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-custom-underline-color", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 23, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs have a default placeholder text color 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-default-placeholder-color", + "ControlType": 50004, + "HelpText": "Default placeholder text color", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "Default placeholder text color", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-default-placeholder-color", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 23, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs have a default text color 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-default-color", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-default-color", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs have a default underline color 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-default-underline-color", + "ControlType": 50004, + "HelpText": "Default underline color", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "Default underline color", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-default-underline-color", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs support secure entry 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-password", + "ControlType": 50004, + "HelpText": "", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-password", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 22, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs support secure entry, with placeholder text 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-password-placeholder", + "ControlType": 50004, + "HelpText": "color is supported too", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "color is supported too", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-password-placeholder", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 23, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`TextInput Tests TextInputs with set height and padding from theme 1`] = ` +{ + "Automation Tree": { + "AutomationId": "textinput-theme-padding", + "ControlType": 50004, + "HelpText": "If you set height, beware of padding set from themes", + "IsEnabled": true, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + "Name": "If you set height, beware of padding set from themes", + }, + "Visual Tree": { + "Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 0, + "Size": [ + 0, + 0, + ], + "Visual Type": "SpriteVisual", + }, + ], + "Comment": "textinput-theme-padding", + "Offset": [ + 0, + 0, + 0, + ], + "Opacity": 1, + "Size": [ + 916, + 30, + ], + "Visual Type": "SpriteVisual", + }, +} +`; + exports[`TextInput Tests Uncontrolled TextInput 1`] = ` { "Automation Tree": { diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap b/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap index c7798a86f03..3b20ff23d6e 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap @@ -73771,6 +73771,7 @@ exports[`snapshotAllPages TextInput 19`] = ` }, ] } + testID="textinput-default-color" /> `; @@ -73865,6 +73873,7 @@ exports[`snapshotAllPages TextInput 20`] = ` }, ] } + testID="textinput-weight-default" /> `; @@ -74022,6 +74042,7 @@ exports[`snapshotAllPages TextInput 21`] = ` }, ] } + testID="textinput-theme-padding" /> `; @@ -74039,6 +74060,7 @@ exports[`snapshotAllPages TextInput 22`] = ` }, ] } + testID="textinput-letterspacing-0" /> `; @@ -74092,6 +74117,7 @@ exports[`snapshotAllPages TextInput 23`] = ` "fontSize": 16, } } + testID="textinput-password" /> `; @@ -74120,6 +74147,7 @@ exports[`snapshotAllPages TextInput 24`] = ` "fontSize": 16, } } + testID="textinput-not-editable" /> `; @@ -74142,6 +74170,7 @@ exports[`snapshotAllPages TextInput 25`] = ` }, ] } + testID="textinput-multiline-topleft" /> `; @@ -74334,6 +74369,7 @@ exports[`snapshotAllPages TextInput 28`] = ` }, ] } + testID="textinput-autogrow" > `; @@ -74438,6 +74478,7 @@ exports[`snapshotAllPages TextInput 30`] = ` "fontSize": 16, } } + testID="textinput-return-none" /> `; @@ -74524,6 +74573,7 @@ exports[`snapshotAllPages TextInput 31`] = ` "fontSize": 16, } } + testID="textinput-inline-images" /> `; @@ -74550,6 +74602,7 @@ exports[`snapshotAllPages TextInput 32`] = ` `; @@ -74591,6 +74645,7 @@ exports[`snapshotAllPages TextInput 34`] = ` "fontSize": 16, } } + testID="textinput-clear-on-submit" /> Custom submit key event (Shift + Enter), single-line: @@ -74610,6 +74665,7 @@ exports[`snapshotAllPages TextInput 34`] = ` }, ] } + testID="textinput-clear-on-submit-2" /> Custom submit key event (Shift + Enter), multi-line: @@ -74631,6 +74687,7 @@ exports[`snapshotAllPages TextInput 34`] = ` }, ] } + testID="textinput-clear-on-submit-3" /> Submit with Enter key, return key with Shift + Enter @@ -74651,6 +74708,7 @@ exports[`snapshotAllPages TextInput 34`] = ` }, ] } + testID="textinput-clear-on-submit-4" /> `; @@ -74700,6 +74758,7 @@ exports[`snapshotAllPages TextInput 35`] = ` }, ] } + testID="textinput-propagation" /> , , @@ -74735,6 +74794,7 @@ exports[`snapshotAllPages TextInput 36`] = ` }, ] } + testID="textinput-spellcheck" />, ] `;