SymphonyElectron/spec/colorPickerPill.spec.tsx

import { shallow } from 'enzyme';
import * as React from 'react';
import ColorPickerPill from '../src/renderer/components/color-picker-pill';

const defaultProps = {
    availableColors: [
        { rgbaColor: 'rgba(0, 142, 255, 0.64)' },
        { rgbaColor: 'rgba(38, 196, 58, 0.64)' },
        { rgbaColor: 'rgba(246, 178, 2, 0.64)' },
        { rgbaColor: 'rgba(233, 0, 0, 0.64)' },
    ],
    onChange: jest.fn(),
};

describe('<ColorPickerPill/>', () => {
    it('should render correctly', () => {
        const wrapper = shallow(<ColorPickerPill {...defaultProps} />);
        expect(wrapper).toMatchSnapshot();
    });

    it('should call onChange when clicked on a color dot', () => {
        const wrapper = shallow(<ColorPickerPill {...defaultProps} />);
        wrapper
            .find('[data-testid="colorDot rgba(233, 0, 0, 0.64)"]')
            .simulate('click');
        expect(defaultProps.onChange).toHaveBeenCalledTimes(1);
    });

    it('should render chosen dots as larger', () => {
        const chosenColorProps = {
            availableColors: [{ rgbaColor: 'rgba(0, 0, 0, 0.64)', chosen: true }, { rgbaColor: 'rgba(233, 0, 0, 0.64)' },
            ],
            onChange: jest.fn(),
        };
        const wrapper = shallow(<ColorPickerPill {...chosenColorProps} />);
        expect(wrapper).toMatchSnapshot();
    });

    it('should render outlined dot if provided in props', () => {
        const outlinedColorProps = {
            availableColors: [{ rgbaColor: 'rgba(246, 178, 2, 1)' },
            { rgbaColor: 'rgba(255, 255, 255, 1)', outline: 'rgba(0, 0, 0, 1)' },
            ],
            onChange: jest.fn(),
        };
        const wrapper = shallow(<ColorPickerPill {...outlinedColorProps} />);
        expect(wrapper).toMatchSnapshot();
    });
});