react-native-combined-button/__tests__/combined-button_test.js

A button component with icon and text for react-native app.

'use restrict';

// jest.unmock('../combined-button.js');

import React from 'react';
import { TouchableOpacity, Image, Text, InteractionManager } from 'react-native';
import { shallow } from 'enzyme';
import ReactTestUtils from 'react-addons-test-utils';

const CombinedButton = require.requireActual('../combined-button').default;

describe('CombinedButton', () => {
    describe('when render a text only button', () => {
        var wrapper;
        var pressed = false;

        const onPress = () => {
            console.log('real onPress');
            pressed = true;
        };
        beforeEach(()=>{
            wrapper = shallow(
                <CombinedButton onPress = { onPress } 
                                text="button" />
            );
        });

        it('should render a TouchableOpacity', () =>{
            expect(wrapper.is(TouchableOpacity)).toBeTruthy();
        } );

        it('should render TouchableOpacity with correct event hander.', () => {
            expect(wrapper.props().onPress).toBe(onPress);
        });

        it('should render a correct Text component.', () => {
            const textWrapper = wrapper.find("TouchableOpacity Text");
            expect(textWrapper.length).toBe(1);
            expect(textWrapper.children().text()).toBe("button");
        });

        it('should not render Image component.', () => {
            expect(wrapper.find("TouchableOpacity Image").length).toBe(0);
        });

    });

    describe('when render a button with icon', () => {
        const icon = { uri: "http://foo.com/test.png" };
        var wrapper;
        var imageWrapper;

        beforeEach(()=>{
            wrapper = shallow(
                <CombinedButton icon={ icon }
                                text="button" />
            );
            imageWrapper = wrapper.find("TouchableOpacity Image");
        });

        it('should render an Image component', () => {
            expect(imageWrapper.props().source).toEqual(icon);
        });

        it('should render Image before Text.', () => {
            expect(wrapper.children().first().is(Image)).toBeTruthy();
            expect(wrapper.children().last().is(Text)).toBeTruthy();
        });

        it('should flexDirection style of container to be column', ()=> {
            const style = effective_style(wrapper.props().style);
            expect(style.flexDirection).toBe('column');
        });
    });

    describe('when render a button with icon on right', () => {
        const icon = { uri: "http://foo.com/test.png" };
        var wrapper;
        var imageWrapper;

        beforeEach(()=>{
            wrapper = shallow(
                <CombinedButton icon={ icon }
                                iconPosition="right"
                                text="button" />
            );
            imageWrapper = wrapper.find("TouchableOpacity Image");
        });

        it('should render Image after text', () => {
            expect(wrapper.children().first().is(Text)).toBeTruthy();
            expect(wrapper.children().last().is(Image)).toBeTruthy();
        });


        it('should flexDirection style of container to be row', ()=> {
            const style = effective_style(wrapper.props().style);
            expect(style.flexDirection).toBe('row');
        });
    });
});


export function effective_style(styles) {
    if ( isArray(styles)) {
        let result = {};
        styles.forEach((item) => {
            result = Object.assign(result, item);
        });
        return result;
    } else {
        return styles;
    }
}

function isArray(obj) {
    if (typeof Array.isArray === "function") { 
        return Array.isArray(obj); 
    }else{ 
        return Object.prototype.toString.call(obj) === "[object Array]"; 
    } 
}