Question

我编写了一个小型JavaScript，可以应用于textareas，可以使用Esc键（或单击textarea右上角的标签）来最大化它们。

我不是一个伟大的JavaScript大师，如果有人感兴趣，这里是代码（CoffeeScript）：

它在初始化期间基本上用textarea包裹div class="background"，当点击它（或按Esc）时，就会在其上切换类fullscreen。其余的是CSS。

整个过程非常好，我想测试一下。我知道有很多JS测试框架，但我已经习惯了RSpec和Capybara，虽然这两个并没有提供一个完整的JS测试框架提供的所有内容，但我认为它应该足以构建一些基本的规范

目前，我的规格如下：

describe 'textarea fullscreen feature' do
  it 'allows to toggle fullscreen mode of "about" textarea', js: true do
    visit new_user_path

    within '.user_about' do # This is the input field (model "User", field "about")
      expect(page).to have_css '.textarea-fullscreenizer'
      expect(page).to have_css '.textarea-fullscreenizer-toggler', text: 'Toggle fullscreen (Esc)'

      expect {
        find('.textarea-fullscreenizer-toggler').click
      }.to change {
        page.has_css? '.textarea-fullscreenizer.textarea-fullscreenizer-focus'
      }.to true
    end
  end
end

这样我就可以确保基本的init进程成功，单击标签会添加CSS类fullscreen。但它还没有以下内容：

使用Esc
关闭模糊全屏
将鼠标悬停在其上或当textarea聚焦时更改切换标签的不透明度
正常模式与全屏模式的直观表示（例如，textarea的宽度/高度发生变化）

使用RSpec / Capybara（具有大量代码）可以实现哪些功能？

PS：我知道这个单一的规范可以（应该？）分为许多单个规范（每个都测试一个功能），但由于JavaScript规范非常慢，我坚持在一个规范中测试所有内容的实用方法。

使用RSpec / Capybara测试JavaScript：如何改进我的规范（用于测试textarea全屏功能）？

0 个答案: