SymphonyElectron/spec/annotateArea.spec.tsx

import { mount } from 'enzyme';
import * as React from 'react';
import AnnotateArea from '../src/renderer/components/annotate-area';
import { Tool } from '../src/renderer/components/snipping-tool';
import { ipcRenderer } from './__mocks__/electron';

const defaultProps = {
    paths: [],
    highlightColor: 'rgba(233, 0, 0, 0.64)',
    penColor: 'rgba(38, 196, 58, 1)',
    onChange: jest.fn(),
    imageDimensions: { width: 800, height: 800 },
    annotateAreaDimensions: { width: 800, height: 800 },
    chosenTool: Tool.pen,
    screenSnippetPath: 'very-nice-path',
};

afterEach(() => {
    jest.clearAllMocks();
});

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

    it('should call onChange when drawn on annotate area', () => {
        const wrapper = mount(<AnnotateArea {...defaultProps} />);
        const area = wrapper.find('[data-testid="annotate-area"]');
        area.simulate('mousedown', { pageX: 2, pageY: 49 });
        area.simulate('mouseup');
        expect(defaultProps.onChange).toHaveBeenCalledTimes(1);
    });

    it('should call onChange with correct pen props if drawn drawn on annotate area with pen', () => {
        const wrapper = mount(<AnnotateArea {...defaultProps} />);
        const area = wrapper.find('[data-testid="annotate-area"]');
        area.simulate('mousedown', { pageX: 2, pageY: 49 });
        area.simulate('mouseup');
        expect(defaultProps.onChange).toHaveBeenCalledWith([{
            color: 'rgba(38, 196, 58, 1)',
            key: 'path0',
            points: [{ x: 0, y: 0 }],
            shouldShow: true,
            strokeWidth: 5,
        }]);
    });

    it('should call onChange with correct highlight props if drawn drawn on annotate area with highlight', () => {
        const highlightProps = {
            paths: [],
            highlightColor: 'rgba(233, 0, 0, 0.64)',
            penColor: 'rgba(38, 196, 58, 1)',
            onChange: jest.fn(),
            imageDimensions: { width: 800, height: 800 },
            annotateAreaDimensions: { width: 800, height: 800 },
            chosenTool: Tool.highlight,
            screenSnippetPath: 'very-nice-path',
        };
        const wrapper = mount(<AnnotateArea {...highlightProps} />);
        const area = wrapper.find('[data-testid="annotate-area"]');
        area.simulate('mousedown', { pageX: 2, pageY: 49 });
        area.simulate('mouseup');
        expect(highlightProps.onChange).toHaveBeenCalledWith([{
            color: 'rgba(233, 0, 0, 0.64)',
            key: 'path0',
            points: [{ x: 0, y: 0 }],
            shouldShow: true,
            strokeWidth: 28,
        }]);
    });

    it('should render path if path is provided in props', () => {
        const pathProps = {
            paths: [{
                points: [{ x: 0, y: 0 }],
                shouldShow: true,
                strokeWidth: 5,
                color: 'rgba(233, 0, 0, 0.64)',
                key: 'path0',
            }],
            highlightColor: 'rgba(233, 0, 0, 0.64)',
            penColor: 'rgba(38, 196, 58, 1)',
            onChange: jest.fn(),
            imageDimensions: { width: 800, height: 800 },
            annotateAreaDimensions: { width: 800, height: 800 },
            chosenTool: Tool.highlight,
            screenSnippetPath: 'very-nice-path',
        };
        const wrapper = mount(<AnnotateArea {...pathProps} />);
        expect(wrapper.find('[data-testid="path0"]').exists()).toEqual(true);
    });

    it('should not render any path if no path is provided in props', () => {
        const wrapper = mount(<AnnotateArea {...defaultProps} />);
        expect(wrapper.find('[data-testid="path0"]').exists()).toEqual(false);
    });

    it('should call onChange with hidden path if clicked on path with tool eraser', () => {
        const pathProps = {
            paths: [{
                points: [{ x: 0, y: 0 }],
                shouldShow: true,
                strokeWidth: 5,
                color: 'rgba(233, 0, 0, 0.64)',
                key: 'path0',
            }],
            highlightColor: 'rgba(233, 0, 0, 0.64)',
            penColor: 'rgba(38, 196, 58, 1)',
            onChange: jest.fn(),
            imageDimensions: { width: 800, height: 800 },
            annotateAreaDimensions: { width: 800, height: 800 },
            chosenTool: Tool.eraser,
            screenSnippetPath: 'very-nice-path',
        };
        const wrapper = mount(<AnnotateArea {...pathProps} />);
        const path = wrapper.find('[data-testid="path0"]');
        path.simulate('click');
        expect(pathProps.onChange).toHaveBeenCalledWith([{
            color: 'rgba(233, 0, 0, 0.64)',
            key: 'path0',
            points: [{ x: 0, y: 0 }],
            shouldShow: false,
            strokeWidth: 5,
        }]);
    });

    it('should send annotate_erased if clicked on path with tool eraser', () => {
        const spy = jest.spyOn(ipcRenderer, 'send');
        const pathProps = {
            paths: [{
                points: [{ x: 0, y: 0 }],
                shouldShow: true,
                strokeWidth: 5,
                color: 'rgba(233, 0, 0, 0.64)',
                key: 'path0',
            }],
            highlightColor: 'rgba(233, 0, 0, 0.64)',
            penColor: 'rgba(38, 196, 58, 1)',
            onChange: jest.fn(),
            imageDimensions: { width: 800, height: 800 },
            annotateAreaDimensions: { width: 800, height: 800 },
            chosenTool: Tool.eraser,
            screenSnippetPath: 'very-nice-path',
        };
        const wrapper = mount(<AnnotateArea {...pathProps} />);
        const path = wrapper.find('[data-testid="path0"]');
        const expectedValue = { type: 'annotate_erased', element: 'screen_capture_annotate' };
        path.simulate('click');
        expect(spy).toBeCalledWith('snippet-analytics-data', expectedValue);
    });

    it('should send annotate_added_pen event when drawn with pen', () => {
        const spy = jest.spyOn(ipcRenderer, 'send');
        const expectedValue = { type: 'annotate_added_pen', element: 'screen_capture_annotate' };
        const wrapper = mount(<AnnotateArea {...defaultProps} />);
        const area = wrapper.find('[data-testid="annotate-area"]');
        area.simulate('mousedown', { pageX: 2, pageY: 49 });
        area.simulate('mouseup');
        expect(spy).toBeCalledWith('snippet-analytics-data', expectedValue);
    });

    it('should send annotate_added_highlight event when drawn with highlight', () => {
        const highlightProps = {
            paths: [],
            highlightColor: 'rgba(233, 0, 0, 0.64)',
            penColor: 'rgba(38, 196, 58, 1)',
            onChange: jest.fn(),
            imageDimensions: { width: 800, height: 800 },
            annotateAreaDimensions: { width: 800, height: 800 },
            chosenTool: Tool.highlight,
            screenSnippetPath: 'very-nice-path',
        };
        const spy = jest.spyOn(ipcRenderer, 'send');
        const expectedValue = { type: 'annotate_added_highlight', element: 'screen_capture_annotate' };
        const wrapper = mount(<AnnotateArea {...highlightProps} />);
        const area = wrapper.find('[data-testid="annotate-area"]');
        area.simulate('mousedown', { pageX: 2, pageY: 49 });
        area.simulate('mouseup');
        expect(spy).toBeCalledWith('snippet-analytics-data', expectedValue);
    });
});