opal-browser 0.1.0.beta1 → 0.3.1

data/spec/dom/element_spec.rb

@@ -1,13 +1,39 @@
 require 'spec_helper'
 
 describe Browser::DOM::Element do
+  DOM = Browser::DOM
+
   describe '#id' do
     html <<-HTML
-      <div id="lol"></div>
+      <div id="lol"><div class="wut"></div></div>
     HTML
 
     it 'gets the proper id' do
-      $document["lol"].id.should == 'lol'
+      expect($document["lol"].id).to eq('lol')
+    end
+
+    it 'returns nil when there is no id' do
+      expect($document["#lol .wut"].id).to be_nil
+    end
+  end
+
+  describe '#id=' do
+    html <<-HTML
+      <div id="lol"></div>
+    HTML
+
+    it 'sets the id' do
+      el = $document["lol"]
+      el.id = 'wut'
+
+      expect(el.id).to eq('wut')
+    end
+
+    it 'removes the id when the value is nil' do
+      el = $document["lol"]
+      el.id = nil
+
+      expect(el.id).to be_nil
     end
   end
 
@@ -20,15 +46,15 @@ describe Browser::DOM::Element do
     HTML
 
     it 'gives an empty array when no class is set' do
-      $document["class-names-2"].class_names.should == []
+      expect($document["class-names-2"].class_names).to eq([])
     end
 
     it 'gives an array of class names' do
-      $document["class-names-1"].class_names.should == %w[a b c]
+      expect($document["class-names-1"].class_names).to eq(%w[a b c])
     end
   end
 
-  describe '#matches?' do
+  describe '#=~' do
     html <<-HTML
       <div id="matches" class="not me">
         <span class="yes me"></span>
@@ -36,11 +62,162 @@ describe Browser::DOM::Element do
     HTML
 
     it 'matches on class and id' do
-      $document[:matches].matches?('#matches.not.me').should be_truthy
+      expect($document[:matches] =~ '#matches.not.me').to be_truthy
     end
 
     it 'matches on class and name' do
