Agile Web Development with Rails, Edition 5

11.3 Iteration F3: Highlighting Changes

Assign the current item to be the line item in question

edit app/controllers/line_items_controller.rb

  def create

    product = Product.find(params[:product_id])

    @line_item = @cart.add_product(product)

    respond_to do |format|

      if @line_item.save

        format.html { redirect_to store_index_url }

        format.js   { @current_item = @line_item }

        format.json { render :show,

          status: :created, location: @line_item }

      else

        format.html { render :new }

        format.json { render json: @line_item.errors,

          status: :unprocessable_entity }

end

end

end

Add the id to the row in question

edit app/views/line_items/_line_item.html.erb

<% if line_item == @current_item %>

<tr id="current_item">

<% else %>

<tr>

<% end %>

  <td><%= line_item.quantity %>&times;</td>

  <td><%= line_item.product.title %></td>

  <td class="item_price"><%= number_to_currency(line_item.total_price) %></td>

</tr>

Animate the background color of that row

edit app/views/line_items/create.js.erb

$('#cart').html("<%=j render(@cart) %>");

$('#current_item').css({'background-color':'#88ff88'}).

  animate({'background-color':'#114411'}, 1000);

Make the jquery-ui libraries available to the application

edit Gemfile

# Use jquery as the JavaScript library

gem 'jquery-rails'

gem 'jquery-ui-rails'

Install the gem

bundle install --local

Resolving dependencies...

Using rake 12.0.0

Using pg 0.19.0

Using ffi 1.9.18

Using concurrent-ruby 1.0.5

Using i18n 0.8.4

Using minitest 5.8.5

Using thread_safe 0.3.6

Using builder 3.2.3

Using erubis 2.7.0

Using mini_portile2 2.1.0

Using rack 2.0.3

Using nio4r 2.1.0

Using websocket-extensions 0.1.2

Using mime-types-data 3.2016.0521

Using arel 7.1.4

Using bundler 1.15.1

Using method_source 0.8.2

Using thor 0.19.4

Using sqlite3 1.3.13

Using puma 3.9.0

Using sass 3.4.24

Using tilt 2.0.7

Using execjs 2.7.0

Using coffee-script-source 1.12.2

Using turbolinks-source 5.0.3

Using multi_json 1.12.1

Using byebug 9.0.6

Using bindex 0.5.0

Using queue_classic 3.2.0.RC1 from source at `/home/rubys/git/queue_classic`

Using rb-inotify 0.9.9 from source at `/home/rubys/git/rb-inotify`

Using tzinfo 1.2.3

Using nokogiri 1.7.2

Using rack-test 0.6.3

Using sprockets 3.7.1

Using websocket-driver 0.6.5

Using mime-types 3.1

Using uglifier 3.2.0

Using coffee-script 2.4.1

Using turbolinks 5.0.1

Using activesupport 5.0.3 from source at `/home/rubys/git/rails`

Using loofah 2.0.3

Using mail 2.6.5

Using rails-dom-testing 2.0.3

Using globalid 0.4.0

Using activemodel 5.0.3 from source at `/home/rubys/git/rails`

Using jbuilder 2.6.4

Using spring 2.0.2

Using rails-html-sanitizer 1.0.3

Using activejob 5.0.3 from source at `/home/rubys/git/rails`

Using activerecord 5.0.3 from source at `/home/rubys/git/rails`

Using actionview 5.0.3 from source at `/home/rubys/git/rails`

Using actionpack 5.0.3 from source at `/home/rubys/git/rails`

Using actioncable 5.0.3 from source at `/home/rubys/git/rails`

Using actionmailer 5.0.3 from source at `/home/rubys/git/rails`

Using railties 5.0.3 from source at `/home/rubys/git/rails`

Using sprockets-rails 3.2.0

Using coffee-rails 4.2.2

Using jquery-rails 4.3.1

Using jquery-ui-rails 6.0.1

Using web-console 3.5.1 from source at `/home/rubys/git/web-console`

Using rails 5.0.3 from source at `/home/rubys/git/rails`

Using sass-rails 5.0.6

Bundle complete! 16 Gemfile dependencies, 62 gems now installed.

Use `bundle info [gemname]` to see where a bundled gem is installed.

Pull in the blind effect from the jquery-ui libraries

edit app/assets/javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will

// include all the files listed below.

//

// Any JavaScript/Coffee file within this directory, lib/assets/javascripts,

// vendor/assets/javascripts, or any plugin's vendor/assets/javascripts

// directory can be referenced here using a relative path.

//

// It's not advisable to add code directly here, but if you do, it'll appear at

// the bottom of the compiled file. JavaScript code in this file should be

// added after the last require_* statement.

//

// Read Sprockets README

// (https://github.com/rails/sprockets#sprockets-directives) for details about

// supported directives.

//

//= require jquery

//= require jquery-ui/effects/effect-blind

//= require jquery_ujs

//= require turbolinks

//= require_tree .

Add an XHR test.

edit test/controllers/line_items_controller_test.rb

  test "should create line_item via ajax" do

    assert_difference('LineItem.count') do

      post line_items_url, params: { product_id: products(:ruby).id },

        xhr: true

end

    assert_response :success

    assert_select_jquery :html, '#cart' do

      assert_select 'tr#current_item td', /Programming Ruby 1.9/

end

end

rails test

Run options: --seed 62204

# Running:

...............................

Finished in 0.972471s, 31.8775 runs/s, 67.8683 assertions/s.

31 runs, 66 assertions, 0 failures, 0 errors, 0 skips