Thursday, May 11, 2017

The stable version of minitest_plugin.rb 5.10.1 for Rails testing

Today, I have got a bad luck that there was an error when I ran the first test case in my newly created Ruby on Rails project. And it took me 2-3 hours to figure out it and fixed it.

I just created a new Rails project called myapp3 as usual.
$ cd ~
$ rails new myapp3
$ cd myapp3

I generated a Static Pages controller named home and about:
$ rails generate controller StaticPages home about

The generate controller command will create a new test case for the static pages controller respectively.
test/controllers/static_pages_controller_test.rb
require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest
  test "should get home" do
    get static_pages_home_url
    assert_response :success
  end

  test "should get about" do
    get static_pages_about_url
    assert_response :success
  end

end

It is a brand new static pages test and it is supposed to pass. However, it fails.
jimmyc@Jimmy-C-2017:~/myapp3$ rails test
Running via Spring preloader in process 3281
/home/jimmyc/myapp3/db/schema.rb doesn't exist yet. Run `rails db:migrate` to create it, then try again. If you do not intend to use a database, you should instead alter /home/jimmyc/myapp3/config/application.rb to limit the frameworks that will be loaded.
Run options: --seed 61369

# Running:

..

Finished in 0.581275s, 3.4407 runs/s, 3.4407 assertions/s.
/home/jimmyc/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/railties-5.0.2/lib/rails/test_unit/minitest_plugin.rb:9:in `aggregated_results': wrong number of arguments (given 1, expected 0) (ArgumentError)
    from /home/jimmyc/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/minitest-5.10.2/lib/minitest.rb:597:in `report'
    from /home/jimmyc/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/minitest-5.10.2/lib/minitest.rb:687:in `each'
    from /home/jimmyc/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/minitest-5.10.2/lib/minitest.rb:687:in `report'
    from /home/jimmyc/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/minitest-5.10.2/lib/minitest.rb:141:in `run'
    from /home/jimmyc/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/railties-5.0.2/lib/rails/test_unit/minitest_plugin.rb:72:in `run'
    from /home/jimmyc/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/minitest-5.10.2/lib/minitest.rb:63:in `block in autorun'
    from /home/jimmyc/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/spring-2.0.1/lib/spring/application.rb:161:in `fork'
    from /home/jimmyc/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/spring-2.0.1/lib/spring/application.rb:161:in `serve'
    from /home/jimmyc/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/spring-2.0.1/lib/spring/application.rb:131:in `block in run'
    from /home/jimmyc/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/spring-2.0.1/lib/spring/application.rb:125:in `loop'
    from /home/jimmyc/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/spring-2.0.1/lib/spring/application.rb:125:in `run'
    from /home/jimmyc/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/spring-2.0.1/lib/spring/application/boot.rb:19:in `<top (required)>'
    from /home/jimmyc/.rbenv/versions/2.4.0/lib/ruby/2.4.0/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /home/jimmyc/.rbenv/versions/2.4.0/lib/ruby/2.4.0/rubygems/core_ext/kernel_require.rb:55:in `require'
    from -e:1:in `<main>'
jimmyc@Jimmy-C-2017:~/myapp3$ 

I tried to to figure out the root cause of this error. At first, I tried to find out what argument (parameter) caused the error, but I did not sure what argument it specified. Next, I tried to go through the Gem file and look at each of the Gem, but no result.

After all, Google saves me when I search "minitest_plugin.rb error" in Google.


In according to the Github issue post on Getting error: aggregated_results: wrong number of arguments (given 1, expected 0) #689, I added a line in my Gemfile to revert to the older minitest version 5.10.1 that works properly.
gem "minitest", "5.10.1"

Then I ran bundle install instead of bundle update.
jimmyc@Jimmy-C-2017:~/myapp3$ bundle install
The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Fetching gem metadata from https://rubygems.org/..........
Fetching version metadata from https://rubygems.org/...
Fetching dependency metadata from https://rubygems.org/..
You have requested:
  minitest = 5.10.1

The bundle currently has minitest locked at 5.10.2.
Try running `bundle update minitest`

If you are updating multiple gems in your Gemfile at once,
try passing them all to `bundle update`

So, I realized that bundle update minitest is the correct command.
jimmyc@Jimmy-C-2017:~/myapp3$ bundle update minitest
The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Fetching gem metadata from https://rubygems.org/..........
Fetching version metadata from https://rubygems.org/...
Fetching dependency metadata from https://rubygems.org/..
Resolving dependencies...
Using rake 12.0.0
Using concurrent-ruby 1.0.5
Using i18n 0.8.1
Using minitest 5.10.1 (was 5.10.2)
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.2
Using nio4r 2.0.0
Using websocket-extensions 0.1.2
Using mime-types-data 3.2016.0521
Using arel 7.1.4
Using bindex 0.5.0
Using bundler 1.14.6
Using byebug 9.0.6
Using coffee-script-source 1.12.2
Using execjs 2.7.0
Using method_source 0.8.2
Using thor 0.19.4
Using ffi 1.9.18
Using multi_json 1.12.1
Using rb-fsevent 0.9.8
Using puma 3.8.2
Using sass 3.4.23
Using tilt 2.0.7
Using sqlite3 1.3.13
Using turbolinks-source 5.0.3
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 coffee-script 2.4.1
Using uglifier 3.2.0
Using rb-inotify 0.9.8
Using turbolinks 5.0.1
Using activesupport 5.0.2
Using loofah 2.0.3
Using mail 2.6.5
Using listen 3.0.8
Using rails-dom-testing 2.0.3
Using globalid 0.4.0
Using activemodel 5.0.2
Using jbuilder 2.6.4
Using spring 2.0.1
Using rails-html-sanitizer 1.0.3
Using activejob 5.0.2
Using activerecord 5.0.2
Using spring-watcher-listen 2.0.1
Using actionview 5.0.2
Using actionpack 5.0.2
Using actioncable 5.0.2
Using actionmailer 5.0.2
Using railties 5.0.2
Using sprockets-rails 3.2.0
Using coffee-rails 4.2.1
Using jquery-rails 4.3.1
Using web-console 3.5.0
Using rails 5.0.2
Using sass-rails 5.0.6
Bundle updated!
jimmyc@Jimmy-C-2017:~/myapp3$

Finally, I can pass the test successfully.
jimmyc@Jimmy-C-2017:~/myapp3$ rails test
Running via Spring preloader in process 3611
/home/jimmyc/myapp3/db/schema.rb doesn't exist yet. Run `rails db:migrate` to create it, then try again. If you do not intend to use a database, you should instead alter /home/jimmyc/myapp3/config/application.rb to limit the frameworks that will be loaded.
Run options: --seed 47348

# Running:

..

Finished in 0.552503s, 3.6199 runs/s, 3.6199 assertions/s.

2 runs, 2 assertions, 0 failures, 0 errors, 0 skips
jimmyc@Jimmy-C-2017:~/myapp3$

Reference
Getting error: aggregated_results: wrong number of arguments (given 1, expected 0) #689
https://github.com/seattlerb/minitest/issues/689

Wednesday, May 10, 2017

Ch 5: Filling in the Layout

Today, I have completed the Chapter 5 of Michael Hartl's Ruby on Rails Tutorial book.

* I created a new branch: filling-in-layout
$ git checkout -b filling-in-layout

* I updated application layouts file:
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all',
                                              'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
    <div class="container">
      <%= yield %>
      <%= render 'layouts/footer' %>
    </div>
  </body>
</html>

* I editted home.html.erb
app/views/static_pages/home.html.erb
<div class="center jumbotron">
  <h1>Welcome to the Sample App</h1>

  <h2>
    This is the home page for the
    <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
    sample application.
  </h2>

  <%= link_to "Sign up now!", signup_path, class: "btn btn-lg btn-primary" %>
</div>

<%= link_to image_tag("rails.png", alt: "Rails logo"),
            'http://rubyonrails.org/' %>

* I downloaded a image file rails.png and put it on app/assets/images/

* I added bootstrap-sass gem to the Gemfile
gem 'bootstrap-sass', '3.3.6'

* I ran bundle install
$ bundle install

* I created a new custom.scss file to put all of the CSS needed for this tutorial in a single file.
$ touch app/assets/stylesheets/custom.scss

* I coded the custom.scss file:
app/assets/stylesheets/custom.scss

@import "bootstrap-sprockets";
@import "bootstrap";

/* mixins, variables, etc. */

$gray-medium-light: #eaeaea;

/* universal */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
}

/* typography */

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: $gray-light;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}


/* header */

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: white;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  &:hover {
    color: white;
    text-decoration: none;
  }
}

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $gray-medium-light;
  color: $gray-light;
  a {
    color: $gray;
    &:hover {
      color: $gray-darker;
    }
  }
  small {
    float: left;
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 15px;
    }
  }
}

* I defined partial for the stylesheets and header.
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all',
                                              'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
    <div class="container">
      <%= yield %>
      <%= render 'layouts/footer' %>
    </div>
  </body>
</html>

* I wrote shim partial:
app/views/layouts/_shim.html.erb
<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
  </script>
<![endif]-->

* I wrote header partial:
app/views/layouts/_header.html.erb
<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "sample app", root_path, id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home",   root_path %></li>
        <li><%= link_to "Help",   help_path %></li>
        <li><%= link_to "Log in", '#' %></li>
      </ul>
    </nav>
  </div>
</header>

* I wrote footer partial:
app/views/layouts/_footer.html.erb
<footer class="footer">
  <small>
    The <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
    by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
  </small>
  <nav>
    <ul>
      <li><%= link_to "About",   about_path %></li>
      <li><%= link_to "Contact", contact_path %></li>
      <li><a href="http://news.railstutorial.org/">News</a></li>
    </ul>
  </nav>
</footer>

* I added a test case for Contact page:
test/controllers/static_pages_controller_test.rb
   test "should get contact" do
      get contact_path
      assert_response :success
      assert_select "title", "Contact | #{@base_title}"
  end   

* I added a route for Contact page:
config/routes.rb
Rails.application.routes.draw do
  get 'users/new'

  root 'static_pages#home'
  get  '/help',    to: 'static_pages#help'
  get  '/about',   to: 'static_pages#about'
  get  '/contact', to: 'static_pages#contact'
  get  '/signup',  to: 'users#new'   
end

* I added an action (a method) to for Contact page in the Static Pages Controller:
app/controllers/static_pages_controller.rb
class StaticPagesController < ApplicationController
  def home
  end

  def help
  end
   
  def about
  end
   
  def contact
  end
   
end

* I created a new Contact Page in html.erb:
app/views/static_pages/contact.html.erb
<% provide(:title, "Contact") %>
<h1>Contact</h1>
<p>
  Contact the Ruby on Rails Tutorial about the sample app at the
  <a href="http://www.railstutorial.org/contact">contact page</a>.
</p>

* I ran the test and it was passed:
$ rails test

* I re-wrote the routing rules in config/routes.rb

* I updated the routing path in static pages test cases:
test/controllers/static_pages_controller_test.rb
From: get static_pages_help_url
To: get help_path


* I coded the paths for link_to function in header layout:
app/views/layouts/_header.html.erb
<li><%= link_to "Home",    root_path %></li>
<li><%= link_to "Help",    help_path %></li>

* I coded the path in footer layout too: app/views/layouts/_footer.html.erb

* I wrote an integration test "site layout" for testing of layout links
$ rails generate integration_test site_layout

* The codes for integration test:
test/integration/site_layout_test.rb
require 'test_helper'

class SiteLayoutTest < ActionDispatch::IntegrationTest

  test "layout links" do
    get root_path
    assert_template 'static_pages/home'
    assert_select "a[href=?]", root_path, count: 2
    assert_select "a[href=?]", help_path
    assert_select "a[href=?]", about_path
    assert_select "a[href=?]", contact_path
    get contact_path
    assert_select "title", full_title("Contact")
  end

end

* I added gem 'rails-controller-testing' in my Gemfile.

* I ran bundle install
$ bundle install

* I executed a Rake task for the integration test:
$ rails test:integration

* I ran a normal test to make sure it is pass.
$ rails test

* I added 'include ApplicationHelper'
in test/test_helper.rb
ENV['RAILS_ENV'] ||= 'test'
require File.expand_path('../../config/environment', __FILE__)
require 'rails/test_help'

class ActiveSupport::TestCase
  # Setup all fixtures in test/fixtures/*.yml for all tests in alphabetical order.
  fixtures :all
  include ApplicationHelper
   
  # Add more helper methods to be used by all tests here...
end

* I added a line to test the title of the Contact page in
test/integration/site_layout_test.rb
assert_select "title", full_title("Contact")

* I wrote application_helper_test.rb to test the title is spelled correctly :
test/helpers/application_helper_test.rb
require 'test_helper'

class ApplicationHelperTest < ActionView::TestCase
  test "full title helper" do
    assert_equal full_title,         "Ruby on Rails Tutorial Sample App"
    assert_equal full_title("Help"), "Help | Ruby on Rails Tutorial Sample App"
  end
end

* I created a Users controller with action 'new'
$ rails generate controller Users new

* I created a signup route:
config/routes.rb
get  '/signup',  to: 'users#new'

* I updated the signup_path for user controller test case:
test/controllers/users_controller_test.rb
get signup_path

* I created the link for Sign Up in home.html.erb:
app/views/static_pages/home.html.erb
<%= link_to "Sign up now!", signup_path, class: "btn btn-lg btn-primary" %>

* I created a temporary stub view for the signup page:
app/views/users/new.html.erb
<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<p>This will be a signup page for new users.</p>

* I merged my changes back into the master branch.
$ git add -A
$ git commit -m "Finish layout and routes"
$ git checkout master
$ git merge filling-in-layout

* I ran a test and made that sure the test is pass.
$ rails test

* I pushed the project to Github:
$ git push

* The result of the development: Home Page:

* The result of the developtment: Sign Up Page:

Friday, April 28, 2017

Creating a clickable image in Ruby on Rails

It is still my beginning stage to learn Ruby on Rails. I found that is quite challenging to create a clickable image in html.erb (Ruby Embedded HTML). A clickable image can be created easily by the <a href><img></a> pattern in plain HTML5.

For example, a very common pattern in plain HTML:
<a href="img/img-21-01.jpg">
  <img src="img/img-21-01.jpg" alt="Image" class="img-fluid tm-header-img">    
</a>
This pattern can create an image that can be clicked and enlarged.

After I searched Google, read some articles in StackOverflow and Michael Hartl's Tutorial book. I conclude a simplier <%= link_to image_tag %> pattern to create a clickable image:

<%= link_to image_tag("picture01.jpg", alt: "Image Description"), image_path("picture01.jpg") %>

Again, in plain HTML:
<a href="img/img-21-01.jpg">
  <img src="img/img-21-01.jpg" alt="Image" class="img-fluid tm-header-img">    
</a>

I re-wrote into html.erb:
<%= link_to image_tag("img-21-01.jpg", :alt => "Image", :class => "img-fluid tm-header-img" ), image_path("img-21-01.jpg") %>

This is a simplified pattern to create a clickable image in html.erb (Ruby Embedded HTML).

The images in the home page:

Click the image to enlarge it:


References:
ruby on rails link_to an image
http://stackoverflow.com/questions/18484543/ruby-on-rails-link-to-an-image

image_path (ActionView::Helpers::AssetTagHelper) - APIdock
https://apidock.com/rails/ActionView/Helpers/AssetTagHelper/image_path

5.1.1 Site navigation
https://www.railstutorial.org/book/filling_in_the_layout#sec-adding_to_the_layout

Experiment: Cloning a CSS template to Ruby on Rails using the static pages feature

After I have read the chapter 3 of Michael Hartl's book to generate static pages using Ruby on Rails static pages generator. I wanted to try to find some CSS templates, downloaded the CSS templates to my hard drive and hosted them on my Ruby on Rails server.

* First, I searched Google: "free css templates"

* Let's say, I liked the style of this CSS templates http://www.templatemo.com/live/templatemo_495_metro_fit  and downloaded it to my hard drive.

* I unzipped the CSS templates in my ~/html folder

* I tried the CSS template by opening the index.html file on my local drive using Firefox:
file:///home/jimmyc/html/templatemo_495_metro_fit/index.html

* To host a CSS template on my Ruby on Rails server, I created a new Rails project called "static1":
$ cd ~
$ rails new static1
$ cd static1
$ bundle install

* I initialized the Git repository:
$ git init
$ git add -A
$ git commit -m "Init"

* I updated the README.md file
# Hosting a CSS template using Rails static page feature
This is the CSS template from http://www.templatemo.com/live/templatemo_495_metro_fit

## Getting started
To get started, clone this repository and then install the needed gems:
```
$ git clone
```

Next, run bundle install:
```
$ bundle install
```

Migrate the database:
```
$ rails db:migrate
```

Start the server:
```
$ rails s -b 0.0.0.0 -p 3000
```

Navigate the website, in a browser:
```
http://localhost:3000/
```
* I committed the changes:
$ git commit -am "Updated README"

* I created a new Github repository called static1 and I pushed it onto Github:
$ git remote add origin https://github.com/jimmy2046/static1.git
$ git push -u origin master
* I created a branch static-pages:

git checkout -b static-pages

* Now, this is important: I created static pages controller for pages Home and About:
$ rails generate controller StaticPages home about

* I pushed the static pages controller to Github:
$ git add -A
$ git commit -m "Add a Static Pages controller"
$ git push -u origin static-pages

* I set the root location for config/routes.rb:
 Rails.application.routes.draw do
  get 'static_pages/home'
  get 'static_pages/about'
  root 'static_pages#home'  
end
* I started the Rails server:
$ rails s -b 0.0.0.0 -p 3000

* I tested to navigate to the homepage:

* I checked the test/controllers/static_pages_controller_test.rb file:
require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest
  test "should get home" do
    get static_pages_home_url
    assert_response :success
  end

  test "should get about" do
    get static_pages_about_url
    assert_response :success
  end

end

* I ran the test:
$ rails test
2 runs, 2 assertions, 0 failures, 0 errors, 0 skips

* The second important procedure is to copy the CSS files, images file to the Rails project.

* I copied all CSS files from the template to path: app/assets/stylesheets/ of my rails project static1:
$ cp ~/html/templatemo_495_metro_fit/css/* ~/static1/app/assets/stylesheets/

* I copied all images files from the template to my rails project:
$ cp ~/html/templatemo_495_metro_fit/img/* ~/static1/app/assets/images/

* I copied all Javascript files:
$ cp ~/html/templatemo_495_metro_fit/js/* ~/static1/app/assets/javascripts/

* I renamed the original home.html.erb file and copy the index.html file from the template to my Rails project:
$ mv ~/static1/app/views/static_pages/home.html.erb home_original.html.erb
$ cp ~/html/templatemo_495_metro_fit/index.html ~/static1/app/views/static_pages/home.html.erb

* I renamed the original about.html.erb file and copy the about.html file:
$ mv ~/static1/app/views/static_pages/about.html.erb about_original.html.erb
$ cp ~/html/templatemo_495_metro_fit/about.html ~/static1/app/views/static_pages/about.html.erb

* After I had copied the theme files from the template, I ran the test again:
$ rails test
2 runs, 2 assertions, 0 failures, 0 errors, 0 skips

* Using Brackets, I edited the ~/static1/app/views/static_pages/home.html.erb file

* In home.html.erb file:
  • Replace all href="css/ to href="/assets/css/ in the file.

* I did in the same with about.html.erb file:
Replace all href="css/ to href="/assets/css/ in the file.

* There is no "replace all" method to display all the image files (such as JPG, PNG and GIF files). My way for displaying all image in Ruby Embedded HTML html.erb is to replace all <img> tags with <%=  image_tag %>:
  • For example, I changed these <img> tags  from html:
<a href="img/img-21-01.jpg">
  <img src="img/img-21-01.jpg" alt="Image" class="img-fluid tm-header-img">   
</a>
  • To this codes to fit html.erb:
<%= image_tag("img-21-01.jpg", :alt => "Image", :class => "img-fluid tm-header-img") %>

* For the icons those contain "bicycle", "camera", and "street view", I did not understand what does the HTML i tag and class="fa fa-4x fa-bicycle tm-content-icon" mean. Perhaps the special fonts in Font Awesome. I just capture the screen (alt + PrtScn), saved it as a JPG file (bicycle.jpg) and use the Ruby image_tag function to show it on the screen. This is a simple "short cut" to make it works.
  • For the bicycle icon, I re-wrote:
<i class="fa fa-4x fa-bicycle tm-content-icon"></i>
  • To
<div class="fa fa-4x fa-bicycle tm-content-icon">
  <%= image_tag("bicycle.jpg") %>
</div>

* For the Font Awesome on the bottom such as Facebook, Twitter fonts:
  • For example, for the Linkedin Font Awesome,  I re-wrote:
<a href="#" class="tm-social-link"><i class="fa fa-linkedin"></i></a>
  • To:
<%= image_tag("linkedin_icon.jpg") %>

* I had re-written all image_tag on the home.html.erb page. At this milestone, I added all untracked files, I committed the changes and pushed it onto Github:
$ git add -A
$ git commit -m "Re-written image_tag 2"
$ git checkout master
$ git merge static-pages
$ git push

* I checked my changes by viewing: https://github.com/jimmy2046/static1/blob/master/app/views/static_pages/home.html.erb

* After I had re-written all the image tags, I was going to re-write the link_to tag.

* In the routing file: config/rotues.rb
  • I re-wrote:
get 'static_pages/about'
  • To:
get  '/about',   to: 'static_pages#about'

 * It is optional to re-write <a href> tag to <%= link_to %> tag. To re-write the links, I re-wrote <a href> tag in the Home file:
app/views/static_pages/home.html.erb
  • For example, for the About page link, I changed:
<a class="nav-link" href="about.html">About</a>
  •  To:
<div class="nav-link">
   <%= link_to "About", about_path %>
</div>

* Similarly, I edited the routing path for home.html.erb
config/routes.rb
get '/home', to: 'static_pages#home'

* And I changed the link_to tags in home.html.erb and about.html.erb
For example, in app/views/static_pages/home.html.erb
  • I changed:
<a class="nav-link" href="#">Home</a>
  • To:
<div class="nav-link"><% link_to "Home", home_path %></div>

* I changed the link_to tags in about.html.erb as well.

* After I have made the changes of image_tag and link_to tags for home.html.erb and about.html.erb and I have changed the routes.rb file. I needed to prepare the the test suite for the web site.

* It is because I had changed the routes.rb file, I have to change the path in the test cases for static pages controller:
For example in test/controllers/static_pages_controller_test.r
  • I changed
 get static_pages_home_url
  • To
 get home_path

* Then, I ran the test to ensure the Home and About page can be routed:
$ rails test
2 runs, 2 assertions, 0 failures, 0 errors, 0 skips

* I wrote 2 test cases for checking the title is display correctly in Home and About pages.
require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest
  test "should get home" do
      get home_path
    assert_response :success
    assert_select "title", "Home"     
  end

  test "should get about" do
      get about_path
    assert_response :success
    assert_select "title", "About"
  end

end
* It is because the default title is the name of the project "static1", the test would fail for incorrect title.
$ rails test
Failure:
StaticPagesControllerTest#test_should_get_about [/home/jimmyc/static1/test/controllers/static_pages_controller_test.rb:13]:
<About> expected but was
<Static1>..
Expected 0 to be >= 1.

* To change the title of the pages, the the Application Layout file:
Located:  app/views/layouts/application.html.erb
  • I changed
<title>Static1</title>
  • To
<title><%= yield(:title) %></title>

* Afterwards,
in app/views/static_pages/home.html.erb
I added 2 lines in home.html.erb.
  • On the top:
<% provide(:title, "Home") %>
  • and I changed the <title> tag:
<title><%= yield(:title) %></title>

* Similarly, for app/views/static_pages/about.html.erb
 <% provide(:title, "About") %>
...
<title><%= yield(:title) %></title>

* After I had corrected the title, the test passes:
$ rails test
2 runs, 4 assertions, 0 failures, 0 errors, 0 skips

* After the completion of Home and About, I wanted to add a Services page.

* I copied the services.html file from the template to app/views/static_pages and renamed it as services.html.erb

* I wrote a test case for Service page.
test/controllers/static_pages_controller_test.rb
test "should get services" do
  get services_path
  assert_response :success
  assert_select "title", "Services"
end

* I updated the routes.rb file for Services page:
config/routes.rb
Rails.application.routes.draw do
# home_path
  get '/home',     to: 'static_pages#home'
# about_path   
  get '/about',    to: 'static_pages#about'   
# services_path
  get '/services', to: 'static_pages#services'   
  root 'static_pages#home'   
end

* I added services method in the static pages controller:
app/controllers/static_pages_controller.rb
class StaticPagesController < ApplicationController
  def home
  end

  def about
  end
   
  def services
  end
   
end

* I changed the <title> of Services page:
app/views/static_pages/services.html.erb
<% provide(:title, "Services") %>
...
<title><%= yield(:title) %></title>

* After the above steps, the test is supposed to pass:
$ rails test
3 runs, 6 assertions, 0 failures, 0 errors, 0 skips

* And then, in the services.html.erb, I did the similar things for changing the image_tag and link_to methods in the file.

* Afterwards, I did above steps recursively to add 'Blog' page and 'Contact' page.
 
* After I had re-written all <%= image_tag %> tags in all pages. I ran the sanitary test to ensure all path and page <title> are correct.
test/controllers/static_pages_controller_test.rb
require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest
  test "should get home" do
      get home_path
    assert_response :success
    assert_select "title", "Home"     
  end

  test "should get about" do
      get about_path
    assert_response :success
    assert_select "title", "About"
  end
   
  test "should get services" do
    get services_path
    assert_response :success
    assert_select "title", "Services"
  end
   
  test "should get blog" do
    get blog_path
    assert_response :success
    assert_select "title", "Blog"
  end
   
  test "should get contact" do
    get contact_path
    assert_response :success
    assert_select "title", "Contact"
  end
     
end

* The command line to run the test:
$ rails test
Finished in 0.580862s, 8.6079 runs/s, 17.2158 assertions/s.
5 runs, 10 assertions, 0 failures, 0 errors, 0 skips

* Finally, I added all untracked files, committed it and pushed it onto Github:
$ git add -A
$ git commit -am "all pages"
$ git push

* You can view my result pages on:
https://github.com/jimmy2046/static1

* You can clone (download) to your local hard drive by:
$ git clone https://github.com/jimmy2046/static1.git

Thursday, April 27, 2017

I learned the basics of Ruby language

Today, I finished up the chapter 4 of the book: Rails-flavored Ruby https://www.railstutorial.org/book/rails_flavored_ruby#cha-rails_flavored_ruby.

In refer to the instructions from the book:

* I created a separate topic branch "rails-flavored-ruby"
$ git checkout -b rails-flavored-ruby


 * I defined a custom helper called full_title, to solve the problem of a missing page title.
app/helpers/application_helper.rb
module ApplicationHelper

  # Returns the full title on a per-page basis.
  def full_title(page_title = '')
    base_title = "Ruby on Rails Tutorial Sample App"
    if page_title.empty?
      base_title
    else
      page_title + " | " + base_title
    end
  end
end

* I simplified my application layout
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
      <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

* I eliminated the code repeatation in Home, About and Contact for the test cases in the static pages controller:
test/controllers/static_pages_controller_test.rb
require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

  def setup
    @base_title = "Ruby on Rails Tutorial Sample App"
  end
   
  test "should get root" do
    get root_url
    assert_response :success
  end
   
    test "should get home" do
    get static_pages_home_url
    assert_response :success
    assert_select "title", "Ruby on Rails Tutorial Sample App"       
    end

  test "should get help" do
    get static_pages_help_url
    assert_response :success
    assert_select "title", "Help | #{@base_title}"
  end

  test "should get about" do
    get static_pages_about_url
    assert_response :success
    assert_select "title", "About | #{@base_title}"
  end
   
  test "should get contact" do
      get static_pages_contact_url
      assert_response :success
      assert_select "title", "Contact | #{@base_title}"
  end   
   
end

* And then, I read the introduction of Ruby programming language including methods, objects, class, def keyword, class keyword, HTML embedded Ruby ERB, data structures include arrays, ranges, hashes, inheritances, superclass, and etc. I did not do the Ruby programming exercises.

* After that, I commited the changes, and I merged the rails-flavoured-ruby branch to master:
$ git commit -am "Add a full_title helper"
$ git checkout master
$ git merge rails-flavored-ruby

* I did a sanity check before push:
$ rails test
5 runs, 9 assertions, 0 failures, 0 errors, 0 skips

* I pushed it up to Github - https://github.com/jimmy2046/sample_app:
$ git push

Sunday, April 23, 2017

The making of static pages using Ruby on Rails

Today, I finished the chapter 3 of Michael Hartl's Ruby on Rails book. I did everything up to 3.5: Conclusion. I did not do the optional Advance Testing Setup after 3.6.

The online version of chapter 3:
https://www.railstutorial.org/book/static_pages#cha-static_pages

My Github repository:
https://github.com/jimmy2046/sample_app

* First, I created a new Rails project called sample_app:
$ rails _5.0.1_ new sample_app

* I did not changed the Gemfile and this is my Gemfile
source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platform: :mri
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '~> 3.0.5'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

* I installed the Gemfile without production part:
$ bundle install --without production
$ bundle update

* I initialized a Git repository:
$ git init
$ git add -A
$ git commit -m "Initialize repository"

* I updated the README.md file, committed the changes, and pushed it onto Github:
$ git commit -am "Improve the README"
$ git remote add origin https://github.com/jimmy2046/sample_app.git
$ git push -u origin --all # pushes up the repo and its refs for the first time
* I tested the new project by Hello World in the Application controller (app/controllers/application_controller.rb):

 class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  
  def hello
    render html: "hello, world!"
  end  
end
* The config/routes.rb specifies what pages are going to send out in according to visitor's HTTP GET request:
Rails.application.routes.draw do
  root 'static_pages#home'
   
  get 'static_pages/home'
  get 'static_pages/help'
  get 'static_pages/about'
  get 'static_pages/contact'
end

*  I committed the changes for edited application_controller.rb and routes.rb:
$ git commit -am "Add hello"
$ git push

* I check out a branch for creating static pages:
$ git checkout -b static-pages

* I generated a Static Pages controller for home.html.erb and help.html.erb:
$ rails generate controller StaticPages home help

* I committed the changes for the creation of Static Pages controller and pushed it to Git hub:
$ git add -A
$ git commit -m "Add a Static Pages controller"
$ git push -u origin static-pages
$ git push

* I added the routes for home.html.erb and help.html.erb:
Rails.application.routes.draw do
  root 'static_pages#home'
   
  get 'static_pages/home'
  get 'static_pages/help'
  get 'static_pages/about'
  get 'static_pages/contact'
end

* I started the Rails server:
$ rails s -b 0.0.0.0 -p 3000

* I navigated it using Firefox:
http://localhost:3000/static_pages/home

* The Rails Generate command created the app/controllers/static_pages_controller.rb file automatically. The generate command also added the def home and def help methods in the Ruby controller file. I added def about and def contact methods in according to the instruction of the book.
class StaticPagesController < ApplicationController
  def home
  end

  def help
  end
   
  def about
  end
   
  def contact
  end
   
end

* The controller also created 2 new files: home.html.erb and help.html.erb. The <% > part is where the Ruby program command to be run.  In the first line it returns a value "Home" to the variable  "title":
<% provide(:title, "Home") %>
<h1>Sample App</h1>
<p>
  This is the home page for the
  <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
  sample application.
</p>

* Similarly, this is the app/views/static_pages/help.html.erb file:

<% provide(:title, "Help") %>
<h1>Help</h1>
<p>
  Get help on the Ruby on Rails Tutorial at the
  <a href="http://www.railstutorial.org/help">Rails Tutorial help section</a>.
  To get help on this sample app, see the
  <a href="http://www.railstutorial.org/book"><em>Ruby on Rails Tutorial</em>
  book</a>.
</p>

* The Ruby on Rails framework is designed to be test-driven development (TDD) ready. It is a testing technique in which the programmer writes failing tests first, and then writes the application code to get the tests to pass. The testing codes are written in advanced the Ruby codes and HTML pages.

* The test/controllers/static_pages_controller_test.rb specifies the testing rules for the static pages controllers: 
require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

  def setup
    @base_title = "Ruby on Rails Tutorial Sample App"
  end
   
  test "should get root" do
    get root_url
    assert_response :success
  end
   
    test "should get home" do
    get static_pages_home_url
    assert_response :success
    assert_select "title", "Home | #{@base_title}"
    end

  test "should get help" do
    get static_pages_help_url
    assert_response :success
    assert_select "title", "Help | #{@base_title}"
  end

  test "should get about" do
    get static_pages_about_url
    assert_response :success
    assert_select "title", "About | #{@base_title}"
  end
   
  test "should get contact" do
      get static_pages_contact_url
      assert_response :success
      assert_select "title", "Contact | #{@base_title}"
  end   
   
end

* To run a test, use the rails test command:
$ rails test

* If a wanted to add a new static page called: about.html.erb
1. I added a new test case in test/controllers/static_pages_controller_test.rb
  test "should get about" do
    get static_pages_about_url
    assert_response :success
  end

2. I added a new routing location in config/routes.rb:
get 'static_pages/about'

3. I defined a new module in  app/controllers/static_pages_controller.rb:
  def about
  end
 4. I created a new Ruby Embedded HTML file app/views/static_pages/about.html.erb. One method is using the Linux touch command:

$ touch app/views/static_pages/about.html.erb
 5. I wrote the about.html.erb:
<h1>About</h1>
<p>
  The <a href="http://www.railstutorial.org/"><em>Ruby on Rails
  Tutorial</em></a> is a
  <a href="http://www.railstutorial.org/book">book</a> and
  <a href="http://screencasts.railstutorial.org/">screencast series</a>
  to teach web development with
  <a href="http://rubyonrails.org/">Ruby on Rails</a>.
  This is the sample application for the tutorial.
</p>
6. I ran the test:
$ rails test

* I also did the 3.4 Slightly Dynamic Pages part. But I do not want to explain it in details. For details, please refer to: https://www.railstutorial.org/book/static_pages#sec-slightly_dynamic_pages

* When I finished, I committed it and pushed it onto Github:
$ git add -A
$ git commit -m "Finish static pages"
$ git checkout master
$ git merge static-pages
$ git push

* You can find it on:

Pinta image editor for Ubuntu Linux

Microsoft Windows Paint enables the basic image editing functionality. In Ubuntu Linux, there is a Pinta program offers the similar image editing features like Microsoft Paint. It does not equipped with Ubuntu installation and it needs to be installed by Ubuntu Software installation program.

To install Pinta in Ubuntu Linux:

1. Click Ubuntu Software:

2.  In Ubuntu software:
  • Click all
  • Search "pinta"
  • Click install 

3. Pinta is installed on the menu bar on the left hand side. To start Pinta, you may click the Pinta icon or type "pinta" in Linux shell terminal.


Reference:
Is there a program like Microsoft Paint? [duplicate]
https://askubuntu.com/questions/36577/is-there-a-program-like-microsoft-paint

How to kill an abandoned process in Linux/Unix

I remembered it, then I forgot, then I remembered it, and then I forgot again. In case of a Linux/Unit process hang, I have to figure out ...