lundi 6 juillet 2015

Alternative of className Test utility in React application

I have been facing some difficulties writing test cases in my React application after I moved my external CSS files and refactored into JS objects in order to support react-inline

Earlier, for my test cases I have been using className to check if the expected class exist in my component or not. Since I am not using classes anymore I am having some trouble refactoring my tests. For example,I have been checking whether class avtarand img-rounded exists if I pass rounded style prop in my avatar component.

it("should render image with rounded style if style is 'rounded'", done => {
        let user = { displayName: "Foo", avatar: { url: "http://some.url"} };
        renderer.render(
            <UserAvatar user={user} style="rounded" />
        );
        let result = renderer.getRenderOutput();
        expect(result.type).toEqual("img");
        expect(result.props.className).toEqual("avatar img-rounded");
        expect(result.props.src).toEqual("http://some.url");
        done();
    });

Now I am adding the associated styles directly into the react component based on the style prop passed.

_getAvatarStyles() {
        let avatarStyle = {
            borderRadius: "50%"
        };

        if (this.props.style === "circle" || this.props.style === "text-only" || this.props.style === "initials") {
            avatarStyle = {
                borderRadius: "50%"
            };
        } else if (this.props.style === "rounded") {
            avatarStyle = {
                borderRadius: "10%"
            };
        }

        return avatarStyle;
    },

Before the refactoring I was adding className directly into the component, which looked like as follows:

_getAvatarClasses() {
        return classNames({
            "avatar": true,
            "img-rounded": this.props.style === "rounded",
            "img-circle": this.props.style === "circle"
        });
    },

Is there any way I can directly check style property in the img tag. For example, return true for circular avatar if the component has borderRadius: "50%" or return true for rounded avatar if it has borderRadius: "10%"

Aucun commentaire:

Enregistrer un commentaire