Helpers for Responsive feature Specs in Capybara

Responsive Spec Helpers With Meta tags

The responsive helpers are to help the developer with writing responsive specs.

All you have to do is, add `responsive_helper.rb` to the spec support directory.

And tag the specs with :mobile, :tablet for mobile and tablet size respectively.

If you don't use any tag, it would render the desktop size.

responsive_helpers.rb

# spec/support/feature/responsive_helpers.rb
module Feature
  module ResponsiveHelpers
    shared_context 'for mobile view', shared_context: :mobile do
      before { resize_window_to_mobile }
      after { resize_window_to_default }
    end

    shared_context 'for tablet view', shared_context: :tablet do
      before { resize_window_to_tablet }
      after { resize_window_to_default }
    end

    def resize_window_to_mobile
      resize_window_by([375, 667])
    end

    def resize_window_to_tablet
      resize_window_by([768, 1024])
    end

    def resize_window_to_default
      resize_window_by([1280, 1024])
    end

    def resize_window_by(size)
      Capybara.current_session.driver.browser.manage.window.resize_to(size[0], size[1])
    end
  end
end

RSpec.configure do |config|
  config.include Feature::ResponsiveHelpers, type: :feature
  config.include_context 'for mobile view', mobile: true
  config.include_context 'for tablet view', tablet: true
end

sample_spec.rb

require 'rails_helper'

feature 'header is responsive', :js do
  background { visit root_path }

  scenario 'In desktop view, header does not display mobile components' do
    assert_desktop_components_present
  end

  scenario 'In tablet view, header displays the mobile components', :tablet do
    assert_tablet_components_present
  end

  scenario 'In mobile view, header displays the mobile components', :mobile do
    assert_mobile_components_present
  end