-      $document[:matches].first_element_child.matches?('span.yes').should be_truthy
+      expect($document[:matches].first_element_child =~ 'span.yes').to be_truthy
+    end
+  end
+
+  describe '#inner_dom' do
+    html <<-HTML
+      <div id="lol">
+        <div id="wut"></div>
+      </div>
+    HTML
+
+    it 'builds the DOM and inserts it' do
+      $document["lol"].inner_dom {
+        div.omg!
+      }
+
+      expect($document["#lol #omg"]).to be_truthy
+      expect($document["#lol #wut"]).to be_falsy
+    end
+  end
+
+  describe '#inspect' do
+    it 'uses the node name' do
+      el = $document.create_element('div')
+
+      expect(el.inspect).to match(/: div>/)
+    end
+
+    it 'uses the id' do
+      el = $document.create_element('div')
+      el.id = 'lol'
+
+      expect(el.inspect).to match(/: div.lol!>/)
+    end
+
+    it 'uses the classes' do
+      el = $document.create_element('div')
+      el.add_class 'lol', 'wut'
+
+      expect(el.inspect).to match(/: div.lol.wut>/)
+    end
+
+    it 'uses the id and the classes' do
+      el = $document.create_element('div')
+      el.id = 'omg'
+      el.add_class 'lol', 'wut'
+
+      expect(el.inspect).to match(/: div.omg!.lol.wut>/)
+    end
+  end
+
+  describe '#[]' do
+    html <<-HTML
+      <label id="lol" class="name" for="hue"></label>
+    HTML
+
+    it 'gets an attribute' do
+      expect($document[:lol][:id]).to eq(:lol)
+    end
+
+    it 'gets the class attribute' do
+      expect($document[:lol][:class]).to eq(:name)
+    end
+
+    it 'gets the for attribute' do
+      expect($document[:lol][:for]).to eq(:hue)
+    end
+  end
+
+  describe '#[]=' do
+    html <<-HTML
+      <label id="lol" class="name" for="hue"></label>
+    HTML
+
+    it 'sets an attribute' do
+      $document[:lol][:a] = :foo
+
+      expect($document[:lol][:a]).to eq(:foo)
+    end
+
+    it 'sets the class attribute' do
+      $document[:lol][:class] = :bar
+
+      expect($document[:lol][:class]).to eq(:bar)
+    end
+
+    it 'sets the for attribute' do
+      $document[:lol][:for] = :baz
+
+      expect($document[:lol][:for]).to eq(:baz)
+    end
+  end
+
+  describe '#at_css' do
+    html <<-HTML
+      <label id="lol" class="name" for="hue"></label>
+    HTML
+
+    it 'checks for all the selectors' do
+      expect($document.at_css('div', 'span', '#lol')).to be_a(DOM::Element)
+    end
+  end
+
+  describe '#at_xpath' do
+    html <<-HTML
+      <label id="lol" class="name" for="hue"></label>
+    HTML
+
+    it 'checks for all the paths' do
+      expect($document.at_xpath('//div', '//span', '//[@id="lol"]')).to be_a(DOM::Element)
+    end
+  end
+
+  describe '#shadow' do
+    html <<-HTML
+      <div id="shadowtest"></div>
+    HTML
+
+    it 'creates a shadow root' do
+      expect($document[:shadowtest].shadow?).to be(false)
+      expect($document[:shadowtest].shadow).to be_a(DOM::ShadowRoot)
+      expect($document[:shadowtest].shadow?).to be(true)
+    end
+
+    it 'accesses a shadow root' do
+      $document[:shadowtest].shadow # Create one
+      expect($document[:shadowtest].shadow?).to be(true)
+      expect($document[:shadowtest].shadow).to be_a(DOM::ShadowRoot)
+    end
+
+    it 'works like a typical opal-browser DOM tree' do
+      DOM {
+        div.shadow_item "Hello world!"
+      }.append_to($document[:shadowtest].shadow)
+      
+      expect($document[:shadowtest].at_css(".shadow_item")).to be_nil
+      expect($document[:shadowtest].shadow.at_css(".shadow_item").text).to be("Hello world!")
+    end
+
+    it 'supports stylesheets' do
+      $document[:shadowtest].shadow << CSS {
+        rule("p") {
+          color "rgb(255, 0, 0)"
+        }
+        rule(":host") {
+          color "rgb(0, 0, 255)"
+        }
+      } << DOM { p }
+
+      expect($document[:shadowtest].shadow.at_css("p").style!.color).to be("rgb(255, 0, 0)")
+      expect($document[:shadowtest].style!.color).to be("rgb(0, 0, 255)")
+      expect($document[:shadowtest].shadow.stylesheets.count).to be(1)
     end
   end
 end

data/spec/dom/mutation_observer_spec.rb

@@ -7,11 +7,11 @@ describe Browser::DOM::MutationObserver do
     </div>
   HTML
 
-  async 'notifies additions' do
+  it 'notifies additions' do
+    promise = Browser::Promise.new
     obs = Browser::DOM::MutationObserver.new {|mutations|
-      run_async {
-        mutations.first.added.first.name.should == 'DIV'
-      }
+      expect(mutations.first.added.first.name).to eq('DIV')
+      promise.resolve
 
       obs.disconnect
     }
@@ -19,13 +19,15 @@ describe Browser::DOM::MutationObserver do
     obs.observe $document[:mutate]
 
     $document[:mutate].add_child $document.create_element('div')
+
+    promise.for_rspec
   end
 
-  async 'notifies removals' do
+  it 'notifies removals' do
+    promise = Browser::Promise.new
     obs = Browser::DOM::MutationObserver.new {|mutations|
-      run_async {
-        mutations.first.removed.first.name.should == 'SPAN'
-      }
+      expect(mutations.first.removed.first.name).to eq('SPAN')
+      promise.resolve
 
       obs.disconnect
     }
