"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
require("react-primitives");
const react_primitives_1 = require("react-primitives");
const react_1 = __importDefault(require("react"));
const index_1 = __importDefault(require("../index"));
const enzyme_1 = require("enzyme");
// NOTE: These tests are copy pasted from ../native/test/native.test.js
describe('primitives', () => {
    it('should not throw an error when called with a valid element', () => {
        expect(() => index_1.default.View ``).not.toThrowError();
        const FunctionalComponent = () => react_1.default.createElement(react_primitives_1.View, null);
        class ClassComponent extends react_1.default.Component {
            render() {
                return react_1.default.createElement(react_primitives_1.View, null);
            }
        }
        const validComps = ['View', FunctionalComponent, ClassComponent];
        validComps.forEach(comp => {
            expect(() => {
                const Comp = index_1.default(comp);
                enzyme_1.shallow(react_1.default.createElement(Comp, null));
            }).not.toThrowError();
        });
    });
    it('should throw a meaningful error when called with an invalid element', () => {
        const FunctionalComponent = () => react_1.default.createElement(react_primitives_1.View, null);
        class ClassComponent extends react_1.default.Component {
            render() {
                return react_1.default.createElement(react_primitives_1.View, null);
            }
        }
        const invalidComps = [
            undefined,
            null,
            123,
            [],
            react_1.default.createElement(react_primitives_1.View, null),
            react_1.default.createElement(FunctionalComponent, null),
            react_1.default.createElement(ClassComponent, null),
        ];
        invalidComps.forEach(comp => {
            expect(() => {
                // $FlowInvalidInputTest
                const Comp = index_1.default(comp);
                enzyme_1.shallow(react_1.default.createElement(Comp, null));
                // $FlowInvalidInputTest
            }).toThrow(`Cannot create styled-component for component: ${comp}`);
        });
    });
    it('should generate inline styles', () => {
        const Comp = index_1.default.View ``;
        const wrapper = enzyme_1.shallow(react_1.default.createElement(Comp, null));
        const view = wrapper.find('View').first();
        expect(view.prop('style')).toEqual([{}, undefined]);
    });
    it('should combine inline styles and the style prop', () => {
        const Comp = index_1.default.View `
      padding-top: 10;
    `;
        const style = { opacity: 0.9 };
        const wrapper = enzyme_1.shallow(react_1.default.createElement(Comp, { style: style }));
        const view = wrapper.find('View').first();
        expect(view.prop('style')).toEqual([{ paddingTop: 10 }, style]);
    });
    describe('extending', () => {
        it('should combine styles of extending components', () => {
            const Parent = index_1.default.View `
        opacity: 0.9;
      `;
            const Child = Parent.extend `
        padding: 10px;
      `;
            const parent = enzyme_1.shallow(react_1.default.createElement(Parent, null));
            const child = enzyme_1.shallow(react_1.default.createElement(Child, null));
            expect(parent.find('View').prop('style')).toEqual([
                { opacity: 0.9 },
                undefined,
            ]);
            expect(child.find('View').prop('style')).toEqual([
                {
                    opacity: 0.9,
                    paddingTop: 10,
                    paddingRight: 10,
                    paddingBottom: 10,
                    paddingLeft: 10,
                },
                undefined,
            ]);
        });
        it('should combine styles of extending components in >= 3 inheritances', () => {
            const GrandGrandParent = index_1.default.View `
        background-color: red;
      `;
            const GrandParent = GrandGrandParent.extend `
        borderwidth: 10;
      `;
            const Parent = GrandParent.extend `
        opacity: 0.9;
      `;
            const Child = Parent.extend `
        padding: 10px;
      `;
            const grandGrandParent = enzyme_1.shallow(react_1.default.createElement(GrandGrandParent, null));
            const grandParent = enzyme_1.shallow(react_1.default.createElement(GrandParent, null));
            const parent = enzyme_1.shallow(react_1.default.createElement(Parent, null));
            const child = enzyme_1.shallow(react_1.default.createElement(Child, null));
            expect(grandGrandParent.find('View').prop('style')).toEqual([
                {
                    backgroundColor: 'red',
                },
                undefined,
            ]);
            expect(grandParent.find('View').prop('style')).toEqual([
                {
                    backgroundColor: 'red',
                    borderWidth: 10,
                },
                undefined,
            ]);
            expect(parent.find('View').prop('style')).toEqual([
                {
                    backgroundColor: 'red',
                    borderWidth: 10,
                    opacity: 0.9,
                },
                undefined,
            ]);
            expect(child.find('View').prop('style')).toEqual([
                {
                    backgroundColor: 'red',
                    borderWidth: 10,
                    opacity: 0.9,
                    paddingTop: 10,
                    paddingRight: 10,
                    paddingBottom: 10,
                    paddingLeft: 10,
                },
                undefined,
            ]);
        });
    });
    describe('attrs', () => {
        it('works fine with an empty object', () => {
            const Comp = index_1.default.View.attrs({}) ``;
            const wrapper = enzyme_1.shallow(react_1.default.createElement(Comp, null));
            const view = wrapper.find('View').first();
            expect(view.props()).toEqual({
                style: [{}, undefined],
            });
        });
        it('passes simple props on', () => {
            const Comp = index_1.default.View.attrs({
                test: true,
            }) ``;
            const wrapper = enzyme_1.shallow(react_1.default.createElement(Comp, null));
            const view = wrapper.find('View').first();
            expect(view.props()).toEqual({
                style: [{}, undefined],
                test: true,
            });
        });
        it('calls an attr-function with context', () => {
            const Comp = index_1.default.View.attrs({
                copy: props => props.test,
            }) ``;
            const test = 'Put that cookie down!';
            const wrapper = enzyme_1.shallow(react_1.default.createElement(Comp, { test: test }));
            const view = wrapper.find('View').first();
            expect(view.props()).toEqual({
                style: [{}, undefined],
                copy: test,
                test,
            });
        });
        it('merges multiple calls', () => {
            const Comp = index_1.default.View.attrs({
                first: 'first',
                test: '_',
            }).attrs({
                second: 'second',
                test: 'test',
            }) ``;
            const wrapper = enzyme_1.shallow(react_1.default.createElement(Comp, null));
            const view = wrapper.find('View').first();
            expect(view.props()).toEqual({
                style: [{}, undefined],
                first: 'first',
                second: 'second',
                test: 'test',
            });
        });
        it('merges attrs when inheriting SC', () => {
            const Parent = index_1.default.View.attrs({
                first: 'first',
            }) ``;
            const Child = Parent.extend.attrs({
                second: 'second',
            }) ``;
            const wrapper = enzyme_1.shallow(react_1.default.createElement(Child, null));
            const view = wrapper.find('View').first();
            expect(view.props()).toEqual({
                style: [{}, undefined],
                first: 'first',
                second: 'second',
            });
        });
    });
    describe('expanded API', () => {
        it('should attach a displayName', () => {
            const Comp = index_1.default.View ``;
            expect(Comp.displayName).toBe('Styled(View)');
            const CompTwo = index_1.default.View.withConfig({ displayName: 'Test' }) ``;
            expect(CompTwo.displayName).toBe('Test');
        });
        it('should allow multiple calls to be chained', () => {
            const Comp = index_1.default.View.withConfig({ displayName: 'Test1' }).withConfig({
                displayName: 'Test2',
            }) ``;
            expect(Comp.displayName).toBe('Test2');
        });
    });
    describe('innerRef', () => {
        it('should pass a callback ref to the component', () => {
            const Comp = index_1.default.View ``;
            const ref = jest.fn();
            const wrapper = enzyme_1.mount(react_1.default.createElement(Comp, { innerRef: ref }));
            const view = wrapper.find('View').first();
            const comp = wrapper.find(Comp).first();
            expect(ref).toHaveBeenCalledWith(view.instance());
            expect(view.prop('innerRef')).toBeFalsy();
            expect(comp.instance().root).toBeTruthy();
        });
        it('should pass an object ref to the component', () => {
            const Comp = index_1.default.View ``;
            const ref = react_1.default.createRef();
            const wrapper = enzyme_1.mount(react_1.default.createElement(Comp, { innerRef: ref }));
            const view = wrapper.find('View').first();
            const comp = wrapper.find(Comp).first();
            expect(ref.current).toBe(view.instance());
            expect(view.prop('innerRef')).toBeFalsy();
            expect(comp.instance().root).toBeTruthy();
        });
        class InnerComponent extends react_1.default.Component {
            render() {
                return null;
            }
        }
        it('should not leak the innerRef prop to the wrapped child', () => {
            const OuterComponent = index_1.default(InnerComponent) ``;
            const ref = jest.fn();
            const wrapper = enzyme_1.mount(react_1.default.createElement(OuterComponent, { innerRef: ref }));
            const innerComponent = wrapper.find(InnerComponent).first();
            const outerComponent = wrapper.find(OuterComponent).first();
            expect(ref).toHaveBeenCalledWith(innerComponent.instance());
            expect(innerComponent.prop('innerRef')).toBeFalsy();
            expect(outerComponent.instance().root).toBeTruthy();
        });
        it('should pass the innerRef to the wrapped styled component', () => {
            const InnerComponent = index_1.default.View ``;
            const OuterComponent = index_1.default(InnerComponent) ``;
            const ref = jest.fn();
            const wrapper = enzyme_1.mount(react_1.default.createElement(OuterComponent, { innerRef: ref }));
            const view = wrapper.find('View').first();
            const innerComponent = wrapper.find(InnerComponent).first();
            const outerComponent = wrapper.find(OuterComponent).first();
            expect(ref).toHaveBeenCalledWith(view.instance());
            expect(outerComponent.instance().root).toBeTruthy();
        });
        it('should pass innerRef instead of ref to a wrapped stateless functional component', () => {
            const InnerComponent = () => null;
            const OuterComponent = index_1.default(InnerComponent) ``;
            // NOTE: A ref should always be passed, so we don't need to (setNativeProps feature)
            const wrapper = enzyme_1.mount(react_1.default.createElement(OuterComponent, null));
            const outerComponent = wrapper.find(OuterComponent).first();
            const innerComponent = wrapper.find(InnerComponent).first();
            expect(innerComponent.prop('ref')).toBeFalsy();
            expect(innerComponent.prop('innerRef')).toBeTruthy();
            expect(outerComponent.instance().root).toBeFalsy();
        });
    });
});
//# sourceMappingURL=primitives.test.js.map