Vue testing library - avoriaz

Transcript

1. Vue testing library avoriaz PIXNET 獮ᒒ奲ֺ䨝 2017/02/05 Julian 1
2. 墋ฃጱ㻌ز介手 2
3. Test framework • Test framework (Mocha, jasmine, jest, etc …) • Mocha ䷱磪䥁᥺牧襑砇蟴 Chai ౲ٌ犢ॺկ • Jasmine(2.x) === Mocha + Chai + Sinon - mockserver 3
4. Test framework 4
5. headless browser • headless browser (PhantomJS, jsdom) • 蝧ଶ斃盠牧֕穉斃櫞ਠ獊秇硈፥䋿眐୵ 5
6. Test Runner • Test Runner (Karma, Selenium) • 蝚螂倵薩瑊薪疗 • karma.config.js 6
7. Vue 介手 • Vue-cli: karma + Mocha + Nightwatch (e2e) • ᛔᤈ蟴ᗝ Mocha-webpack + Mocha + chai 7
8. ਞ蕕 • npm install --save-dev mocha chai • npm install mocha-webpack … etc ٌ犢 es6 翥捌ፘ 橕 • npm run test 8 • package.son
9. avoriaz • a Vue.js testing utility library • 秇硈Ԫկ藉咳 • ො׎ጱ䥁᥺獢ୗ䓚 • 砺֢ৼزկ 9 • https://github.com/eddyerburgh/avoriaz
10. avoriaz 10 • https://github.com/eddyerburgh/avoriaz • ൉׀膏ݱ圵介手瑊膏໛礍ጱ蟴ᗝ塅ֺ
11. avoriaz • npm install —save-dev avoriaz jsdom • jsdom 秇硈 Dom 奾䯤 11 • package.son • .setup
12. avoriaz • ڡত玕物 const wrapper = mount(Foo, { options }); 12
13. avoriaz api • mount • use 13
14. mount • contains (selector) • 嘦藨ݑ玽۱珀瞲ਧৼزկ౲ selector 牧ࢧ㯽૲຋独 14
15. mount • find(selector) • ࢧ㯽ৼ℄讨౲ vue component array 15
16. mount • simulate(eventName) • Ԫկ藉咳 16
17. mount 17 • computed() • data() • methods() • instance() • hasStyle() • etc …
18. use 18 • ୚獈ٌ犢 vue ॺկ牧ֺই vuex
19. 綡㺔 • propsData, setData, update 缛ݢ犥虋矦 component ጱොဩฎ玽螕ݳֵአ 19
20. 奾抷 • 琲手௔疩獈介手ૡٍ虏介手ݢ犥ๅ਻ฃᤩ䁆ᤈ 20
21. 㷢ᘍ • How to unit test Vue components • https://github.com/eddyerburgh/avoriaz • avoriaz github • https://github.com/eddyerburgh/avoriaz • ቘ薹獮ᒒ୏ݎӾጱunit test ޾ e2e test • https://tech.colla.me/zh/show/ understanding_unit_test_and_e2e_test_in_frond_end_development 21