|
8 | 8 | <meta name="generator" content="VuePress 1.3.1"> |
9 | 9 |
|
10 | 10 |
|
11 | | - <link rel="preload" href="/vue-test-utils-next-docs/assets/css/0.styles.d0eb5c60.css" as="style"><link rel="preload" href="/vue-test-utils-next-docs/assets/js/app.8b60782f.js" as="script"><link rel="preload" href="/vue-test-utils-next-docs/assets/js/2.e2b2098d.js" as="script"><link rel="preload" href="/vue-test-utils-next-docs/assets/js/6.0a0d17e0.js" as="script"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/10.4667010d.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/3.8a5fcecf.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/4.c4dd5428.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/5.caed462d.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/7.79861c05.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/8.1b1a6480.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/9.389ec22b.js"> |
| 11 | + <link rel="preload" href="/vue-test-utils-next-docs/assets/css/0.styles.d0eb5c60.css" as="style"><link rel="preload" href="/vue-test-utils-next-docs/assets/js/app.51b6d88e.js" as="script"><link rel="preload" href="/vue-test-utils-next-docs/assets/js/2.e2b2098d.js" as="script"><link rel="preload" href="/vue-test-utils-next-docs/assets/js/6.5bdf7ff2.js" as="script"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/10.4667010d.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/3.8a5fcecf.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/4.c4dd5428.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/5.2e9aec66.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/7.585f7133.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/8.ee81b4c9.js"><link rel="prefetch" href="/vue-test-utils-next-docs/assets/js/9.389ec22b.js"> |
12 | 12 | <link rel="stylesheet" href="/vue-test-utils-next-docs/assets/css/0.styles.d0eb5c60.css"> |
13 | 13 | </head> |
14 | 14 | <body> |
|
393 | 393 | <span class="token keyword">await</span> wrapper<span class="token punctuation">.</span><span class="token function">setProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span> message<span class="token operator">:</span> <span class="token string">'goodbye'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
394 | 394 | <span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toContain</span><span class="token punctuation">(</span><span class="token string">'goodbye'</span><span class="token punctuation">)</span> |
395 | 395 | <span class="token punctuation">}</span><span class="token punctuation">)</span> |
396 | | -</code></pre></div><h3 id="setvalue"><a href="#setvalue" class="header-anchor">#</a> <code>setValue</code></h3> <p>Sets a value on DOM element, including:</p> <ul><li><code><input></code> (either <code>type="checkbox"</code> or <code>type="radio"</code>)</li> <li><code><select></code></li></ul> <p>Since this will often result in a DOM re-render, <code>setValue</code> returns <code>Vue.nextTick</code>, so you will often have to call this with <code>await</code> to ensure the DOM has been updated before making an assertion.</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> |
| 396 | +</code></pre></div><h3 id="setvalue"><a href="#setvalue" class="header-anchor">#</a> <code>setValue</code></h3> <p>Sets a value on DOM element, including:</p> <ul><li><code><input></code> <ul><li><code>type="checkbox"</code> and <code>type="radio"</code> are detected and will have <code>element.checked</code> set</li></ul></li> <li><code><select></code> <ul><li><code><option></code> is detected and will have <code>element.selected</code> set</li></ul></li></ul> <p>Since this will often result in a DOM re-render, <code>setValue</code> returns <code>Vue.nextTick</code>, so you will often have to call this with <code>await</code> to ensure the DOM has been updated before making an assertion.</p> <p><code>Component.vue</code>:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> |
397 | 397 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checked<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
398 | 398 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checked<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Checked<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
399 | 399 | <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> |
|
410 | 410 | </code></pre></div><p><code>Component.spec.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'checked'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
411 | 411 | <span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Component<span class="token punctuation">)</span> |
412 | 412 |
|
413 | | - <span class="token keyword">await</span> wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setChecked</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> |
| 413 | + <span class="token keyword">await</span> wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> |
414 | 414 | <span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeTruthy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> |
415 | 415 |
|
416 | | - <span class="token keyword">await</span> wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setChecked</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span> |
| 416 | + <span class="token keyword">await</span> wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span> |
417 | 417 | <span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeFalsy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> |
418 | 418 | <span class="token punctuation">}</span><span class="token punctuation">)</span> |
419 | 419 | </code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> |
420 | | - <script src="/vue-test-utils-next-docs/assets/js/app.8b60782f.js" defer></script><script src="/vue-test-utils-next-docs/assets/js/2.e2b2098d.js" defer></script><script src="/vue-test-utils-next-docs/assets/js/6.0a0d17e0.js" defer></script> |
| 420 | + <script src="/vue-test-utils-next-docs/assets/js/app.51b6d88e.js" defer></script><script src="/vue-test-utils-next-docs/assets/js/2.e2b2098d.js" defer></script><script src="/vue-test-utils-next-docs/assets/js/6.5bdf7ff2.js" defer></script> |
421 | 421 | </body> |
422 | 422 | </html> |
0 commit comments