@@ -29,7 +29,6 @@ configs().forEach(({ title, screenshot, config }) => {
2929 await expect ( input ) . toHaveScreenshot ( screenshot ( `input-with-placeholder` ) ) ;
3030 } ) ;
3131 } ) ;
32-
3332 test . describe ( 'input with clear button' , ( ) => {
3433 test ( 'should not have visual regressions with default label' , async ( { page } ) => {
3534 await page . setContent (
@@ -63,6 +62,44 @@ configs().forEach(({ title, screenshot, config }) => {
6362 await expect ( input ) . toHaveScreenshot ( screenshot ( `input-with-clear-button-stacked` ) ) ;
6463 } ) ;
6564 } ) ;
65+ test . describe ( 'input click behaviors' , ( ) => {
66+ test ( 'should not have visual regressions' , async ( { page } ) => {
67+ await page . setContent (
68+ `
69+ <ion-input
70+ label="Label"
71+ clear-input="true"
72+ value="Text"
73+ ></ion-input>
74+ ` ,
75+ config
76+ ) ;
77+ const input = page . locator ( 'ion-input' ) ;
78+ input . dblclick ( ) ;
79+ // Validates the display of an input with a clear button.
80+ await expect ( input ) . toHaveScreenshot ( screenshot ( `input-dbclick` ) ) ;
81+ } ) ;
82+ test ( 'should not have visual regressions with stacked label' , async ( { page, browserName } ) => {
83+ if ( browserName === 'firefox' ) {
84+ test . skip ( ) ;
85+ }
86+ await page . setContent (
87+ `
88+ <ion-input
89+ label="Label"
90+ label-placement="stacked"
91+ clear-input="true"
92+ value="Text"
93+ ></ion-input>
94+ ` ,
95+ config
96+ ) ;
97+ const input = page . locator ( 'ion-input' ) ;
98+ input . dblclick ( ) ;
99+ // Validates the display of an input with a clear button.
100+ await expect ( input ) . toHaveScreenshot ( screenshot ( `input-dbclick-stacked` ) ) ;
101+ } ) ;
102+ } ) ;
66103 } ) ;
67104} ) ;
68105
@@ -185,6 +222,27 @@ configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
185222 const container = page . locator ( '#container' ) ;
186223 await expect ( container ) . toHaveScreenshot ( screenshot ( `input-clear-button-focused` ) ) ;
187224 } ) ;
225+
226+ test ( 'should not have visual regressions when user dbclicks' , async ( { page, browserName } ) => {
227+ if ( browserName === 'firefox' || browserName === 'webkit' ) {
228+ test . skip ( ) ;
229+ }
230+ await page . setContent (
231+ `
232+ <ion-input
233+ label="Label"
234+ label-placement="stacked"
235+ clear-input="true"
236+ value="Text"
237+ ></ion-input>
238+ ` ,
239+ config
240+ ) ;
241+ const input = page . locator ( 'ion-input' ) ;
242+ await input . dblclick ( ) ;
243+ await page . waitForChanges ( ) ;
244+ await expect ( input ) . toHaveScreenshot ( screenshot ( `input-dbclick` ) ) ;
245+ } ) ;
188246 } ) ;
189247} ) ;
190248
0 commit comments