Dockerize system tests

CONTRIBUTING.md

@@ -130,19 +130,20 @@ The above doesn't allow you to run the system tests. To keep the image small, it
 There is an experimental `docker-compose-system-test.yml` file, that runs the `bootstrap_forms` docker container along with an off-the-shelf Selenium container. To start this configuration:
 
 ```bash
-RUBY_VERSION=3.2 docker-compose -f docker-compose-system-test.yml up
+RUBY_VERSION=3.2 docker-compose -f docker-compose-system-test.yml -f docker-compose.override.yml up&
+RUBY_VERSION=3.2 docker-compose -f docker-compose-system-test.yml -f docker-compose.override.yml exec shell /bin/bash
 ```
 
 (Sometimes, on shutdown, the Rails server PID file isn't removed, and so the above will fail. `rm demo/tmp/pids/server.pid` will fix it.)
 
-This starts the containers to run the system tests. In another terminal, run `docker ps` to find the container ID of the `bootstrap-form` image, and then run `docker exec -it <container_id> /bin/bash` to get a shell. Once in the shell:
+Once in the shell:
 
 ```bash
 cd demo
 bundle exec rails test:system
 ```
 
-Note that this system test approach is highly experimental and has some rough edges. For example, on Linux at least, it creates files owned by `root` in your project directories. The docker compose file and/or steps to run system tests may change.
+Note that this system test approach is highly experimental and has some rough edges. The docker compose file and/or steps to run system tests may change. The tests currently fail, because the files with which they're being compared were generated on a Mac, but the Docker containers are running Linux.
 
 #### Simple Dockerfile
 

README.md

@@ -1726,10 +1726,10 @@ Fields can be disabled using the standard Rails form helper option.
 ```erb
 <%= bootstrap_form_for @user do |f| %>
   <div class="row g-3">
-    <div class="col-auto"><%= f.email_field :email, disabled: true %></div>
-    <div class="col-auto"><%= f.password_field :password, disabled: true %></div>
-    <div class="col-auto"><%= f.text_area :comments, disabled: true %></div>
-    <div class="col-auto"><%= f.text_field :status, disabled: true %></div>
+    <div class="col-auto"><%= f.email_field :email, disabled: true, size: 18 %></div>
+    <div class="col-auto"><%= f.password_field :password, disabled: true, size: 18 %></div>
+    <div class="col-auto"><%= f.text_area :comments, disabled: true, rows: 2, cols: 18 %></div>
+    <div class="col-auto"><%= f.text_field :status, disabled: true, size: 18 %></div>
     <div class="col-auto"><%= f.number_field :misc, label: "Number", disabled: true %></div>
     <div class="col-auto"><%= f.radio_button :preferences, 1, disabled: true %></div>
     <div class="col-auto"><%= f.check_box :terms, disabled: true %></div>
@@ -1748,26 +1748,25 @@ Generated HTML:
     <div class="col-auto">
       <div class="mb-3">
         <label class="form-label required" for="user_email">Email</label>
-        <input class="form-control" disabled id="user_email" name="user[email]" required="required" type="email" value="[email protected]">
+        <input class="form-control" disabled id="user_email" name="user[email]" required="required" size="18" type="email" value="[email protected]">
       </div>
     </div>
     <div class="col-auto">
       <div class="mb-3">
         <label class="form-label" for="user_password">Password</label>
-        <input class="form-control" disabled id="user_password" name="user[password]" type="password">
+        <input class="form-control" disabled id="user_password" name="user[password]" size="18" type="password">
       </div>
     </div>
     <div class="col-auto">
       <div class="mb-3">
         <label class="form-label" for="user_comments">Comments</label>
-        <textarea class="form-control" disabled id="user_comments" name="user[comments]">
-</textarea>
+        <textarea class="form-control" cols="18" disabled id="user_comments" name="user[comments]" rows="2"> </textarea>
       </div>
     </div>
     <div class="col-auto">
       <div class="mb-3">
         <label class="form-label" for="user_status">Status</label>
-        <input class="form-control" disabled id="user_status" name="user[status]" type="text">
+        <input class="form-control" disabled id="user_status" name="user[status]" size="18" type="text">
       </div>
     </div>
     <div class="col-auto">

demo/app/views/layouts/application.html.erb

@@ -3,10 +3,8 @@
   <head>
     <title>Hello, world!</title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arimo">
 
-    <!-- Bootstrap CSS -->
-    <!-- CSS only -->
-    <%# <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> %>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.min.css">
 
     <style type="text/css">
@@ -37,6 +35,12 @@
 
     <%= stylesheet_link_tag "application" %>
     <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
+
+    <style type="text/css">
+      :root {
+        --bs-body-font-family: "Arimo", Arial, sans-serif;
+      }
+    </style>
   </head>
 
   <body>
@@ -45,8 +49,6 @@
     </div>
 
     <!-- Optional JavaScript -->
-    <!-- JavaScript Bundle with Popper -->
-    <%# <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> %>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/mode/htmlmixed/htmlmixed.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/mode/xml/xml.min.js"></script>

demo/package.json

@@ -17,7 +17,6 @@
   "version": "0.1.0",
   "scripts": {
     "build": "node_modules/.bin/esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
-    "build:css": "node_modules/.bin/sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
-    "bogon": "echo $PATH"
+    "build:css": "node_modules/.bin/sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
   }
 }

demo/test/application_system_test_case.rb

@@ -16,15 +16,17 @@ def remote_selenium? = @remote_selenium ||= ENV["SELENIUM_HOST"].present? || ENV
               {}
             end
 
-  driven_by :selenium, using: :headless_chrome, screen_size: [960, 720], options: options do |capabilities|
+  driven_by :selenium, using: :chrome, screen_size: [960, 720], options: options do |capabilities|
     capabilities.add_argument "force-device-scale-factor=1"
+    capabilities.add_argument "lang=#{ENV.fetch('LANG', 'en_CA')}"
   end
 
-  Capybara::Screenshot.enabled = ENV["CI"].blank?
-  Capybara.server = :puma, { Silent: true }
-
   if remote_selenium?
     Capybara.server_host = "0.0.0.0"
-    Capybara.app_host = "http://#{ENV.fetch('TEST_APP_HOST', 'web')}:#{ENV.fetch('TEST_APP_PORT', Capybara.server_port)}"
+    Capybara.server_port = ENV.fetch("TEST_APP_PORT", 3001)
+    Capybara.app_host = "http://#{ENV.fetch('TEST_APP_HOST', 'shell')}:#{ENV.fetch('TEST_APP_PORT', Capybara.server_port)}"
   end
+
+  Capybara::Screenshot.enabled = ENV["CI"].blank?
+  Capybara.server = :puma, { Silent: true }
 end