Skip to content

Instantly share code, notes, and snippets.

@sathiyaseelan

sathiyaseelan/Responsive Spec Helpers With Meta tags

Last active November 29, 2017 01:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sathiyaseelan/88a92bdf477b225a80e206657ad5e18d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sathiyaseelan/88a92bdf477b225a80e206657ad5e18d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. sathiyaseelan revised this gist Nov 28, 2017. 2 changed files with 17 additions and 20 deletions.
    21 changes: 1 addition & 20 deletions Responsive Spec Helpers With Meta tags
    View file
    Original file line number Diff line number Diff line change
    @@ -4,23 +4,4 @@ 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.

    ```
    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
    ```
    If you don't use any tag, it would render the desktop size.
    16 changes: 16 additions & 0 deletions sample_spec.rb
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    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
  2. sathiyaseelan created this gist Nov 28, 2017.
    26 changes: 26 additions & 0 deletions Responsive Spec Helpers With Meta tags
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    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.

    ```
    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
    ```
    36 changes: 36 additions & 0 deletions responsive_helpers.rb
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    # 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