iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
自我挑戰組

Vue應用測試 系列

建構第一個帶有Test的Vue app

參賽天數 19 天 | 共 30 篇文章 | 5 人訂閱 訂閱系列文 RSS系列文 團隊Barista, 一起喝咖啡?
DAY 1

Day 1. Test ?

前言 測試在軟體開發中扮演了不可或缺的腳色。 有些人可能會說:我從來沒有寫過測試,那些東西不也好好的上線了嗎? 其實不然,在開發過程中時不時會在IDE開啟deb...

2020-09-16 ‧ 由 didi2810812 分享
DAY 2

Day2. Unit Test?

前言 今天要來介紹Unit Test在前端的測試,通常是以函式為單位,但是在Vue裡也可以組件(Component)為單位進行,後面會再詳細介紹。 單元測試 單...

2020-09-17 ‧ 由 didi2810812 分享
DAY 3

Day3. 第一個測試

今天我們要來新建一個測試用的專案! 首先輸入 vue create {project-name} 在{}裡面填專案的名字 這邊選擇手動配置裡面的選項 這邊...

2020-09-18 ‧ 由 didi2810812 分享
DAY 4

Day4. Mount? shallowMount?

上一篇的Code有使用shallowMount來掛載需要測試的組件,這篇就來看看Mount跟shallowMount有什麼差別吧! Mount Mount 就是...

2020-09-19 ‧ 由 didi2810812 分享
DAY 5

Day 5. 如何在Chrome Debug Test

寫Test的時候常常會需要Debug,這篇教你如何用Chrome裡的Inspect 來debug你的測試! Chrome Inspect 首先我們來修改一下我們...

2020-09-20 ‧ 由 didi2810812 分享
DAY 6

Day 6. 建立一個真實的Vue app

從這章開始,我們要準備開始建立一個真正的Vue用來測試。 前面幾章都是在介紹一些關於Jest的基礎操作,還有如何使用Chrome debug 測試,現在我們要來...

2020-09-21 ‧ 由 didi2810812 分享
DAY 7

Day. 7 測試是否有正確渲染

上一篇我們有產生spec,並依照spec來撰寫item.vue測試。 List 把從API取得的資訊每一項都渲染成一個Item。 把正確的值傳遞給item。...

2020-09-22 ‧ 由 didi2810812 分享
DAY 8

Day 8. 測試component的數量

上一篇我們測試了Item能否正確渲染url以及title,現在讓我們來測試List能否正確的渲染全部的內容。 FindAll 這裡我們會使用FindAll,Fi...

2020-09-23 ‧ 由 didi2810812 分享
DAY 9

Day 9. 測試Class

我們在網頁載入時常常看到會有進度條設計,寫過一點網頁的大概都知道怎麼寫,但是要怎麼針對這種效果寫test呢? wrapper.classes ProgressB...

2020-09-24 ‧ 由 didi2810812 分享
DAY 10

Day. 10 測試Component Method

身體不舒服 先簡單寫個範例吧 Test Component Method 這是一個Component Method的範例,這樣的Method 可以視為Priva...

2020-09-25 ‧ 由 didi2810812 分享