@progress/kendo-react-inputs 5.6.0-dev.202208251227 → 5.7.0-sig.202208281415

package/src/textarea/TextArea.tsx

@@ -0,0 +1,263 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+
+import {
+    guid,
+    classNames,
+    getTabIndex,
+    dispatchEvent,
+    useDir,
+    createPropsContext,
+    usePropsContext,
+    kendoThemeMaps
+} from '@progress/kendo-react-common';
+
+import { TextAreaProps } from './interfaces/TextAreaProps';
+import { TextAreaChangeEvent } from './interfaces/TextAreaChangeEvent';
+import { TextAreaFocusEvent } from './interfaces/TextAreaFocusEvent';
+import { TextAreaBlurEvent } from './interfaces/TextAreaBlurEvent';
+
+/**
+ * @hidden
+ */
+export interface TextAreaHandle {
+    element: React.RefObject<HTMLTextAreaElement | null>;
+    focus: any;
+    name?: string | null;
+    value?: string;
+}
+
+/**
+ * Represents the PropsContext of the `TextArea` component.
+ * Used for global configuration of all `TextArea` instances.
+ *
+ * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
+ */
+export const TextAreaPropsContext = createPropsContext<TextAreaProps>();
+
+
+/**
+ * Represents the [KendoReact TextArea component]({% slug overview_textarea %}).
+ *
+ *
+ * Accepts properties of type [TextAreaProps]({% slug api_inputs_textareaprops %}).
+ * Obtaining the `ref` returns an object of type [TextAreaHandle]({% slug api_inputs_textareahandle %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *     render() {
+ *         return <TextArea />;
+ *     }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export const TextArea = React.forwardRef<TextAreaHandle | null, TextAreaProps>((directProps, target) => {
+    const props = usePropsContext<TextAreaProps>(TextAreaPropsContext, directProps);
+
+    const {
+        size, rounded, fillMode,
+        ariaDescribedBy, ariaLabelledBy, autoSize, className, defaultValue, disabled,
+        readOnly, required, rows, id, name, placeholder, style, tabIndex, value, valid,
+        validationMessage, validityStyles, onChange, onFocus, onBlur,
+        // Removed to support direct use in Form Field component
+        visited, touched, modified,
+        ...others
+    } = props as any;
+
+    const elementRef = React.useRef<HTMLTextAreaElement>(null);
+    const focusElement = React.useCallback(
+        () => {
+            if (elementRef.current) {
+                elementRef.current.focus();
+            }
+        },
+        []
+    );
+
+
+    const [stateValue, setStateValue] = React.useState(defaultValue);
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : stateValue;
+
+    const getImperativeHandle = React.useCallback(
+        (): TextAreaHandle => {
+            return ({
+                element: elementRef,
+                focus: focusElement,
+                get value() { return currentValue; },
+                get name() { return elementRef.current && elementRef.current.name; }
+            }
+            );
+        },
+        [focusElement, currentValue]
+    );
+
+    React.useImperativeHandle(target, getImperativeHandle);
+
+    const [textAreaHeight, setTextAreaHeight] = React.useState('auto');
+
+    const calculatedId = React.useMemo(() => guid(), []);
+    const dir = useDir(elementRef, props.dir);
+    const isValid = valid !== undefined ?
+        valid :
+        !required ?
+            true :
+            currentValue ? true : false;
+
+    React.useEffect(
+        () => {
+            if (elementRef.current && elementRef.current.setCustomValidity) {
+                elementRef.current.setCustomValidity(
+                    isValid
+                        ? ''
+                        : (validationMessage || '')
+                );
+            }
+        },
+        [isValid, validationMessage]
+    );
+
+    React.useLayoutEffect(
+        () => {
+            if (elementRef.current) {
+                setTextAreaHeight(`${elementRef.current.scrollHeight}px`);
+            }
+        },
+        [currentValue]
+    );
+
+    const handleChange = React.useCallback(
+        (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+            let newValue = event.target.value;
+
+            if (!isControlled && !disabled) {
+                setTextAreaHeight('auto');
+                setStateValue(newValue);
+            }
+            if (onChange && !disabled) {
+                dispatchEvent<TextAreaChangeEvent, TextAreaHandle>(
+                    onChange,
+                    event,
+                    {
+                        ...getImperativeHandle(),
+                        value: newValue
+                    },
+                    { value: newValue }
+                );
+            }
+        },
+        [setStateValue, onChange, disabled, isControlled]
+    );
+
+    const handleFocus = React.useCallback(
+        (event: React.FocusEvent<HTMLTextAreaElement>) => {
+            if (onFocus && !disabled) {
+                dispatchEvent<TextAreaFocusEvent, TextAreaHandle>(
+                    onFocus,
+                    event,
+                    getImperativeHandle(),
+                    undefined
+                );
+            }
+        },
+        [onFocus, disabled]
+    );
+
+    const handleBlur = React.useCallback(
+        (event: React.FocusEvent<HTMLTextAreaElement>) => {
+            if (onBlur && !disabled) {
+                dispatchEvent<TextAreaBlurEvent, TextAreaHandle>(
+                    onBlur,
+                    event,
+                    getImperativeHandle(),
+                    undefined
+                );
+            }
+        },
+        [onBlur, disabled]
+    );
+
+    const textAreaProps: React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> = {
+        id: id || calculatedId,
+        name: name,
+        className: 'k-input-inner !k-overflow-auto',
+        ref: elementRef,
+        disabled: disabled,
+        rows: rows,
+        placeholder: placeholder,
+        readOnly: readOnly,
+        required: required,
+        tabIndex: getTabIndex(tabIndex, disabled),
+        style: autoSize ? { resize: 'none', overflow: 'hidden', height: textAreaHeight } : {},
+        'aria-labelledby': ariaLabelledBy,
+        'aria-describedby': ariaDescribedBy,
+        'aria-multiline': true,
+        'aria-disabled': disabled || undefined,
+        value: isControlled ? value : stateValue,
+        ...others,
+
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur
+    };
+
+    return (
+      <span
+        className={classNames(
+            'k-input',
+            'k-textarea',
+            {
+                [`k-input-${kendoThemeMaps.sizeMap[size!] || size}`]: size,
+                [`k-input-${fillMode}`]: fillMode,
+                [`k-rounded-${kendoThemeMaps.roundedMap[rounded!] || rounded}`]: rounded,
+                'k-invalid': !(isValid || validityStyles !== undefined || validityStyles === true),
+                'k-required': required,
+                'k-disabled': disabled
+            },
+            className
+        )}
+        style={style}
+        dir={dir}
+      >
+        <textarea {...textAreaProps} />
+      </span>
+    );
+});
+
+(TextArea as React.ComponentType).propTypes = {
+    ariaDescribedBy: PropTypes.string,
+    ariaLabelledBy: PropTypes.string,
+    autoSize: PropTypes.bool,
+    className: PropTypes.string,
+    defaultValue: PropTypes.string,
+    dir: PropTypes.string,
+    disabled: PropTypes.bool,
+    readOnly: PropTypes.bool,
+    rows: PropTypes.number,
+    id: PropTypes.string,
+    name: PropTypes.string,
+    placeholder: PropTypes.string,
+    style: PropTypes.object,
+    tabIndex: PropTypes.number,
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.arrayOf(PropTypes.string),
+        PropTypes.number
+    ]),
+    onChange: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    size: PropTypes.oneOf<TextAreaProps['size']>([null, 'small', 'medium', 'large']),
+    rounded: PropTypes.oneOf<TextAreaProps['rounded']>([null, 'small', 'medium', 'large', 'full']),
+    fillMode: PropTypes.oneOf<TextAreaProps['fillMode']>([null, 'solid', 'flat', 'outline'])
+};
+
+const defaultProps = {
+    size: 'medium' as TextAreaProps['size'],
+    rounded: 'medium' as TextAreaProps['rounded'],
+    fillMode: 'solid' as TextAreaProps['fillMode']
+};
+TextArea.displayName = 'KendoTextArea';
+TextArea.defaultProps = defaultProps;

package/src/textarea/interfaces/TextAreaBlurEvent.ts

@@ -0,0 +1,7 @@
+import { TextAreaHandle } from './../TextArea';
+import { BaseEvent } from '@progress/kendo-react-common';
+
+/**
+ * The arguments for the `onBlur` TextArea event.
+ */
+export interface TextAreaBlurEvent extends BaseEvent<TextAreaHandle> { }

