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

我已经编写了一个小JavaScript，它可以应用于文本区域，并且可以使用

Esc

键（或者单击文本区域右上角的标签）最大化文本区域

我不是JavaScript大师，如果有人感兴趣，下面是代码（CoffeeScript）：

在初始化过程中，它基本上用一个

div class=“background”

来包装

textarea

，当点击它（或按下

Esc

）时，一个class

全屏

。剩下的是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

通过这种方式，我已经确保了基本的初始化过程成功，并且点击标签会添加CSS类

全屏

。但它还没有做到以下几点：

• 使用

  Esc进行切换

• 关闭模糊全屏
• 将鼠标悬停在切换标签上或文本区域聚焦时更改其不透明度
• 普通模式与全屏模式的视觉表现（例如，文本区域的宽度/高度发生变化）

使用RSpec/Capybara（代码量合理）可以实现这些特性中的哪些

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