Simple rspec demo

opal · Dec 18, 2013 · e54fc60 · e54fc60
1 parent 9186e99
commit e54fc60
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 0 deletions.
diff --git a/Gemfile b/Gemfile
@@ -2,6 +2,7 @@ source 'https://rubygems.org'
 
 gem 'opal',        :github => 'opal/opal'
 gem 'opal-jquery', :github => 'opal/opal-jquery'
+gem 'opal-rspec',  '0.3.0.beta2'
 
 gem "middleman"
 gem "middleman-sprockets"

diff --git a/source/javascripts/_playground/editor.js.rb b/source/javascripts/_playground/editor.js.rb
@@ -0,0 +1,18 @@
+module Playground
+  class Editor
+    OPTIONS = { lineNumbers: true, theme: 'solarized light' }
+
+    def initialize(dom_id, options)
+      options = OPTIONS.merge(options).to_n
+      @native = `CodeMirror(document.getElementById(dom_id), #{options})`
+    end
+
+    def value=(str)
+      `#@native.setValue(str)`
+    end
+
+    def value
+      `#@native.getValue()`
+    end
+  end
+end
diff --git a/source/javascripts/playground-rspec.js.rb b/source/javascripts/playground-rspec.js.rb
@@ -0,0 +1,102 @@
+require 'opal'
+require 'opal-parser'
+
+require '_vendor/jquery'
+require '_vendor/bootstrap'
+require 'opal-jquery'
+
+require '_vendor/codemirror'
+require '_vendor/codemirror-ruby'
+
+require '_playground/editor'
+
+module Playground
+  class RSpecRunner
+    def initialize
+      @ruby = Editor.new(:ruby_pane, mode: 'ruby', lineNumbers: true,
+                         theme: 'solarized light', extraKeys: {
+                          'Cmd-Enter' => proc { run_code }
+                        })
+
+      @result = Element['#result-frame']
+
+      @ruby.value = RUBY
+
+      Element.find('#run-code').on(:click) { run_code }
+      run_code
+    end
+
+    def run_code
+      js = Opal.compile @ruby.value
+
+      update_iframe(<<-HTML)
+        <html>
+          <head>
+          </head>
+          <body>
+            <script src="javascripts/rspec_results.js"></script>
+            <script>
+              #{js}
+            </script>
+            <script>
+              Opal.Opal.RSpec.Runner.$autorun();
+            </script>
+            <style>
+              #label { display: none; }
+              #display-filters { display: none; }
+            </style>
+          </body>
+        </html>
+      HTML
+    end
+
+    def update_iframe(html)
+      %x{
+        var iframe = #@result[0], doc;
+
+        if (iframe.contentDocument) {
+          doc = iframe.contentDocument;
+        } else if (iframe.contentWindow) {
+          doc = iframe.contentWindow.document;
+        } else {
+          doc = iframe.document;
+        }
+
+        doc.open()
+        doc.writeln(#{html});
+        doc.close();
+      }
+    end
+
+    RUBY = <<-EOF
+User = Struct.new(:name) do
+  def admin?
+    name == 'Ford Prefect'
+  end
+end
+
+describe 'User' do
+  it "should initialize with the given name" do
+    expect(User.new('Adam').name).to eq('Adam')
+  end
+
+  it "should be an admin only if user is Ford Prefect" do
+    expect(User.new('Adam')).to_not be_admin
+    expect(User.new('Ford Prefect')).to be_admin
+  end
+
+  it "compares admin? using ==" do
+    name = double("name")
+    expect(name).to receive(:==).once.and_return(true)
+    user = User.new(name)
+    # uncomment this line and re-running
+    # user.admin?
+  end
+end
+    EOF
+  end
+end
+
+Document.ready? do
+  Playground::RSpecRunner.new
+end
diff --git a/source/javascripts/rspec_results.js.rb b/source/javascripts/rspec_results.js.rb
@@ -0,0 +1,2 @@
+require 'opal'
+require 'opal-rspec'
diff --git a/source/rspec.html.haml b/source/rspec.html.haml
@@ -0,0 +1,28 @@
+
+!!!
+%html
+  %head
+    %meta(charset="utf-8")
+    = stylesheet_link_tag 'application'
+    = javascript_include_tag 'playground-rspec'
+    :css
+      .CodeMirror { height: 100% !important; }
+      .CodeMirror-scroll { height: 100% !important; }
+
+  %body
+    %nav.navbar.navbar-default
+      .navbar-header
+        %a.navbar-brand Opal Playground - RSpec
+      .container
+        .collapse.navbar-collapse
+          %ul.nav.navbar-nav
+            %li
+              %button.btn.btn-primary#run-code
+                Run Code (Cmd+Enter)
+
+    .row
+      .col-md-6(style="height: 100%")
+        .top-pane#ruby_pane(style="height: 100%")
+      .col-md-6
+        .top-pane#result_pane(style="height: 100%")
+          %iframe#result-frame(frameborder="0" style="width: 100%; height: 100%")