@@ -85,6 +85,59 @@ describe("Search", () => {
85
85
expect ( component . value ) . toEqual ( "" ) ;
86
86
} ) ;
87
87
88
+ it ( "should clear the input when the clear button is clicked on the expandable component" , ( ) => {
89
+ component . expandable = true ;
90
+ component . value = "TextToClear" ;
91
+ fixture . detectChanges ( ) ;
92
+ clearButtonElement = fixture . debugElement . query ( By . css ( "button" ) ) . nativeElement ;
93
+ clearButtonElement . click ( ) ;
94
+ fixture . detectChanges ( ) ;
95
+ expect ( component . value ) . toEqual ( "" ) ;
96
+ } ) ;
97
+
98
+ it ( "should clear the input when the escape key is pressed" , ( ) => {
99
+ clearButtonElement = fixture . debugElement . query ( By . css ( "button" ) ) . nativeElement ;
100
+ component . value = "TextToClear" ;
101
+ fixture . detectChanges ( ) ;
102
+ expect ( clearButtonElement . className . includes ( "cds--search-close--hidden" ) ) . toEqual ( false ) ;
103
+ component . keyDown ( new KeyboardEvent ( "keydown" , {
104
+ "key" : "Escape"
105
+ } ) ) ;
106
+ fixture . detectChanges ( ) ;
107
+ expect ( component . value ) . toBe ( "" ) ;
108
+ expect ( clearButtonElement . className . includes ( "cds--search-close--hidden" ) ) . toEqual ( true ) ;
109
+ } ) ;
110
+
111
+ it ( "should clear the input and keep the expanded state open when the escape key is pressed" , ( ) => {
112
+ component . expandable = true ;
113
+ component . active = true ;
114
+ containerElement = fixture . debugElement . query ( By . css ( ".cds--search" ) ) . nativeElement ;
115
+ component . value = "TextToClear" ;
116
+ fixture . detectChanges ( ) ;
117
+ expect ( containerElement . className . includes ( "cds--search--expanded" ) ) . toEqual ( true ) ;
118
+ component . keyDown ( new KeyboardEvent ( "keydown" , {
119
+ "key" : "Escape"
120
+ } ) ) ;
121
+ fixture . detectChanges ( ) ;
122
+ expect ( component . value ) . toBe ( "" ) ;
123
+ expect ( containerElement . className . includes ( "cds--search--expanded" ) ) . toEqual ( true ) ;
124
+ } ) ;
125
+
126
+ it ( "should close the expandable search component when esc is pressed when content is empty" , ( ) => {
127
+ component . expandable = true ;
128
+ component . active = true ;
129
+ containerElement = fixture . debugElement . query ( By . css ( ".cds--search" ) ) . nativeElement ;
130
+ component . value = "" ;
131
+ fixture . detectChanges ( ) ;
132
+ expect ( containerElement . className . includes ( "cds--search--expanded" ) ) . toEqual ( true ) ;
133
+ component . keyDown ( new KeyboardEvent ( "keydown" , {
134
+ "key" : "Escape"
135
+ } ) ) ;
136
+ fixture . detectChanges ( ) ;
137
+ expect ( component . active ) . toEqual ( false ) ;
138
+ expect ( containerElement . className . includes ( "cds--search--expanded" ) ) . toEqual ( false ) ;
139
+ } ) ;
140
+
88
141
it ( "should have dark and light theme" , ( ) => {
89
142
containerElement = fixture . debugElement . query ( By . css ( ".cds--search" ) ) . nativeElement ;
90
143
component . theme = "dark" ;
0 commit comments