@@ -33,5 +35,7 @@ describe Browser::DOM::MutationObserver do
     obs.observe $document[:mutate]
 
     $document[:mutate].first_element_child.remove
+
+    promise.for_rspec
   end
-end
+end if Browser::DOM::MutationObserver.supported?

data/spec/dom/node_set_spec.rb

@@ -0,0 +1,44 @@
+require 'spec_helper'
+
+describe Browser::DOM::NodeSet do
+  NodeSet = Browser::DOM::NodeSet
+
+  html <<-HTML
+    <div id="lol">
+      <div class="a">
+        <div class="a-a"></div>
+      </div>
+
+      <div class="b"></div>
+      <div class="c"></div>
+
+      <div class="d">
+        <div class="d-a"></div>
+      </div>
+    </div>
+  HTML
+
+  describe '.[]' do
+    it 'flattens the nodes' do
+      set = NodeSet[[[$document["#lol .a"]]], [[$document["#lol .c"]]]]
+
+      expect(set[0]).to eq($document["#lol .a"])
+      expect(set[1]).to eq($document["#lol .c"])
+    end
+
+    it 'converts the items to DOM' do
+      set = NodeSet[`document.getElementById("lol")`]
+
+      expect(set[0]).to eq($document["#lol"])
+    end
+  end
+
+  describe '#filter' do
+    it 'filters the set with the given expression' do
+      set = $document["lol"].children.filter('.a, .c')
+
+      expect(set[0]).to eq($document["#lol .a"])
+      expect(set[1]).to eq($document["#lol .c"])
+    end
+  end
+end

data/spec/dom/node_spec.rb

@@ -5,22 +5,70 @@ describe Browser::DOM::Node do
     html '<div id="lol"></div>'
 
     it 'should work when the other argument is the native counterpart' do
-      $document["lol"].should == `document.getElementById("lol")`
+      expect($document["lol"]).to eq(`document.getElementById("lol")`)
     end
 
     it 'should work when the other argument is the same DOM::Node' do
       el = $document["lol"]
-      el.should == el
+      expect(el).to eq(el)
     end
 
     it 'should work when the other argument is another DOM::Node' do
-      $document["lol"].should == $document["lol"]
+      expect($document["lol"]).to eq($document["lol"])
+    end
+  end
+
+  describe "#clone" do
+    html '<div class="waht"><ul><li>1</li></ul></div>'
+
+    it 'should clone a DOM node with an object' do
+      obj = $document['.waht']
+      new_obj = obj.clone
+
+      expect(obj).not_to eq(new_obj) # Equality is defined as equality of DOM nodes
+      expect(obj.at_css('li')).not_to eq(new_obj.at_css('li'))
+    end
+
+    it 'should dup a DOM node with an object' do
+      obj = $document['.waht']
+      new_obj = obj.dup
+
+      expect(obj).not_to eq(new_obj) # Equality is defined as equality of DOM nodes
+      expect(obj.at_css('li')).not_to eq(new_obj.at_css('li'))
+    end
+
+    it 'should produce an object which adheres to DOM semantics' do
+      obj = $document['.waht'].clone
+      xobj = obj.clone
+      5.times do
+        obj << xobj.clone
+      end
+      expect(obj.css('li').count).to eq(6)
+    end
+
+    it 'should integrate well with NativeCachedWrapper' do
+      obj = $document['.waht'].clone
+      native = obj.to_n
+      expect(DOM(native).hash).to eq(obj.hash)
+    end
+  end
+
+  describe "#document=" do
+    html '<iframe id="diframe" src="about:blank"></iframe><div id="ddiv">hah</div>'
+
+    it 'should detach a DOM node and attach it to a new document' do
+      obj = $document['ddiv']
+      ifr = $document['diframe']
+
+      obj.document = ifr.content_document
+      expect($document['ddiv']).to eq(nil)
+      expect(obj.document).to eq(ifr.content_document)
     end
   end
 
   describe "#document?" do
     it "should be true for document" do
