国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【全棧React】第26天: 集成測試

fnngj / 2636人閱讀

摘要:我們將用集成測試來結束我們的測試部分。作為對集成測試的一個提醒它是自動化我們的實際用戶在使用我們的應用時體驗到的體驗的過程。出于我們的目的我們將只使用上面的基本配置因為它已經足夠讓集成測試繼續進行。

本文轉載自:眾成翻譯
譯者:iOSDevLog
鏈接:http://www.zcfy.cc/article/3808
原文:https://www.fullstackreact.com/30-days-of-react/day-26/

今天我們將編寫測試來模擬用戶如何與我們的應用進行交互,并在現實的瀏覽器中測試我們的應用的整個流程。

我們已經到了測試入門的最后部分。我們將用集成測試來結束我們的測試部分。作為對集成測試的一個提醒, 它是自動化我們的實際用戶在使用我們的應用時體驗到的體驗的過程。

集成測試

當我們正在進行集成測試時, 我們需要讓我們的應用實際運行, 因為我們需要一個瀏覽器啟動并執行我們的應用。我們將使用一個叫做 selenium的自動化服務器, 所以我們需要下載它以及一個非常漂亮的節點自動測試框架, 稱為Nightwatch。

安裝

安裝 selenium 最簡單的方法是通過selenium網站下載http://docs.seleniumhq.org/download/。

如果你在使用一個 mac, 你可以使用 Homebrew的brew 命令:
brew install selenium-server-standalone

我們還需要安裝nightwatch 命令, 我們可以使用npm 包管理器來完成。讓我們使用--global 標志在全局范圍內安裝nightwatch:

npm install --global nightwatch

此命令使我們可以在終端的任何位置使用nightwatch命令。我們需要在根目錄中添加一個名為nighwatch.json 的配置文件(或nighwatch.conf.js).我們將使用默認的配置文件在nighwatch.json

讓我們在根目錄中創建文件:

touch nightwatch.json

現在, 在新的nightwatch.json 中添加以下內容:

{
  "src_folders" : ["tests"],
  "output_folder" : "reports",

  "selenium" : {
    "start_process" : false,
    "server_path" : "",
    "log_path" : "",
    "host" : "127.0.0.1",
    "port" : 4444,
    "cli_args" : {
      "webdriver.chrome.driver" : "",
      "webdriver.ie.driver" : ""
    }
  },

  "test_settings" : {
    "default" : {
      "launch_url" : "http://localhost:3000",
      "selenium_port"  : 4444,
      "selenium_host"  : "localhost",
      "silent": true,
      "screenshots" : {
        "enabled" : false,
        "path" : ""
      },
      "desiredCapabilities": {
        "browserName": "chrome",
        "javascriptEnabled": true,
        "acceptSslCerts": true
      }
    },

    "chrome" : {
      "desiredCapabilities": {
        "browserName": "chrome",
        "javascriptEnabled": true,
        "acceptSslCerts": true
      }
    }
  }
}

Nightwatch給我們提供了很多配置選項, 不過我們不會覆蓋所有可能的配置方法。出于我們的目的, 我們將只使用上面的基本配置, 因為它已經足夠讓集成測試繼續進行。

編寫測試

我們將在tests/目錄中編寫我們的Nightwatch測試。讓我們先編寫一個測試來處理認證工作流。讓我們在tests/目錄 (與src_folders匹配) 中編寫測試, 我們將調用tests/auth-flow.js。

mkdir tests
touch tests/auth-flow.js

Nightwatch測試可以設置為可導出的對象, 其中鍵是對測試的描述, 而該值是一個具有對客戶端瀏覽器的引用的函數。例如, 我們將為我們的測試/認證流程設置四測試為tests/auth-flow.js測試。

更新我們的tests/auth-flow.js 文件同以下四測試函數類似:

module.exports = {
  "get to login page": (browser) => {},
  "logging in": (browser) => {},
  "logging out": (browser) => {},
  "close": (browser) => {},
}

Each of the functions in our object exports will receive a browser instance which serves as the interface between our test and the selenium webdriver. We have all sorts of available options we can run on this browser variable.我們的對象輸出中的每個函數都將接收一個browser 實例, 作為我們測試和selenium webdriver之間的接口。我們有各種可用的選項, 我們可以運行在這個browser 變量。

