shoelace-rails 0.1.0

data/test/dummy_app/app/views/turbolinks_forms/form.html.erb

@@ -0,0 +1,44 @@
+<% locations = { tokyo: "Tokyo", new_york: "New York", london: "London" } %>
+<%= sl_form_for(@user, url: turbolinks_forms_path) do |form| %>
+  <div>
+    <%= form.text_field :name do %>
+      <span slot="help-text" style="color: rgb(var(--sl-color-danger-600));">
+        <%= @user.errors.full_messages_for(:name).first %>
+      </span>
+    <% end %>
+  </div>
+
+  <div>
+    <%= form.color_field :color %>
+  </div>
+
+  <div>
+    <%= form.range_field :score, min: 0, max: 100, step: 1 %>
+  </div>
+
+  <div>
+    <%= form.collection_radio_buttons :current_city, locations, :first, :last %>
+  </div>
+
+  <div>
+    <%= form.collection_select :previous_city, locations, :first, :last, {}, { placeholder: "Select one" } %>
+  </div>
+
+  <div>
+    <%= form.collection_select :past_cities, locations, :first, :last, {}, { placeholder: "Select two or more", multiple: true, clearable: true } %>
+  </div>
+
+  <div>
+    <%= form.check_box :remember_me %>
+  </div>
+
+  <div>
+    <%= form.switch_field :subscribe_to_emails, value: "1" %>
+  </div>
+
+  <div>
+    <%= form.text_area :description %>
+  </div>
+
+  <%= form.submit %>
+<% end %>

data/test/dummy_app/app/views/turbolinks_forms/show.html.erb

@@ -0,0 +1,5 @@
+<% @user.attributes.each do |attribute_name, value| %>
+  <div>
+    <%= attribute_name.titleize %>: <%= value %>
+  </div>
+<% end %>

data/test/dummy_app/bin/rails

@@ -0,0 +1,5 @@
+#!/usr/bin/env ruby
+
+APP_PATH = File.expand_path('../config/application', __dir__)
+require_relative "../config/boot"
+require "rails/commands"

data/test/dummy_app/bin/webpack

@@ -0,0 +1,18 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "bundler/setup"
+
+require "webpacker"
+require "webpacker/webpack_runner"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::WebpackRunner.run(ARGV)
+end

data/test/dummy_app/bin/yarn

@@ -0,0 +1,18 @@
+#!/usr/bin/env ruby
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  yarn = ENV["PATH"].split(File::PATH_SEPARATOR).
+    select { |dir| File.expand_path(dir) != __dir__ }.
+    product(["yarn", "yarnpkg", "yarn.cmd", "yarn.ps1"]).
+    map { |dir, file| File.expand_path(file, dir) }.
+    find { |file| File.executable?(file) }
+
+  if yarn
+    exec yarn, *ARGV
+  else
+    $stderr.puts "Yarn executable was not detected in the system."
+    $stderr.puts "Download Yarn at https://yarnpkg.com/en/docs/install"
+    exit 1
+  end
+end

data/test/dummy_app/config/application.rb

@@ -0,0 +1,16 @@
+require_relative "boot"
+
+require "rails"
+require "active_model/railtie"
+require "action_controller/railtie"
+require "action_view/railtie"
+require "rails/test_unit/railtie"
+
+Bundler.require(*Rails.groups)
+
+module ShoelaceTest
+  class Application < Rails::Application
+    config.load_defaults 6.1
+    Rails.backtrace_cleaner.remove_silencers! if ENV["BACKTRACE"]
+  end
+end

data/test/dummy_app/config/boot.rb

@@ -0,0 +1,4 @@
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../Gemfile', __dir__)
+
+require "bundler/setup"
+require "bootsnap/setup"

data/test/dummy_app/config/environment.rb

@@ -0,0 +1,2 @@
+require_relative "application"
+Rails.application.initialize!

data/test/dummy_app/config/environments/development.rb

@@ -0,0 +1,10 @@
+Rails.application.configure do
+  config.cache_classes = false
+  config.eager_load = false
+  config.consider_all_requests_local = true
+  config.action_controller.perform_caching = false
+  config.cache_store = :null_store
+  config.active_support.deprecation = :log
+  config.active_support.disallowed_deprecation = :raise
+  config.active_support.disallowed_deprecation_warnings = []
+end

data/test/dummy_app/config/environments/test.rb

@@ -0,0 +1,18 @@
+require "active_support/core_ext/integer/time"
+
+Rails.application.configure do
+  config.cache_classes = true
+  config.eager_load = false
+  config.public_file_server.enabled = true
+  config.public_file_server.headers = {
+    'Cache-Control' => "public, max-age=#{1.hour.to_i}"
+  }
+  config.consider_all_requests_local       = true
+  config.action_controller.perform_caching = false
+  config.cache_store = :null_store
+  config.action_dispatch.show_exceptions = false
+  config.action_controller.allow_forgery_protection = false
+  config.active_support.deprecation = :stderr
+  config.active_support.disallowed_deprecation = :raise
+  config.active_support.disallowed_deprecation_warnings = []
+end

