Merge branch 'fixes-searchbar-test' of github.com:MadameSheema/kibana into fixes-searchbar-test

This commit is contained in:
Gloria Hornero 2020-06-26 11:38:13 +02:00
commit 4d85646d6f
2 changed files with 22 additions and 2 deletions

View file

@ -22,6 +22,8 @@ import { ColorPicker, ColorPickerProps } from './color_picker';
import { mount } from 'enzyme';
import { ReactWrapper } from 'enzyme';
import { EuiColorPicker, EuiIconTip } from '@elastic/eui';
// @ts-ignore
import { findTestSubject } from '@elastic/eui/lib/test';
describe('ColorPicker', () => {
const defaultProps: ColorPickerProps = {
@ -42,6 +44,22 @@ describe('ColorPicker', () => {
expect(component.find('.tvbColorPicker__clear').length).toBe(0);
});
it('should render the correct value to the input text if the prop value is hex', () => {
const props = { ...defaultProps, value: '#68BC00' };
component = mount(<ColorPicker {...props} />);
component.find('.tvbColorPicker button').simulate('click');
const input = findTestSubject(component, 'topColorPickerInput');
expect(input.props().value).toBe('#68BC00');
});
it('should render the correct value to the input text if the prop value is rgba', () => {
const props = { ...defaultProps, value: 'rgba(85,66,177,1)' };
component = mount(<ColorPicker {...props} />);
component.find('.tvbColorPicker button').simulate('click');
const input = findTestSubject(component, 'topColorPickerInput');
expect(input.props().value).toBe('85,66,177,1');
});
it('should render the correct aria label to the color swatch button', () => {
const props = { ...defaultProps, value: 'rgba(85,66,177,0.59)' };
component = mount(<ColorPicker {...props} />);

View file

@ -43,8 +43,10 @@ export interface ColorPickerProps {
}
export function ColorPicker({ name, value, disableTrash = false, onChange }: ColorPickerProps) {
const initialColorValue = value ? value.replace(COMMAS_NUMS_ONLY_RE, '') : '';
const [color, setColor] = useState(initialColorValue);
const initialColorValue = value?.includes('rgba')
? value.replace(COMMAS_NUMS_ONLY_RE, '')
: value;
const [color, setColor] = useState(initialColorValue || '');
const handleColorChange: EuiColorPickerProps['onChange'] = (text: string, { rgba, hex }) => {
setColor(text);