Chapter 1: add Quote CRUD with system tests and Docker Selenium setup

sagar-ruby · sagar-ruby · commit 6d2894388138 · 2026-01-05T11:44:30.000+04:00
diff --git a/Gemfile b/Gemfile
@@ -51,6 +51,8 @@ gem "bootsnap", require: false
 # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
 # gem "image_processing", "~> 1.2"
 
+gem "simple_form", "~> 5.1.0"
+
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
   gem "debug", platforms: %i[ mri mingw x64_mingw ]
@@ -71,5 +73,4 @@ group :test do
   # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
   gem "capybara"
   gem "selenium-webdriver"
-  gem "webdrivers"
 end
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -205,6 +205,9 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
+    simple_form (5.1.0)
+      actionpack (>= 5.2)
+      activemodel (>= 5.2)
     sprockets (4.2.2)
       concurrent-ruby (~> 1.0)
       logger
@@ -229,10 +232,6 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
-    webdrivers (5.3.1)
-      nokogiri (~> 1.6)
-      rubyzip (>= 1.3.0)
-      selenium-webdriver (~> 4.0, < 4.11)
     websocket (1.2.11)
     websocket-driver (0.8.0)
       base64
@@ -256,12 +255,12 @@ DEPENDENCIES
   puma (~> 5.0)
   rails (~> 7.0.0)
   selenium-webdriver
+  simple_form (~> 5.1.0)
   sprockets-rails
   stimulus-rails
   turbo-rails
   tzinfo-data
   web-console
-  webdrivers
 
 RUBY VERSION
    ruby 3.0.6p216
diff --git a/app/controllers/quotes_controller.rb b/app/controllers/quotes_controller.rb
@@ -0,0 +1,50 @@
+class QuotesController < ApplicationController
+  before_action :set_quote, only: [:show, :edit, :update, :destroy]
+
+  def index
+    @quotes = Quote.all
+  end
+
+  def show
+  end
+
+  def new
+    @quote = Quote.new
+  end
+
+  def create
+    @quote = Quote.new(quote_params)
+
+    if @quote.save
+      redirect_to quotes_path, notice: "Quote was successfully created."
+    else
+      render :new, status: :unprocessable_entity
+    end
+  end
+
+  def edit
+  end
+
+  def update
+    if @quote.update(quote_params)
+      redirect_to quotes_path, notice: "Quote was successfully updated."
+    else
+      render :edit, status: :unprocessable_entity
+    end
+  end
+
+  def destroy
+    @quote.destroy
+    redirect_to quotes_path, notice: "Quote was successfully destroyed."
+  end
+
+  private
+
+  def set_quote
+    @quote = Quote.find(params[:id])
+  end
+
+  def quote_params
+    params.require(:quote).permit(:name)
+  end
+end
diff --git a/app/helpers/quotes_helper.rb b/app/helpers/quotes_helper.rb
@@ -0,0 +1,2 @@
+module QuotesHelper
+end
diff --git a/app/models/quote.rb b/app/models/quote.rb
@@ -0,0 +1,4 @@
+class Quote < ApplicationRecord
+  validates :name, presence: true
+
+end
diff --git a/app/views/quotes/_form.html.erb b/app/views/quotes/_form.html.erb
@@ -0,0 +1,10 @@
+<%= simple_form_for quote, html: { class: "quote form" } do |f| %>
+  <% if quote.errors.any? %>
+    <div class="error-message">
+      <%= quote.errors.full_messages.to_sentence.capitalize %>
+    </div>
+  <% end %>
+
+  <%= f.input :name, input_html: { autofocus: true } %>
+  <%= f.submit class: "btn btn--secondary" %>
+<% end %>
diff --git a/app/views/quotes/_quote.html.erb b/app/views/quotes/_quote.html.erb
@@ -0,0 +1,12 @@
+<div class="quote">
+  <%= link_to quote.name, quote_path(quote) %>
+  <div class="quote__actions">
+    <%= button_to "Delete",
+                  quote_path(quote),
+                  method: :delete,
+                  class: "btn btn--light" %>
+    <%= link_to "Edit",
+                edit_quote_path(quote),
+                class: "btn btn--light" %>
+  </div>
+</div>
diff --git a/app/views/quotes/edit.html.erb b/app/views/quotes/edit.html.erb
@@ -0,0 +1,9 @@
+<main class="container">
+  <%= link_to sanitize("&larr; Back to quote"), quote_path(@quote) %>
+
+  <div class="header">
+    <h1>Edit quote</h1>
+  </div>
+
+  <%= render "form", quote: @quote %>
+</main>
diff --git a/app/views/quotes/index.html.erb b/app/views/quotes/index.html.erb
@@ -0,0 +1,10 @@
+<main class="container">
+  <div class="header">
+    <h1>Quotes</h1>
+    <%= link_to "New quote",
+                new_quote_path,
+                class: "btn btn--primary" %>
+  </div>
+
+  <%= render @quotes %>
+</main>
diff --git a/app/views/quotes/new.html.erb b/app/views/quotes/new.html.erb
@@ -0,0 +1,9 @@
+<main class="container">
+  <%= link_to sanitize("&larr; Back to quotes"), quotes_path %>
+
+  <div class="header">
+    <h1>New quote</h1>
+  </div>
+
+  <%= render "form", quote: @quote %>
+</main>
diff --git a/app/views/quotes/show.html.erb b/app/views/quotes/show.html.erb
@@ -0,0 +1,8 @@
+<main class="container">
+  <%= link_to sanitize("&larr; Back to quotes"), quotes_path %>
+  <div class="header">
+    <h1>
+      <%= @quote.name %>
+    </h1>
+  </div>
+</main>
diff --git a/config/database.yml b/config/database.yml
@@ -22,6 +22,7 @@ default: &default
   pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
 
 development:
