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

本文轉載自：衆成翻譯
譯者：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, 以便它啓動頁面, 並單擊導航中的登陸連接。咱們將採起如下步驟執行此操做:

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

2. 咱們將等待頁面加載必定的時間。

3. 咱們將找到登陸連接並點擊它。

咱們將在路上設置斷言。咱們忙起來吧!咱們將要求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 窗口打開, 訪問網站, 並自動點擊登陸連接..。(很酷, 對吧？)

咱們全部的測試都在這一點上經過。讓咱們實際告訴瀏覽器在中記錄一個用戶。

因爲第一步將運行, 瀏覽器將已經在登陸頁上。在測試的第二個密鑰中, 咱們要執行如下步驟:

1. 咱們想 '找到他的用戶的電子郵件輸入框', 並設置一個有效的電子郵件的值。

2. 咱們想點擊提交/登陸按鈕

3. 咱們將等待頁面加載 (相似於咱們之前所作的)

4. 咱們但願斷言頁面的文本與咱們指望的同樣。

5. 咱們將設置一個斷言, 以確保 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

咱們能夠用瀏覽器中的 註銷 步驟作相似的事情。要讓用戶註銷, 咱們將:

1. 在註銷連接上查找並單擊

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

3. 咱們將在註銷按鈕上點擊 "我肯定"

4. 咱們但願 等待內容再次加載

5. 咱們將 斷言他的h1 標記包含咱們指望它擁有的值

6. 咱們將確保頁面顯示 "登陸" 按鈕

讓咱們用內嵌的註釋實現此操做:

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種測試, 從低級到假冒一個真正的瀏覽器實例。如今, 咱們有了確保咱們的應用能夠徹底部署的工具。

可是等一下, 咱們尚未發現部署, 是嗎？敬請關注明天的當咱們開始將應用部署到雲中。