react-toggleable-context/lib/Toggleable.test.js

React components to make anything expandable

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var enzyme_1 = require("enzyme");
var Toggleable_1 = __importStar(require("./Toggleable"));
describe('Toggleable Component', function () {
    test('should pass toggled state for section and update it when handleClick is called', function () {
        var wrapper = enzyme_1.mount(react_1.default.createElement(Toggleable_1.default, null,
            react_1.default.createElement(Toggleable_1.default.Section, { id: 'first' }, function (_a) {
                var handleClick = _a.handleClick, toggled = _a.toggled;
                return (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("a", { id: 'link', onClick: handleClick }, "Header"),
                    react_1.default.createElement("div", { id: 'section-body', "data-toggled": toggled ? 'true' : 'false' }, "lorem"),
                    ")"));
            }),
            react_1.default.createElement(Toggleable_1.default.Section, { id: 'second' }, function (_a) {
                var handleClick = _a.handleClick, toggled = _a.toggled;
                return (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("a", { id: 'link', onClick: handleClick }, "Header"),
                    react_1.default.createElement("div", { id: 'section-body', "data-toggled": toggled ? 'true' : 'false' }, "lorem"),
                    ")"));
            })));
        expect(wrapper
            .find('#first')
            .find('#section-body')
            .prop('data-toggled')).toBe('false');
        expect(wrapper
            .find('#second')
            .find('#section-body')
            .prop('data-toggled')).toBe('false');
        wrapper
            .find('#first')
            .find('#link')
            .simulate('click');
        expect(wrapper
            .find('#first')
            .find('#section-body')
            .prop('data-toggled')).toBe('true');
        expect(wrapper
            .find('#second')
            .find('#section-body')
            .prop('data-toggled')).toBe('false');
        wrapper
            .find('#second')
            .find('#link')
            .simulate('click');
        expect(wrapper
            .find('#first')
            .find('#section-body')
            .prop('data-toggled')).toBe('true');
        expect(wrapper
            .find('#second')
            .find('#section-body')
            .prop('data-toggled')).toBe('true');
        wrapper.unmount();
    });
    test('should collapse other sections if collapse prop is given to Toggleable', function () {
        var wrapper = enzyme_1.mount(react_1.default.createElement(Toggleable_1.default, { collapse: true },
            react_1.default.createElement(Toggleable_1.default.Section, { id: 'first' }, function (_a) {
                var handleClick = _a.handleClick, toggled = _a.toggled;
                return (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("a", { id: 'link', onClick: handleClick }, "Header"),
                    react_1.default.createElement("div", { id: 'section-body', "data-toggled": toggled ? 'true' : 'false' }, "lorem"),
                    ")"));
            }),
            react_1.default.createElement(Toggleable_1.default.Section, { id: 'second' }, function (_a) {
                var handleClick = _a.handleClick, toggled = _a.toggled;
                return (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("a", { id: 'link', onClick: handleClick }, "Header"),
                    react_1.default.createElement("div", { id: 'section-body', "data-toggled": toggled ? 'true' : 'false' }, "lorem"),
                    ")"));
            }),
            react_1.default.createElement(Toggleable_1.default.Section, { id: 'third' }, function (_a) {
                var handleClick = _a.handleClick, toggled = _a.toggled;
                return (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("a", { id: 'link', onClick: handleClick }, "Header"),
                    react_1.default.createElement("div", { id: 'section-body', "data-toggled": toggled ? 'true' : 'false' }, "lorem"),
                    ")"));
            })));
        wrapper
            .find('#first')
            .find('#link')
            .simulate('click');
        expect(wrapper
            .find('#first')
            .find('#section-body')
            .prop('data-toggled')).toBe('true');
        expect(wrapper
            .find('#second')
            .find('#section-body')
            .prop('data-toggled')).toBe('false');
        wrapper
            .find('#first')
            .find('#link')
            .simulate('click');
        wrapper
            .find('#second')
            .find('#link')
            .simulate('click');
        expect(wrapper
            .find('#first')
            .find('#section-body')
            .prop('data-toggled')).toBe('false');
        expect(wrapper
            .find('#second')
            .find('#section-body')
            .prop('data-toggled')).toBe('true');
        expect(wrapper
            .find('#third')
            .find('#section-body')
            .prop('data-toggled')).toBe('false');
        wrapper.unmount();
    });
    test('should start toggled if toggled prop is given to Toggleable component', function () {
        var wrapper = enzyme_1.mount(react_1.default.createElement(Toggleable_1.default, { initialToggled: ['first', 'second'] },
            react_1.default.createElement(Toggleable_1.default.Section, { id: 'first' }, function (_a) {
                var handleClick = _a.handleClick, toggled = _a.toggled;
                return (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("a", { id: 'link', onClick: handleClick }, "Header"),
                    react_1.default.createElement("div", { id: 'section-body', "data-toggled": toggled ? 'true' : 'false' }, "lorem"),
                    ")"));
            }),
            react_1.default.createElement(Toggleable_1.default.Section, { id: 'second' }, function (_a) {
                var handleClick = _a.handleClick, toggled = _a.toggled;
                return (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("a", { id: 'link', onClick: handleClick }, "Header"),
                    react_1.default.createElement("div", { id: 'section-body', "data-toggled": toggled ? 'true' : 'false' }, "lorem"),
                    ")"));
            }),
            react_1.default.createElement(Toggleable_1.default.Section, { id: 'third' }, function (_a) {
                var handleClick = _a.handleClick, toggled = _a.toggled;
                return (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("a", { id: 'link', onClick: handleClick }, "Header"),
                    react_1.default.createElement("div", { id: 'section-body', "data-toggled": toggled ? 'true' : 'false' }, "lorem"),
                    ")"));
            })));
        expect(wrapper
            .find('#first')
            .find('#section-body')
            .prop('data-toggled')).toBe('true');
        expect(wrapper
            .find('#second')
            .find('#section-body')
            .prop('data-toggled')).toBe('true');
        expect(wrapper
            .find('#third')
            .find('#section-body')
            .prop('data-toggled')).toBe('false');
        wrapper
            .find('#third')
            .find('#link')
            .simulate('click');
        expect(wrapper
            .find('#third')
            .find('#section-body')
            .prop('data-toggled')).toBe('true');
        wrapper.unmount();
    });
    test('should start toggled if toggled prop is given to Toggleable component but collapse if collapse prop is given', function () {
        var wrapper = enzyme_1.mount(react_1.default.createElement(Toggleable_1.default, { initialToggled: ['first', 'second'], collapse: true },
            react_1.default.createElement(Toggleable_1.default.Section, { id: 'first' }, function (_a) {
                var handleClick = _a.handleClick, toggled = _a.toggled;
                return (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("a", { id: 'link', onClick: handleClick }, "Header"),
                    react_1.default.createElement("div", { id: 'section-body', "data-toggled": toggled ? 'true' : 'false' }, "lorem"),
                    ")"));
            }),
            react_1.default.createElement(Toggleable_1.default.Section, { id: 'second' }, function (_a) {
                var handleClick = _a.handleClick, toggled = _a.toggled;
                return (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("a", { id: 'link', onClick: handleClick }, "Header"),
                    react_1.default.createElement("div", { id: 'section-body', "data-toggled": toggled ? 'true' : 'false' }, "lorem"),
                    ")"));
            }),
            react_1.default.createElement(Toggleable_1.default.Section, { id: 'third' }, function (_a) {
                var handleClick = _a.handleClick, toggled = _a.toggled;
                return (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("a", { id: 'link', onClick: handleClick }, "Header"),
                    react_1.default.createElement("div", { id: 'section-body', "data-toggled": toggled ? 'true' : 'false' }, "lorem"),
                    ")"));
            })));
        expect(wrapper
            .find('#first')
            .find('#section-body')
            .prop('data-toggled')).toBe('true');
        expect(wrapper
            .find('#second')
            .find('#section-body')
            .prop('data-toggled')).toBe('true');
        expect(wrapper
            .find('#third')
            .find('#section-body')
            .prop('data-toggled')).toBe('false');
        wrapper
            .find('#third')
            .find('#link')
            .simulate('click');
        expect(wrapper
            .find('#third')
            .find('#section-body')
            .prop('data-toggled')).toBe('true');
        expect(wrapper
            .find('#first')
            .find('#section-body')
            .prop('data-toggled')).toBe('false');
        expect(wrapper
            .find('#second')
            .find('#section-body')
            .prop('data-toggled')).toBe('false');
        wrapper.unmount();
    });
    test('should be set initial toggled to window.location.hash ', function () {
        window.location.hash = 'second';
        var wrapper = enzyme_1.mount(react_1.default.createElement(Toggleable_1.default, null,
            react_1.default.createElement(Toggleable_1.default.Section, { id: 'first' }, function (_a) {
                var handleClick = _a.handleClick, toggled = _a.toggled;
                return (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("a", { id: 'link', onClick: handleClick }, "Header"),
                    react_1.default.createElement("div", { id: 'section-body', "data-toggled": toggled ? 'true' : 'false' }, "lorem"),
                    ")"));
            }),
            react_1.default.createElement(Toggleable_1.default.Section, { id: 'second' }, function (_a) {
                var handleClick = _a.handleClick, toggled = _a.toggled;
                return (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("a", { id: 'link', onClick: handleClick }, "Header"),
                    react_1.default.createElement("div", { id: 'section-body', "data-toggled": toggled ? 'true' : 'false' }, "lorem"),
                    ")"));
            })));
        expect(wrapper
            .find('#first')
            .find('#section-body')
            .prop('data-toggled')).toBe('false');
        wrapper
            .find('#first')
            .find('#link')
            .simulate('click');
        expect(wrapper
            .find('#first')
            .find('#section-body')
            .prop('data-toggled')).toBe('true');
        wrapper.unmount();
    });
    test('should work with the hook ', function () {
        function FirstComponent() {
            var _a = Toggleable_1.useToggleable('first'), toggled = _a.toggled, handleClick = _a.handleClick;
            return (react_1.default.createElement("div", { id: 'first' },
                react_1.default.createElement("a", { id: 'link', onClick: handleClick }, "Header"),
                react_1.default.createElement("div", { id: 'section-body', "data-toggled": toggled ? 'true' : 'false' }, "lorem")));
        }
        function SecondComponent() {
            var _a = Toggleable_1.useToggleable('second'), toggled = _a.toggled, handleClick = _a.handleClick;
            return (react_1.default.createElement("div", { id: 'second' },
                react_1.default.createElement("a", { id: 'link', onClick: handleClick }, "Header"),
                react_1.default.createElement("div", { id: 'section-body', "data-toggled": toggled ? 'true' : 'false' }, "lorem")));
        }
        var wrapper = enzyme_1.mount(react_1.default.createElement(Toggleable_1.default, null,
            react_1.default.createElement(FirstComponent, null),
            react_1.default.createElement(SecondComponent, null)));
        expect(wrapper
            .find('#first')
            .find('#section-body')
            .prop('data-toggled')).toBe('false');
        wrapper
            .find('#first')
            .find('#link')
            .simulate('click');
        expect(wrapper
            .find('#first')
            .find('#section-body')
            .prop('data-toggled')).toBe('true');
        wrapper.unmount();
    });
});
//# sourceMappingURL=Toggleable.test.js.map