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