Submit Search
Upload
前端測試
•
Download as PPTX, PDF
•
0 likes
•
63 views
C
chang kuo-chao
Follow
前端測試介紹,內容牽涉: Mocha, Cucumber, Sinon, Should...等等前端測試相關框架
Read less
Read more
Software
Report
Share
Report
Share
1 of 66
Download now
Recommended
認試軟體測試的世界 & TDD/BDD 入門
認試軟體測試的世界 & TDD/BDD 入門
wantingj
2012 China 软件测试大会
2012 China 软件测试大会
mayun1688
單元測試介紹
單元測試介紹
Adison wu
2019/7/27 先別開 Branch 了,你聽過 Feature Toggle 嗎?
2019/7/27 先別開 Branch 了,你聽過 Feature Toggle 嗎?
Miles Chou
打造完全免費的,JAVA專案持續整合環境_ 2013 java developer_day_by 李書豪
打造完全免費的,JAVA專案持續整合環境_ 2013 java developer_day_by 李書豪
奕孝 陳
持續整合與單元測試
持續整合與單元測試
昱劭 劉
Cppunit下載、編譯、使用與困難排除
Cppunit下載、編譯、使用與困難排除
Chris Wang
腾讯大讲堂49期 产品翻译面面谈
腾讯大讲堂49期 产品翻译面面谈
areyouok
Recommended
認試軟體測試的世界 & TDD/BDD 入門
認試軟體測試的世界 & TDD/BDD 入門
wantingj
2012 China 软件测试大会
2012 China 软件测试大会
mayun1688
單元測試介紹
單元測試介紹
Adison wu
2019/7/27 先別開 Branch 了,你聽過 Feature Toggle 嗎?
2019/7/27 先別開 Branch 了,你聽過 Feature Toggle 嗎?
Miles Chou
打造完全免費的,JAVA專案持續整合環境_ 2013 java developer_day_by 李書豪
打造完全免費的,JAVA專案持續整合環境_ 2013 java developer_day_by 李書豪
奕孝 陳
持續整合與單元測試
持續整合與單元測試
昱劭 劉
Cppunit下載、編譯、使用與困難排除
Cppunit下載、編譯、使用與困難排除
Chris Wang
腾讯大讲堂49期 产品翻译面面谈
腾讯大讲堂49期 产品翻译面面谈
areyouok
Continuous Delivery - 敏捷開發的最後一哩路
Continuous Delivery - 敏捷開發的最後一哩路
Miles Chou
Pair Programming (结对编程)
Pair Programming (结对编程)
Josh Chen
Project GATE 的敏捷實踐之路
Project GATE 的敏捷實踐之路
AgileCommunity
The way to continuous delivery
The way to continuous delivery
Qiao Liang
Towards scrum of scrums
Towards scrum of scrums
Pin-Ying Tu
Xpp
Xpp
drewz lin
Asp.net core v1.0
Asp.net core v1.0
chang kuo-chao
Credit planning
Credit planning
Ggdub-productions
Film posters Research
Film posters Research
Ggdub-productions
Lineas de Producto de Software y Método Watch
Lineas de Producto de Software y Método Watch
Andreina Soto
Oleg Koss CEM conference 2015 v3 - English
Oleg Koss CEM conference 2015 v3 - English
Oleg Koss
Informa cri 02.2015
Informa cri 02.2015
Croce Rossa Italiana - Comitato Locale Folgaria Lavarone Luserna
Title planning
Title planning
Ggdub-productions
Oleg Koss design thinking breaking silos
Oleg Koss design thinking breaking silos
Oleg Koss
Инструменты дизайн-мышления в бизнесе
Инструменты дизайн-мышления в бизнесе
Oleg Koss
Il viaggio di enea
Il viaggio di enea
DanielaMainardi10
Employee Engagement Tips
Employee Engagement Tips
Karen Adie
Il viaggio di enea
Il viaggio di enea
DanielaMainardi10
CEM in B2B v 1.3
CEM in B2B v 1.3
Oleg Koss
OAuth2介紹
OAuth2介紹
升煌 黃
Apk 分析工具整理
Apk 分析工具整理
Pu Lee
Test driven development with behat and silex
Test driven development with behat and silex
Dionyshs Tsoumas
More Related Content
What's hot
Continuous Delivery - 敏捷開發的最後一哩路
Continuous Delivery - 敏捷開發的最後一哩路
Miles Chou
Pair Programming (结对编程)
Pair Programming (结对编程)
Josh Chen
Project GATE 的敏捷實踐之路
Project GATE 的敏捷實踐之路
AgileCommunity
The way to continuous delivery
The way to continuous delivery
Qiao Liang
Towards scrum of scrums
Towards scrum of scrums
Pin-Ying Tu
Xpp
Xpp
drewz lin
What's hot
(6)
Continuous Delivery - 敏捷開發的最後一哩路
Continuous Delivery - 敏捷開發的最後一哩路
Pair Programming (结对编程)
Pair Programming (结对编程)
Project GATE 的敏捷實踐之路
Project GATE 的敏捷實踐之路
The way to continuous delivery
The way to continuous delivery
Towards scrum of scrums
Towards scrum of scrums
Xpp
Xpp
Viewers also liked
Asp.net core v1.0
Asp.net core v1.0
chang kuo-chao
Credit planning
Credit planning
Ggdub-productions
Film posters Research
Film posters Research
Ggdub-productions
Lineas de Producto de Software y Método Watch
Lineas de Producto de Software y Método Watch
Andreina Soto
Oleg Koss CEM conference 2015 v3 - English
Oleg Koss CEM conference 2015 v3 - English
Oleg Koss
Informa cri 02.2015
Informa cri 02.2015
Croce Rossa Italiana - Comitato Locale Folgaria Lavarone Luserna
Title planning
Title planning
Ggdub-productions
Oleg Koss design thinking breaking silos
Oleg Koss design thinking breaking silos
Oleg Koss
Инструменты дизайн-мышления в бизнесе
Инструменты дизайн-мышления в бизнесе
Oleg Koss
Il viaggio di enea
Il viaggio di enea
DanielaMainardi10
Employee Engagement Tips
Employee Engagement Tips
Karen Adie
Il viaggio di enea
Il viaggio di enea
DanielaMainardi10
CEM in B2B v 1.3
CEM in B2B v 1.3
Oleg Koss
OAuth2介紹
OAuth2介紹
升煌 黃
Apk 分析工具整理
Apk 分析工具整理
Pu Lee
Test driven development with behat and silex
Test driven development with behat and silex
Dionyshs Tsoumas
TDD-based workflow: Optimizing Development Process
TDD-based workflow: Optimizing Development Process
Akbar Hidayat
Fiddler 網頁除錯工具
Fiddler 網頁除錯工具
Pu Lee
Test Driven Development
Test Driven Development
升煌 黃
Responsive Design Workflow
Responsive Design Workflow
Shivanku Kumar
Viewers also liked
(20)
Asp.net core v1.0
Asp.net core v1.0
Credit planning
Credit planning
Film posters Research
Film posters Research
Lineas de Producto de Software y Método Watch
Lineas de Producto de Software y Método Watch
Oleg Koss CEM conference 2015 v3 - English
Oleg Koss CEM conference 2015 v3 - English
Informa cri 02.2015
Informa cri 02.2015
Title planning
Title planning
Oleg Koss design thinking breaking silos
Oleg Koss design thinking breaking silos
Инструменты дизайн-мышления в бизнесе
Инструменты дизайн-мышления в бизнесе
Il viaggio di enea
Il viaggio di enea
Employee Engagement Tips
Employee Engagement Tips
Il viaggio di enea
Il viaggio di enea
CEM in B2B v 1.3
CEM in B2B v 1.3
OAuth2介紹
OAuth2介紹
Apk 分析工具整理
Apk 分析工具整理
Test driven development with behat and silex
Test driven development with behat and silex
TDD-based workflow: Optimizing Development Process
TDD-based workflow: Optimizing Development Process
Fiddler 網頁除錯工具
Fiddler 網頁除錯工具
Test Driven Development
Test Driven Development
Responsive Design Workflow
Responsive Design Workflow
Similar to 前端測試
TDD (Test-driven development, 測試驅動開發) 基本教學
TDD (Test-driven development, 測試驅動開發) 基本教學
潘 冠辰
數學系的資訊人生
數學系的資訊人生
Jintin Lin
测试驱动的前端开发初探
测试驱动的前端开发初探
hua qiu
Test driven-frontend-develop
Test driven-frontend-develop
fangdeng
前端单元测试
前端单元测试
LC2009
From Coders to Builders of the Intelligent World
From Coders to Builders of the Intelligent World
Huawei Technologies
Static Code Analysis 靜態程式碼分析
Static Code Analysis 靜態程式碼分析
Bill Lin
20121115 Slides
20121115 Slides
Tonyq Wang
Open source的devops工具箱 公開版@coscup2016
Open source的devops工具箱 公開版@coscup2016
Kirk Chen
Angular Testing for Book Club Online of Angular Taiwan
Angular Testing for Book Club Online of Angular Taiwan
志龍 陳
Developer vs designer
Developer vs designer
Robert Luo
面向对象设计七大原则
面向对象设计七大原则
zoorz
BDD in .NET
BDD in .NET
Joey Chen
小量快速製造的瓶頸與可行策略
小量快速製造的瓶頸與可行策略
MAKERPRO.cc
持續交付高品質程式碼 公開版
持續交付高品質程式碼 公開版
Kirk Chen
Nb的敏捷
Nb的敏捷
Lanhui Ou
李成银:前端编译平台
李成银:前端编译平台
taobao.com
前端编译平台
前端编译平台
Welefen Lee
Djt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.com
drewz lin
Djt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.com
drewz lin
Similar to 前端測試
(20)
TDD (Test-driven development, 測試驅動開發) 基本教學
TDD (Test-driven development, 測試驅動開發) 基本教學
數學系的資訊人生
數學系的資訊人生
测试驱动的前端开发初探
测试驱动的前端开发初探
Test driven-frontend-develop
Test driven-frontend-develop
前端单元测试
前端单元测试
From Coders to Builders of the Intelligent World
From Coders to Builders of the Intelligent World
Static Code Analysis 靜態程式碼分析
Static Code Analysis 靜態程式碼分析
20121115 Slides
20121115 Slides
Open source的devops工具箱 公開版@coscup2016
Open source的devops工具箱 公開版@coscup2016
Angular Testing for Book Club Online of Angular Taiwan
Angular Testing for Book Club Online of Angular Taiwan
Developer vs designer
Developer vs designer
面向对象设计七大原则
面向对象设计七大原则
BDD in .NET
BDD in .NET
小量快速製造的瓶頸與可行策略
小量快速製造的瓶頸與可行策略
持續交付高品質程式碼 公開版
持續交付高品質程式碼 公開版
Nb的敏捷
Nb的敏捷
李成银:前端编译平台
李成银:前端编译平台
前端编译平台
前端编译平台
Djt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.com
前端測試
1.
前端測試
2.
大綱 • 測試概要 • TDD •
BDD • CI/CD
3.
為什麼要寫測試程式呢? 你先說說為啥不寫? 測試程式大哉問
4.
• 因為寫測試程式很花時間…. • 因為需求一直改,光改Production
Code就改不完了…. 開發人員的心聲
5.
為什麼系統這麼爛阿~~~~! 因為沒有寫測試程式呀 客戶 PM 客戶在用完系統後 沒寫測試程式而想要裝可愛的開發人員
6.
缺陷修復- 不同階段所要付出的代價
7.
RiskCostHigh Low Nothing Too much Sweet
Point 是否寫測試的全局觀
8.
可是時程太趕阿!
9.
哼!看來你不知道TDD
10.
它是另一種寫測試的方式?
11.
它是開發方法啦!
12.
不管怎麼看都只是寫測試呀?
13.
測試只是它附帶的 產物啦!
14.
TDD的作業流程
15.
• Fast • Independent •
Repeatable • Self Validation • Timely
16.
• Mocha是一套支援TDD/BDD的前端測試框架 • Mocha可以和多種測試平台結合 •
許多前端的斷言庫都有與Mocha的結合 前端測試框架:Mocha
17.
Mocha使用技巧 • 支援ES6/7: • 需在指令加上參數
–compilers • 執行多個測試檔案: • 需在指令加上參數 –recursive • 範例: npm alias “test”:”mocha --compilers js:babel-core/register --recursive” • 若需要的參數過多,可在test資料夾中添加mocha.opts檔案,並在檔 案中加入所需要參數,每一個參數以換行符號區隔
18.
• 提供測試框架在斷言方面的協助 • 解決物件比對的問題 •
以口語的API串接方式,讓開發人員能夠更直觀 • 提供Promoise物件的斷言 前端斷言框架:Should.js
19.
• 為react-addons-test-utils的包覆Js庫 • 提供jQuery的查找內容API,並支援鏈式呼叫 •
具有Shallow/Full兩種模式,依需要選擇適合的 • Shallow僅載入第一層Component • Full可以存取真實的DOM物件 • 允許模擬DOM事件: click,select…. ReactJs測試框架:Enzyme.js
20.
21.
什麼是最小單元? 完全不知道該怎麼切割ㄟ?
22.
我切的不對? 應該不是以API為單位 僅完成單一職責的程式碼區塊 FrontEnd
BackEnd TDD Master
23.
React Component EventMethod Redux ActionCreator Redux Reducer Every Case 最小單位: React
+ Redux
24.
非同步要怎麼測? 我要先準備一台API Server?
25.
還沒準備好API Server? 我們的IT部門….
單元測試不需要外部環境啦 FrontEnd BackEnd TDD Master
26.
• 提供四種模擬方式: • Stub •
Mock • Spy • Fake • 解決單元測試需要環境隔離的需求 前端擬物框架:Sinon.js
27.
• Stub: • 會覆寫到原函數的行為,因此,可以直接指定回傳的物件或是直接拋出例外。 •
適用時機: • 覆寫掉需要與外部環境協作的程式碼區塊 • 強制觸發例外,調控程式區塊執行的路線 • 可用測試非同步程式碼區塊 • Mock: • Stub的強化版;額外添加的特性在於程式碼區塊執行的行為測試。 • 適用時機: • 可以使用行為函數來平估指定程式碼區塊 的行為 • once • withArgs
28.
• Spy: • 主要在於擔任CallBack函數的替身,藉此潛入到函數中取得所需要的資訊。 •
適用時機: • 取得函數被執行的次數 • 取得每次被呼叫時傳入函數的輸入參數 • 取得函數本次呼叫所回傳的物件 • 取得函數會拋出的例外物件 • Fake: • 可以偽造XMLHttpRequest/Server/Timer。 • 適用時機: • 針對Ajax的測試處理(有很多工具可以取代) • 針對Backend API的測試處理,相較於XMLHttpRequest有更多的在Response上的控制 • 對於Timer類的程式碼區塊
29.
• 與Mocha.js有著極佳的整合 • 可以取得程式碼的測試覆蓋率 •
共有四項指標: • Statements • Branches • Functions • Lines 測試覆蓋率:Istanbul.js/Isparta.js
30.
• 完整結合下列工具: • Mocha •
Babel • Istanbule/Isparta • React • 以簡單的組態方式,就能夠輕鬆產出測試覆 蓋率的報表 整合Istanbul/Isparta的Gulp套件: gulp-jsx-coverage
31.
32.
感覺還差了點什麼… 我無法完全理解需求ㄟ~~
33.
需求不是說要這樣嗎? 客戶和PM說不是ㄟ 這是TDD的硬殤,這時候就該 BDD登場了 FrontEnd BackEnd
TDD Master
34.
Stories Behaviour Application Exercise
expectations against Matches to QA BA Developer 職責與工作分配
35.
需求類型 描述 業務需求 (Epics) 描述專案的誕生原因、需要達到的業務目標,以及如何衡量該 專案是否程功的指標 使用者需求 (Stories) 描述涉及不同使用者與系統接觸方式,以及他們期望系統能夠 協助完成的任務和目標 功能性需求 (Conversations) 是系統對於使用者需求的具體實現方式,它定義了系統的運作、 資料的操作處理、使用者與系統的介面和互動方式,以及其它 能體現使用者需求如何被滿足的特殊功能 非功能性需求 (Non-Funcational) 指的是資訊系統中保證效能、可靠性、易用性、維護性、延 展性、可移殖性和安全性等等,各類與系統運作狀態有關,但 與功能無關的需求 商業分 析 業務需 求 使用者 需求 功能需 求 設計 運營 認識需求
36.
需求的本質與探索 我還是無法完全理解需求ㄟ~~
37.
BA有寫User Story,但還是 似懂非懂 我覺得是描述方式有問題 User Story需具備一些要素: •
簡短但完整的Story描述 • 需要有允收測試準則 • 要開一次Planning Meeting FrontEnd BackEnd BDD Master (跳槽了)
38.
身為系統管理員, 當我在後台的使用者管理模組設定某位使用者帳戶的狀態為啟動後, 該使用者立即可以登入到前台網站 User Store 身份 結果 地點 行為 User Story描述
39.
• 系統管理員需先登入後台系統 • 系統管理員的帳戶需具備管理使用者帳戶的權限 •
系統管理員操作的使用者帳戶需已註冊成功,並且 該使用者帳戶未被啟用 • 當系統管理員操作的使用者帳戶已處於啟用中,系 統需以彈跳視窗呈現提示訊息: “該使用者帳戶已啟用” • 當使用者帳戶啟用後,該使用者可隨時登入到前台 系統 • 當使用者帳戶未被啟用,該使用者無法登入到前台 並且前台會以彈動視窗呈現提示訊息: “尊貴的客戶,您的帳號尚未被啟用,請通知客服為 您處理” 允收測試準則 前置條件 操作描述 細節陳述
40.
瞭解User Story和允收測試準則後 這跟BDD有什麼關係呀!?
41.
客戶和PM每次改需求都說: 這不是改一下就好了嗎 還常罵我太”工程師”了 那是因為他們沒有”和”你 們一起工作,所以彼此溝通 和認知上有差異,BDD正是 聯結彼此的一種方法論 FrontEnd BackEnd
BDD Master
42.
43.
前端BDD框架:Cucumber • 以Gherkin文法描述需求 • 提供工具,可讓Gherkin的語法轉為測試程式 •
可與多種測試框架和平台整合
44.
Cucumber.js實際長相 需求描述 產生出來的測試程式碼
45.
在一起工作 誰負責需求的部份呢?
46.
我只做前端 我只剩後端可以做了 需求不是客戶或PM的事, 開發人員需要在Planning Meeting詳細地和他們確認 FrontEnd BackEnd
BDD Master
47.
48.
• 由Product Owner/BA講述本次Release的所有需求 •
與會人需釐清所有需求才能結束會議 • 遵守Time-Box,時間到了就擇期繼續開會
49.
正確的問問題 有時候我開會都不知道怎麼問到我要的答案
50.
..大概只能等畫面出來了.. 聽得似懂非懂的 利用ORID的方式釐清問題 可以讓自己更能掌控需求 FrontEnd BackEnd
BDD Master
51.
52.
無法被測試的程式 有時候不知道該怎麼幫某段程式寫測試
53.
Js的動態語言,千變萬化! 還好我們是C#(強型別語言) 不論是否是強型別語言 ,若沒有一個規範 會寫出難以被測試的程式 FrontEnd BackEnd
BDD Master
54.
程式碼複雜度 可維 護性 循環複 雜度 繼承深 度 耦合性 耦合性 程式碼 行數
55.
前端程式碼規範框架:JSLint • 檢查與審視程式碼是否符合團隊規範 • 可與Git
Hook協作 • 可自行添加和定義規範
56.
還有那些測試 我目前已經知道單元測試了,還有其它的嗎?
57.
我知道還有整合測試 還聽過…冒煙測試 測試的確還有很多種 但是每種測試,都傾向 能夠自動化 FrontEnd BackEnd
Testing Master (跳槽again)
58.
還有很多測試 講了5x頁,只講這個
59.
連連看 針對各物件/模組之間的互動以領域知識探索系統潛在的缺陷 依系統特定功能為單位進行檢核 證明某個最小可測試單元的正確性
60.
前端整合測試框架:NightWatcher • 包裝Selenium Driver,提供更方便的API •
可與Cucumber.js及Mocha整合
61.
執行結果測試程式碼 NightWatcher
62.
When 我學了好多,但是不知道該用在那邊….
63.
時機和環境的差別? 感覺測試和開發是兩個世界 測試和開發可在CI(持續 整合)中被結合在一起 FrontEnd BackEnd
Testing Master
64.
持續整合
65.
持續交付
66.
呢喃 • 只有瞭解需求才能做好測試 • 單元測試要注意最小單位和環境隔離 •
整合測試需要備妥環境,成本很高 • 持續整合是團隊自動化的基石 • 持續交付是敏捷的基石
Download now