内容简介:Vuex 分成 State、Mutation、Getter 與 Action 四部分,由於都是圍繞在 Data,因此都是針對 Data 做測試。本文討論 Getter 的 Unit Test。Vue 2.5.22
Vuex 分成 State、Mutation、Getter 與 Action 四部分,由於都是圍繞在 Data,因此都是針對 Data 做測試。
本文討論 Getter 的 Unit Test。
Version
Vue 2.5.22
Vuex 3.0.1
Vue-test-utils 1.0.0-beta.20
Store
books-info.js
import { fetchBooks } from '@/api/books'; /** mutation */ const setBooks = (state, { books }) => state.books = books; /** action */ const saveBooks = commit => ({ data }) => commit('setBooks', data); const loadBooks = ({ commit }) => fetchBooks().then(saveBooks(commit)); /** getter */ const booksCount = ({ books }) => books.length; export default { namespaced: true, state: { books: [] }, mutations: { setBooks }, getters: { booksCount }, actions: { loadBooks }, };
一個典型的 Vuex store,包含 state
、 mutations
、 getters
與 actions
。
10 行
/** getter */ const booksCount = ({ books }) => books.length;
booksCount()
為典型的 getter,將 books
state 的 length
property 傳回。
Unit Test
getter.spec.js
import store from '@/store/modules/books-info'; test('booksCount() getter', () => { /** arrange */ const stub = [1, 2, 3]; const state = { books: stub }; /** act */ const result = store.getters.booksCount(state); /** assert */ expect(result).toBe(3); });
第 1 行
import store from '@/store/modules/books-info';
將要測試的 store
import 進來。
第 3 行
test('booksCount() getter', () => { /** arrange */ /** act */ /** assert */ });
所有的 unit test 都包在 test()
的第二個參數,以 Arrow Function 表示。
test()
的第一個參數為 description,可描述 test case。
一樣使用 3A 原則寫 unit test。
第 4 行
/** arrange */ const stub = [1, 2, 3]; const state = { books: stub };
要測試 getter,有兩個原則:
books
const stub = [1, 2, 3];
建立要測試的 stub。
const state = { books: stub };
建立 fake state object,並以 stub 建立 state 的初始值。
第 8 行
/** act */ const result = store.getters.booksCount(state);
實際執行 booksCount()
getter,變傳入剛在 arrange 建立的 fake state。
將 bookCount()
getter 結果存於 result
。
11 行
/** assert */ expect(result).toBe(3);
驗證 result
是否等於預期結果。
$ yarn test:unit
通過 unit test 得到 綠燈
。
Conclusion
- Vuex 的 Getter 本質是 function,且職責很確定,因此 unit test 非常好寫
- 由於 getter 的職責只有讀取 state,測試手法就是提供 stub 並透過 fake state object 建立 state 初始值,然後執行 getter 並驗證結果是否如預期
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
京东平台运营攻略(全彩)
京东商学院 / 电子工业出版社 / 2015-5 / 69.00元
2014 年年末,京东POP 开放平台的入驻商家已超过6 万,京东平台被广泛关注和认可的同时,在电商江湖中仍颇具神秘色彩。面对碎片化的信息,京东的店铺经营者及希望入驻京东的准商家们,对于在京东如何利用丰富的各类平台资源,搭建并运营京东店铺,一直很难找到全面而系统的资料。 《京东平台运营攻略(全彩)》由京东官方出品,动员了京东内部涉及第三方店铺业务线的众多部门,由多位业务精英参与撰写,保证了内......一起来看看 《京东平台运营攻略(全彩)》 这本书的介绍吧!