-      $document.document?.should be_truthy
+      expect($document.document?).to be_truthy
     end
   end
 
@@ -28,7 +76,7 @@ describe Browser::DOM::Node do
     html '<div id="lol"></div>'
 
     it "should be true for <div id='lol'>" do
-      $document["#lol"].element?.should be_truthy
+      expect($document["#lol"].element?).to be_truthy
     end
   end
 
@@ -36,7 +84,7 @@ describe Browser::DOM::Node do
     html '<div id="omg">lol</div>'
 
     it "should be true for the first child of <div id='lol'>" do
-      $document["#omg"].child.text?.should be_truthy
+      expect($document["#omg"].child.text?).to be_truthy
     end
   end
 
@@ -48,13 +96,13 @@ describe Browser::DOM::Node do
     it 'should get all ancestors' do
       ancestors = $document["incest"].ancestors
 
-      ancestors[0].name.should == 'STRONG'
-      ancestors[1].name.should == 'SPAN'
-      ancestors[2].name.should == 'DIV'
+      expect(ancestors[0].name).to eq('STRONG')
+      expect(ancestors[1].name).to eq('SPAN')
+      expect(ancestors[2].name).to eq('DIV')
     end
 
     it 'should get only the selected ancestors' do
-      $document["incest"].ancestors('strong').length.should == 1
+      expect($document["incest"].ancestors('strong').length).to eq(1)
     end
   end
 
@@ -64,81 +112,93 @@ describe Browser::DOM::Node do
     HTML
 
     it 'gets the first child properly' do
-      $document["test-1"].child.id.should == "test-2"
+      expect($document["test-1"].child.id).to eq('test-2')
     end
 
     it 'returns nil if there is no child' do
-      $document["test-2"].child.should be_nil
+      expect($document["test-2"].child).to be_nil
     end
   end
 
   describe '#next' do
     html <<-HTML
       <div id="spec-1"></div>
+      a
       <div id="spec-2"></div>
+      b
       <div id="spec-3"></div>
+      c
     HTML
 
     it 'should return the next sibling' do
-      $document["spec-1"].next.text?.should be_truthy
-      $document["spec-1"].next.next.id.should == 'spec-2'
+      expect($document["spec-1"].next.text?).to be_truthy
+      expect($document["spec-1"].next.next.id).to eq('spec-2')
     end
 
     it 'should return nil when there is no next sibling' do
-      $document["spec-3"].next.text?.should be_truthy
-      $document["spec-3"].next.next.should be_nil
+      expect($document["spec-3"].next.text?).to be_truthy
+      expect($document["spec-3"].next.next).to be_nil
     end
   end
 
   describe '#next_element' do
     html <<-HTML
       <div id="spec-1"></div>
+      a
       <div id="spec-2"></div>
+      b
       <div id="spec-3"></div>
+      c
     HTML
 
     it 'should return the next element sibling' do
-      $document["spec-1"].next_element.id.should == 'spec-2'
-      $document["spec-2"].next_element.id.should == 'spec-3'
+      expect($document["spec-1"].next_element.id).to eq('spec-2')
+      expect($document["spec-2"].next_element.id).to eq('spec-3')
     end
 
     it 'should return nil when there is no next element sibling' do
-      $document["spec-3"].next_element.should be_nil
+      expect($document["spec-3"].next_element).to be_nil
     end
   end
 
   describe '#previous' do
     html <<-HTML
+      a
       <div id="spec-1"></div>
+      b
       <div id="spec-2"></div>
+      c
       <div id="spec-3"></div>
     HTML
 
     it 'should return the previous sibling' do
-      $document["spec-2"].previous.text?.should be_truthy
-      $document["spec-2"].previous.previous.id.should == 'spec-1'
+      expect($document["spec-2"].previous.text?).to be_truthy
+      expect($document["spec-2"].previous.previous.id).to eq('spec-1')
     end
 
     it 'should return nil when there is no previous sibling' do
