【全栈React】第26天: 集成测试

头像
不想成熟的大叔
    阅读 6 分钟
    2

    本文转载自：众成翻译
    译者：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种测试, 从低级到假冒一个真正的浏览器实例。现在, 我们有了确保我们的应用可以完全部署的工具。

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

    javascriptreact前端前端框架前端工程师
    不想成熟的大叔
    882 声望526 粉丝

    为学习前端开发不再枯燥、困难和迷茫而努力。

    « 上一篇
    【EASYDOM系列教程】索引
    下一篇 »
    【全栈React】第27天: 部署介绍

    引用和评论

    推荐阅读
    头像
    const关键字：终于拥有真正的常量声明语句

    不想成熟的大叔阅读 1.8k

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    0 条评论
    得票最新