摘要：我們將用集成測試來結(jié)束我們的測試部分。作為對(duì)集成測試的一個(gè)提醒它是自動(dòng)化我們的實(shí)際用戶在使用我們的應(yīng)用時(shí)體驗(yàn)到的體驗(yàn)的過程。出于我們的目的我們將只使用上面的基本配置因?yàn)樗呀?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)實(shí)的瀏覽器中測試我們的應(yīng)用的整個(gè)流程。

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

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

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

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

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

npm install --global nightwatch

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

讓我們?cè)诟夸浿袆?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給我們提供了很多配置選項(xiàng), 不過我們不會(huì)覆蓋所有可能的配置方法。出于我們的目的, 我們將只使用上面的基本配置, 因?yàn)樗呀?jīng)足夠讓集成測試?yán)^續(xù)進(jìn)行。

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

mkdir tests
touch tests/auth-flow.js

Nightwatch測試可以設(shè)置為可導(dǎo)出的對(duì)象, 其中鍵是對(duì)測試的描述, 而該值是一個(gè)具有對(duì)客戶端瀏覽器的引用的函數(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.我們的對(duì)象輸出中的每個(gè)函數(shù)都將接收一個(gè)browser 實(shí)例, 作為我們測試和selenium webdriver之間的接口。我們有各種可用的選項(xiàng), 我們可以運(yùn)行在這個(gè)browser 變量。

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

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

我們將等待頁面加載一定的時(shí)間。

我們將找到登錄鏈接并點(diǎn)擊它。

我們將在路上設(shè)置斷言。我們忙起來吧!我們將要求browser 加載我們?cè)谂渲梦募性O(shè)置的 URL (對(duì)于我們來說, 它是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)行這個(gè)測試以確保我們的測試設(shè)置能夠正常工作。我們需要在這里打開3終端窗口。

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

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

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

selenium-server

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

npm start

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

nightwatch

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

我們所有的測試都在這一點(diǎn)上通過。讓我們實(shí)際告訴瀏覽器在中記錄一個(gè)用戶。

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

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

我們想點(diǎn)擊提交/登錄按鈕

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

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

我們將設(shè)置一個(gè)斷言, 以確保 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)行這些測試 (在第三個(gè)終端窗口中):

nightwatch

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

在注銷鏈接上查找并單擊

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

我們將在注銷按鈕上點(diǎn)擊 "我確定"

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

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

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

讓我們用內(nèi)嵌的注釋實(shí)現(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)測試完成時(shí), chrome 瀏覽器還沒有關(guān)閉。這是因?yàn)槲覀儧]有告訴selenium, 我們希望本次課程完成。我們可以使用browser對(duì)象上的 end() 命令來關(guān)閉連接。這就是為什么我們有最后的和最后一步被稱為close。

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

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

nightwatch

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

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