feat: implement ColorPicker component

src/components/ColorPicker/__test__/colorPicker.spec.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import ColorPicker from '../';
+import * as Commons from '../commons';
+
+describe('<ColorPicker />', () => {
+    it('should render all common component', () => {
+        const wrapper = mount(<ColorPicker />);
+        const componets = ['Saturation', 'Hue', 'Alpha', 'Hex', 'Rgba', 'DefaultColors'];
+
+        componets.forEach(component => {
+            expect(wrapper.find(Commons[component]).length).toBe(1);
+        });
+    });
+
+    it('should render all common component variant is not valid', () => {
+        const wrapper = mount(<ColorPicker variant="foo" />);
+        const componets = ['Saturation', 'Hue', 'Alpha', 'Hex', 'Rgba', 'DefaultColors'];
+
+        componets.forEach(component => {
+            expect(wrapper.find(Commons[component]).length).toBe(1);
+        });
+    });
+
+    it('should not render DefaultColors common component when defaultColors do not have some valid color', () => {
+        const wrapper = mount(<ColorPicker defaultColors={[]} />);
+        const componets = ['Saturation', 'Hue', 'Alpha', 'Hex', 'Rgba'];
+
+        componets.forEach(component => {
+            expect(wrapper.find(Commons[component]).length).toBe(1);
+        });
+        expect(wrapper.find(Commons.DefaultColors).length).toBe(0);
+    });
+
+    it('should render only the DefaultColors common component when the variant is colors-fixed', () => {
+        const wrapper = mount(<ColorPicker variant="colors-fixed" />);
+        const componets = ['Saturation', 'Hue', 'Alpha', 'Hex', 'Rgba'];
+
+        componets.forEach(component => {
+            expect(wrapper.find(Commons[component]).length).toBe(0);
+        });
+        expect(wrapper.find(Commons.DefaultColors).length).toBe(1);
+    });
+});

src/components/ColorPicker/commons/__test__/alpha.spec.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Provider } from '../../context';
+import { Alpha } from '../';
+
+describe('<Alpha />', () => {
+    it('should fire onChange with object containing the new alpha', () => {
+        const onChangeMockFn = jest.fn();
+        const context = {
+            rgba: [0, 0, 0, 1],
+            onChange: onChangeMockFn,
+        };
+        const wrapper = mount(
+            <Provider value={context}>
+                <Alpha />
+            </Provider>,
+        );
+
+        wrapper
+            .find('input[type="range"]')
+            .first()
+            .simulate('change', { target: { value: 1 } });
+        wrapper.update();
+
+        expect(onChangeMockFn).toHaveBeenCalledWith(
+            expect.objectContaining({
+                rgba: [0, 0, 0, 0.01],
+            }),
+        );
+    });
+
+    it('should fire onChange with object containing the default alpha', () => {
+        const onChangeMockFn = jest.fn();
+        const context = {
+            rgba: [0, 0, 0, 0.5],
+            onChange: onChangeMockFn,
+        };
+        const wrapper = mount(
+            <Provider value={context}>
+                <Alpha />
+            </Provider>,
+        );
+
+        wrapper
+            .find('input[type="range"]')
+            .first()
+            .simulate('change', { target: { value: 'foo' } });
+        wrapper.update();
+
+        expect(onChangeMockFn).toHaveBeenCalledWith(
+            expect.objectContaining({
+                rgba: [0, 0, 0, 1],
+            }),
+        );
+    });
+});

src/components/ColorPicker/commons/__test__/color.spec.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Color from '../defaultColors/color';
+
+describe('<Color />', () => {
+    it('should fire onChange with object containing the new color', () => {
+        const onChangeMockFn = jest.fn();
+        const wrapper = mount(<Color color="#000000" onChange={onChangeMockFn} />);
+
+        expect(
+            wrapper
+                .find('label')
+                .first()
+                .prop('style'),
+        ).toStrictEqual({ backgroundColor: '#000000' });
+        wrapper
+            .find('input[type="radio"]')
+            .first()
+            .simulate('change', { target: { checked: true } });
+        wrapper.update();
+
+        expect(onChangeMockFn).toHaveBeenCalledWith({
+            hex: '#000000',
+            rgba: [0, 0, 0, 1],
+            hsv: [0, 0, 0],
+        });
+    });
+
+    it('should return null when the color is not valid', () => {
+        const wrapper = mount(<Color color="foo" />);
+        expect(wrapper.text()).toBeNull();
+    });
+});

src/components/ColorPicker/commons/__test__/defaultColors.spec.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Provider } from '../../context';
+import { DefaultColors } from '../';
+import Color from '../defaultColors/color';
+
+describe('<DefaultColors />', () => {
+    it('should render first Color component with tabIndex 1 and isChecked true', () => {
+        const context = {
+            rgba: [0, 0, 0, 1],
+            tabIndex: 1,
+            colors: ['rgba(0, 0, 0, 1)', 'rgba(255, 255, 255, 1)'],
+        };
+        const wrapper = mount(
+            <Provider value={context}>
+                <DefaultColors />
+            </Provider>,
+        );
+
+        expect(
+            wrapper
+                .find(Color)
+                .at(0)
+                .props(),
+        ).toStrictEqual(
+            expect.objectContaining({
+                color: context.colors[0],
+                tabIndex: 1,
+                isChecked: true,
+            }),
+        );
+
+        expect(
+            wrapper
+                .find(Color)
+                .at(1)
+                .props(),
+        ).toStrictEqual(
+            expect.objectContaining({
+                color: context.colors[1],
+                tabIndex: -1,
+                isChecked: false,
+            }),
+        );
+    });
+});