-      $document["spec-1"].previous.text?.should be_truthy
-      $document["spec-1"].previous.previous.should be_nil
+      expect($document["spec-1"].previous.text?).to be_truthy
+      expect($document["spec-1"].previous.previous).to be_nil
     end
   end
 
   describe '#previous_element' do
     html <<-HTML
+      a
       <div id="spec-1"></div>
+      b
       <div id="spec-2"></div>
+      c
       <div id="spec-3"></div>
     HTML
 
     it 'should return the previous element sibling' do
-      $document["spec-2"].previous_element.id.should == 'spec-1'
-      $document["spec-3"].previous_element.id.should == 'spec-2'
+      expect($document["spec-2"].previous_element.id).to eq('spec-1')
+      expect($document["spec-3"].previous_element.id).to eq('spec-2')
     end
 
     it 'should return nil when there is no previous element sibling' do
-      $document["spec-1"].previous_element.should be_nil
+      expect($document["spec-1"].previous_element).to be_nil
     end
   end
 
@@ -148,7 +208,7 @@ describe Browser::DOM::Node do
     HTML
 
     it 'should get the whole text for elements' do
-      $document["inner"].inner_text.should == "I like trains. And turtles."
+      expect($document["inner"].inner_text).to eq('I like trains. And turtles.')
     end
   end
 end

data/spec/dom_spec.rb

@@ -1,13 +1,23 @@
 require 'spec_helper'
 
-describe Browser::DOM do
-  html <<-HTML
-    <div class="spec"></div>
-    <div class="sock"></div>
-  HTML
-
-  it "parses the HTML" do
-    $document['.spec'].element?.should be_truthy
-    $document['.sock'].element?.should be_truthy
+describe 'Kernel' do
+  describe '.DOM()' do
+    html <<-HTML
+      <div class="spec"></div>
+      <div class="sock"></div>
+    HTML
+
+    it "parses HTML" do
+      expect($document['.spec'].element?).to be_truthy
+      expect($document['.sock'].element?).to be_truthy
+    end
+
+    it "appends classes correctly" do
+      elem = DOM {
+        div.class1.class2(class: "class-3 class-4", classes: %w[class-5 class-6])
+      }
+
+      expect(elem =~ ".class1.class2.class-3.class-4.class-5.class-6").to eq(true)
+    end
   end
 end

data/spec/event_source_spec.rb

@@ -2,41 +2,44 @@ require 'spec_helper'
 require 'browser/event_source'
 
 describe Browser::EventSource do
-  async 'creates it' do
+  it 'creates it' do
+    promise = Browser::Promise.new
     Browser::EventSource.new '/events' do |es|
       es.on :open do |e|
-        run_async {
-          e.target.should be_kind_of Browser::EventSource
-        }
-
         es.close
+
+        expect(e.target).to be_a(Browser::EventSource)
+        promise.resolve
       end
     end
+    promise.for_rspec
   end
 
-  async 'receives an unnamed event' do
+  it 'receives an unnamed event' do
+    promise = Browser::Promise.new
     Browser::EventSource.new '/events' do |es|
       es.on :message do |e|
-        run_async {
-          e.data.should == 'lol'
-        }
-
         e.off
         es.close
+
+        expect(e.data).to eq('lol')
+        promise.resolve
       end
     end
+    promise.for_rspec
   end
 
-  async 'receives a named event' do
+  it 'receives a named event' do
+    promise = Browser::Promise.new
     Browser::EventSource.new '/events' do |es|
       es.on :custom do |e|
-        run_async {
-          e.data.should == 'omg'
-        }
-
         e.off
         es.close
+
+        expect(e.data).to eq('omg')
+        promise.resolve
       end
     end
+    promise.for_rspec
   end
 end if Browser::EventSource.supported?