<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          你需要了解的前端測試“金字塔”

          時間:?2017-11-28閱讀:?998標簽:?測試

          如果您正在測試前端應用程序,則應該了解前端測試金字塔。

          在本文中,我們將看到前端測試金字塔是什么,以及如何使用它來創建全面的測試套件。

          前端測試金字塔

          前端測試金字塔是一個前端測試套件應該如何構建的結構化表示。

          理想的測試套件由單元測試,一些快照測試和一些端到端(e2e)測試組成。

          這是 測試金字塔的改進版本,特定于測試前端應用程序。

          在這篇文章中,我們將看到每個測試類型的樣子。 為此,我們將為示例應用程序創建一個測試套件。

          應用

          要詳細了解前端測試金字塔,我們來看看如何測試一個 Web 應用。

          該應用是一個簡單的 modal 應用。 點擊一個按鈕打開一個 modal ,點擊 modal 上的 OK 按鈕關閉 modal。


          我們將從基于組件的框架構建應用。 別擔心細節,我們會保持這個(詳細)的級別。

          該應用由三個組件組成 - 一個 Button 組件,一個 Modal 組件和一個 App 組件。

          我們要寫的第一個測試是單元測試。 在前端測試金字塔中,大部分測試都是單元測試。


          單元測試

          單元測試測試的是代碼庫的單元。

          它們直接調用函數或單元,并確保返回正確的結果。

          在我們的應用中,我們的組件是單元。所以我們將為 Button 和 Modal 編寫單元測試。沒有必要為我們的應用組件編寫測試,因為它沒有任何邏輯。

          單元測試會淺渲染組件,并斷言當我們與它們交互時,它們的行為是正確的。

          淺渲染意味著我們渲染組件一層深度。這樣我們可以確保只測試組件,單元,而不是幾個級別的子組件。

          在我們的測試中,我們將觸發組件上的操作,并檢查組件的行為是否與預期一致。

          我們不用盯著代碼。但是我們的組件規格會如下所示:

          • 當 displayModal 為 true 時,Modal 有類是活躍的

          • 當 displayModal 為 false 時,Modal 沒有類是活躍的

          • 當成功按鈕被點擊時,Modal 調用 toggleModal

          • 單擊刪除按鈕時,Modal 會調用 toggleModal

          • 當 button 被點擊時,button 調用 toggleModal

          我們的測試將淺渲染組件,然后檢查每一項規格的工作。

          單元測試應該占據我們的測試套件的絕大部分有以下幾個原因:

          單元測試很快。

          幾百個單元測試套件能在幾秒鐘內運行。

          這使得單元測試對開發很有用。 當重構代碼時,我們可以更改代碼,并在沒有中斷組件的情況下運行單元測試來檢查更改。 我們會在幾秒鐘之內知道我們是否破壞了代碼,因為其中一個測試會失敗。

          單元測試是細顆粒的。

          換句話說,他們是非常具體的。

          如果一個單元測試失敗了,那么這個測試會告訴我們它是如何以及為什么失敗的。

          單元測試能很好地檢查我們的應用程序工作的細節。 它們是開發時最好的工具,特別是如果你遵循測試驅動的開發。

          但是它們無法測試一切。

          為了確保我們呈現正確的樣式,我們還需要使用快照測試。


          快照測試

          快照測試是測試你的渲染組件的圖片,并將其與組件的以前的圖片進行比較。

          用 JavaScript 編寫快照測試的最好方法是使用  Jest 。

          Jest 不是拍攝渲染組件的圖片,而是渲染組件標記的快照。 這使得 Jest 快照測試比傳統快照測試快得多。

          要在 Jest 中注冊快照測試,需要添加如下代碼:

          const renderedMarkup = renderToString(ModalComponent)  
          expect(renderedMarkup).toMatchSnapshot()


          一旦你注冊一個快照,Jest 將顧及其它的一切。 每次運行單元測試時,都會重新生成一個快照,并將其與之前的快照進行比較。

          如果代碼改變,Jest 會拋出一個錯誤,并警告標記已經改變。 然后開發者可以手動檢查沒有類被誤刪的情況。

          在下面的測試中,有人從 <footer> 中刪除了 modal-card-foot 類。



          快照測試是一種檢查組件樣式或標記的方法。

          如果快照測試通過,我們知道代碼更改不會影響組件的顯示。

          如果測試失敗,那么我們知道確實影響了組件的渲染,并可以手動檢查樣式是否正確。

          每個組件至少應有一次快照測試。 一個典型的快照測試呈現組件的狀態,以檢查它正確呈現。

          現在我們已經有了單元測試和快照測試,是時候看看端到端(e2e)測試。

          端到端測試

          端到端(e2e)測試是高層測試。

          它們執行與我們手動測試應用程序時相同的操作。

          在我們的應用程序中,我們有一個用戶(操作)旅程。當用戶點擊按鈕時,模式將打開,當他們點擊模式中的按鈕時,模式將關閉。

          我們可以編寫一個貫穿這一旅程的端到端測試。測試將打開瀏覽器,導航到網頁,并通過每個操作來確保應用程序正常運行。

          這些測試將告訴我們,我們的單元正確地協同工作。它使我們高度自信,該應用程序的主要功能是可以正常工作的。

          對 JavaScript 應用程序來說有幾種方法可以編寫端到端測試。像 test cafe 這樣的程序會記錄您在瀏覽器中執行操作并將其作為測試源重播。

          還有類似 nightwatch 的項目,可讓你用 JavaScript 編寫測試項目。我會推薦使用類似 nightwatch 的庫。拿起來直接用很容易,該測試運行速度比記錄的測試更快。

          也就是說,night1qtch 的測試還是比較慢的。一套200個單元測試需要花費幾分鐘的時間,一套200個端到端測試僅需要幾分鐘時間來運行。

          端到端測試的另一個問題是難以調試。當測試失敗時,很難找出失敗的原因,因為測試涵蓋了太多功能。

          結語

          要有效地測試基于前端組件的 Web 應用程序,你需要三種類型的測試:單元測試,快照測試和 e2e 測試。

          你應該對每個組件進行多個單元測試,對每個組件進行一次或兩次快照測試,以及測試鏈接在一起的多個組件的一次或兩次端到端測試。

          整體單元測試將涵蓋大部分測試,你將有一些快照測試和一些 e2e 測試。

          如果你遵循前端測試金字塔,你就可以使用殺手級測試套件創建可維護的 Web 應用程序。

          你可以在  GitHub 上看到應用程序的快照測試、單元測試和端到端測試的示例源碼庫。


          英文原文: The Front-End Test Pyramid: How to Rethink Your Testing  

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/182

          測試框架 Mocha 實例教程

          本文全面介紹如何使用 Mocha,讓你輕松上手。如果你以前對測試一無所知,本文也可以當作 JavaScript 單元測試入門。值得說明的是,除了 Mocha 以外,類似的測試框架還有 Jasmine、Karma、Tape 等,也很值得學習。

          angular如何使用mock?

          前后端分離的開發模式中, 為了能讓前端不依賴后端服務而能夠并行開發, angular-mocks能模擬一些后臺返回的數據,從而使前端看起來已經跟后端對接了一樣, 只要與后端商定好數據格式, 自己mock一些數據就能夠對前端功能進行測試了.

          Node.JS中回調嵌套和async/await執行空函數性能效率對比測試

          asyn/await關鍵字可以讓原來的回調嵌套和鏈式寫法,改造成同步語法。util.promisify可以很方便地將回調函數Promise化,那么Promise函數的async/await執行和回調函數的嵌套執行或鏈式執行在性能上有差異嗎?

          使用 React Testing Library 和 Jest 完成單元測試

          構建一個 web 應用對于我們來說,并非什么難事。因為有很多足夠多優秀的的前端框架(比如 React,Vue 和 Angular);以及一些易用且強大的UI庫(比如 Ant Design)為我們保駕護航,極大地縮短了應用構建的周期。

          Jest 初學者教程:JavaScript 測試入門

          在編程術語中,測試意味著檢查我們的代碼是否符合某些期望。例如:一個名為 “ transformer” 的函數應在給定某些輸入的情況下返回期望的輸出。測試類型很多,但簡單來說測試分為三大類:

          Js測試框架

          Jest是Facebook團隊構建和維護的JavaScript測試框架,基于Jasmine的JavaScript單元測試框架。Jest在2018年接受度非常高,今年在JavaScript社區更是如此,根據Github的數據,目前超過150萬個項目在使用Jest

          開發中的測試名詞解釋

          Alpha測試是由用戶在開發環境下進行的測試,也可以是開發機構內部的用戶在模擬實際操作環境下進行的測試,測試環境受開發方控制,用戶數量相對較少

          Jest單元測試框架

          在命令行工具中輸入以下命令,初始化前端項目并生成package.json:babel-jest、 babel-core、 regenerator-runtime、babel-preset-env這幾個依賴是為了讓我們可以使用ES6的語法特性進行單元測試

          API測試工具

          越來越多的公司正在向DevOps的方向左轉,以實現持續集成和持續部署開發。這意味著我們的反饋需要比以往更快,以便確定我們的應用程序是否準備好交付。這就是API測試如此重要的原因

          Appium介紹

          appium是一個自動化測試開源工具,支持IOS、Android平臺上的原生應用、web應用和混合應用;原生應用:是指使用ios或者android編寫的應用,Appium是Node.js寫的http服務器,用來創建和控制webDriver的session。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网