A working follow button (the standard way): Add failing test cases for follow/unfollow buttons on user's profile page

Techniques:
The use of 'have_xpath' method. XPath is a advanced and powerful tool to navigate XML or HTML5 documents.
See http://www.w3schools.com/xpath/xpath_syntax.asp
A working follow button (the standard way): Add failing test cases to cover a security hole, that client could directly send HTTP request to RelationshipsController

The RelationshipsController actions 'create' 'destroy' should only be accessible to signed-in users
A working follow button (the standard way): Get all tests green by implementing the RelationshipsController actions 'create' and 'destroy'
A working follow button (with Ajax): Change the follow/unfollow form to use Ajax

The motivation to use Ajax is because with standard way, a user starts on a profile page of another, follows that user, and is immediately redirected back to the original page. It is reasonable to ask why the user needs to leave that page at all.

Techniques:
Because the practice of adding Ajax to web forms is quite common, Rails makes Ajax easy to implement. Indeed, updating the follow/unfollow form partials is trivial: just change

  form_for

to

  form_for ..., remote: true

Rails will automatically use Ajax.

The generated HTML is:

<form action="/relationships/117" class="edit_relationship" data-remote="true"
      id="edit_relationship_117" method="post">
  ...
</form>

Here 'data-remote="true"' tells Rails to allow the form to be handled by JavaScript.

Note that all tests are still green.
A working follow button (with Ajax): Add failing tests for the RelationshipsController responses to Ajax requests

Techniques:
The use of 'xhr' method ('XmlHttpRequest') compared to get, post, patch and delete we've been using

  xhr :post, :create, relationship: { followed_id: other_user.id }

We see that xhr takes as arguments
a symbol for the relevant HTTP method,
a symbol for the action,
and a hash representing the contents of params in the controller itself.

As in previous examples, we use expect to wrap the operation in a block and test for an increment or decrement in the relevant count.

Note:
This is our first example of a controller test
Because the xhr method is (somewhat inexplicably) not available in integration tests
A working follow button (with Ajax): Responding to Ajax requests in the RelationshipsController

Note the tests are still RED, because we don't have 'create.js.erb' & 'destroy.js.erb' now. Explained below.

Technique:
This code uses 'respond_to' to take the appropriate action depending on the kind of request. (There is no relationship between this respond_to and the respond_to used in the RSpec examples.) The syntax is potentially confusing, and it’s important to understand that in:

respond_to do |format|
  format.html { redirect_to @user }
  format.js
end

only one of the lines gets executed (based on the nature of the request, standard or Ajax).

In the case of an Ajax request, Rails automatically calls a JavaScript Embedded Ruby (.js.erb) file with the same name as the action, i.e., create.js.erb or destroy.js.erb. As you might guess, the files allow us to mix JavaScript and Embedded Ruby to perform actions on the current page. It is these files that we need to create and edit in order to update the user profile page upon being followed or unfollowed.
A working follow button (with Ajax): The JavaScript Embedded Ruby to update the HTML page after create/destroy the relationship via Ajax request.

The following is changed using JS
Toggle 'Follow'/'Unfollow' button
Change the number of 'followers'

Techniques:
$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>")
uses a combination of jQuery method 'html' to change the html content,
and 'escape_javascript' to escape out the result when inserting HTML in a JavaScript file

Note the Ruby code between <%= %> will be executed by Rails server first, and then replace the <%= %> in the original file.