+  <<: *default
   url: <%= ENV["DATABASE_URL"] %>
 
   # The specified database role being used to connect to postgres.
@@ -56,7 +57,7 @@ development:
 # Do not set this db to the same as development or production.
 test:
   <<: *default
-  database: quote_editor_test
+  url: <%= ENV["DATABASE_URL_TEST"] %>
 
 # As with config/credentials.yml, you never want to store sensitive information,
 # like your database password, in your source code. If your source code is
diff --git a/config/initializers/simple_form.rb b/config/initializers/simple_form.rb
@@ -0,0 +1,20 @@
+SimpleForm.setup do |config|
+  # Wrappers configration
+  config.wrappers :default, class: "form__group" do |b|
+    b.use :html5
+    b.use :placeholder
+    b.use :label, class: "visually-hidden"
+    b.use :input, class: "form__input", error_class: "form__input--invalid"
+  end
+
+  # Default configuration
+  config.generate_additional_classes_for = []
+  config.default_wrapper                 = :default
+  config.button_class                    = "btn"
+  config.label_text                      = lambda { |label, _, _| label }
+  config.error_notification_tag          = :div
+  config.error_notification_class        = "error_notification"
+  config.browser_validations             = false
+  config.boolean_style                   = :nested
+  config.boolean_label_class             = "form__checkbox-label"
+end
diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml
@@ -0,0 +1,14 @@
+en:
+  simple_form:
+    placeholders:
+      quote:
+        name: Name of your quote
+    labels:
+      quote:
+        name: Name
+
+  helpers:
+    submit:
+      quote:
+        create: Create quote
+        update: Update quote
diff --git a/config/routes.rb b/config/routes.rb
@@ -1,6 +1,3 @@
 Rails.application.routes.draw do
-  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
-
-  # Defines the root path route ("/")
-  # root "articles#index"
+  resources :quotes
 end
