HOWTOs for Ruby on Rails, RSpec, Cucumber and Javascript

1 … 4 5 6 7 8 9 10 … 44

Detect the current Rails environment from JavaScript or CSS

Detecting if a Javascript is running under Selenium WebDriver is super-painful. It's much easier to detect the current Rails environment instead.

You might be better of checking against the name of the current Rails environment. To do this, store the environment name in a data-environment of your <body>. E.g., in your application layout:

%body{'data-environment' => Rails.env}

Now you can say in a piece of Jav…

Grep through the DOM using the Capybara API

When your Cucumber feature needs to browse the page HTML, and you are not sure how to express your query as a clever CSS or XPath expression, there is another way: You can use all and find to grep through the DOM and then perform your search in plain Ruby.

Here is an example for this technique:

Then /^I should see an image with the filename...

VNC browser disappears while typing

We often use the Then console step from spreewald in combination with geordi vnc from geordi to debug tests within a real browser. Sometimes when you type in the browser it suddenly disappears. You will only see a grey screen then.

This will always happen if you press the d key. Press the d key again and the browser will appear again.

Nested Spreewald patiently blocks are now patient

In Spreewald 1.10.4+, nested patiently blocks are now patient.

Here is an example:

patiently do
  outer_code
  patiently do
    inner_code
  end
end

On spreewald 1.11.2+ the inner block will wait for the full configured wait time (by default 5 seconds). The outer patiently block would now be out of time, but it will always be retried at least a second time. This behavior allows with_scope to be patient, and it must be patient, as explained below.

In versions 1.10.4 - 1.11.1, inner blocks would keep giving the ou…

makandracards.com

HTML5: disabled vs. readonly form fields

Form fields can be rendered as noneditable by setting the disabled or the readonly attribute. Be aware of the differences:

disabled fields

don’t post to the server
don’t get focus
are skipped while tab navigation
available for button, fieldset, input, select, textarea, command, keygen, optgroup, option

Browser specific behavior:

IE 11: text inputs that are descendants of a disabled fieldset appear disabled but the user can still interact with them
Firefox: selecting text in a disabled text field is no…

Traversing the DOM tree with jQuery

jQuery offers many different methods to move a selection through the DOM tree. These are the most important.

$element.find(selector): Get the descendants of each element in the current set of matched elements, filtered by a selector. Does not find the current element, even it matches. If you wanted to do that, you need to write $element.find(selector).addBack(selector).
$element.closest(selector): Get the first ancesto…

api.jquery.com

CSS: Opacity is not inherited in Internet Explorer

Elements will not inherit their parent's opacity in IE for no good reason. This can lead to unexpected behaviour when you want to fade/hide an element and all its children.

To fix it, give the element defining the opacity a non-static positioning. For example:

.foo {
  opacity: 0.2;
  position: relative; /* for IE */
}

While the linked article describes this problem for IE9 and below, I have encountered the same issue in IE10 and IE11.

Just go away, Internet Explorer!

jacklmoore.com

Chrome: Making high-resolution website screenshots without add-ons

If you want to make a screenshot of a website that works well in print or on a high-DPI screen (like Apple Retina displays), here is how you can capture a high-resolution screenshot.

You can do this without an addon:

Open the website
If you have multiple monitoros:
- Resize the Chrome window so it covers multiple monitors (in Linux you can hold ALT and resize by dragging with the right mouse button)
- Zoom into the page using CTRL + and CTRL - so it covers most of the window area. Leave generous padding on the left and right so…

XHR is not JSON

When a Rails controller action should handle both HTML and JSON responses, do not use request.xhr? to decide that. Use respond_to.

I've too often seen code like this:

def show
  # ...
  if request.xhr?
    render json: @user.as_json
  else
     # renders default HTML view
  end
end

This is just plain wrong. Web browsers often fetch JSON via XHR, but they (should) also send the correct Accept HTTP header to tell the server the data they expect to receive.

If you say request.xhr? as a means for "…

Heads up! Years are always floats in Rails < 4

