all specs passing integrated server side specs with hyper-spec

.gitignore

@@ -3,3 +3,6 @@ vendor
 .bundle
 copycat
 doc
+spec/test_app/tmp/
+spec/test_app/log/
+BrowserStackLocal*

Gemfile

@@ -1,5 +1,4 @@
 source 'https://rubygems.org'
-gemspec
 
 # specs
 gem 'rake'
@@ -16,3 +15,10 @@ gem 'rest-client', require: false
 # browser
 gem 'opal', ['>= 1.0', '< 2.0']
 gem 'paggio', github: 'meh/paggio'
+
+# hyper-spec (for testing http requests, and DOM features)
+git 'https://github.com/hyperstack-org/hyperstack.git', branch: 'edge', glob: 'ruby/*/*.gemspec' do
+  gem 'hyper-spec'
+end
+
+gemspec

README.md

@@ -209,6 +209,47 @@ The suggested polyfill is
 [wgxpath](https://code.google.com/p/wicked-good-xpath/), require it **before**
 opal-browser.
 
+Contributing
+------------
+git clone, then install the required gems:
+```
+$ bundle install
+```
+run the specs:
+```
+$ bundle exec rake
+```
+
+Most of the specs are run using opal-rspec.  The specs that test http
+functions or need a full browser environment use the hyper-spec gem to
+test communication between a test rails server and the client.  These specs
+are marked with the `:js` tag.  
+
+You can also run all the tests in a browser by running:
+```
+$ bundle exec rackup
+```
+and then visiting `localhost:9292`
+
+#### Debugging tips:
+
+For the non-js specs (those that run strictly in the client) you can insert
+a `debugger` breakpoint in the code. Run the browser server (`rackup`) but
+before you load the page, bring up the browser debugger window.  
+
+The specs will stop when they hit your debugging breakpoint and you can poke
+around.
+
+For the js specs add the pry gem to the Gemfile, and then set a `binding.pry`
+breakpoint in the problem spec.  You can run the specific spec in the usual way
+(i.e. `bundle exec spec/some_spec:227`) and you will hit the pry breakpoint.
+
+Now you can check the state of the client code and do some experiments with
+the `c?` method (evaluate on client)
+```ruby
+$ c? { HTTP.get('/http') } # code in the block is run on the client
+```
+
 License
 =======
 

Rakefile

@@ -1,8 +1,42 @@
+# frozen_string_literal: true
+
 require 'bundler'
 Bundler.require
-
 require 'opal/rspec/rake_task'
-Opal::RSpec::RakeTask.new(:default) do |_, task|
+require 'bundler/gem_tasks'
+require 'rspec/core/rake_task'
+
+# a few specs require a "real DOM" and/or a server response, so these
+# specs are run using the hyper-spec gem.  These specs are marked with
+# the server_side_test tag.
+
+# The remaining specs can be run using opal-rspec
+
+# All the specs will run in the browser using opal-rspec:
+# just run bundle exec rackup, and browse localhost:9292
+
+# See spec/spec_helper.rb, spec/app.rb, and config.ru for more details
+
+RSpec::Core::RakeTask.new(:server_and_client_specs) do |t|
+  t.rspec_opts = '--tag js'
+  t.pattern = 'spec/http_spec.rb,spec/native_cached_wrapper_spec.rb,spec/canvas/**/*_spec.rb'
+end
+
+Opal::RSpec::RakeTask.new(:opal_rspec_runner) do |_, task|
   task.default_path = 'spec'
   task.pattern = 'spec/**/*_spec.{rb,opal}'
-end
+end
+
+task :client_only_specs do
+  # Must set the runner to chrome as after all we need a browser to test
+  # this stuff.
+  #
+  # Also can't see how to set the format to progress and exclude the js tags
+  # except by setting it up via SPEC_OPTS enviroment var and a require file
+  sh 'RUNNER=chrome '\
+     "SPEC_OPTS='--format progress --require exclude_requires_server' "\
+     'rake opal_rspec_runner'
+end
+
+task default: %i[server_and_client_specs client_only_specs] do
+end

config.ru

@@ -1,5 +1,6 @@
 require 'bundler'
 Bundler.require
+require './spec/app'
 
 apps = []
 
@@ -15,67 +16,5 @@ apps << Opal::Sprockets::Server.new(sprockets: sprockets_env) { |s|
   s.debug = false
 }
 
-apps << Class.new(Sinatra::Base) {
-  get '/http' do
-    "lol"
-  end
-
-  post '/http' do
-    if params['lol'] == 'wut'
-      "ok"
-    else
-      "fail"
-    end
-  end
-
-  put '/http' do
-    if params['lol'] == 'wut'
-      "ok"
-    else
-      "fail"
-    end
-  end
-
-  delete '/http' do
-    "lol"
-  end
-
-  post '/http-file' do
-    if params['lol'] == 'wut' && 
-       params['file'][:filename] == 'yay.txt' && 
-       params['file'][:tempfile].read == 'content'
-
-      "ok"
-    else
-      "fail"
-    end
-  end
-
-  get '/events' do
-    headers 'Content-Type' => 'text/event-stream'
-
-    stream do |out|
-      sleep 0.2
-
-      out << "data: lol\n" << "\n"
-      out << "event: custom\n" << "data: omg\n" << "\n"
-      out << "data: wut\n" << "\n"
-
-      sleep 10
-    end
-  end
-
-  get '/socket' do
-    request.websocket do |ws|
-      ws.onopen do
-        ws.send 'lol'
-      end
-
-      ws.onmessage do |msg|
-        ws.send msg
-      end
-    end
-  end
-}
-
+apps << app
 run Rack::Cascade.new(apps)

opal-browser.gemspec

@@ -18,4 +18,9 @@ Gem::Specification.new {|s|
 
   s.add_dependency 'opal', ['>= 1.0', '< 2.0']
   s.add_dependency 'paggio'
+
+  # s.add_development_dependency 'hyper-spec' # pulled in on the Gemfile as we need a specific version from github
+  s.add_development_dependency 'rails', '~> 6.0'
+  s.add_development_dependency 'opal-rails'
+  s.add_development_dependency 'puma'
 }

opal/browser/canvas.rb

@@ -12,7 +12,7 @@ class Canvas
 
   attr_reader :element, :style, :text
 
-  def initialize(*args)
+  def initialize(*args, &block)
     if DOM::Element === args.first
       element = args.shift
 
@@ -49,6 +49,8 @@ def initialize(*args)
     if @image
       draw_image(@image)
     end
+
+    instance_eval(&block) if block_given?
   end
 
   def width
@@ -93,6 +95,10 @@ def gradient(*args, &block)
     Gradient.new(self, *args, &block)
   end
 
+  def stroke=(value)
+    Browser::Canvas::Style.new(self).stroke = value
+  end
+
   def clear(x = nil, y = nil, width = nil, height = nil)
     x      ||= 0
     y      ||= 0

opal/browser/canvas/data.rb

@@ -35,6 +35,10 @@ def length
     `#@native.data.length`
   end
 
+  def to_a
+    `Array.prototype.slice.call(#@native.data)`
+  end
+
   def [](index)
     `#@native.data[index]`
   end

opal/browser/canvas/gradient.rb

@@ -8,18 +8,30 @@ class Gradient
   def initialize(context, *args, &block)
     @context = context
 
-    super(case args.length
-      when 4 then `#{@context.to_n}.createLinearGradient.apply(self, args)`
-      when 6 then `#{@context.to_n}.createRadialGradient.apply(self, args)`
-      else raise ArgumentError, "don't know where to dispatch"
-    end)
-
-    instance_eval(&block)
+    _this = @context.to_n
+
+    *args, stops = args if args.length.odd?
+
+    super case args.length
+          when 4 then `_this.createLinearGradient.apply(_this, args)`
+          when 6 then `_this.createRadialGradient.apply(_this, args)`
+          else raise ArgumentError,
+                     'Gradients must be created with 4 or 6 parameters'
+          end
+    add_stops(stops)
+    instance_eval(&block) if block_given?
   end
 
   def add(position, color)
-    `#{@context.to_n}.addColorStop(position, color)`
+    `#{to_n}.addColorStop(position, color)`
+    self
+  end
+
+  alias add_stop add
+  alias add_color_stop add
 
+  def add_stops(stops)
+    stops&.each { |position, color| add_stop(position, color) }
     self
   end
 end

opal/browser/dom/element.rb

@@ -329,7 +329,7 @@ def inner_dom(&block)
     # FIXME: when block passing is fixed
     doc = document
 
-    self << Builder.new(doc, self, &block).to_a
+    self << Builder.new(doc, &block).to_a
   end
 
   # Set the inner DOM with the given node.

spec/app.rb

@@ -0,0 +1,82 @@
+require 'bundler'
+Bundler.require
+
+get '/http' do
+  "lol"
+end
+
+post '/http' do
+  if params['lol'] == 'wut'
+    "ok"
+  else
+    "fail"
+  end
+end
+
+put '/http' do
+  if params['lol'] == 'wut'
+    "ok"
+  else
+    "fail"
+  end
+end
+
+delete '/http' do
+  "lol"
+end
+
+post '/http-file' do
+  if params['lol'] == 'wut' &&
+     params['file'][:filename] == 'yay.txt' &&
+     params['file'][:tempfile].read == 'content'
+
+    "ok"
+  else
+    "fail"
+  end
+end
+
+get '/events' do
+  headers 'Content-Type' => 'text/event-stream'
+
+  stream do |out|
+    sleep 0.2
+
+    out << "data: lol\n" << "\n"
+    out << "event: custom\n" << "data: omg\n" << "\n"
+    out << "data: wut\n" << "\n"
+
+    sleep 10
+  end
+end
+
+get '/socket' do
+  request.websocket do |ws|
+    ws.onopen do
+      ws.send 'lol'
+    end
+
+    ws.onmessage do |msg|
+      ws.send msg
+    end
+  end
+end
+
+module OpalSprocketsServer
+  def self.opal
+    @opal ||= Opal::Sprockets::Server.new do |s|
+      s.append_path 'spec/app'
+      s.main = 'application'
+      s.debug = ENV['RACK_ENV'] != 'production'
+    end
+  end
+end
+
+def app
+  Rack::Builder.app do
+    map '/assets' do
+      run OpalSprocketsServer.opal.sprockets
+    end
+    run Sinatra::Application
+  end
+end

spec/app/application.rb

@@ -0,0 +1,4 @@
+require 'opal'
+require 'browser'
+require 'browser/http'
+require 'browser/canvas'

spec/browser/http.rb

@@ -0,0 +1,9 @@
+# stub the Browser::HTTP class and supported? method
+# for running code server side with hyper-spec
+module Browser
+  class HTTP
+    def self.supported?
+      true
+    end
+  end
+end

spec/browser/native_cached_wrapper.rb

@@ -0,0 +1,6 @@
+# stub the Browser::NativeCachedWrapper class method
+# for running code server side with hyper-spec
+module Browser
+  module NativeCachedWrapper
+  end
+end