آزمایش برنامه های Vue با کتابخانه Vue Testing – مجله Smashing

درباره نویسنده

کلوین یک سازنده نرم افزار مستقل است که در حال حاضر در حال ساخت است مرواریدهای دریایی – بستری برای یادگیری JavaScript سمت سرور. او همچنین یک نویسنده فنی و…
بیشتر در مورد
کلوین
…

یک کتابخانه بسیار سبک وزن و که بر تست برنامه جلویی خود را از دیدگاه کاربر – در این مقاله، ما در تست برنامه های کاربردی با استفاده از لانگ وو لانگ وو تست کتابخانه است.

فرضیات زیر در کل این مقاله ارائه شده است:

• خواننده با Vue آشنا است.
• خواننده با تست رابط کاربر آشنا است.

به طور معمول ، در Vue userland ، وقتی می خواهید برنامه خود را آزمایش کنید ، به دنبال آن می گردید @vue/test-utils – کتابخانه رسمی آزمایش برای Vue. @vue/test-utils API ها را برای آزمایش نمونه های اجزای ارائه شده Vue فراهم می کند. مانند این:

// example.spec.js
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

می بینید که ما با استفاده از ، نمونه ای از مueلفه Vue را نصب می کنیم shallowMount عملکرد ارائه شده توسط @vue/test-utils.

مشکلی که در رویکرد بالا برای آزمایش برنامه های Vue وجود دارد این است که کاربر نهایی با DOM تعامل خواهد کرد و هیچ اطلاعی از نحوه ارائه رابط کاربری Vue ندارد. در عوض ، او عناصر UI را با استفاده از محتوای متن ، برچسب عنصر ورودی و برخی نشانه های بصری دیگر در صفحه پیدا می کند.

روش بهتر نوشتن تست برای برنامه های Vue شما است به گونه ای که نحوه تعامل کاربر واقعی با آن را نشان دهد ، به عنوان مثال به دنبال دکمه ای برای افزایش مقدار محصول در صفحه پرداخت ، از این رو Vue Testing Library.

Vue Testing Library چیست؟

Vue Testing Library یک کتابخانه تست سبک برای Vue است که توابع کم وزنی را در بالای آن فراهم می کند @vue/test-utils. این با یک اصل راهنمای ساده ایجاد شده است:

هرچه تست های شما بیشتر به روش استفاده از نرم افزار شباهت داشته باشد ، اعتماد بیشتری به شما می دهد.
– تست کتابخانه.com

چرا از کتابخانه تست Vue استفاده کنید

• شما می خواهید تست هایی بنویسید که بر روی جزئیات پیاده سازی متمرکز نباشد ، یعنی آزمایش نحوه اجرای راه حل به جای اینکه خروجی مورد نظر را تولید کند.

• شما می خواهید تست هایی بنویسید که بر گره های واقعی DOM متمرکز شده و اجزای Vue ارائه نشده باشد.

• شما می خواهید تست هایی بنویسید که DOM را به همان روشی که کاربر می پرسد.

کتابخانه تست Vue چگونه کار می کند

Vue Testing Library با ارائه ابزارهایی برای س forال کردن DOM به همان روشی که کاربر با DOM تعامل می کند ، کار می کند. این ابزارها به شما امکان می دهند عناصر را بر اساس متن برچسب آنها پیدا کنید ، پیوندها و دکمه ها را از محتوای متن آنها پیدا کنید و ادعا کنید که برنامه Vue شما کاملاً قابل دسترسی است.

برای مواردی که آن را حس نمی کند و یا عملی برای پیدا کردن عناصر توسط محتوای متن یا برچسب آنها نیست، لانگ وو تست کتابخانه راه توصیه می شود برای پیدا کردن این عناصر با استفاده از فراهم می کند data-testid صفت به عنوان دریچه فرار برای یافتن این عناصر.

data-testid مشخصه به عنصر HTML اضافه می شود که شما می خواهید در آزمون خود س quال کنید. به عنوان مثال

