Rspec: feature spec 功能测试 测试JavaScript.

我们要把应用各组件放在一起做集成 测试，这样才能保证模型和控制器之间能够良好契合。

在 RSpec 中，这种测试称为功能测试(feature spec)，有时也称为验收测试(acceptance test)或集成测试(integration test)。这种测试的作用是确保 软件作为一个整体能按预期使用。

Capybara库 (8000star)，用来定义功能测试的步骤，模拟真实用户的使用过程。 5.1已经自带这个库，因为系统测试依赖它。

Rails5.1 框架增加了系统测试。用的是MiniTest.

作者喜欢使用Rspec开发Rails应用。 

在spec/rails_helper.rb中加入 require 'capybara/rspec' 

6.3 一个简单的功能测试 

bin/rails generate rspec:feature projects 

feature test 和controller test 的区别：控制器测试绕过用户界面，直接把参数发给controller actions.

  it "user creates a new project" do

    user = FactoryGirl.create(:user)

    visit root_path

    click_link "Sign in"

    fill_in "Email", with: user.email

    fill_in "Password", with: user.password

    click_button "Log in"

    expect {

      click_link "New Project"

      fill_in "Name", with: "Test Project"

      fill_in "Description", with: "Trying out Capybara"

      click_button "Create Project"

      expect(page).to have_content "Project was successfully created"

      expect(page).to have_content "Test Project"

      expect(page).to have_content "Owner: #{user.name}"

    }.to change(user.projects, :count).by(1)

  end

用到了expect{}.to , scenario作用等同于it。

 

6.2 Capybara DSL

除了 ，click_link, fill_in, with, click_button还有很多方法。

  scenario "works with all kinds of HTML elements" do

    visit "/fake/page"

    click_on "A link or button label"

    check "A checkbox label"

    uncheck "A checkbox label"

    choose "A radio button lable"

    select "An option", from: "A select menu"

    attach_file "A file upload label", "/some/file/in/my/test/suite.gif"

    expect(page).to have_css "h2#subheading"

    expect(page).to have_selector "ul li"

    expect(page).to have_current_path "/projects/new"

  end

选择符还可以限定范围，让 Capybara 在页面的某一部分中(within)查找指定的元素。假设有如下的 HTML: 

<div id="node">
<a href="http://nodejs.org">click here!</a>

</div>
<div id="rails">

<a href="http://rubyonrails.org">click here!</a> </div> 

我们可以像下面这样指明点击哪个“click here!”链接:

within "#rails" do

  click_link "click here~!"

end 

此外，还可以使用 Capybara 提供的多个 find 方法找出特定元素及其值。例如:

    language = find_field("Programming language").value
    expect(language).to eq "Ruby"

    find("#fine_print").find("#disclaimer").click
    find_button("Publish").click

以上是我最常使用的 Capybara 方法 ,完整方法见Capybara DSL 文档。 

6.5调试feature test 

save_and_open_page,保存并打开出错的页面。需要手动打开open tmp/...。

安装gem 'launchy'后可以自动打开保存的HTML文件。

测试完成后，应当在提交版本控制之前，把不需要的save_and_open_page删除。 

  it "guest adds a project" do

    visit projects_path

    save_and_open_page

    click_link "New Project"

  end

6.6测试JavaScript交互 

 bin/rails g rspec:feature tasks

  scenario "user toggles a task", js:true do

    user = FactoryGirl.create(:user)

    project = FactoryGirl.create(:project,

      name: "RSpec tutorial",

      owner: user

    )

    task = project.tasks.create!(name: "Finish RSpec tutorial")

    visit root_path

    click_link "Sign in"

    fill_in "Email", with: user.email

    fill_in "Password", with: user.password

    click_button "Log in"

    click_link "RSpec tutorial"

    check "Finish RSpec tutorial"

    expect(page).to have_css "label#task_#{task.id}.completed"

    expect(task.reload).to be_completed

    uncheck "Finish RSpec tutorial"

    expect(page).to_not have_css "label#task_#{task.id}.completed"

    expect(task.reload).to_not be_completed

  end

be_completed 匹配器matcher ：

js:true选项传给scenario，Capybara默认带JS驱动。

然后变更运行浏览器，换为Chrome运行测试

配置：

1. spec/rails_helper.rb中把下面一行注释去掉，

Dir[Rails.root.join('spec/support/**/*.rb')].each { |f| require f }

2. 创建文件 spec/support/capybara.rb，并写：

Capybara.javascript_driver = :selenium_chrome 

3. 安装ChromeDriver.需要看 

见 ChromeDriver 官方文档。 

如果安装了brew，则敲击brew install chromedriver 

出现提示：

Error: No available formula with the name "chromedriver"

It was migrated from homebrew/core to caskroom/cask.

You can access it again by running:

  brew tap caskroom/cask

And then you can install it by running:

  brew cask install chromedriver

安装提示安装，成功。

运行bin/rspec spec/features/tasks_spec.rb，弹出chrome窗口，我们的应用在这个窗口加载，自动点击连接填写表单自动，完成任务，测试成功。为了运行效率只在需要JavaScript的案例上面使用js:true

6.7headless driven

不在浏览器窗口 运行测试，只在命令行界面中运行。禁止打开新窗口。

让Selenium在Chrome的无界面模式下运行测试： 

编辑spec/support/capybara.rb.

Capybara.javascript_driver = :selenium_chrome_headless  

6.8 等待JavaScript执行完毕

默认情况下，Capybara等待2了，如果没有按钮出现，放弃，这个时间可以调整。

Capybara.default_max_wait_time = 15 

这个设置在rspec/rails_helper.rb内加载的地方就行，可以放在capybara.rb文件中。

缺点：整体速度变慢，

可以使用using_wait_time针对特定案例修改时间。

scenario "runs a really slow process" do

  using_wait_time(15) do

# 测试代码

  end

end 

6.9小结

功能测试，先在浏览器实操以下模拟需要的步骤，然后在使用Capybara一一实现。 

站在客户角度，看有些操作是否可以简化，甚至删除，从而提升用户体验。

---