@@ -158,6 +158,32 @@ describe("TextField", () => {
158
158
expect ( label . className ) . toContain ( "rmd-floating-label--inactive" ) ;
159
159
} ) ;
160
160
161
+ it ( "should add the inactive floating label state on blur if the change event never really got fired" , ( ) => {
162
+ function Test ( ) : ReactElement {
163
+ return < TextField id = "text-field" label = "Label" type = "number" /> ;
164
+ }
165
+ const { getByRole, getByText } = render ( < Test /> ) ;
166
+
167
+ const field = getByRole ( "spinbutton" ) as HTMLInputElement ;
168
+ const label = getByText ( "Label" ) ;
169
+ expect ( field . value ) . toBe ( "" ) ;
170
+ expect ( label . className ) . not . toContain ( "rmd-floating-label--active" ) ;
171
+ expect ( label . className ) . not . toContain ( "rmd-floating-label--inactive" ) ;
172
+
173
+ fireEvent . change ( field , { target : { value : "-" } } ) ;
174
+ expect ( label . className ) . not . toContain ( "rmd-floating-label--active" ) ;
175
+ expect ( label . className ) . not . toContain ( "rmd-floating-label--inactive" ) ;
176
+
177
+ // TODO: Look into writing real browser tests since this isn't implemented in JSDOM
178
+ Object . defineProperty ( field . validity , "badInput" , {
179
+ writable : true ,
180
+ value : true ,
181
+ } ) ;
182
+ fireEvent . blur ( field ) ;
183
+ expect ( label . className ) . toContain ( "rmd-floating-label--active" ) ;
184
+ expect ( label . className ) . toContain ( "rmd-floating-label--inactive" ) ;
185
+ } ) ;
186
+
161
187
it ( "should not add the inactive floating label state when a non-number type has a badInput validity" , ( ) => {
162
188
const { getByRole, getByText } = render (
163
189
< TextField id = "text-field" label = "Label" type = "url" defaultValue = "" />
0 commit comments