Add test to ensure that the input text of the picker is set up correctly

stratoula · stratoula · commit f0d77316bfa4 · 2020-06-25T13:08:34.000+03:00
diff --git a/src/plugins/vis_type_timeseries/public/application/components/color_picker.test.tsx b/src/plugins/vis_type_timeseries/public/application/components/color_picker.test.tsx
@@ -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} />);
diff --git a/src/plugins/vis_type_timeseries/public/application/components/color_picker.tsx b/src/plugins/vis_type_timeseries/public/application/components/color_picker.tsx
@@ -46,7 +46,7 @@ export function ColorPicker({ name, value, disableTrash = false, onChange }: Col
   const initialColorValue = value?.includes('rgba')
     ? value.replace(COMMAS_NUMS_ONLY_RE, '')
     : value;
-  const [color, setColor] = useState(initialColorValue);
+  const [color, setColor] = useState(initialColorValue || '');
 
   const handleColorChange: EuiColorPickerProps['onChange'] = (text: string, { rgba, hex }) => {
     setColor(text);
