Lampochka va Vue sinov vositalarini tezkor Vue bloklarini yozing

Lenta va Vue - jannatda qilingan gugurt

Lent - bu Vue tarkibiy qismlarini sinovdan o'tkazish uchun eng tezkor tizim.

Ushbu maqolada, Vue birligi sinovlarini lenta va Vue sinov vositalarida qanday yozishni ko'rib chiqamiz.

Ushbu qo'llanma birliklarni sinash bilan tanish bo'lgan foydalanuvchilar uchun mo'ljallangan. Agar siz birliklarni sinovdan o'tkazishga yangi kelgan bo'lsangiz, yangi boshlanuvchilar uchun jihozning sinov elementlarini tekshiring.

Lenta nima?

Lent - bu yalang'och suyaklar blokining sinov doirasi bo'lib, u sinov hisobotini TAP (Test Anything Protocol) formatida chiqaradi.

Sizning JavaScript va Vue komponentlaringiz to'g'ri ishlayotganini tasdiqlash uchun oddiy API mavjud.

Nima uchun lenta?

Bir necha hafta oldin men turli xil sinov maydonchalarida ba'zi sinovlarni o'tkazdim. Men Vue SFC-larni (bitta fayl tarkibiy qismlari) sinash uchun qaysi ramka eng tezkor ekanligini bilmoqchi edim.

Men lentani to'liqligi uchun qo'shdim va u eng tezkor ishlaydigan ramka ekanligini bilib hayron bo'ldim.

Bantda sinovlarni o'tkazish uchun biz biroz sozlashimiz kerak. To'g'ri ichkariga sho'ng'iymiz.

Loyihani yuklash

Men boshlash uchun oddiy boshlang'ich loyihani qildim. Loyihani katalogga klonlash:

git kloni https://github.com/eddyerburgh/jest-vue-starter.git

CD-ga ulang va bog'liqlikni o'rnating:

cd jest-vue-starter && npm-ni o'rnatish

Ilovani tekshirish uchun dev serverini npm run dev sifatida ishga tushiring.

Bu juda oddiy. Ushbu darslikning asosiy mohiyati murakkab testlarni yozmaslik uchun lenta va Vue-ni qanday o'rnatishni ko'rishdir.

Lenta va Vue sinov vositalarini o'rnatish

Birinchidan, Tape va Vue Test Utilitalarini o'rnatish:

npm o'rnatish --save-dev tape @ vue / sinov dasturlari

Vue Test Utils beta-versiyada, shuning uchun biz aniq versiyani talab qilishimiz kerak

Vue Test Utillar ishlashi uchun brauzer muhiti kerak. Bu biz sinovlarni brauzerda o'tkazishimiz kerak degani emas (to'liq rahmat!).

Node-da brauzer muhitini yaratish uchun biz jsdom-dan foydalanishimiz mumkin. U Node-ga hujjat va oyna kabi global o'zgaruvchilarni qo'shadi.

jsdom sozlash uchun juda oz og'riq. Yaxshiyamki ba'zi tashabbuskor tugun ishlab chiqaruvchisi brauzer-env deb nomlangan o'rash kutubxonasini yaratdi.

npm o'rnatish --save-dev brauzeri-env

Sinovlardan oldin biz brauzer-env-ni ishga tushirishimiz kerak. Lenta bizga sinovlardan oldin ishga tushadigan fayllarni aniqlashga imkon beradi, biz buni bir soniyada bajaramiz.

SFC sinovlari sinovdan oldin tuzilishi kerak. Node-da zarur bo'lganda WebPack-ni ishga tushirish uchun biz ilgaklar yordamida foydalanishimiz mumkin. Bu oddiy sozlash.

Birinchidan, ext-ext-ilgaklar va uning variantlarini o'rnating:

npm-o'rnatish -save-dev-extiyot-ilova-kancalar-талаб-kengaytirish-ilgaklar-babel-talab-kengaytirish-ilgaklar-vue

Keling, men ilgari aytgan sozlash faylini qilaylik. Sinov katalogini yarating va setup.js faylini qo'shing. Yakuniy yo'l test / setup.js bo'ladi.

Biz shu yerdamiz. Jinni narsalar.

Keling, lentada tutun sinovini yozaylik. Test katalogida List.spec.js deb nomlangan yangi fayl yarating. To'liq yo'l testi / List.spec.js. Sinovni quyidagi faylga ko'chiring:

U erda nima bo'lyapti? Biz sinovni aniqlaymiz va qayta qo'ng'iroq qilish paytida t ob'ektini olamiz. T ob'ekti tasdiqlash usullarini o'z ichiga oladi. Shuningdek, u reja usuliga ega. Biz Tape-ga qancha sinovlarni kutish kerakligini aytib berishimiz kerak.

Endi sinovlarni o'tkazish uchun bizga skript kerak. Package.json-ni oching va ushbu skriptni qo'shing:

"birlik": "lenta ./test/specs/*.spec.js -r ./test/setup.js"

Bu barcha .spec fayllarini test / spetsifikatsiyalarda ishlashini ta'minlaydi. Therr Tape-ga testlarimizni boshlashdan oldin test / sozlashni talab qilish yoki ishga tushirishni aytadi.