<button data-testid="checkoutButton">Check Out</button>

شروع با کتابخانه تست Vue

اکنون که متوجه شدید چرا باید از Vue Testing Library و نحوه عملکرد آن استفاده کنید ، بیایید با راه اندازی آن در یک پروژه جدید Vue تولید شده Vue CLI ادامه دهیم.

اول، ما یک نرم افزار جدید لانگ وو با اجرای دستور زیر در ترمینال تولید (فرض کنید شما لانگ وو CLI بر روی دستگاه شما نصب شده):

vue create vue-testing-library-demo

برای اجرای تست های خود ، ما استفاده خواهیم کرد است – یک دونده آزمایشی توسعه یافته توسط فیس بوک. Vue CLI دارای یک افزونه است که به راحتی Jest را تنظیم می کند. بیایید آن پلاگین را اضافه کنیم:

vue add unit-jest

متوجه خواهید شد که پلاگین اسکریپت جدیدی را در package.json اضافه کرده است:

 "test:unit": "vue-cli-service test:unit",

این برای اجرای آزمون ها استفاده می شود. همچنین یک پوشه test جدید در src و داخل پوشه test یک پوشه unit با یک نمونه پرونده تست به نام اضافه شده است example.spec.js. بر اساس پیکربندی Jest ، هنگامی که ما اجرا می کنیم npm run test:unit Jest به دنبال پرونده ها در tests پرونده های آزمایشی را فهرست کرده و اجرا کنید. بیایید پرونده آزمون نمونه را اجرا کنیم:

npm run test:unit

این باید اجرا شود example.spec.js پرونده آزمون در tests/unit فهرست راهنما. بیایید به محتوای این پرونده نگاهی بیندازیم:

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

به طور پیش فرض ، نصب Jest با پلاگین Vue CLI نصب می شود @vue/test-utils، از این رو پرونده آزمون فوق با استفاده از shallowMount تابع از @vue/test-utils. یک راه سریع برای آشنایی با Vue Testing Library این است که سریعاً همین فایل آزمایشی را تغییر دهید تا از Vue Testing Library به جای @vue/test-utils.

این کار را ابتدا با حذف نصب انجام می دهیم @vue/test-utils چون نیازی به آن نخواهیم داشت.

npm uninstall @vue/test-utils --save-dev

سپس Vue Testing Library را به عنوان یک وابستگی به توسعه نصب می کنیم:

npm install @testing-library/vue --save-dev

سپس اقدام به اصلاح می کنیم tests/unit/example.spec.js به این:

import { render } from '@testing-library/vue'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const { getByText } = render(HelloWorld, {
      props: { msg }
    })
    getByText(msg)
  })
})

دوباره آزمون را اجرا کنید و هنوز باید بگذرد. بیایید ببینیم چه کار کردیم:

• ما از render عملکردی که توسط Vue Testing Library در معرض نمایش قرار گرفته است HelloWorld اجزاء. render تنها روش ارائه م componentsلفه ها در Vue Testing Library است. هنگامی که شما با رندر تماس می گیرید ، از م componentلفه Vue و به صورت اختیاری عبور می کنید options هدف – شی.

• سپس از شی the options برای عبور در استفاده می کنیم msg وسایل مورد نیاز توسط HelloWorld جزء. render یک شی object را با روش های کمکی برای پرس و جو از DOM برمی گرداند و یکی از این روش ها این است getByText.

• سپس استفاده می کنیم getByText برای اثبات اینکه آیا عنصری با محتوای متن “پیام جدید” در DOM وجود دارد.

شاید تاکنون متوجه تغییر از فکر کردن در مورد آزمایش م componentلفه ارائه شده Vue به آنچه کاربر در DOM می بیند ، شده باشید. این تغییر به شما امکان می دهد برنامه های خود را از منظر کاربر آزمایش کنید ، در عوض اینکه بیشتر روی جزئیات پیاده سازی تمرکز کنید.