data/test/dummy_app/config/routes.rb

@@ -0,0 +1,4 @@
+Rails.application.routes.draw do
+  resources :hotwire_forms
+  resources :turbolinks_forms
+end

data/test/dummy_app/config/webpack/development.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+
+const { webpackConfig } = require('@rails/webpacker')
+
+module.exports = webpackConfig

data/test/dummy_app/config/webpack/production.js

@@ -0,0 +1 @@
+test.js

data/test/dummy_app/config/webpack/test.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+
+const { webpackConfig } = require('@rails/webpacker')
+
+module.exports = webpackConfig

data/test/dummy_app/config/webpacker.yml

@@ -0,0 +1,33 @@
+default: &default
+  source_path: app/packs
+  source_entry_path: entrypoints
+  public_root_path: public
+  public_output_path: packs
+  cache_path: tmp/webpacker
+  webpack_compile_output: true
+  additional_paths: []
+  cache_manifest: false
+
+development:
+  <<: *default
+  compile: true
+  dev_server:
+    https: false
+    host: localhost
+    port: 3035
+    hmr: false
+    client:
+      overlay: true
+    compress: true
+    allowed_hosts: "all"
+    pretty: true
+    headers:
+      'Access-Control-Allow-Origin': '*'
+    static:
+      watch:
+        ignored: '**/node_modules/**'
+
+test:
+  <<: *default
+  compile: false
+  public_output_path: packs-test

data/test/dummy_app/config.ru

@@ -0,0 +1,6 @@
+# This file is used by Rack-based servers to start the application.
+
+require_relative "config/environment"
+
+run Rails.application
+Rails.application.load_server

data/test/dummy_app/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "app",
+  "private": true,
+  "babel": {
+    "presets": [
+      "./node_modules/@rails/webpacker/package/babel/preset.js"
+    ]
+  },
+  "browserslist": [
+    "defaults"
+  ],
+  "dependencies": {
+    "@hotwired/turbo-rails": "^7.0.1",
+    "@rails/ujs": "^7.0.2",
+    "@rails/webpacker": "^6.0.0-rc.5",
+    "@yuki24/shoelace-rails": "file:./../../../shoelace-rails",
+    "turbolinks": "^5.2.0",
+    "webpack": "^5.51.1",
+    "webpack-cli": "^4.8.0"
+  },
+  "devDependencies": {
+    "@webpack-cli/serve": "^1.5.2"
+  }
+}

data/test/dummy_app/test/system/hotwire_form_test.rb

@@ -0,0 +1,65 @@
+require "test_helper"
+
+class HotwireFormTest < ApplicationSystemTestCase
+  setup do
+    visit new_hotwire_form_path
+  end
+
+  test "It can submit a form with a POST method" do
+    shadow_fill_in 'sl-input[label="Name"]', with: "Yuki Nishijima"
+    shadow_fill_in 'sl-range[name="user[score]"]', with: "50"
+
+    find('sl-radio', text: "New York").click # Selecting a radio button does not work...
+
+    sl_select "Tokyo", from: "Select one"
+    sl_multi_select "Tokyo", "New York", from: "Select two or more"
+    sl_check "Remember me"
+    sl_toggle "Subscribe to emails"
+    shadow_fill_in 'sl-textarea[name="user[description]"]', "textarea", with: "I am a human."
+
+    find("sl-button", text: "Create User").click
+
+    assert_current_path hotwire_form_path(1)
+    assert_text "Name: Yuki Nishijima"
+    assert_text "Description: I am a human."
+    assert_text "Color: #ffffff"
+    assert_text "Score: 50"
+    # assert_text "Current City:"
+    assert_text "Previous City: tokyo"
+    assert_text 'Past Cities: ["tokyo", "new_york"]'
+    assert_text "Remember Me: 1"
+    assert_text "Subscribe To Emails: 1"
+  end
+
+  test "It can submit a form with a POST method without asynchronous submission" do
+    shadow_fill_in 'sl-input[label="Name"]', with: "Yuki Nishijima"
+    shadow_fill_in 'sl-range[name="user[score]"]', with: "50"
+
+    find('sl-radio', text: "New York").click # Selecting a radio button does not work...
+
+    sl_select "Tokyo", from: "Select one"
+    sl_multi_select "Tokyo", "New York", from: "Select two or more"
+    sl_check "Remember me"
+    sl_toggle "Subscribe to emails"
+    shadow_fill_in 'sl-textarea[name="user[description]"]', "textarea", with: "I am a human."
+
+    find("sl-button", text: "Submit without Turbo").click
+
+    assert_current_path hotwire_form_path(1)
+    assert_text "Name: Yuki Nishijima"
+    assert_text "Description: I am a human."
+    assert_text "Color: #ffffff"
+    assert_text "Score: 50"
+    # assert_text "Current City:"
+    assert_text "Previous City: tokyo"
+    assert_text 'Past Cities: ["tokyo", "new_york"]'
+    assert_text "Remember Me: 1"
+    assert_text "Subscribe To Emails: 1"
+  end
+
+  test "It can handle an error form submission" do
+    find("sl-button", text: "Create User").click
+
+    assert_text "Name can't be blank"
+  end
+end

