摘要：我們將用集成測試來結(jié)束我們的測試部分。作為對集成測試的一個提醒它是自動化我們的實際用戶在使用我們的應(yīng)用時體驗到的體驗的過程。出于我們的目的我們將只使用上面的基本配置因為它已經(jīng)足夠讓集成測試?yán)^續(xù)進(jìn)行。

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

今天我們將編寫測試來模擬用戶如何與我們的應(yīng)用進(jìn)行交互，并在現(xiàn)實的瀏覽器中測試我們的應(yīng)用的整個流程。

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

當(dāng)我們正在進(jìn)行集成測試時, 我們需要讓我們的應(yīng)用實際運(yùn)行, 因為我們需要一個瀏覽器啟動并執(zhí)行我們的應(yīng)用。我們將使用一個叫做 selenium的自動化服務(wù)器, 所以我們需要下載它以及一個非常漂亮的節(jié)點自動測試框架, 稱為Nightwatch。

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

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

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

npm install --global nightwatch

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

讓我們在根目錄中創(chuàng)建文件:

touch nightwatch.json

現(xiàn)在, 在新的nightwatch.json 中添加以下內(nèi)容:

{
  "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給我們提供了很多配置選項, 不過我們不會覆蓋所有可能的配置方法。出于我們的目的, 我們將只使用上面的基本配置, 因為它已經(jīng)足夠讓集成測試?yán)^續(xù)進(jìn)行。

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

mkdir tests
touch tests/auth-flow.js

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

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

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.我們的對象輸出中的每個函數(shù)都將接收一個browser 實例, 作為我們測試和selenium webdriver之間的接口。我們有各種可用的選項, 我們可以運(yùn)行在這個browser 變量。

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

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

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

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

我們將在路上設(shè)置斷言。我們忙起來吧!我們將要求browser 加載我們在配置文件中設(shè)置的 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) => {},
}

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

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

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

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

selenium-server

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

npm start

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

nightwatch

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

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

由于第一步將運(yùn)行, 瀏覽器將已經(jīng)在登錄頁上。在測試的第二個密鑰中, 我們要執(zhí)行以下步驟:

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

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

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

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

我們將設(shè)置一個斷言, 以確保 URL 是我們所認(rèn)為的。

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

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) => {},
}

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

nightwatch

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

在注銷鏈接上查找并單擊

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

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

我們希望 等待內(nèi)容再次加載

我們將 斷言他的h1 標(biāo)記包含我們期望它擁有的值

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

讓我們用內(nèi)嵌的注釋實現(xiàn)此操作:

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) => {},
}

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

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

現(xiàn)在, 讓我們運(yùn)行整個套件, 并確保它再次通過使用nightwatch命令:

nightwatch

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

但是等一下, 我們還沒有發(fā)現(xiàn)部署, 是嗎？敬請關(guān)注明天的當(dāng)我們開始將應(yīng)用部署到云中。