lundi 10 août 2020

Testing Style on React component

I have the following class with a function, that opens a modal (open_modal(...)) in a separate file to a component as I have a large number of modals that use this functionality.

import open from "open";
import $    from "jquery";

class ReactHelpers {

    static open_webpage(page_url) {
        open(page_url);
    }

    static open_modal(overlay_id, modal_id) {
        $(overlay_id).css("display", "block");
        $(modal_id).css("display", "block");
    }

    static close_modal(overlay_id, modal_id) {
        $(overlay_id).css("display", "none");
        $(modal_id).css("display", "none");
    }
}

export default ReactHelpers;



I am trying to assert that the open_modal function has added css to the divs in question as below:

    it('should close the modal', function () {
        const wrapper = shallow(
            <div id="overlay_id">
                <div id="modal_id">
                    <p>modal</p>
                </div>
            </div>
        )
        const overlay = wrapper.find('#overlay_id')
        const modal = wrapper.find('#modal_id')
        ReactHelpers.open_modal(overlay, modal);
        console.log('OVERLAY ', overlay);
        expect(overlay.prop('style')).toHaveProperty('display', 'block');
        expect(modal_style).toHaveProperty('display', 'block');
    });

Further, I'm sure to how the open_webpage function would be tested as this is a library function. In my other tests in my other components, I'm mocking this so it's never actually been tested.

Any help is greatly appreciated.

Thanks

Aucun commentaire:

Enregistrer un commentaire