src/components/ColorPicker/commons/__test__/hex.spec.js

@@ -0,0 +1,133 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Provider } from '../../context';
+import { Hex } from '../';
+
+describe('<Hex />', () => {
+    it('should fire onChange with object containing the new color', () => {
+        const onChangeMockFn = jest.fn();
+        const context = {
+            hex: '#ffffff',
+            onChange: onChangeMockFn,
+        };
+        const wrapper = mount(
+            <Provider value={context}>
+                <Hex />
+            </Provider>,
+        );
+
+        wrapper
+            .find('input[type="text"]')
+            .first()
+            .simulate('change', { target: { value: '000000' } });
+        wrapper.update();
+
+        expect(onChangeMockFn).toHaveBeenCalledWith({
+            hex: '#000000',
+            rgba: [0, 0, 0, 1],
+            hsv: [0, 0, 0],
+        });
+    });
+
+    it('should not fire onChange when value is not valid color', () => {
+        const onChangeMockFn = jest.fn();
+        const context = {
+            hex: '#ffffff',
+            onChange: onChangeMockFn,
+        };
+        const wrapper = mount(
+            <Provider value={context}>
+                <Hex />
+            </Provider>,
+        );
+
+        wrapper
+            .find('input[type="text"]')
+            .first()
+            .simulate('change', { target: { value: 'foo' } });
+        wrapper.update();
+
+        expect(
+            wrapper
+                .find('input[type="text"]')
+                .first()
+                .prop('value'),
+        ).toBe('foo');
+        expect(onChangeMockFn).not.toHaveBeenCalled();
+    });
+
+    it('should change value when fire blur event', () => {
+        const context = { hex: '#ffffff' };
+        const wrapper = mount(
+            <Provider value={context}>
+                <Hex />
+            </Provider>,
+        );
+
+        wrapper
+            .find('input[type="text"]')
+            .first()
+            .simulate('change', { target: { value: 'foo' } });
+        wrapper.update();
+
+        expect(
+            wrapper
+                .find('input[type="text"]')
+                .first()
+                .prop('value'),
+        ).toBe('foo');
+
+        wrapper
+            .find('input[type="text"]')
+            .first()
+            .simulate('blur');
+        wrapper.update();
+
+        expect(
+            wrapper
+                .find('input[type="text"]')
+                .first()
+                .prop('value'),
+        ).toBe('ffffff');
+    });
+
+    it('should not change value when component is focused', () => {
+        const context = { hex: '#ffffff' };
+        const wrapper = mount(
+            <Provider value={context}>
+                <Hex />
+            </Provider>,
+        );
+
+        expect(
+            wrapper
+                .find('input[type="text"]')
+                .first()
+                .prop('value'),
+        ).toBe('ffffff');
+
+        wrapper.setProps({ value: { hex: '#000000' } });
+        wrapper.update();
+
+        expect(
+            wrapper
+                .find('input[type="text"]')
+                .first()
+                .prop('value'),
+        ).toBe('000000');
+
+        wrapper
+            .find('input[type="text"]')
+            .first()
+            .simulate('focus');
+        wrapper.setProps({ value: { hex: '#eeeeee' } });
+        wrapper.update();
+
+        expect(
+            wrapper
+                .find('input[type="text"]')
+                .first()
+                .prop('value'),
+        ).toBe('000000');
+    });
+});

src/components/ColorPicker/commons/__test__/hue.spec.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Provider } from '../../context';
+import { Hue } from '../';
+
+describe('<Hue />', () => {
+    it('should fire onChange with object containing the new hue.', () => {
+        const onChangeMockFn = jest.fn();
+        const context = {
+            hsv: [0, 0, 0],
+            rgba: [0, 0, 0, 1],
+            onChange: onChangeMockFn,
+        };
+        const wrapper = mount(
+            <Provider value={context}>
+                <Hue />
+            </Provider>,
+        );
+
+        wrapper
+            .find('input[type="range"]')
+            .first()
+            .simulate('change', { target: { value: 100 } });
+        wrapper.update();
+
+        expect(onChangeMockFn).toHaveBeenCalledWith(
+            expect.objectContaining({
+                hsv: [100, 0, 0],
+            }),
+        );
+    });
+
+    it('should fire onChange with object containing the default hue.', () => {
+        const onChangeMockFn = jest.fn();
+        const context = {
+            hsv: [360, 0, 0],
+            rgba: [0, 0, 0, 1],
+            onChange: onChangeMockFn,
+        };
+        const wrapper = mount(
+            <Provider value={context}>
+                <Hue />
+            </Provider>,
+        );
+
+        wrapper
+            .find('input[type="range"]')
+            .first()
+            .simulate('change', { target: { value: 'foo' } });
+        wrapper.update();
+
+        expect(onChangeMockFn).toHaveBeenCalledWith(
+            expect.objectContaining({
+                hsv: [0, 0, 0],
+            }),
+        );
+    });
+});