{"id":7371,"date":"2015-02-11T22:40:39","date_gmt":"2015-02-11T19:40:39","guid":{"rendered":"http:\/\/railsware.com\/blog\/?p=7371"},"modified":"2017-12-21T00:24:17","modified_gmt":"2017-12-20T21:24:17","slug":"responsive-layout-tests-with-capybara-and-rspec","status":"publish","type":"post","link":"https:\/\/railsware.com\/blog\/responsive-layout-tests-with-capybara-and-rspec\/","title":{"rendered":"Responsive layout tests with Capybara and RSpec"},"content":{"rendered":"<p class=intro-text>Responsive web design is not a feature these days, bur rather a must. So, while implementing responsive layout in your application, you might find helpful adding verifications to your acceptance tests and ensure accessibility\/inaccessibility to your app functionality depending on the screen size.<\/p>\n\n<p>Capybara has a <a href=\"http:\/\/www.rubydoc.info\/github\/jnicklas\/capybara\/master\/Capybara\/Window:resize_to\" target=\"_blank\">method<\/a> to resize the browser window:<\/p>\n\n<pre class=\"lang:ruby decode:true \" title=\"Capybara resize_to\" >Capybara.current_session.driver.browser.manage.window.resize_to(width, height)<\/pre>\n\n<p>To cover all layout breakpoints you can create responsive helpers with required browser size and default one:<\/p>\n\n<pre class=\"lang:ruby decode:true \" title=\"Responsive helpers\" >module ResponsiveHelpers\n\n  def resize_window_to_mobile\n    resize_window_by([640, 480])\n  end\n\n  def resize_window_to_tablet\n    resize_window_by([960, 640])\n  end\n\n  def resize_window_default\n    resize_window_by([1024, 768])\n  end\n\n  private\n\n  def resize_window_by(size)\n    Capybara.current_session.driver.browser.manage.window.resize_to(size[0], size[1]) if Capybara.current_session.driver.browser.respond_to? 'manage'\n  end\n\nend<\/pre>\n\n<p>And integrate it in your test. After you run a test case, the browser window should be resized back to default size:<\/p>\n\n<pre class=\"lang:ruby decode:true \" title=\"RSpec test\" >require \"rails_helper\"\n\nRSpec.describe 'Inboxes responsive layout', js: true do\n\n  subject{ page }\n\n  describe \"Up to mobile view\" do\n\n    before do\n      resize_window_to_mobile\n    end\n\n    after do\n      resize_window_default\n    end\n\n    describe 'hidden inbox actions' do\n      it{ is_expected.to have_selector('.create_inbox_form', visible: false) }\n    end\n\n  end\n\nend<\/pre>\n\n<p>For more details on this and other useful methods of Window, check the <a href=\"http:\/\/www.rubydoc.info\/github\/jnicklas\/capybara\/master\/Capybara\/Window\" target=\"_blank\">documentation<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Responsive web design is not a feature these days, bur rather a must. So, while implementing responsive layout in your application, you might find helpful adding verifications to your acceptance tests and ensure accessibility\/inaccessibility to your app functionality depending on the screen size. Capybara has a method to resize the browser window: Capybara.current_session.driver.browser.manage.window.resize_to(width, height) To&#8230;<\/p>\n","protected":false},"author":45,"featured_media":9433,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[],"coauthors":["Ira Varshavets"],"class_list":["post-7371","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"aioseo_notices":[],"categories_data":[{"name":"Engineering","link":"https:\/\/railsware.com\/blog?category=development"}],"post_thumbnails":"https:\/\/railsware.com\/blog\/wp-content\/themes\/railsware\/vendors\/images\/article-thumbnail-default.jpg","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/7371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/users\/45"}],"replies":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/comments?post=7371"}],"version-history":[{"count":10,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/7371\/revisions"}],"predecessor-version":[{"id":9613,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/7371\/revisions\/9613"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media\/9433"}],"wp:attachment":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media?parent=7371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/categories?post=7371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/tags?post=7371"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/coauthors?post=7371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}