In my component, there's a button that is displayed only when an article.link prop is not empty. I need to write a test to verify if the button is rendered when article.link has a value and another test for when it is empty.
a.btn.plutus_btn-primary.round( v-if="hasArticleLink" target='_blank' :href="articleLink") Start Shopping Now
The hasArticleLink computed property returns true when the link is not empty.
The unit test implementation is as follows:
it("should not render the link button when article doesn't have a link", () => {
wrapper = mount(MerchandisingArticle, {
propsData: {
article: {
link: ""
}
}
});
expect(wrapper.find("a").exists()).toBe(false);
});
it("renders the linked button when article has a link", () => {
wrapper = mount(MerchandisingArticle, {
propsData: {
article: {
link: "https://google.com"
}
}
});
expect(wrapper.find("a").exists()).toBe(true);
});
The current approach works well, but I'm exploring if there's a more efficient way to handle these two opposite cases without having to mount the component in each it block. Any suggestions would be greatly appreciated!