/**
 * Copyright 2020 Gravitational, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */ import React from 'react' ; import FieldInput from './FieldInput' ; import { render , fireEvent } from 'design/utils/testing' ; import * as useRule from '../Validation/useRule' ; import theme from 'design/theme' ; test ( 'valid values, autofocus, onChange, onKeyPress' , ( ) => { const rule = jest . fn ( ) ; const onChange = jest . fn ( ) ; const onKeyPress = jest . fn ( ) ; jest . spyOn ( useRule , 'default' ) . mockReturnValue ( { valid : true , message : '' } ) ; const { getByText , getByPlaceholderText } = render ( < FieldInput placeholder = "placeholderText" autoFocus = { true } label = "labelText" rule = { rule } onChange = { onChange } onKeyPress = { onKeyPress } / > ) ; expect ( getByText ( 'labelText' ) ) . toBeInTheDocument ( ) ; const inputEl = getByPlaceholderText ( 'placeholderText' ) ; expect ( document . activeElement ) . toEqual ( inputEl ) ; fireEvent . change ( inputEl , { target : { value : 'test' } } ) ; expect ( onChange ) . toHaveBeenCalledTimes ( 1 ) ; fireEvent . keyPress ( inputEl , { key : 'Enter' , keyCode : 13 } ) ; expect ( onKeyPress ) . toHaveBeenCalledTimes ( 1 ) ; } ) ; test ( 'input validation error state' , ( ) => { const rule = jest . fn ( ) ; const errorColor = theme . colors . error . main ; jest . spyOn ( useRule , 'default' ) . mockReturnValue ( { valid : false , message : 'errorMsg' } ) ; const { getByText , getByPlaceholderText } = render ( < FieldInput placeholder = "placeholderText" label = "labelText" rule = { rule } onChange = { jest . fn ( ) } / > ) ; const labelEl = getByText ( 'errorMsg' ) ; expect ( labelEl ) . toHaveStyle ( { color : errorColor } ) ; const inputEl = getByPlaceholderText ( 'placeholderText' ) ; expect ( inputEl ) . toHaveStyle ( { 'border-color' : errorColor , } ) ; } ) ;