From b7b90ba279de59fa955ef83b79d6a789196f3878 Mon Sep 17 00:00:00 2001
From: Luis Valero <luivalgar@gmail.com>
Date: Fri, 23 Sep 2022 09:21:26 +0200
Subject: [PATCH] feat(color-picker): add tests for ColorPicker

---
 src/components/ColorPicker.js       | 12 +++---
 test/components/ColorPicker.test.js | 59 +++++++++++++++++++++++++++++
 test/components/FormControl.test.js | 17 +++++++++
 3 files changed, 81 insertions(+), 7 deletions(-)
 create mode 100644 test/components/ColorPicker.test.js

diff --git a/src/components/ColorPicker.js b/src/components/ColorPicker.js
index d976257c..a3a4df2f 100644
--- a/src/components/ColorPicker.js
+++ b/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
    */
diff --git a/test/components/ColorPicker.test.js b/test/components/ColorPicker.test.js
new file mode 100644
index 00000000..d2e35c06
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/test/components/FormControl.test.js b/test/components/FormControl.test.js
index cb4af95e..ef707371 100644
--- a/test/components/FormControl.test.js
+++ b/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();