feat(color-picker): add tests for ColorPicker

src/components/ColorPicker.js

@@ -50,7 +50,7 @@ const ColorPicker = forwardRef((props, ref) => {
             data-testid="input-color-picker"
             value={!isLoading ? color : ''}
             ref={ref}
-            placeholder={!isLoading && placeholder}
+            placeholder={!isLoading ? placeholder : ''}
             onChange={handleChangeInput}
           />
         )}
@@ -105,12 +105,10 @@ ColorPicker.propTypes = {
   /**
    *  Array of colors to be suggested on the ColorPicker
    */
-  presetColors: PropTypes.arrayOf(
-    PropTypes.oneOf(
-      PropTypes.shape({ color: PropTypes.string, title: PropTypes.string }),
-      PropTypes.string
-    )
-  ),
+  presetColors: PropTypes.oneOfType([
+    PropTypes.arrayOf({ color: PropTypes.string, title: PropTypes.string }),
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
   /**
    *  Boolean to show or not the ancillary Input of ColorPicker
    */

test/components/ColorPicker.test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ColorPicker from '../../src/components/ColorPicker';
+
+describe('<ColorPicker>', () => {
+  it('should render a basic ColorPicker', () => {
+    render(<ColorPicker />);
+    const colorPicker = screen.getByTestId('color-picker');
+    expect(colorPicker).toBeTruthy();
+  });
+
+  it('should render a basic ColorPicker with a loading spinner', () => {
+    render(<ColorPicker isLoading />);
+    const colorPicker = screen.getByTestId('color-picker');
+    expect(colorPicker).toBeTruthy();
+    const spinner = screen.getByTestId('spinner');
+    expect(spinner).toBeTruthy();
+  });
+
+  it('should render a basic ColorPicker with input', () => {
+    render(<ColorPicker showInput />);
+    const colorPicker = screen.getByTestId('color-picker');
+    expect(colorPicker).toBeTruthy();
+    const inputElement = screen.getByTestId('input-element');
+    expect(inputElement).toBeTruthy();
+  });
+
+  it('should render a basic ColorPicker with an input and a loading spinner', () => {
+    render(<ColorPicker showInput isLoading />);
+    const colorPicker = screen.getByTestId('color-picker');
+    expect(colorPicker).toBeTruthy();
+    const inputElement = screen.getByTestId('input-element');
+    expect(inputElement).toBeTruthy();
+    const spinner = screen.getByTestId('spinner');
+    expect(spinner).toBeTruthy();
+  });
+
+  it('should render a basic ColorPicker call mockFunction onChangePicker when a color is changed on popover', () => {
+    const onChangePickerFunction = jest.fn();
+    const color = 'BBBCCC';
+    const { container } = render(
+      <ColorPicker onChangePicker={onChangePickerFunction} />
+    );
+    const colorPicker = screen.getByTestId('color-picker');
+    fireEvent.click(colorPicker);
+    const inputHex = container.querySelector('#rc-editable-input-1');
+    fireEvent.change(inputHex, { target: { value: color } });
+    expect(screen.getByDisplayValue(color)).toBeTruthy();
+  });
+
+  it('should render a basic ColorPicker call mockFunction onChangeInput when a color is changed on input', () => {
+    const onChangeInputFunction = jest.fn();
+    const color = 'BBBCCC';
+    render(<ColorPicker showInput onChangeInput={onChangeInputFunction} />);
+    const inputColorPicker = screen.getByTestId('input-element');
+    fireEvent.change(inputColorPicker, { target: { value: color } });
+    expect(screen.getByDisplayValue(color)).toBeTruthy();
+  });
+});

test/components/FormControl.test.js

@@ -52,6 +52,23 @@ describe('<FormControl>', () => {
     });
   });
 
+  describe('Color Picker', () => {
+    it('Should call onChange when some color change through input', () => {
+      const mockCallBack = jest.fn();
+      render(
+        <FormControl
+          control="ColorPicker"
+          showInput
+          onChangeInput={mockCallBack}
+        />
+      );
+      fireEvent.change(screen.getByTestId('input-element'), {
+        target: { value: '#AAA' },
+      });
+      expect(mockCallBack).toHaveBeenCalled();
+    });
+  });
+
   describe('date picker', () => {
     it('Should call onChange when some date change', () => {
       const mockCallBack = jest.fn();