ruby-on-rails - 移动设备的功能测试条件页面内容呈现

Question

我正在使用 Mobvious gem在 Rails 项目中确定用于访问页面的设备类型。我遇到问题的用户故事是:

移动设备上的用户正在使用网站的移动版本

移动用户单击“访问完整站点”按钮，将他们带到桌面站点

一个 desktop将值放入 session 中以确保记录他们在移动设备上查看桌面网站的偏好(当移动用户首次访问移动设备上的主页时，他们会自动重定向到移动网站)

在桌面站点主页上，移动设备用户可以看到“切换到移动站点”横幅，让他们这样做(桌面用户显然从未看到此横幅)

使用 Mobvious 实现条件渲染的代码很简单:

app/views/welcome/index.html.haml

- for_device_type :mobile do
  .switch-to-mobile-site-banner
    # code for banner

代码本身按预期工作:问题是我想写一个 RSpec feature test为此，但我认为在我无法直接访问 request 的 RSpec 功能测试场景中，我似乎无法正确模拟移动用户代理。目的。我的理由是功能规范在这里比 request spec 更合适。因为我正在测试页面上是否存在特定内容。

到目前为止，从 helper specs of the Mobvious gem 中获取线索, 我已经删除了 request我的功能规范中设置 device_type 的对象至 :mobile如我所愿，但我似乎无法获得 .switch-to-mobile-site-banner 中的内容显示:

规范/功能/mobile_navigation_features_spec.rb

feature 'Switch to mobile site banner' do
  include Mobvious::Rails::Helper

  given(:env) { double('env') }
  given(:request) { double('request') }

  background do
    allow(env).to receive(:[]).with('mobvious.device_type').and_return(:mobile)
    allow(request).to receive(:env).and_return(env)
  end

  scenario 'mobile user prefers using the desktop site' do
    visit root_url(desktop: 1)
    puts "Device type is #{device_type}" # => correctly returns :mobile
    expect(page).to have_selector('.switch-to-mobile-site-banner') # fails
  end
end

期望失败，并使用 save_and_open_page查看页面上呈现的内容没有显示横幅，我不知道为什么。当代码通过 Mobvious' for_device_type 运行时，我似乎没有收到任何错误。方法，所以我想也许 request 中缺少一些东西对象模拟(？)。

我没有专门绑定(bind)到任何实现/测试类型，所以我对如何测试我想要的功能持开放态度。我最初认为 rack_session_access gem可以帮忙，但除非我用错了，否则我不能用它来做我想做的事。

澄清 : 我正在使用 Poltergeist用于 Capybara 的 javascript 驱动程序。

更新解决方案

我认为真正让我遇到这个问题的是 mobvious-rails gem，当你想得到 device_type , 它 calls the request object directly我想我需要对此进行模拟，以使助手在我的规范中正常工作。正如答案中指出的那样，高级功能规范中的这种低级模拟是一种代码(规范？)气味，事后看来，我应该听过代码实际上告诉我我做错了。此外，由于某种原因，添加 js: true在这种情况下，我什至没有想到，尽管我在其他测试中使用过它。

我最终使用了 Billy Chan 的一部分和 Kaleidoscope的答案来制定我喜欢的解决方案更简单、更清晰:

规范/功能/mobile_navigation_features_spec.rb

feature 'Switch to mobile site banner' do
  background do
    page.driver.headers = { "User-Agent" => "mobile" }
  end

  scenario 'mobile user prefers using the desktop site', js: true do
    visit root_path(desktop: 1)
    expect(page).to have_selector('.switch-to-mobile-site-banner')
  end
end

由于 Kaleidoscope 是第一个提出一套工作规范的人，这让我花了大部分时间，我奖励他赏金，但我会接受 Billy Chan 的回答是正确的，因为我认为这是一个更“规范的解决方案，我将指导其他人在 future 引用。

Answer 1

首先，您需要在此功能中打开 Javascript，因为移动检测是通过此 gem 中的 Javascript 完成的，以及许多其他类似的解决方案。

feature 'Switch to mobile site banner', js: true do

更新:根据 Andrey 的评论，Mobivious 不使用 JS 来检测移动设备，因此您不需要启用 JS。

其次，我建议您尽可能不要在集成测试中使用低级模拟。你需要做的是 完全像移动用户一样行事，看看他会体验到什么 .你甚至不需要低级别的 Mobvious 助手。

我四处搜寻，发现这颗 gem 可能会有所帮助: https://github.com/mururu/capybara-user_agent

虽然我以前没有使用过那个 gem，但语法看起来很简单

feature 'Switch to mobile site banner', js: true do

  background do
    set_user_agent(:iphone)
  end

  scenario 'mobile user prefers using the desktop site' do
    visit root_url(desktop: 1)
    expect(page).to have_selector('.switch-to-mobile-site-banner')
  end
end

OP评论的附加答案

关于到达“example.com”。解决方法是使用 root_path而不是 root_url在 visit线。这是消除对域设置的依赖的推荐做法。

关于用户代理设置。我检查了 gem，语法看起来与 Poltergeist 可以做的不同。所以，尽量不要使用 gem，而是根据 Poltergeist 的问题设置标题

page.driver.headers = {"User-Agent:" => "iphone"} 

引用:https://github.com/jonleighton/poltergeist/issues/127

如果这仍然不起作用，您可以在此测试中临时使用 Webkit。毕竟他们都是 headless 司机。我总是安装这两个 gem 并使用 Poltergeist 作为主要的。只需在 gem 安装后将其设置如下。

在测试中

require 'spec_helper'
require 'capybara-webkit'

feature 'Switch to mobile site banner', js: true do
  capybara.javascript_driver = :webkit