<commit_before>import React from 'react';
import ReactDOM from 'react-dom';
import { shallow } from 'enzyme';

import AvatarEditor from 'react-avatar-editor';

import ImageEditor, { DEFAULT_SCALE, DEFAULT_POSITION } from '../index';
import EditorPlaceholder from '../EditorPlaceholder';

import getInitScale from '../utils/getInitScale';
import getInitPosition from '../utils/getInitPosition';

// from: https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/
const TRANSPARENT_IMAGE = (
    'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
);
const BLACK_IMAGE = (
    'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='
);

it('renders without crashing', () => {
    const div = document.createElement('div');
    const element = <ImageEditor />;

    ReactDOM.render(element, div);
});

it('shows placeholder with canvas height when image not specified', () => {
    const wrapper = shallow(<ImageEditor />);

    expect(wrapper.find(AvatarEditor).exists()).toBeFalsy();
    expect(wrapper.containsMatchingElement(
        <EditorPlaceholder
            canvasHeight={ImageEditor.defaultProps.height} />
    )).toBeTruthy();
});

it('shows loading placeholder with canvas height when set as loading', () => {
    const wrapper = shallow(<ImageEditor loading />);

    expect(wrapper.find(AvatarEditor).exists()).toBeFalsy();
    expect(wrapper.containsMatchingElement(
        <EditorPlaceholder
            loading
            canvasHeight={ImageEditor.defaultProps.height} />
    )).toBeTruthy();
});

it('shows to <AvatarEditor> for cropping given image', () => {
    const wrapper = shallow(<ImageEditor image={TRANSPARENT_IMAGE} />);

    expect(wrapper.find(AvatarEditor).exists()).toBeTruthy();
    expect(wrapper.find(AvatarEditor).prop('image')).toBe(TRANSPARENT_IMAGE);
});

it('shows scale slider when control is true', () => {
    const wrapper = shallow(<ImageEditor image={TRANSPARENT_IMAGE} />);
    expect(wrapper.find('input[type="range"]').exists()).toBeFalsy();

    wrapper.setProps({ control: true });
    expect(wrapper.find('input[type="range"]').exists()).toBeTruthy();
});

it('controls scale of <AvatarEditor> with slider while not read-only', () => {
    const wrapper = shallow(<ImageEditor control image={TRANSPARENT_IMAGE} />);
    expect(wrapper.find(AvatarEditor).prop('scale')).toBe(DEFAULT_SCALE);

    wrapper.find('input[type="range"]').simulate('change', {
        target: { value: 1.5 },
    });
    expect(wrapper.find(AvatarEditor).prop('scale')).toBe(1.5);
});

it('caches and controls position of <AvatarEditor> while not read-only', () => {
    const wrapper = shallow(<ImageEditor image={TRANSPARENT_IMAGE} />);
    expect(wrapper.find(AvatarEditor).prop('position')).toEqual(DEFAULT_POSITION);

    wrapper.find(AvatarEditor).simulate('positionChange', { x: 0.5, y: 0.5 });
    expect(wrapper.find(AvatarEditor).prop('position')).toEqual({ x: 0.5, y: 0.5 });

    wrapper.find(AvatarEditor).simulate('positionChange', { x: 0.2, y: 0.7 });
    expect(wrapper.find(AvatarEditor).prop('position')).toEqual({ x: 0.2, y: 0.7 });
});

it('blocks changes to <AvatarEditor> while in read-only mode', () => {
    const wrapper = shallow(
        <ImageEditor
            readOnly
            control
            image={TRANSPARENT_IMAGE} />
    );
    expect(wrapper.find('input[type="range"]').prop('disabled')).toBeTruthy();
    expect(wrapper.find(AvatarEditor).prop('position')).toEqual(DEFAULT_POSITION);

    wrapper.find(AvatarEditor).simulate('positionChange', { x: 0.5, y: 0.5 });
    expect(wrapper.find(AvatarEditor).prop('position')).toEqual(DEFAULT_POSITION);
});

