【全栈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种测试, 从低级到假冒一个真正的浏览器实例。现在, 我们有了确保我们的应用可以完全部署的工具。

但是等一下, 我们还没有发现部署, 是吗？敬请关注明天的当我们开始将应用部署到云中。