برنامه نمایشی ما

اکنون که نحوه انجام آزمایش در Vue را با استفاده از کتابخانه Vue Testing مشخص کردیم ، آزمایش برنامه آزمایشی خود را ادامه خواهیم داد. اما اول ، ما رابط کاربر برنامه را استخراج خواهیم کرد. برنامه آزمایشی ما یک صفحه پرداخت ساده برای یک محصول است. ما در حال آزمایش خواهیم بود که آیا کاربر می تواند قبل از پرداخت مقدار محصول را افزایش دهد ، او می تواند نام و قیمت محصول و غیره را ببیند. بیا شروع کنیم.

ابتدا یک م componentلفه جدید Vue به نام checkout ایجاد کنید components/ فهرست را بردارید و قطعه زیر را به آن اضافه کنید:

<template>
    <div class="checkout">
        <h1>{{ product.name }} - <span data-testid="finalPrice">${{ product.price }}</span></h1>
        <div class="quantity-wrapper">
            <div>
                <label for="quanity">Quantity</label>
                <input type="number" v-model="quantity" name="quantity" class="quantity-input" />
            </div>
           <div>
                <button @click="incrementQuantity" class="quantity-btn">+</button>
                <button @click="decrementQuantity" class="quantity-btn">-</button>
           </div>
        </div>
          <p>final price - $<span data-testId="finalPrice">{{ finalPrice }}</span></p>
        <button @click="checkout" class="checkout-btn">Checkout</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            quantity: 1,
        }
    },
    props: {
    product: {
        required: true
        }
    },
    computed: {
        finalPrice() {
            return this.product.price * this.quantity
        }
    },
    methods: {
        incrementQuantity() {
            this.quantity++;
        },
        decrementQuantity() {
            if (this.quantity == 1) return;
            this.quantity--;
        },
        checkout() {

        }
    }
}
</script>

<style scoped>
.quantity-wrapper {
    margin: 2em auto;
    width: 50%;
    display: flex;
    justify-content: center;
}

.quantity-wrapper div {
    margin-right: 2em;
}
.quantity-input {
    margin-left: 0.5em;
}
.quantity-wrapper button {
    margin-right: 1em;
}
button {
    cursor: pointer;
}
</style>

سپس اصلاح کنید App.vue به:

<template>
  <div id="app">
    <check-out :product="product" />
  </div>
</template>

<script>
import CheckOut from './components/CheckOut.vue'