it('notifies new cropping rect whenever <AvatarEditor> think it changes', () => {
    const CROP_RECT_FOO = { x: 0, y: 0, width: 1, height: 1 };

    const getCroppingRect = jest.fn(() => CROP_RECT_FOO);
    const handleCropChange = jest.fn();

    const wrapper = shallow(
        <ImageEditor
            image={TRANSPARENT_IMAGE}
            onCropChange={handleCropChange} />);

    // mock <AvatarEditor> instance API
    wrapper.instance().setCanvasRef({ getCroppingRect });

    wrapper.find(AvatarEditor).simulate('imageChange');
    expect(handleCropChange).toHaveBeenLastCalledWith(CROP_RECT_FOO);

    // should not break even when `onCropChange` isn't provided
    wrapper.setProps({ onCropChange: undefined });<commit_msg>Update tests for <ImageEditor> to cover read-only mode<commit_after>import React from 'react';
import ReactDOM from 'react-dom';
import { shallow } from 'enzyme';

import AvatarEditor from 'react-avatar-editor';

import ImageEditor, { DEFAULT_SCALE, DEFAULT_POSITION } from '../index';
import EditorPlaceholder from '../EditorPlaceholder';

import getInitScale from '../utils/getInitScale';
import getInitPosition from '../utils/getInitPosition';

// from: https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/
const TRANSPARENT_IMAGE = (
    'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
);
const BLACK_IMAGE = (
    'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='
);

it('renders without crashing', () => {
    const div = document.createElement('div');
    const element = <ImageEditor />;

    ReactDOM.render(element, div);
});

it('shows placeholder with canvas height when image not specified', () => {
    const wrapper = shallow(<ImageEditor />);

    expect(wrapper.find(AvatarEditor).exists()).toBeFalsy();
    expect(wrapper.containsMatchingElement(
        <EditorPlaceholder
            canvasHeight={ImageEditor.defaultProps.height} />
    )).toBeTruthy();
});

it('shows loading placeholder with canvas height when set as loading', () => {
    const wrapper = shallow(<ImageEditor loading />);

    expect(wrapper.find(AvatarEditor).exists()).toBeFalsy();
    expect(wrapper.containsMatchingElement(
        <EditorPlaceholder
            loading
            canvasHeight={ImageEditor.defaultProps.height} />
    )).toBeTruthy();
});

it('shows to <AvatarEditor> for cropping given image', () => {
    const wrapper = shallow(<ImageEditor image={TRANSPARENT_IMAGE} />);

    expect(wrapper.find(AvatarEditor).exists()).toBeTruthy();
    expect(wrapper.find(AvatarEditor).prop('image')).toBe(TRANSPARENT_IMAGE);
});

it('shows scale slider when control is true', () => {
    const wrapper = shallow(<ImageEditor image={TRANSPARENT_IMAGE} />);
    expect(wrapper.find('input[type="range"]').exists()).toBeFalsy();

    wrapper.setProps({ control: true });
    expect(wrapper.find('input[type="range"]').exists()).toBeTruthy();
});

it('controls scale of <AvatarEditor> with slider while not read-only', () => {
    const wrapper = shallow(<ImageEditor control image={TRANSPARENT_IMAGE} />);
    expect(wrapper.find(AvatarEditor).prop('scale')).toBe(DEFAULT_SCALE);

    wrapper.find('input[type="range"]').simulate('change', {
        target: { value: 1.5 },
    });
    expect(wrapper.find(AvatarEditor).prop('scale')).toBe(1.5);
});

it('caches and controls position of <AvatarEditor> while not read-only', () => {
    const wrapper = shallow(<ImageEditor image={TRANSPARENT_IMAGE} />);
    expect(wrapper.find(AvatarEditor).prop('position')).toEqual(DEFAULT_POSITION);

    wrapper.find(AvatarEditor).simulate('positionChange', { x: 0.5, y: 0.5 });
    expect(wrapper.find(AvatarEditor).prop('position')).toEqual({ x: 0.5, y: 0.5 });

    wrapper.find(AvatarEditor).simulate('positionChange', { x: 0.2, y: 0.7 });
    expect(wrapper.find(AvatarEditor).prop('position')).toEqual({ x: 0.2, y: 0.7 });
});

it('blocks changes to <AvatarEditor> while in read-only mode', () => {
    const wrapper = shallow(
        <ImageEditor
            readOnly
            control
            image={TRANSPARENT_IMAGE} />
    );
    expect(wrapper.find('input[type="range"]').prop('disabled')).toBeTruthy();
    expect(wrapper.find(AvatarEditor).prop('position')).toEqual(DEFAULT_POSITION);

    wrapper.find(AvatarEditor).simulate('positionChange', { x: 0.5, y: 0.5 });
    expect(wrapper.find(AvatarEditor).prop('position')).toEqual(DEFAULT_POSITION);
});

it('notifies new cropping rect whenever <AvatarEditor> think it changes', () => {
    const CROP_RECT_FOO = { x: 0, y: 0, width: 1, height: 1 };

    const getCroppingRect = jest.fn(() => CROP_RECT_FOO);
    const handleCropChange = jest.fn();

    const wrapper = shallow(
        <ImageEditor
            image={TRANSPARENT_IMAGE}
            onCropChange={handleCropChange} />);

    // mock <AvatarEditor> instance API
    wrapper.instance().setCanvasRef({ getCroppingRect });

    wrapper.find(AvatarEditor).simulate('imageChange');
    expect(handleCropChange).toHaveBeenLastCalledWith(CROP_RECT_FOO);
    expect(handleCropChange).toHaveBeenCalledTimes(1);

    // should not notify under read-only mode
    wrapper.setProps({ readOnly: true });
    wrapper.find(AvatarEditor).simulate('imageChange');
    expect(handleCropChange).toHaveBeenCalledTimes(1);

    // should not break even when `onCropChange` isn't provided
    wrapper.setProps({ readOnly: false, onCropChange: undefined });
{'fraction_non_alphanumeric': 0.15821058374249863, 'fraction_numerical': 0.00894708128750682, 'mean_word_length': 4.385428907168038, 'pattern_counts': {'":': 0, '<': 38, '<?xml version=': 0, '>': 58, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 2, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2760168', 'n_tokens_mistral': 2886, 'n_tokens_neox': 2810, 'n_words': 515}