Tìm kiếm các thành phần và thành phần

Thứ Năm, 05/12/2019

Tram Ho

Tìm kiếm các yếu tố

vue-test-utils cung cấp một cách để tìm và khẳng định sự hiện diện của các phần tử html hoặc các component Vue khác bằng phương thức find. Việc sử dụng find là khẳng định một component được render chính xác một element hoặc một component con.

Mã nguồn cho các bài test được mô tả trên trang này có thể tìm thấy ở đây.

Tạo các components

Trong ví dụ này, chúng ta sẽ tạo component <Child> và <Parent>.

Child:

<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>Child<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token punctuation">:</span> <span class="token string">"Child"</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

<div>Child</div>

</template>

export default {

}

</script>

Parent:

<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>span v<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">"showSpan"</span><span class="token operator">&gt;</span>
      Parent Component
    <span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>Child v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"showChild"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">import</span> Child <span class="token keyword">from</span> <span class="token string">"./Child.vue"</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token punctuation">:</span> <span class="token string">"Parent"</span><span class="token punctuation">,</span>

  components<span class="token punctuation">:</span> <span class="token punctuation">{</span> Child <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      showSpan<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      showChild<span class="token punctuation">:</span> <span class="token boolean">false</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

<div>

Parent Component

</span>

</div>

</template>

import Child from "./Child.vue"

export default {

components: { Child },

data() {

return {

showSpan: false,

showChild: false

}

</script>

`find` vói `querySelector` syntax

Các yêu tố thông thường có thể dễ dàng được chọn bằng cách sử dụng syntax của document.querySelector. vue-test-utils cũng cung cấp một phương thức isVisible để kiểm tra các phần tử được render có điều kiện v-show hay không. Tạo một Parent.spec.js, và bên trong file chúng ta thêm các đoạn mã sau:

<span class="token keyword">import</span> <span class="token punctuation">{</span> mount<span class="token punctuation">,</span> shallowMount <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@vue/test-utils"</span>
<span class="token keyword">import</span> Parent <span class="token keyword">from</span> <span class="token string">"@/components/Parent.vue"</span>

<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">"Parent"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">"does not render a span"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">shallowMount</span><span class="token punctuation">(</span>Parent<span class="token punctuation">)</span>

    <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">"span"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">isVisible</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">toBe</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

import { mount, shallowMount } from "@vue/test-utils"

import Parent from "@/components/Parent.vue"

describe("Parent", () => {

it("does not render a span", () => {

const wrapper = shallowMount(Parent)

expect(wrapper.find("span").isVisible()).toBe(false)

})

Vì v-show="showSpan" mặc định là false, Chúng tôi hy vọng rằng phương thức  của phần tử tìm thấy isVisible sẽ trả về là false. Test sẽ pass khi chạy với yarn test:unit. Tiếp theo, một test khác sẽ thực hiện xung quanh trường hợp showSpan là true.

<span class="token function">it</span><span class="token punctuation">(</span><span class="token string">"does render a span"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">shallowMount</span><span class="token punctuation">(</span>Parent<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span> showSpan<span class="token punctuation">:</span> <span class="token boolean">true</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">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">"span"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">isVisible</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">toBe</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

it("does render a span", () => {

data() {

return { showSpan: true }

}

})

expect(wrapper.find("span").isVisible()).toBe(true)

})

Tất nhiên sẽ pass! Giống như isVisible cho v-show, vue-test-utils cung cấp một phương thức exists được sử dụng khi kiểm tra các yếu tố có điều kiện render khi sử dụng v-if.

TÌm thành phần với `name` và `Component`

Tìm các component con sẽ khác một chút so với tìm các phần tử HTML thông thường. Sẽ có hai cách chính để khẳng định sự hiện diện cảu các Vue component con:

find(Component)
find({ name: "ComponentName" })

Một chút dễ hiểu hơn trong bối cảnh của một ví dụ test. Chúng ta sẽ bắt đầu với cú pháp find(Component). Điều này đòi hỏi chúng ta sẽ import các component và truyền nó vào hàm find.

<span class="token keyword">import</span> Child <span class="token keyword">from</span> <span class="token string">"@/components/Child.vue"</span>

<span class="token function">it</span><span class="token punctuation">(</span><span class="token string">"does not render a Child component"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">shallowMount</span><span class="token punctuation">(</span>Parent<span class="token punctuation">)</span>

  <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>Child<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">exists</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">toBe</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

import Child from "@/components/Child.vue"

it("does not render a Child component", () => {

expect(wrapper.find(Child).exists()).toBe(false)

})

Việc thực hiện của find khác phức tạp, vì nó hoạt động với querySelector, cũng như một số cú pháp khác. Bạn có thể thấy một phần của nguồn tìm thấy các Vue component con được mô tả ở đây. Về cơ bản, nó kiểm tra name của component đối với từng child được render, sau đó sẽ kiểm tra constructor và một số thuộc tính khác.

Như đã đề cập trong đoạn trước, thuộc tính name là một trong những kiểm tra được thực hiện find khi bạn chạy qua một component. Thay vì chuyển component, bạn có thể chỉ cần truyền một đối tượng với thuộc tính chính xác name. Điều này có nghĩa là bạn không cần đến import component. Hãy kiểm tra trường hợp khi <Child> được render:

<span class="token function">it</span><span class="token punctuation">(</span><span class="token string">"renders a Child component"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">shallowMount</span><span class="token punctuation">(</span>Parent<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span> showChild<span class="token punctuation">:</span> <span class="token boolean">true</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">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 punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">"Child"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">exists</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">toBe</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

it("renders a Child component", () => {

data() {

return { showChild: true }

}

})

expect(wrapper.find({ name: "Child" }).exists()).toBe(true)

})

Nó đá pass! Sử dụng tính chất name có thể sẽ có một chút không trực quan, vì vậy nhập component thực tế là một thay thế. Một tùy chọn khác là chỉ cần thêm một class hoặc id và truy vấn bằng querySelector được trình bày trong hai ví dụ đầu tiền.

`findAll`

Thường có trường hợp khi bạn muốn khẳng định rằng một số phần tử được render. Một số trường hợp phổ biến là một danh sách các mục được redner với v-for. Đây là một trong <ParentWithManyChildren> nó render các components <Child>.

<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>Child v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">"id in [1, 2 ,3]"</span> <span class="token punctuation">:</span>key<span class="token operator">=</span><span class="token string">"id"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">import</span> Child <span class="token keyword">from</span> <span class="token string">"./Child.vue"</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token punctuation">:</span> <span class="token string">"ParentWithManyChildren"</span><span class="token punctuation">,</span>

  components<span class="token punctuation">:</span> <span class="token punctuation">{</span> Child <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

<div>

</div>

</template>

import Child from "./Child.vue"

export default {

components: { Child }

}

</script>

Chúng ta có thể viết test kiểm tra bằng cách findAll xác nhận ba components <Child> sẽ được render như thế này:

<span class="token function">it</span><span class="token punctuation">(</span><span class="token string">"renders many children"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">shallowMount</span><span class="token punctuation">(</span>ParentWithManyChildren<span class="token punctuation">)</span>

  <span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">findAll</span><span class="token punctuation">(</span>Child<span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

it("renders many children", () => {

})

Chạy yarn test:unit sẽ hiển thị test đã pass. Bạn có thể sử dụng cú pháp querySelector với findAll.

Kết luận

Trang này bao gồm:

sử dụng find và findAll với cú pháp querySelector
isVisible và exists
sử dụng find và findAll với component hoặc name của phần được select

Mã nguồn cho bài kiểm tra được mô tả trên trang này có thể được tìm thấy ở đây.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Tìm kiếm các thành phần và thành phần

Tìm kiếm các yếu tố

Tạo các components

`find` vói `querySelector` syntax

TÌm thành phần với `name` và `Component`

`findAll`

Kết luận

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

Tìm kiếm các yếu tố

Tạo các components

find vói querySelector syntax

TÌm thành phần với name và Component

findAll

Kết luận

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

`find` vói `querySelector` syntax

TÌm thành phần với `name` và `Component`

`findAll`