fk-react-ui-components/lib/ActionMenu/tests/index.test.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _enzyme = require('enzyme');

var _index = require('../index');

var _index2 = _interopRequireDefault(_index);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var renderComponent = function renderComponent() {
    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    return (0, _enzyme.mount)((0, _enzyme.shallow)(_react2.default.createElement(_index2.default, props)).get(0));
};

var renderHOC = function renderHOC() {
    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    return (0, _enzyme.mount)(_react2.default.createElement(_index2.default, props));
};

function simulateClick(node) {
    var event = new window.MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
    });
    node.dispatchEvent(event);
    return event;
}

var data = ['Edit', 'Delete'];
describe('<ActionMenu />', function () {
    beforeEach(function () {
        data = ['Edit', 'Delete'];
    });

    it('should render the component with more icon', function () {
        var renderedComponent = renderComponent({
            data: data
        });
        expect(renderedComponent.find('.more-icon').length).toBe(1);
    });
    it('should render the component with hidden menu items', function () {
        var renderedComponent = renderComponent({
            data: data
        });
        expect(renderedComponent.state().showMenuItems).toEqual(false);
        expect(renderedComponent.find('li').length).toBe(0);
    });

    it('Should close the dropdown when clicking outside the component', function () {
        var instance = void 0;
        var wrappedRef = function wrappedRef(c) {
            instance = c;
        };
        var renderedHOC = renderHOC({
            data: data,
            wrappedRef: wrappedRef
        });
        renderedHOC.find('.more-icon').simulate('click');
        simulateClick(document.body);

        expect(instance.state.showMenuItems).toEqual(false);
    });
    describe('More Icon Click', function () {
        it('should change the component state and render the dropwdown', function () {
            var renderedComponent = renderComponent({
                data: data
            });
            renderedComponent.find('.more-icon').simulate('click');
            expect(renderedComponent.state().showMenuItems).toEqual(true);
            expect(renderedComponent.find('li').length).toBe(data.length);
        });
        it('should close the dropdown on document click', function () {
            var renderedComponent = renderComponent({
                data: data
            });
            renderedComponent.find('.more-icon').simulate('click');
            expect(renderedComponent.state().showMenuItems).toEqual(true);
            expect(renderedComponent.find('li').length).toBe(data.length);
        });
    });
    describe('DropDown Item Click', function () {
        it('should work without onMenuSelect', function () {
            var renderedComponent = renderComponent({
                data: data
            });
            renderedComponent.find('.more-icon').simulate('click');
            renderedComponent.find('li').at(0).simulate('click');
            expect(renderedComponent.state().showMenuItems).toEqual(false);
        });
        it('should call onMenuSelect', function () {
            var onClickSpy = jest.fn();
            var renderedComponent = renderComponent({
                data: data,
                onMenuSelect: onClickSpy
            });
            renderedComponent.find('.more-icon').simulate('click');
            renderedComponent.find('li').at(0).simulate('click');
            // should call onMenuselect only one time
            expect(onClickSpy.mock.calls.length).toBe(1);
            // should call onMenuselect with Edit as the argument
            expect(onClickSpy.mock.calls[0][0]).toBe(data[0]);
        });
    });
});