diff --git a/db/migrate/20260104133851_create_quotes.rb b/db/migrate/20260104133851_create_quotes.rb
@@ -0,0 +1,9 @@
+class CreateQuotes < ActiveRecord::Migration[7.0]
+  def change
+    create_table :quotes do |t|
+      t.string :name, null: false
+
+      t.timestamps
+    end
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
diff --git a/db/seeds.rb b/db/seeds.rb
@@ -1,7 +1,2 @@
-# This file should contain all the record creation needed to seed the database with its default values.
-# The data can then be loaded with the bin/rails db:seed command (or created alongside the database with db:setup).
-#
-# Examples:
-#
-#   movies = Movie.create([{ name: "Star Wars" }, { name: "Lord of the Rings" }])
-#   Character.create(name: "Luke", movie: movies.first)
+puts "\n== Seeding the database with fixtures =="
+system("bin/rails db:fixtures:load")
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -15,13 +15,24 @@ services:
     command: bin/rails server -b 0.0.0.0
     volumes:
       - .:/app
+      - bundle:/usr/local/bundle
     ports:
       - "3000:3000"
     depends_on:
       - db
+      - chrome
     environment:
+      BUNDLE_PATH: /usr/local/bundle
       DATABASE_URL: postgres://postgres:postgres@db:5432/quote_editor_development
+      DATABASE_URL_TEST: postgres://postgres:postgres@db:5432/quote_editor_test
+      SELENIUM_REMOTE_URL: http://chrome:4444/wd/hub
       RAILS_ENV: development
+  chrome:
+    image: seleniarm/standalone-chromium:latest
+    shm_size: 2gb
+    ports:
+      - "4444:4444"
 
 volumes:
   postgres_data:
+  bundle:
diff --git a/lib/templates/erb/scaffold/_form.html.erb b/lib/templates/erb/scaffold/_form.html.erb
@@ -0,0 +1,15 @@
+<%# frozen_string_literal: true %>
+<%%= simple_form_for(@<%= singular_table_name %>) do |f| %>
+  <%%= f.error_notification %>
+  <%%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
+
+  <div class="form-inputs">
+  <%- attributes.each do |attribute| -%>
+    <%%= f.<%= attribute.reference? ? :association : :input %> :<%= attribute.name %> %>
+  <%- end -%>
+  </div>
+
+  <div class="form-actions">
+    <%%= f.button :submit %>
+  </div>
+<%% end %>
diff --git a/test/application_system_test_case.rb b/test/application_system_test_case.rb
@@ -1,5 +1,26 @@
 require "test_helper"
+require "capybara/rails"
+require "selenium/webdriver"
 
 class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
-  driven_by :selenium, using: :chrome, screen_size: [1400, 1400]
+  Capybara.register_driver :remote_chrome do |app|
+    browser_options = Selenium::WebDriver::Chrome::Options.new
+    browser_options.add_argument("--no-sandbox")
+    browser_options.add_argument("--disable-dev-shm-usage")
+    browser_options.add_argument("--headless=new")
+
+    Capybara::Selenium::Driver.new(
+      app,
+      browser: :remote,
+      url: ENV.fetch("SELENIUM_REMOTE_URL", "http://chrome:4444/wd/hub"),
+      options: browser_options
+    )
+  end
+
+  driven_by :remote_chrome
+
+  setup do
+    Capybara.server_host = "0.0.0.0"
+    Capybara.app_host = "http://web:#{Capybara.server_port}"
+  end
 end
diff --git a/test/controllers/quotes_controller_test.rb b/test/controllers/quotes_controller_test.rb
@@ -0,0 +1,7 @@
+require "test_helper"
+
+class QuotesControllerTest < ActionDispatch::IntegrationTest
+  # test "the truth" do
+  #   assert true
+  # end
+end
diff --git a/test/fixtures/quotes.yml b/test/fixtures/quotes.yml
@@ -0,0 +1,10 @@
+# test/fixtures/quotes.yml
+
+first:
+  name: First quote
+
+second:
+  name: Second quote
+
+third:
+  name: Third quote
diff --git a/test/models/quote_test.rb b/test/models/quote_test.rb
@@ -0,0 +1,7 @@
+require "test_helper"
+
+class QuoteTest < ActiveSupport::TestCase
+  # test "the truth" do
+  #   assert true
+  # end
+end
diff --git a/test/system/quotes_test.rb b/test/system/quotes_test.rb

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +class Quote < ApplicationRecord
 +  validates :name, presence: true
++
 +end