技術 【Day24】來到了測試的總整理啦 ヽ(‘ ∇‘ )ノ

來到測試的尾聲，來把前面所學的整理一下吧! First Step => 要進行測試，我們勢必要有東西給它測試，而且也要有可以進行測試的套件 利用以...

技術 【Day23】計數器減號按紐及測試小練習，先別偷看解答R ~ (⁎˃ᆺ˂)

這篇要來個小小練習，增加一個減號的按鈕，並針對其結果作一個單元測試。 先別往下看，給自己五到十分鐘... 再往下看解答 ! 首先，和累加的按鈕一樣，我們先在畫...

技術 【Day22】判斷計數器數字初始值是否為0且按下增加的按鈕時結果是否正確 「(°ヘ°)

上一篇針對了計數器Component做了三個單元測試，Component、計數器按鈕、計數器的數字是否正常顯示， 還少了兩個單元測試 => 計數器數字的初...

技術 【Day21】補上data-test屬性及判斷Component和按鈕及數字是否正確顯示(╯✧∇✧)╯

基本上我們會用到 計數器這整個Component (div) 、顯示數字 (span)、按鈕(button)這三個DOM， 所以先在我們的Component上加...

技術 【Day20】建立計數器的Test，並提供測試使用的方法 ୧☉□☉୨!

上一篇我們把計數器Component完成了，這篇要來寫這個計數器的測試了! 首先我們要先建立一個屬於它的測試檔案 (還記得之前有提過說測試檔案的名稱要是那個Co...

技術 【Day19】用Bootstrap和Fontawesome來刻我們的計數器吧 (´∀`)!!

我們先來畫我們的計數器吧! 為了讓我們的計數器精美一點點點， 我們先來安裝React的fontAwesome(一些icon)和React的bootstrap吧!...

技術 【Day17】 data-test這個屬性是用來幹嘛的...? 這東西能吃嗎 (╯✧∇✧)╯ !?

其實在html裡，我們可以給予以data開頭的屬性， data-test這個屬性只是方便我們來辨別它是測試用的屬性 在html標籤上鑲入data-test屬...

技術 【Day16】單元測試不用每次都寫一樣的東西吧!? 把常用的function寫成共用的吧୧☉□☉୨!

首先!! 我們先來建立渲染Component的function (這邊用的會是es6的箭頭函式) const setup=()=>shallow(<...

技術 【Day15】Enzyme的兩個常用渲染API及Jest的幾個API，和..設計測試的幾個要點 （・θ・）

為了讓我們的測試看起來乾淨，就跟寫Code一樣，淺顯易懂是原則，所以我們要把握以下兩點! DRY(Don't Repeat Yourself) =>...

技術 【Day14】利用Ezyme來跑個小小測試，還有..測試權衡是蝦咪東東 (•ө•)!!?

寫測試時，我們基本需要三樣東西 Enzyme Enzyme跟React溝通的適配器(Adapter) 在Enzyme裡，我們要使用的渲染方式 (Shallow...

技術 【Day13】在Ezyme上裝上相對應版本的適配器(Adapter)吧´･ᴗ･`

前面我們有大概提到Enzyme的優點及作用~ 這篇我們要直接來安裝Enzyme和導入Enzyme來供我們後續的測試作使用! 由於Enzyme 不會在建立專案的時...

技術 【Day1】下載VsCode來開啟我們的前端測試不歸路吧(╬•᷅д•᷄╬)

嗨各位看官們,對~又是我! 這是第二次參加鐵人賽,除了要檢視自己是不是有進步以外,也想把這一年來有學到的東西分享給大家 ! 上一屆鐵人賽寫了PHP後端框架-sy...