data/test/dummy_app/test/system/turbolinks_form_test.rb

@@ -0,0 +1,39 @@
+require "test_helper"
+
+class TurbolinksFormTest < ApplicationSystemTestCase
+  setup do
+    visit new_turbolinks_form_path
+  end
+
+  test "It can submit a form with a POST method" do
+    shadow_fill_in 'sl-input[label="Name"]', with: "Yuki Nishijima"
+    shadow_fill_in 'sl-range[name="user[score]"]', with: "50"
+
+    find('sl-radio', text: "New York").click # Selecting a radio button does not work...
+
+    sl_select "Tokyo", from: "Select one"
+    sl_multi_select "Tokyo", "New York", from: "Select two or more"
+    sl_check "Remember me"
+    sl_toggle "Subscribe to emails"
+    shadow_fill_in 'sl-textarea[name="user[description]"]', "textarea", with: "I am a human."
+
+    find("sl-button", text: "Create User").click
+
+    assert_current_path turbolinks_forms_path
+    assert_text "Name: Yuki Nishijima"
+    assert_text "Description: I am a human."
+    assert_text "Color: #ffffff"
+    assert_text "Score: 50"
+    # assert_text "Current City:"
+    assert_text "Previous City: tokyo"
+    assert_text 'Past Cities: ["tokyo", "new_york"]'
+    assert_text "Remember Me: 1"
+    assert_text "Subscribe To Emails: 1"
+  end
+
+  test "It can handle an error form submission" do
+    find("sl-button", text: "Create User").click
+
+    assert_text "Name can't be blank"
+  end
+end

data/test/dummy_app/test/test_helper.rb

@@ -0,0 +1,68 @@
+ENV['RAILS_ENV'] ||= 'test'
+
+require_relative "../config/environment"
+require "rails/test_help"
+require "action_dispatch/system_testing/server"
+require "shoelace/testing"
+
+Capybara.server = :webrick
+
+class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
+  include Shoelace::Testing
+
+  if ENV['BROWSERSTACK_URL'].present?
+    browserstack_url = URI(ENV['BROWSERSTACK_URL'])
+    browserstack_url.user = ENV['BROWSERSTACK_USERNAME'] if ENV['BROWSERSTACK_USERNAME']
+    browserstack_url.password = ENV['BROWSERSTACK_ACCESS_KEY'] if ENV['BROWSERSTACK_ACCESS_KEY']
+
+    os, os_version, browser, browser_version =
+      ENV.fetch('TARGET_BROWSER', 'Windows, 10, Edge, latest').split(", ")
+
+    caps = Selenium::WebDriver::Remote::Capabilities.new(
+      name: "Shoelace Rails",
+      server: browserstack_url.host,
+      user: browserstack_url.user,
+      key: browserstack_url.password,
+      os: os,
+      os_version: os_version,
+      browser: browser,
+      browser_version: browser_version,
+      "browserstack.console": "errors",
+      # "browserstack.debug": true,
+      "browserstack.local": true,
+      "browserstack.networkLogs": true,
+    )
+
+    # Running multiple sessions with browserstack-local is not stable, so setting it to 1 for now.
+    parallelize workers: 1
+
+    # Safari has some limitations due to their security models so we have to stick with localhost:3000.
+    if browser.downcase == 'safari'
+      Capybara.app_host = "http://localhost"
+      Capybara.server_port = 3000
+    end
+
+    driven_by :selenium, using: :remote, options: { url: browserstack_url.to_s, capabilities: caps }
+  else
+    parallelize workers: :number_of_processors
+
+    driven_by :selenium, using: (ENV["JS_DRIVER"] || :headless_chrome).downcase.to_sym, screen_size: [1400, 1400]
+  end
+
+  def shadow_fill_in(shadow_host, *locators, with:, currently_with: nil, fill_options: {}, **find_options)
+    shadow_host = shadow_host.respond_to?(:to_capybara_node) ? shadow_host.to_capybara_node : find(shadow_host)
+
+    locators = ['input'] if locators.empty?
+    locators
+      .reduce(shadow_host.shadow_root) { |node, locator| node.find(locator).shadow_root || node.find(locator) }
+      .set(with, **fill_options)
+  end
+
+  def dispatch_event(query_selector: , event: , detail: {}.to_json)
+    execute_script(<<~JAVASCRIPT)
+      document
+        .querySelector('#{query_selector}')
+        .dispatchEvent(new CustomEvent('#{event}', { detail: #{detail} }))
+    JAVASCRIPT
+  end
+end