Watch out when saying something like 1.year in Rails. The result is not a Fixnum and can cause unexpected errors when the receiving end expects a Fixnum.

While anything from seconds to months are Fixnums, a year is a Float in Rails – when called on a Fixnum itself:

>> 10.seconds.class
=> Fixnum
>> 2.minutes.class
=> Fixnum
>> 24.hours.class
=> Fixnum
>> 28.days.class
=> Fixnum
>> 9.months.class
=> Fixnum
>> 1.year.class
=> Float # Boom.

While they are [technically correct](http:…

Centering with CSS vertically and horizontally (all options overview)

There are a million ways to center <div>s or text in CSS, horizontally or vertically. All the ways are unsatisfying in their own unique way, or have restrictions regarding browser support, element sizes, etc.

Here are two great resources for finding the best way of aligning something given your use case and browser support requirements:

How to center in CSS: A long form that lets you define your use case and browser support requirements, then shows you the preferred way of aligning.

[Centering CSS: A com…

How to: Run webpack dev server with vcap.me

If your Rails application is using Webpack you need to serve assets on the same host as you application runs, otherwise you will see the following errors in your browser console:

[WDS] Disconnected!
Invalid Host header

So if you are using awesome.vcap.me:3000 you need to start the webpack-dev-server with a different host than localhost (0.0.0.0):

bin/webpack-dev-server --host awesome.vcap.me

Capybara: A step for finding images with filename and extension

This cucumber step is useful for testing an image (looking at the src of the image).

Then(/^I should see the image "([^"]*)"$/) do |filename_with_extension|
  expect(page).to have_css("img[src*='#{filename_with_extension}']")
end

Then I should see the image "placeholder.png"

Outline: Read more about how to test a uploaded file here, e.g. file downloads.

Sprites with Compass

Using CSS sprites for background images is a technique for optimizing page load time by combining smaller images into a larger image sprite.

There are ongoing arguments on how useful this still is, as modern browsers become more comfortable to load images in parallel. However, many major websites still use them, for example amazon, [facebook](…

Form letters with LibreOffice Writer

This is painful. Consider using Microsoft Office or switching careers. If you need to write < 20 letters consider doing it manually.

So you didn't listen and here it comes:

Ignore the Mail Merge Wizard. It will crash or destroy your document.
Export your addresses, recipient names, etc. as a .ods spreadsheet (.xls, .xlsx, .ods). Use any columns that work for you, but be consistent. I like to use one column for the address, one column for the salutation line.
Import the spreadsheet as an address book source: *Tools => Add…

Action Mailer Previews (since Rails 4.1)

Since Rails 4.1 there is a preview-function to see what an e-mail will look like.

All you need to do is implement a preview-class in spec/mailers/previews (if you are using RSpec):

class NotifierPreview < ActionMailer::Preview
  def welcome
    Notifier.welcome(User.first)
  end
end

and then a preview will be available in the browser at http://localhost:3000/rails/mailers/notifier/welcome as well as a list of previews at http://localhost:3000/rails/mailers .

Note: If your preview model is not loaded you might need to change…

api.rubyonrails.org

Check that an element is hidden via CSS with Spreewald

If you have content inside a page that is hidden by CSS, the following will work with Selenium, but not when using the Rack::Test driver:

Then I should not see "foobear"

This is because the Rack::Test driver does not know if an element is visible, and only looks at the DOM.

Spreewald offers steps to check that an element is hidden by CSS:

Then "foo" should be hidden # "should not be visible" in Spreewald < 1.2.3

You can also check that an element is visible:

Then "foo" shou...

Beware: Many browsers define window.event

Some browsers define window.event, which will return a copy of the "current" event. However, this is not defined by the W3C. Most importantly, Firefox does not support it, neither do recent versions of IE.

You should completely avoid accessing the global event and instead pass the event object around that the event handler receives. The easiest protection against accidentally accessing window.event is just never naming the event event, but e or evnt or so.

```
function brokenInFirefox() {
event.preventDefault(); // Break…

stackoverflow.com

1 … 4 5 6 7 8 9 10 … 44