11.cb716554.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{209:function(t,s,n){"use strict";n.r(s);var a=n(28),e=Object(a.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"conditional-rendering"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#conditional-rendering"}},[t._v("#")]),t._v(" Conditional Rendering")]),t._v(" "),n("p",[t._v("Vue Test Utils has a range of features for rendering and making assertions about the state of a component, with the goal of verifying it is behaving correctly. This article will explore how to render components, as well as verify they are rendering content correctly.")]),t._v(" "),n("h2",{attrs:{id:"finding-elements"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#finding-elements"}},[t._v("#")]),t._v(" Finding Elements")]),t._v(" "),n("p",[t._v("One of the most basic features of Vue is the ability to dynamically show, hide and remove elements with "),n("code",[t._v("v-if")]),t._v(". Let's look at how to test a component that uses "),n("code",[t._v("v-if")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" Nav "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  template"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token template-string"}},[n("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('\n    <nav>\n      <a id="profile" href="/profile">My Profile</a>\n      <a v-if="admin" id="admin" href="/admin">Admin</a>\n    </nav>\n  ')]),n("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      admin"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("In the "),n("code",[t._v("<Nav>")]),t._v(" component, a link to the user's profile is shown. In addition, if the "),n("code",[t._v("admin")]),t._v(" value is "),n("code",[t._v("true")]),t._v(", we reveal a link to the admin section. There are three scenarios which we should verify are behaving correctly:")]),t._v(" "),n("ol",[n("li",[t._v("The "),n("code",[t._v("/profile")]),t._v(" link should be shown.")]),t._v(" "),n("li",[t._v("When the user is an admin, the "),n("code",[t._v("/admin")]),t._v(" link should be shown.")]),t._v(" "),n("li",[t._v("When the user is not an admin, the "),n("code",[t._v("/admin")]),t._v(" link should not be shown.")])]),t._v(" "),n("h2",{attrs:{id:"using-get"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#using-get"}},[t._v("#")]),t._v(" Using "),n("code",[t._v("get()")])]),t._v(" "),n("p",[n("code",[t._v("wrapper")]),t._v(" has a "),n("code",[t._v("get()")]),t._v(" method that searches for an existing element. It uses "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector",target:"_blank",rel:"noopener noreferrer"}},[n("code",[t._v("querySelector")]),n("OutboundLink")],1),t._v(" syntax.")]),t._v(" "),n("p",[t._v("We can assert the profile link content by using "),n("code",[t._v("get()")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'renders a profile link'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" wrapper "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("mount")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Nav"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Here we are implicitly asserting that the")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// element #profile exists.")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" profileLink "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" wrapper"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#profile'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("profileLink"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("toEqual")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'My Profile'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),n("p",[t._v("If "),n("code",[t._v("get()")]),t._v(" does not return an element matching the selector, it will raise an error, and your test will fail.")]),t._v(" "),n("h2",{attrs:{id:"using-find-and-exists"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#using-find-and-exists"}},[t._v("#")]),t._v(" Using "),n("code",[t._v("find()")]),t._v(" and "),n("code",[t._v("exists()")])]),t._v(" "),n("p",[n("code",[t._v("get()")]),t._v(" works for asserting elements do exist. However, as we mentioned, it throws an error when it can't find an element, so you can't use it to assert whether if elements exist.")]),t._v(" "),n("p",[t._v("To do so, we use "),n("code",[t._v("find()")]),t._v(" and "),n("code",[t._v("exists()")]),t._v(". The next test asserts that if "),n("code",[t._v("admin")]),t._v(" is "),n("code",[t._v("false")]),t._v(" (which is it by default), the admin link is not present:")]),t._v(" "),n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'does not render an admin link'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" wrapper "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("mount")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Nav"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Using `wrapper.get` would throw and make the test fail.")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("wrapper"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("find")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#admin'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("exists")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),n("p",[t._v("Notice we are calling "),n("code",[t._v("exists()")]),t._v(" on the value returned from "),n("code",[t._v(".find()")]),t._v("? "),n("code",[t._v("find()")]),t._v(", like "),n("code",[t._v("mount()")]),t._v(", also returns a wrapper, similar to "),n("code",[t._v("mount()")]),t._v(". "),n("code",[t._v("mount()")]),t._v(" has a few extra methods, because it's wrapping a Vue component, and "),n("code",[t._v("find()")]),t._v(" only returns a regular DOM node, but many of the methods are shared between both. Some other methods include "),n("code",[t._v("classes()")]),t._v(", which gets the classes a DOM node has, and "),n("code",[t._v("trigger()")]),t._v(" for simulating user interaction. You can find a list of methods supported "),n("RouterLink",{attrs:{to:"/api/#wrapper-methods"}},[t._v("here")]),t._v(".")],1),t._v(" "),n("h2",{attrs:{id:"using-data"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#using-data"}},[t._v("#")]),t._v(" Using "),n("code",[t._v("data")])]),t._v(" "),n("p",[t._v("The final test is to assert that the admin link is rendered when "),n("code",[t._v("admin")]),t._v(" is "),n("code",[t._v("true")]),t._v(". It's "),n("code",[t._v("false")]),t._v(" by default, but we can override that using the second argument to "),n("code",[t._v("mount()")]),t._v(", the "),n("RouterLink",{attrs:{to:"/api/#mount-options"}},[n("code",[t._v("mounting options")])]),t._v(".")],1),t._v(" "),n("p",[t._v("For "),n("code",[t._v("data")]),t._v(", we use the aptly named "),n("code",[t._v("data")]),t._v(" option:")]),t._v(" "),n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'renders an admin link'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" wrapper "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("mount")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Nav"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        admin"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Again, by using `get()` we are implicitly asserting that")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the element exists.")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("wrapper"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#admin'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("toEqual")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Admin'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),n("p",[t._v("If you have other properties in "),n("code",[t._v("data")]),t._v(", don't worry - Vue Test Utils will merge the two together. The "),n("code",[t._v("data")]),t._v(" in the mounting options will take priority over any default values.")]),t._v(" "),n("p",[t._v("To learn what other mounting options exist, see "),n("RouterLink",{attrs:{to:"/guide/passing-data.html"}},[n("code",[t._v("Passing Data")])]),t._v(" or see "),n("RouterLink",{attrs:{to:"/api/#mount-options"}},[n("code",[t._v("mounting options")])]),t._v(".")],1),t._v(" "),n("h2",{attrs:{id:"conclusion"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#conclusion"}},[t._v("#")]),t._v(" Conclusion")]),t._v(" "),n("ul",[n("li",[t._v("Use "),n("code",[t._v("find()")]),t._v(" along with "),n("code",[t._v("exists()")]),t._v(" to verify whether if an element is in the DOM.")]),t._v(" "),n("li",[t._v("Use "),n("code",[t._v("get()")]),t._v(" if you expect the DOM element to be in the DOM.")]),t._v(" "),n("li",[t._v("The "),n("code",[t._v("data")]),t._v(" mounting option can be used to set default values on a component.")])])])}),[],!1,null,null,null);s.default=e.exports}}]);