Jihozni sinovdan o'tkazing:

npm ishlaydigan birlik

Yo'q, biz sinovdan o'tdik. Ammo hoo boy - bu yomon sinov natijasi ️

Eslatib o'taman, men ilgari TAP haqida gapirgan edim? Bu yalang'och shon-sharafdagi TAP. Juda chirkinmi? Xavotir olmang, biz buni maqtashimiz mumkin.

Belgilarni o'rnatish:

npm o'rnatish --save-dev tap-spec

Biz TAP mahsulotimizni lentadan chiqaramiz. Chiqish moslamasini aniqlash uchun birlik skriptini tahrirlang:

"birlik": "lenta ./test/specs/*.spec.js -r ./test/setup.js | tap-spec"

Va testlarni yana o'tkazing:

npm ishlaydigan birlik

Yaxshisi

Tape va Vue Test Utilitalari yordamida testlarni yozish

Keling, ba'zi sinovlarni yozaylik. Biz Vue Test Utils dasturidan foydalanayotganimiz sababli, sinovlar juda yaxshi o'qilgan.

List.spec.js-da biz ro'yxatga elementlar qatorini o'tkazadigan test yozamiz. Vue Test Utils-dan tarkibiy qismni sayoz o'rnatish uchun biz sayoz usuldan foydalanamiz. sayoz, o'rnatilgan komponentni o'z ichiga olgan o'rashni qaytaradi. Biz teglari uchun render daraxtini qidirish va findning nechta ekanligini tekshirish uchun findAll-dan foydalanishimiz mumkin.

Testni pastdan test / specs / List.spec.js-ga nusxa ko'chiring.

Sinovlarni npm ishlaydigan birlik bilan o'tayotganini tomosha qiling. E'tibor bering, bizda t.equals tasdiqlash uchun xato xabari bor. Odatiy xabarlarni o'qib bo'lmaydi, shuning uchun biz o'z xabarlarimizni qo'shganimiz ma'qul.

Endi test / specs / MessageToggle.spec.js yangi fayl qo'shing. Bu erda biz test yozamiz, siz buni taxmin qilgansiz, MessageToggle.vue.

Biz hozir ikkita sinovni yozmoqchimiz. Ulardan biri

​​tegining standart xabar yuborilishini tekshiradi. O'rnatilgan komponentni o'z ichiga olgan o'rashni olish uchun biz yana sayozlikni ishlatamiz va matnni

​​tegiga qaytarish uchun matn usulidan foydalanamiz.

Ikkinchi sinov shunga o'xshash. O'tkazib yuborish tugmachasi bosilganda xabar o'zgaradi deb ta'kidlaymiz. Buning uchun biz trigger usulidan foydalanishimiz mumkin.

Quyidagi kodni test / specs / MessageToggle.spec.js ichiga nusxa ko'chiring:

Sinovlarni npm ishga tushirish birligi bilan yana bajaring. Woop - yashil sinovlar

Tape-ning ijobiy va salbiy tomonlari

Endi biz bir nechta sinovlarni qo'shdik, Tape-ning afzalliklari va kamchiliklarini ko'rib chiqaylik.

Taroziga soling

  • Tez
     Haqiqatan ham tez fast
  • Bu juda oddiy
     Siz manba kodini o'qishingiz mumkin
  • U TAP-dan foydalanadi.
    TAP standart bo'lganligi sababli, TAP bilan bevosita ishlaydigan ko'plab dasturlar mavjud
    Tarmoqli modul singari, biz unga TAP matnini qo'shdik va u biz uchun juda yoqimli bo'ldi
  • Cheklangan tasdiqlar
     Cheklangan tasdiqlar sizning tushuntirishlaringizni tushunish oson

Kamchiliklari

  • Cheklangan tasdiqlar
     Bu ham bor
    Siz hasBeenCalledWith kabi tasdiqlar bilan foydali xato xabarlarini olishingiz mumkin, buni t.equal bilan takrorlash qiyin.
  • U buzadi
    10000 dan ortiq testlarni bajarganingizda
    Ehtimol, siz buni urolmaysiz. Ammo bu katta Vue loyihasi uchun bitimni buzuvchi bo'lishi mumkin
  • Bu asosiy
     Siz masxara qilish, qoqish va soxtalashtirish uchun boshqa kutubxonalardan foydalanishingiz kerak bo'ladi

Kamchiliklari va kamchiliklari bir-biriga o'xshash. Lenta asosiy hisoblanadi va bu siz so'raganingizga qarab yaxshi yoki yomon narsa bo'lishi mumkin.

Eng muhimi, bu tez yonib turadi!

Tez birlik sinovlari yaxshi birlik sinovlari.

Amalga chorlash

Yangi test tizimini ishlab chiqishning eng yaxshi usuli - bu undan foydalanish.

Keyingi Vue loyihasida siz Tape-ni sinab ko'ring. Tasdiqlash ro'yxatini siz README tasmasidan topishingiz mumkin.

Rohatlaning

Tayyor reponi GitHub-da topishingiz mumkin.