package/src/textarea/interfaces/TextAreaChangeEvent.ts

@@ -0,0 +1,12 @@
+import { TextAreaHandle } from './../TextArea';
+import { BaseEvent } from '@progress/kendo-react-common';
+
+/**
+ * The arguments for the `onChange` TextArea event.
+ */
+export interface TextAreaChangeEvent extends BaseEvent<TextAreaHandle> {
+    /**
+     * The new value of the TextArea.
+     */
+    value: string;
+}

package/src/textarea/interfaces/TextAreaFocusEvent.ts

@@ -0,0 +1,7 @@
+import { TextAreaHandle } from './../TextArea';
+import { BaseEvent } from '@progress/kendo-react-common';
+
+/**
+ * The arguments for the `onFocus` TextArea event.
+ */
+export interface TextAreaFocusEvent extends BaseEvent<TextAreaHandle> { }

package/src/textarea/interfaces/TextAreaProps.tsx

@@ -0,0 +1,131 @@
+import { FormComponentProps } from '@progress/kendo-react-common';
+import { TextAreaBlurEvent } from './TextAreaBlurEvent';
+import { TextAreaChangeEvent } from './TextAreaChangeEvent';
+import { TextAreaFocusEvent } from './TextAreaFocusEvent';
+
+/**
+ * @hidden
+ */
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+/**
+ * Represents the props of the [KendoReact TextArea component]({% slug overview_textarea %}).
+ */
+export interface TextAreaProps extends FormComponentProps,
+    Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur'> {
+    /* eslint-disable max-len */
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Specifies if the textarea element will resize its height automatically ([see example]({% slug sizing_textarea %})).
+     * Defaults to `false`.
+     */
+    autoSize?: boolean;
+    /**
+     * Specifies a list of CSS classes that will be added to the TextArea.
+     */
+    className?: string;
+    /**
+     * The default value of the TextArea ([see example]({% slug default_textarea %})).
+     */
+    defaultValue?: string | string[] | number;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Specifies if the TextArea is disabled ([see example]({% slug disabled_textarea %})).
+     */
+    disabled?: boolean;
+    /**
+     * Sets the read-only state of the TextArea.
+     */
+    readOnly?: boolean;
+    /**
+     * Specifies an exact height size for the TextArea to take ([see example]({% slug sizing_textarea %})).
+     */
+    rows?: number;
+    /**
+     * Sets the `id` of the TextArea.
+     */
+    id?: string;
+    /**
+     * Specifies the `name` property of the `textarea` DOM element.
+     *
+     * This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+     */
+    name?: string;
+    /**
+     * The hint that is displayed when the TextArea is empty.
+     */
+    placeholder?: string;
+    /**
+     * Sets additional CSS styles to the TextArea.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `tabIndex` property of the TextArea.
+     * Defaults to `0`.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the value to be submitted ([see example]({% slug controlled_textarea %})).
+     */
+    value?: string | string[] | number;
+    /**
+     * The event handler that will be fired when the changes the selected value.
+     */
+    onChange?: (event: TextAreaChangeEvent) => void;
+    /**
+     * The event handler that will be fired when TextArea is focused.
+     */
+    onFocus?: (event: TextAreaFocusEvent) => void;
+    /**
+     * The event handler that will be fired when TextArea is blurred.
+     */
+    onBlur?: (event: TextAreaBlurEvent) => void;
+    /**
+     * Configures the `size` of the TextArea.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the TextArea.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the TextArea.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
+}

package/src/utils.ts

@@ -0,0 +1,16 @@
+// Polyfill for PropTypes.null
+/**
+ * @hidden
+ */
+export function nullable(subRequirement: any) {
+    const check = (required: any, props: any, key: any, ...rest: any) => {
+        if (props[key] === null) {
+            return null;
+        }
+        const sub = required ? subRequirement.isRequired : subRequirement;
+        return sub(props, key, ...rest);
+    };
+    const fn: any = check.bind(null, false);
+    fn.isRequired = check.bind(null, true);
+    return fn;
+}