export default {
  name: 'App',
  data() {
     return {
          product: {
          name: 'Shure Mic SM7B',
          price: 200,
      }
    }
  },
  components: {
    CheckOut
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

برای مورد آزمایشی ما سناریوهای زیر را آزمایش خواهیم کرد:

1. آیا کاربر می تواند نام محصول را ببیند؟
2. آیا کاربر می تواند قیمت محصول را ببیند؟
3. آیا کاربر می تواند مقدار محصول را افزایش دهد؟
4. آیا کاربر می تواند مقدار محصول را کاهش دهد؟
5. آیا کاربر می تواند قیمت کل به روز شده را در زمان واقعی و با تغییر مقدار مشاهده کند؟

رابط کاربری ما کاملاً مینیمالیستی است زیرا تأکید بر آزمایش با کتابخانه تست Vue است. بیایید تست مولفه Checkout را انجام دهیم. یک فایل آزمایشی جدید در ایجاد کنید tests/unit/ نامیده می شود checkout.spec.js.

سپس به داربست پرونده آزمون خواهیم پرداخت:

import { render, fireEvent } from '@testing-library/vue'
import CheckOut from '@/components/CheckOut.vue'

const product = {
    name: 'Korg Kronos',
    price: 1200
}
describe('Checkout.vue', () => {
  // tests goes here
})

اولین مورد آزمایشی ما بررسی اینکه آیا نام محصول ارائه شده است یا خیر. ما می خواهیم چنین کار کنیم:

 it('renders product name', () => {
        const { getByText } = render(CheckOut, {
            props: { product }
        })

        getByText(product.name)
 })

سپس بررسی خواهیم کرد که آیا قیمت محصول ارائه شده است:

it('renders product price', () => {
        const { getByText } = render(CheckOut, {
            props: { product }
        })

        getByText("$" + product.price)
 })

با آزمایش م testingلفه Checkout ، ما آزمایش خواهیم کرد که آیا مقدار اولیه کاربر با استفاده از 1 برابر است getByDisplayValue روش کمکی:

it('renders initial quantity as 1', () => {
        const { getByDisplayValue, getByText } = render(CheckOut, {
            props: { product }
        })
        getByDisplayValue(1)
    })

در مرحله بعدی ، بررسی خواهیم کرد که آیا وقتی کاربر برای افزایش مقدار محصول روی دکمه کلیک می کند ، مقدار آن افزایش می یابد یا خیر. این کار را با شلیک رویداد کلیک با استفاده از fireEvent نرم افزار از Vue Testing Library. در اینجا اجرای کامل است:

it('increments product quantity', async () => {
        const { getByDisplayValue, getByText } = render(CheckOut, {
            props: { product }
        })
        const incrementQuantityButton = getByText('+')
        await fireEvent.click(incrementQuantityButton)
        getByDisplayValue(2)
})

ما برای کاهش نیز همین کار را خواهیم کرد وقتی مقدار 1 باشد – در این حالت ، مقدار را کاهش نمی دهیم. و همچنین وقتی مقدار آن 2 باشد. بیایید هر دو مورد آزمایشی را بنویسیم.

it('does not decrement quantity when quanty is 1', async () => {
        const { getByDisplayValue, getByText } = render(CheckOut, {
            props: { product }
        })
        const decrementQuantityButton = getByText('-')
        await fireEvent.click(decrementQuantityButton)
        getByDisplayValue(1)
    })

 it('decrement quantity when quantity greater than 1', async () => {
        const { getByDisplayValue, getByText } = render(CheckOut, {
            props: { product }
        })
        const incrementQuantityButton = getByText('+')
        const decrementQuantityButton = getByText('-')
        await fireEvent.click(incrementQuantityButton)
        await fireEvent.click(decrementQuantityButton)
        getByDisplayValue(1)
    })

در آخر ، ما بررسی خواهیم کرد که آیا با کلیک روی هر دو دکمه مقدار افزایش و کاهش قیمت نهایی بر این اساس محاسبه می شود و به کاربر نمایش داده می شود.

it('displays correct final price when increment button is clicked', async () => {
        const {  getByText, getByTestId } = render(CheckOut, {
            props: { product }
        })
        const incrementQuantityButton = getByText('+')
        await fireEvent.click(incrementQuantityButton)
        getByText(product.price * 2)
    })

it('displays correct final price when decrement button is clicked', async () => {
        const {  getByText} = render(CheckOut, {
            props: { product }
        })
        const incrementQuantityButton = getByText('+')
        const decrementQuantityButton = getByText('-')
        await fireEvent.click(incrementQuantityButton)
        await fireEvent.click(decrementQuantityButton)
        getByText(product.price)
    })

در تمام موارد آزمایشی ما ، متوجه خواهید شد که ما بیشتر از نوشتن آزمایشات خود از دیدگاه کاربر و دیدن کاربر متمرکز شده ایم. نوشتن تست ها به این روش اطمینان می دهد که آنچه را که برای کاربران برنامه مهم است ، آزمایش می کنیم.

نتیجه

در این مقاله یک کتابخانه و رویکرد جایگزین برای آزمایش برنامه های Vue به نام Vue Testing Library معرفی شده است ، ما می بینیم که چگونه می توان آن را تنظیم کرد و برای آن تست های م componentsلفه Vue را نوشت

منابع

شما می توانید پیدا کنید پروژه آزمایشی در GitHub.

(ra، yk، il)