siesta-lite/examples/react-google-fonts-space/src/tests/components/color-picker.t.js

Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers

import 'raf/polyfill';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import React from 'react';
import renderer from 'react-test-renderer';
import { shallow } from 'enzyme';
import { SketchPicker } from 'react-color';
import ColorPicker from '../../Components/ColorPicker';

configure({ adapter: new Adapter() });

describe('ColorPicker', t => {
    let colorPickerProps;

    t.beforeEach(() => {
        colorPickerProps = {
            r: '0',
            g: '0',
            b: '0',
            a: '1',
        }
    });

    t.it('handleOnClick should toggle displayColorPicker state', t => {
        let wrapper = shallow(<ColorPicker color={colorPickerProps} />).first().shallow();
        let elem = wrapper.find('.ColorPicker__Swatch');

        elem.simulate("click");
        t.expect(wrapper.instance().state.displayColorPicker).toBeTruthy()

        elem.simulate("click");
        t.expect(wrapper.instance().state.displayColorPicker).toBeFalsy()
    });


    t.it('handleOnChange should set body bg if isBackgroundColorPicker is true', t => {
        let wrapper = shallow(<ColorPicker color={colorPickerProps} isBackgroundColorPicker />).first().shallow();
        wrapper.instance().handleOnChange({ rgb:{r: '0', g: '0', b: '0', a: '.3' }});

        t.expect(wrapper.instance().state.color).toEqual({"a": ".3", "b": "0", "g": "0", "r": "0"});

        t.expect(document.body.style.backgroundColor).toEqual("rgba(0, 0, 0, 0.3)")

        document.body.style = null
    })


    t.it('handleOnChange should call call back if isBackgroundColorPicker is false', t => {
        let handleChangeColor = t.createSpy();
        let element = shallow(<ColorPicker color={colorPickerProps} isBackgroundColorPicker={false} handleChangeColor={handleChangeColor} />).first().shallow();
        element.update();
        element.instance().handleOnChange({ rgb:{r: '0', g: '0', b: '0', a: '.3' }});
        t.expect(document.body.style.backgroundColor).toEqual("");
        t.expect(handleChangeColor).toHaveBeenCalled()
    })
});