package/test/Checkbox.tsx

@@ -0,0 +1,252 @@
+import * as React from 'react';
+import { Enzyme } from '@progress//kendo-react-tasks/test-utils';
+const { mount, shallow } = Enzyme;
+
+import { Checkbox } from '../src/main';
+
+const CHECKBOX = '.k-checkbox';
+const CHECKBOX_LABEL = '.k-checkbox-label';
+
+describe('Checkbox', () => {
+    let result: any;
+    beforeEach(() => {
+        result = null;
+    });
+
+    it('should render an input', () => {
+        result = mount(<Checkbox />);
+
+        expect(result.find(CHECKBOX).type()).toEqual('input');
+    });
+    it('should render a label', () => {
+        result = mount(<Checkbox label="test" />);
+
+        expect(result.find(CHECKBOX_LABEL).type()).toEqual('label');
+        expect(result.find(CHECKBOX_LABEL).text()).toEqual('test');
+    });
+    it('should render id to the input element by default', () => {
+        result = mount(<Checkbox />);
+
+        expect(result.find(CHECKBOX).props().id).toBeTruthy();
+    });
+    it('should render id to the input element', () => {
+        result = mount(<Checkbox id={'foo'} />);
+
+        expect(result.find(CHECKBOX).props().id).toBeTruthy();
+    });
+    it('should render name attribute on the input element', () => {
+        result = mount(<Checkbox name={'baz'} />);
+
+        expect(result.find(CHECKBOX).at(0).props().name).toEqual('baz');
+    });
+    it('should set id as `for` prop of the label element by default', () => {
+        result = mount(<Checkbox label="test" />);
+
+        expect(result.find(CHECKBOX_LABEL).props().htmlFor).toBeTruthy();
+        expect(result.find(CHECKBOX_LABEL).props().htmlFor).toEqual(result.find(CHECKBOX).props().id);
+    });
+    it('should set id as `for` prop of the label element', () => {
+        result = mount(<Checkbox label="test" id={'foo'} />);
+
+        expect(result.find(CHECKBOX_LABEL).props().htmlFor).toBeTruthy();
+        expect(result.find(CHECKBOX_LABEL).props().htmlFor).toEqual(result.find(CHECKBOX).props().id);
+    });
+    it('should be checked when `checked` is undefined and boolean `value` prop is true', () => {
+        result = mount(<Checkbox value={true} />);
+
+        expect(result.props().value).toEqual(true);
+        expect(result.find(CHECKBOX).props().checked).toEqual(true);
+    });
+    it('should be unchecked when `checked` is undefined and boolean `value` prop is false', () => {
+        result = mount(<Checkbox value={false} />);
+
+        expect(result.props().value).toEqual(false);
+        expect(result.find(CHECKBOX).props().checked).toEqual(false);
+    });
+    it('should be indeterminate when value is null', () => {
+        result = mount(<Checkbox value={null} />);
+
+        expect(result.find(CHECKBOX).props()['aria-checked']).toEqual('mixed');
+        expect(result.find(CHECKBOX).hasClass('k-indeterminate')).toBeTruthy();
+    });
+    it('should pass value to the underlying `input` element if value is string and checked is provided', () => {
+        result = mount(<Checkbox value={'foo'} checked={true} />);
+
+        expect(result.find(CHECKBOX).props().value).toEqual('foo');
+        expect(result.props().checked).toEqual(true);
+        expect(result.find(CHECKBOX).props().checked).toEqual(true);
+        expect(result.find(CHECKBOX).props()['aria-checked']).toEqual(true);
+    });
+    it('should pass value to the underlying `input` element if value is number and checked is provided', () => {
+        result = mount(<Checkbox value={1} checked={true} />);
+
+        expect(result.find(CHECKBOX).props().value).toEqual(1);
+    });
+    it('should pass value to the underlying `input` element if value is string array and checked is provided', () => {
+        result = mount(<Checkbox value={['a', 'b', 'c']} checked={true} />);
+
+        expect(result.find(CHECKBOX).props().value).toEqual(['a', 'b', 'c']);
+    });
+    it('should be checked when `checked` is undefined and boolean `defaultValue` prop is true', () => {
+        result = mount(<Checkbox defaultValue={true} />);
+
+        expect(result.props().defaultValue).toEqual(true);
+        expect(result.find(CHECKBOX).props().checked).toEqual(true);
+    });
+    it('should be unchecked when `checked` is undefined and boolean `defaultValue` prop is false', () => {
+        result = mount(<Checkbox defaultValue={false} />);
+
+        expect(result.props().defaultValue).toEqual(false);
+        expect(result.find(CHECKBOX).props().checked).toEqual(false);
+    });
+    it('should be indeterminate when defaultValue is null', () => {
+        result = mount(<Checkbox defaultValue={null} />);
+
+        expect(result.find(CHECKBOX).props()['aria-checked']).toEqual('mixed');
+        expect(result.find(CHECKBOX).hasClass('k-indeterminate')).toBeTruthy();
+    });
+    it('should pass value to the underlying `input` element if defaultValue is string and checked is provided', () => {
+        result = mount(<Checkbox defaultValue={'foo'} checked={true} />);
+
+        expect(result.find(CHECKBOX).props().value).toEqual('foo');
+        expect(result.props().checked).toEqual(true);
+        expect(result.find(CHECKBOX).props().checked).toEqual(true);
+        expect(result.find(CHECKBOX).props()['aria-checked']).toEqual(true);
+    });
+    it('should pass value to the underlying `input` element if defaultValue is number and checked is provided', () => {
+        result = mount(<Checkbox defaultValue={1} checked={true} />);
+
+        expect(result.find(CHECKBOX).props().value).toEqual(1);
+    });
+    it('should pass value to the underlying `input` element if defaultValue is string array and checked is provided', () => {
+        result = mount(<Checkbox defaultValue={['a', 'b', 'c']} checked={true} />);
+
+        expect(result.find(CHECKBOX).props().value).toEqual(['a', 'b', 'c']);
+    });
+    it('should be checked when `checked` prop is true', () => {
+        result = mount(<Checkbox checked={true} />);
+
+        expect(result.find(CHECKBOX).props().checked).toBeTruthy();
+    });
+    it('should be unchecked when `checked` prop is false', () => {
+        result = mount(<Checkbox checked={false} />);
+
+        expect(result.find(CHECKBOX).props().checked).toBeFalsy();
+    });
+    it('should be indeterminate when checked is null', () => {
+        result = mount(<Checkbox checked={null} />);
+
+        expect(result.find(CHECKBOX).props()['aria-checked']).toEqual('mixed');
+        expect(result.find(CHECKBOX).hasClass('k-indeterminate')).toBeTruthy();
+    });
+    it('should be checked when `defaultChecked` prop is passed (uncontrolled mode)', () => {
+        result = mount(<Checkbox defaultChecked={true} />);
+
+        expect(result.props().defaultChecked).toEqual(true);
+        expect(result.find(CHECKBOX).props().checked).toEqual(true);
+    });
+    it('should be unchecked when no related property is provided', () => {
+        result = mount(<Checkbox />);
+
+        expect(result.find(CHECKBOX).props().checked).toEqual(false);
+    });
+    it('should not provide value to the underlying `input` element when value is provided and `checked` is false', () => {
+        result = mount(<Checkbox value="test" checked={false} />);
+
+        expect(result.find(CHECKBOX).props().checked).toEqual(false);
+        expect(result.find(CHECKBOX).props().value).toEqual('test');
+        expect(result.find(CHECKBOX).props()['aria-checked']).toEqual(false);
+    });
+    it('should not provide value to the underlying `input` element when value is string and `checked` is undefined', () => {
+        result = mount(<Checkbox value="test" />);
+
+        expect(result.find(CHECKBOX).props().checked).toEqual(false);
+        expect(result.find(CHECKBOX).props().value).toEqual('test');
+        expect(result.find(CHECKBOX).props()['aria-checked']).toEqual(false);
+    });
+    it('should be disabled when `disabled` prop is provided', () => {
+        result = mount(<Checkbox disabled={true} />);
+
+        expect(result.props().disabled).toEqual(true);
+    });
+    it('should set `k-disabled` class when `disabled` prop is provided', () => {
+        result = shallow(<Checkbox disabled={true} />);
+
+        expect(result.find('span').hasClass('k-disabled')).toEqual(true);
+    });
+    it('should set dir', () => {
+        result = shallow(<Checkbox dir="rtl" />);
+        expect(result.find('span').prop('dir')).toEqual('rtl');
+    });
+    it('should **not** set dir if dir is not passed as props', () => {
+        result = shallow(<Checkbox />);
+
+        expect(result.find('span').prop('dir')).toEqual(undefined);
+    });
+    it('should set className correctly', () => {
+        result = shallow(<Checkbox className="foo" />);
+
+        expect(result.find('.foo').length).toEqual(1);
+    });
+    it('should render default tabIndex', () => {
+        result = mount(<Checkbox />);
+
+        expect(result.find(CHECKBOX).props().tabIndex).toEqual(0);
+    });
+    it('should set tabIndex to -1 of disabled component by default', () => {
+        result = shallow(<Checkbox disabled={true} />);
+
+        expect(result.find(CHECKBOX).props().tabIndex).toEqual(-1);
+    });
+    it('should set tabIndex if passed as props', () => {
+        result = shallow(<Checkbox tabIndex={2} />);
+
+        expect(result.find(CHECKBOX).props().tabIndex).toEqual(2);
+    });
+    it('should set aria attributes correctly', () => {
+        result = mount(<Checkbox />);
+
+        expect(result.find(CHECKBOX).props().role).toEqual('checkbox');
+        expect(result.find(CHECKBOX).props()['aria-checked']).toEqual(false);
+
+        result.setProps({ value: null });
+        expect(result.find(CHECKBOX).props()['aria-checked']).toEqual('mixed');
+
+        result.setProps({ value: true });
+        expect(result.find(CHECKBOX).props()['aria-checked']).toEqual(true);
+
+        result.setProps({ value: false });
+        expect(result.find(CHECKBOX).props()['aria-checked']).toEqual(false);
+
+        result.setProps({ disabled: true });
+        expect(result.find(CHECKBOX).props()['aria-disabled']).toEqual(true);
+
+        result.setProps({ disabled: false });
+        expect(result.find(CHECKBOX).props()['aria-disabled']).toBeFalsy();
+    });
+
+    describe('event handlers', () => {
+        it('should execute click handler', () => {
+            let spy = jasmine.createSpy('click spy');
+            result = mount(
+              <Checkbox onChange={spy} value={true}/>
+            );
+            result.find(CHECKBOX).simulate('change');
+            expect(spy).toHaveBeenCalled();
+        });
+
+        it('should execute focus handler', () => {
+            let spy = jasmine.createSpy('spy');
+            result = mount(<Checkbox onFocus={spy} value={true}/>);
+            result.find(CHECKBOX).simulate('focus');
+            expect(spy).toHaveBeenCalled();
+        });
+
+        it('should execute blur handler', () => {
+            let spy = jasmine.createSpy('spy');
+            result = mount(<Checkbox onBlur={spy} value={true}/>);
+            result.find(CHECKBOX).simulate('blur');
+            expect(spy).toHaveBeenCalled();
+        });
+    });
+});