讓我們編寫第一個測試來演示這個函數。我們將設置Nightwatch, 以便它啟動頁面, 并單擊導航中的登錄鏈接。我們將采取以下步驟執行此操作:

我們將首先在瀏覽器中調用url() 功能, 要求它在頁面上加載一個 url。

我們將等待頁面加載一定的時間。

我們將找到登錄鏈接并點擊它。

我們將在路上設置斷言。我們忙起來吧!我們將要求browser 加載我們在配置文件中設置的 URL (對于我們來說, 它是http://localhost:3000)

module.exports = {
  "get to login page": (browser) => {
    browser
      // Load the page at the launch URL
      .url(browser.launchUrl)
      // wait for page to load
      .waitForElementVisible(".navbar", 1000)
      // click on the login link
      .click("a[href="#/login"]")

    browser.assert.urlContains("login");
  },
  "logging in": (browser) => {},
  "logging out": (browser) => {},
  "close": (browser) => {},
}

就是這樣。在我們走得太遠之前, 讓我們運行這個測試以確保我們的測試設置能夠正常工作。我們需要在這里打開3終端窗口。

在第一個終端窗口, 讓我們啟動selenium。如果您下載了 .jar 文件, 則可以使用以下命令啟動此操作:

java -jar selenium-server-standalone-{VERSION}.jar

如果你通過自制器下載它, 你可以使用selenium-server命令:

selenium-server

在第二個窗口中, 我們需要啟動我們的應用. 記住, 我們將要推出的瀏覽器將 真正地 命中我們的網站, 所以我們需要它運行的實例。我們可以用npm start 啟動我們的應用:

npm start

最后, 在第三個和最后一個終端窗口中, 我們將使用nightwatch 命令運行我們的測試。

nightwatch

當我們運行 nightwatch 命令, 我們將看到一個 chrome 窗口打開, 訪問網站, 并自動點擊登錄鏈接..。(很酷, 對吧?)

我們所有的測試都在這一點上通過。讓我們實際告訴瀏覽器在中記錄一個用戶。

由于第一步將運行, 瀏覽器將已經在登錄頁上。在測試的第二個密鑰中, 我們要執行以下步驟:

我們想 "找到他的用戶的電子郵件輸入框", 并設置一個有效的電子郵件的值。

我們想點擊提交/登錄按鈕

我們將等待頁面加載 (類似于我們以前所做的)

我們希望斷言頁面的文本與我們期望的一樣。

我們將設置一個斷言, 以確保 URL 是我們所認為的。

在代碼中寫是直接的。就像我們以前做的那樣, 讓我們用內嵌的注釋編寫代碼:

module.exports = {
  "get to login page": (browser) => {
    browser
      .url(browser.launchUrl)
      .waitForElementVisible(".navbar", 1000)
      .click("a[href="#/login"]")

    browser.assert.urlContains("login");
  },
  "logging in": (browser) => {
    browser
      // set the input email to a valid email
      .setValue("input[type=email]", "[[email protected]](https://www.fullstackreact.com/cdn-cgi/l/email-protection)")
      // submit the form
      .click("input[type=submit]")
      // wait for the page to load
      .waitForElementVisible(".navbar", 1000)
      // Get the text of the h1 tag
      .getText(".content h1", function(comp) {
        this.assert.equal(comp.value, "Welcome home!")
      })

    browser.assert.urlContains(browser.launchUrl)
  },
  "logging out": (browser) => {},
  "close": (browser) => {},
}

再次運行這些測試 (在第三個終端窗口中):

nightwatch

我們可以用瀏覽器中的 注銷 步驟做類似的事情。要讓用戶注銷, 我們將:

在注銷鏈接上查找并單擊

等待 內容加載到下一頁 (其中包含 "你確定嗎?"樣式按鈕)。

我們將在注銷按鈕上點擊 "我確定"

我們希望 等待內容再次加載

我們將 斷言他的h1 標記包含我們期望它擁有的值

我們將確保頁面顯示 "登錄" 按鈕

讓我們用內嵌的注釋實現此操作:

module.exports = {
  "get to login page": (browser) => {
    browser
      .url(browser.launchUrl)
      .waitForElementVisible(".navbar", 1000)
      .click("a[href="#/login"]")

    browser.assert.urlContains("login");
  },
  "logging in": (browser) => {
    browser
      .setValue("input[type=email]", "[[email protected]](https://www.fullstackreact.com/cdn-cgi/l/email-protection)")
      .click("input[type=submit]")
      .waitForElementVisible(".navbar", 1000)
      .getText(".content h1", function(comp) {
        this.assert.equal(comp.value, "Welcome home!")
      })

    browser.assert.urlContains(browser.launchUrl)
  },
  "logging out": (browser) => {
    browser
      // Find and click on the logout link
      .click("a[href="#/logout"]")
      // Wait for the content to load
      .waitForElementVisible(".content button", 1000)
      // Click on the button to logout
      .click("button")
      // We"ll wait for the next content to load
      .waitForElementVisible("h1", 1000)
      // Get the text of the h1 tag
      .getText("h1", function(res) {
        this.assert.equal(res.value, "Welcome home!")
      })
      // Make sure the Login button shows now
      .waitForElementVisible("a[href="#/login"]", 1000);
  },
  "close": (browser) => {},
}

到目前為止, 您可能已經注意到, 當測試完成時, chrome 瀏覽器還沒有關閉。這是因為我們沒有告訴selenium, 我們希望本次課程完成。我們可以使用browser對象上的 end() 命令來關閉連接。這就是為什么我們有最后的和最后一步被稱為close。

{
  // ...
  "close": (browser) => browser.end()
}

現在, 讓我們運行整個套件, 并確保它再次通過使用nightwatch命令:

nightwatch

就是這樣!我們已經做到了, 并且已經完全覆蓋了3種測試, 從低級到假冒一個真正的瀏覽器實例?,F在, 我們有了確保我們的應用可以完全部署的工具。

但是等一下, 我們還沒有發現部署, 是嗎?敬請關注明天的當我們開始將應用部署到云中。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/87213.html

相關文章

  • 全棧ReactReact 30教程索引

    摘要:今天我們將討論創建組件的最終方案,即無狀態函數的純組件。今天我們正在研究一種處理提出的復雜數據的方法,稱為體系結構。第天部署介紹今天,我們將探討部署我們的應用所涉及的不同部分,以便外界可以使用我們的應用。 本文轉載自:眾成翻譯譯者:iOSDevLog鏈接:http://www.zcfy.cc/article/3758原文:https://www.fullstackreact.com/3...

    appetizerio 評論0 收藏0
  • 全棧React29: 持續集成

    摘要:本文轉載自眾成翻譯譯者鏈接原文今天,我們將介紹一些可持續的集成解決方案,為我們提供運行測試以及實施測試我們在云端的應用。我們已經啟動了一個測試套件但是現在我們要確保它在部署之前完全通過。 本文轉載自:眾成翻譯譯者:iOSDevLog鏈接:http://www.zcfy.cc/article/3801原文:https://www.fullstackreact.com/30-days-of...

    xavier 評論0 收藏0
  • 全棧React22: 測試簡介

    摘要:我們將討論三種不同的軟件測試范例單元測試功能測試和集成測試。在中單元測試通常不需要瀏覽器可以快速運行不需要寫入斷言本身通常是簡單而簡潔的。集成測試最后我們將研究的最后一種測試是集成測試。 本文轉載自:眾成翻譯譯者:iOSDevLog鏈接:http://www.zcfy.cc/article/3809原文:https://www.fullstackreact.com/30-days-of...

    qc1iu 評論0 收藏0
  • 全棧React30: 總結和更多的資源

    摘要:本文轉載自眾成翻譯譯者鏈接原文我們做到了第天。歡迎來到最后一天恭喜你做到了我們此行的最后一個部分是通過參與。反應社區是活躍成長和友好的。 本文轉載自:眾成翻譯譯者:iOSDevLog鏈接:http://www.zcfy.cc/article/3800原文:https://www.fullstackreact.com/30-days-of-react/day-30/ 我們做到了!第30天...

    Miracle_lihb 評論0 收藏0
  • 全棧React25: 使用Enzyme做更好的測試

    摘要:昨天我們使用了庫來編寫我們對組件的第一個測試。是由團隊發布和維護的測試實用程序庫它提供了一個更好的高級的來處理測試中的組件。我們將使用導出的函數來裝載我們的組件。相反我們必須使用提供的方法。 本文轉載自:眾成翻譯譯者:iOSDevLog鏈接:http://www.zcfy.cc/article/3806原文:https://www.fullstackreact.com/30-days-...

    baukh789 評論0 收藏0

發表評論

0條評論

fnngj

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<