Add dummy app (#299)

Enables end-to-end testing of shakapacker.

.github/workflows/dummy.yml

@@ -0,0 +1,21 @@
+name: Dummy specs
+
+on: [pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '3.1.2'
+      - name: Install dependencies
+        run: |
+          bundle install
+          yarn install
+          sudo yarn global add yalc
+
+      - name: Run tests
+        run: bundle exec rake run_spec:dummy

.github/workflows/ruby-backward-compatibility.yml

@@ -40,4 +40,4 @@ jobs:
           bundler-cache: true
 
       - name: Ruby specs - Backward compatibility
-        run: bundle exec rake test_bc
+        run: bundle exec rake run_spec:gem_bc

.github/workflows/ruby.yml

@@ -40,4 +40,4 @@ jobs:
           bundler-cache: true
 
       - name: Ruby specs
-        run: bundle exec rake test
+        run: bundle exec rake run_spec:gem_bc

.gitignore

@@ -12,3 +12,6 @@ yarn-error.log*
 /log
 gemfiles/*.lock
 .DS_Store
+
+.yalc
+yalc.lock

CONTRIBUTING.md

@@ -40,7 +40,7 @@ bundle exec rubocop
 yarn test
 ```
 
-### 4. Run the Ruby test suite
+### 4. Run all the Ruby test suite
 
 ```
 bundle exec rake test
@@ -58,15 +58,35 @@ bundle exec rspec spec/configuration_spec.rb
 bundle exec rspec -e "#source_entry_path returns correct path"
 ```
 
+#### 4.3 Run only Shakapacker gem specs
+
+```
+bundle exec rake run_spec:gem
+```
+
+#### 4.4 Run only Shakapacker gem specs for backward compatibility
+These specs are to check Shakapcker v7 backward compatibility with v6.x
+
+```
+bundle exec rake run_spec:gem_bc
+```
+
+#### 4.5 Run dummy app test
+For this, you need `yalc` to be installed on your local machine
+
+```
+bundle exec rake run_spec:dummy
+```
+
 ## Testing the generator
 If you change the generator, check that install instructions work.
 
-1. Update the gemfile so that gem "shakapacker" has a line like this, pointing to your install of shakapacker
+1. Update the Gemfile so that gem "shakapacker" has a line like this, pointing to your install of Shakapacker
    ```ruby
    gem 'shakapacker', path: "~/shakacode/forks/shakapacker"
    ```
 2. `bundle`
-3. Run the generator confirm that you got the right changes. 
+3. Run the generator to confirm that you got the right changes. 
 
 ## Find existing issues
-You may look at the issues list to find existing known issues to be addressed. In this, we recommend to look at closed issues, particularly with "[help wanted](https://github.com/shakacode/shakapacker/issues?q=is%3Aissue+label%3A%22help+wanted%22+is%3Aclosed+)" label.
+You may look at the issues list to find existing known issues to be addressed. In this, we recommend looking at closed issues, particularly with the "[help wanted](https://github.com/shakacode/shakapacker/issues?q=is%3Aissue+label%3A%22help+wanted%22+is%3Aclosed+)" label.

Rakefile

@@ -1,15 +1,46 @@
 # frozen_string_literal: true
 require "bundler/gem_tasks"
+require "pathname"
 
-begin
-  require "rspec/core/rake_task"
-  RSpec::Core::RakeTask.new(:test)
-rescue LoadError
-end
+desc "Run all specs"
+task test: ["run_spec:all_specs"]
 
 task default: :test
 
-desc "Run backward compatibility specs"
-task :test_bc do
-  system("bundle exec rspec spec/backward_compatibility_specs/*_spec_bc.rb")
+namespace :run_spec do
+  desc "Run shakapacker specs"
+  task :gem do
+    puts "Running Shakapacker gem specs"
+    system("bundle exec rspec spec/shakapacker/*_spec.rb")
+  end
+
+  desc "Run backward compatibility specs"
+  task :gem_bc do
+    puts "Running Shakapacker gem specs for backward compatibility"
+    system("bundle exec rspec spec/backward_compatibility_specs/*_spec_bc.rb")
+  end
+
+  desc "Run specs in the dummy app"
+  task :dummy do
+    puts "Running dummy app specs"
+    spec_dummy_dir = Pathname.new(File.join("spec", "dummy")).realpath
+    Bundler.with_unbundled_env do
+      sh_in_dir(".", "yalc publish")
+      sh_in_dir(spec_dummy_dir, [
+        "bundle install",
+        "yalc link shakapacker",
+        "yarn install",
+        "bundle exec rspec"
+      ])
+    end
+  end
+
+  desc "Run all specs"
+  task all_specs: %i[gem gem_bc dummy] do
+    puts "Completed all RSpec tests"
+  end
+end
+
+def sh_in_dir(dir, *shell_commands)
+  shell_commands.flatten.each { |shell_command| sh %(cd #{dir} && #{shell_command.strip}) }
 end

spec/dummy/.browserslistrc

@@ -0,0 +1 @@
+defaults

spec/dummy/.gitignore

@@ -0,0 +1,20 @@
+# Ignore the default SQLite database.
+/db/*.sqlite3
+/db/*.sqlite3-journal
+/db/*.sqlite3-*
+
+# Ignore all logfiles and tempfiles.
+/log
+/tmp
+
+/storage
+
+/public/assets
+.byebug_history
+
+# Ignore master key for decrypting credentials and more.
+/config/master.key
+
+/public/packs
+/public/packs-test
+/node_modules

spec/dummy/.prettierrc.yaml

@@ -0,0 +1,4 @@
+trailingComma: none
+tabWidth: 2
+semi: false
+singleQuote: true

spec/dummy/Gemfile

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+git_source(:github) { |repo| "https://github.com/#{repo}.git" }
+
+# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
+gem "rails", "~> 6.1"
+# Use sqlite3 as the database for Active Record
+gem "sqlite3", "~> 1.4"
+# Use Puma as the app server
+gem "puma", "~> 4.1"
+# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
+gem "jbuilder", "~> 2.7"
+# Use Redis adapter to run Action Cable in production
+# gem 'redis', '~> 4.0'
+# Use Active Model has_secure_password
+# gem 'bcrypt', '~> 3.1.7'
+
+# Use Active Storage variant
+# gem 'image_processing', '~> 1.2'
+
+# Reduces boot times through caching; required in config/boot.rb
+gem "bootsnap", ">= 1.4.2", require: false
+
+group :development, :test, :production do
+  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
+  gem "byebug", platforms: [:mri, :mingw, :x64_mingw]
+end
+
+group :development, :test do
+  gem "rspec-rails", "~> 6.0.0"
+end
+
+group :development do
+  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
+  gem "web-console", ">= 3.3.0"
+  gem "listen", "~> 3.2"
+  # 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
+
+group :test do
+  # Adds support for Capybara system testing and selenium driver
+  # There is an important fix in 3.39.1.
+  gem "capybara", "~> 3.39.1"
+  # gem 'capybara-webkit'
+  gem "selenium-webdriver", ">= 4.9"
+  # Easy installation and use of web drivers to run system tests with browsers
+  gem "webdrivers"
+end
+
+# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
+gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+
+gem "shakapacker", path: "../.."
+gem "react_on_rails", "13.3.3"
+
+gem "net-smtp", "~> 0.3.3"
+
+# Psych 4+ comes with breakibg changes in Ruby 3.1.0. Though the issue are
+# addressed in Rails 7. So remove this the next line in Rails 7.
+gem "psych", "< 4"

spec/dummy/Procfile.dev

@@ -0,0 +1,5 @@
+# Procfile for development using HMR
+# You can run these commands in separate shells
+rails: bundle exec rails s -p 3000
+wp-client: bin/shakapacker-dev-server
+wp-server: SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch

spec/dummy/Procfile.dev-static

@@ -0,0 +1,9 @@
+# You can run these commands in separate shells
+web: rails s -p 3000
+
+# Next line runs a watch process with webpack to compile the changed files.
+# When making frequent changes to client side assets, you will prefer building webpack assets
+# upon saving rather than when you refresh your browser page.
+# Note, if using React on Rails localization you will need to run
+# `bundle exec rake react_on_rails:locale` before you run bin/shakapacker
+webpack: sh -c 'rm -rf public/packs/* || true && bin/shakapacker -w'

spec/dummy/README.md

@@ -0,0 +1 @@
+This dummy project is based on [React on Rails Demo With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_demo_ssr_hmr) project.

spec/dummy/Rakefile

@@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require_relative "config/application"
+
+Rails.application.load_tasks

spec/dummy/app/assets/config/manifest.js

@@ -0,0 +1,2 @@
+//= link_tree ../images
+//= link_directory ../stylesheets .css

spec/dummy/app/assets/stylesheets/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
+ * vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

spec/dummy/app/channels/application_cable/channel.rb

@@ -0,0 +1,4 @@
+module ApplicationCable
+  class Channel < ActionCable::Channel::Base
+  end
+end

spec/dummy/app/channels/application_cable/connection.rb

@@ -0,0 +1,4 @@
+module ApplicationCable
+  class Connection < ActionCable::Connection::Base
+  end
+end

spec/dummy/app/controllers/application_controller.rb

@@ -0,0 +1,2 @@
+class ApplicationController < ActionController::Base
+end

spec/dummy/app/controllers/hello_world_controller.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class HelloWorldController < ApplicationController
+  layout "hello_world"
+
+  def index
+    @hello_world_props = { name: "Stranger" }
+  end
+end

spec/dummy/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

spec/dummy/app/javascript/Globals.d.ts

@@ -0,0 +1,3 @@
+declare module "*.module.css";
+declare module "*.module.scss";
+declare module "*.svg";

spec/dummy/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css

@@ -0,0 +1,25 @@
+.bright {
+    color: green;
+    font-weight: bold;
+}
+
+.logo {
+    height: 10vmin;
+    pointer-events: none;
+}
+
+
+@media (prefers-reduced-motion: no-preference) {
+    .logo {
+        animation: logo-spin infinite 20s linear;
+    }
+}
+
+@keyframes logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}

spec/dummy/app/javascript/bundles/HelloWorld/components/HelloWorld.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react'
+import { useState, useEffect } from 'react'
+import type { FunctionComponent } from 'react'
+
+import style from './HelloWorld.module.css'
+import logo from './logo.svg'
+
+export interface Props {
+  readonly name: string
+}
+
+// Note, you need to declare the `FunctionComponent` type so that it complies
+// with `ReactOnRails.register` type.
+const HelloWorld: FunctionComponent<Props> = (props: Props) => {
+  const [name, setName] = useState(props.name)
+
+  useEffect(() => {
+    console.log(
+      '%c%s%c%s',
+      'color: green; background-color: lightgreen; font-weight: bold;',
+      'ShakaCode is hiring!',
+      'color: green; background-color: lightgreen; font-weight: normal;',
+      'Check out our open positions: https://www.shakacode.com/career/',
+    );
+  }, [])
+
+  return (
+    <>
+      <img src={logo} className={style.logo} alt="logo" />
+      <h3>Hello, {name || 'World'}!</h3>
+      <hr />
+      <form>
+        <label className={style.bright} htmlFor="name">
+          Say hello to:{' '}
+          <input
+            id="name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+        </label>
+      </form>
+    </>
+  )
+}
+
+export default HelloWorld

spec/dummy/app/javascript/bundles/HelloWorld/components/HelloWorldServer.tsx

@@ -0,0 +1,5 @@
+import HelloWorld from './HelloWorld'
+// This could be specialized for server rendering
+// For example, if using React-Router, we'd have the SSR setup here.
+
+export default HelloWorld