opal-browser 0.2.0.beta1 → 0.3.2

data/spec/dom/element/subclass_spec.rb

@@ -0,0 +1,144 @@
+require 'spec_helper'
+
+describe "Browser::DOM::Element subclassing" do
+  class1 = Class.new(Browser::DOM::Element) do
+    def_selector ".class1"
+
+    def hello
+      "world"
+    end
+  end
+
+  class2 = Class.new(Browser::DOM::Element::Input) do
+    def_selector "input.class2[type='text']"
+
+    def hello
+      "goodbye"
+    end
+  end
+
+  class3 = Class.new(class2) do
+    def_selector "input.class2.class3[type='text']"
+
+    def self.create(value)
+      super().tap { |elem| elem.value = value }
+    end
+  end
+
+  class4 = Class.new(Browser::DOM::Element) do
+    def_selector "custom-element"
+
+    def hello
+      text
+    end
+  end
+
+  html <<-HTML
+    <div class='class1' id='hiho'></div>
+    <input class='class2' type='text' id='hoho'></div>
+    <input class='class2' type='hidden' id='hehe'></div>
+    <custom-element id='class4'>value</custom-element>
+  HTML
+
+  it 'dispatches from DOM correctly' do
+    elem = $document.at_css('#hiho')
+    expect(elem.class).to eq(class1)
+    expect(elem.hello).to eq('world')
+
+    elem = $document.at_css('#hoho')
+    expect(elem.class).to eq(class2)
+    expect(elem.hello).to eq('goodbye')
+
+    elem = $document.at_css('#hehe')
+    expect(elem.class).to eq(Browser::DOM::Element::Input)
+  end
+
+  it 'supports creating elements correctly' do
+    elem = class1.create
+    expect(elem.class).to eq(class1)
+    expect(elem.class_name).to eq('class1')
+    expect(elem.name).to eq('DIV')
+    expect(elem.hello).to eq('world')
+
+    elem = class2.create
+    expect(elem.class).to eq(class2)
+    expect(elem.class_name).to eq('class2')
+    expect(elem.name).to eq('INPUT')
+    expect(elem.hello).to eq('goodbye')
+    expect(elem.type).to eq('text')
+  end
+
+  it 'supports nested subclassing and .create overloading' do
+    elem = class3.create('well')
+    expect(elem.class).to eq(class3)
+    expect(elem.class_name).to eq('class2 class3')
+    expect(elem.value).to eq('well')
+    expect(elem.hello).to eq('goodbye')
+  end
+
+  it 'supports custom elements' do
+    elem = $document.at_css('#class4')
+    expect(elem.class).to eq(class4)
+    expect(elem.name).to eq('CUSTOM-ELEMENT')
+    expect(elem.hello).to eq('value')
+
+    elem = class4.create
+    expect(elem.class).to eq(class4)
+    expect(elem.name).to eq('CUSTOM-ELEMENT')
+    expect(elem.hello).to eq('')
+  end
+
+  it 'works with Paggio' do
+    elem = DOM { div.class1 }
+    expect(elem.class).to eq(class1)
+    expect(elem.hello).to eq('world')
+  end
+
+  it 'works with Paggio with a .create/.new intializer' do
+    elems = DOM {
+      class1.create(self)
+      class1.new(self, attrs: { x: :y })
+      class1.new(self)
+    }
+    expect(elems.class).to eq(Browser::DOM::NodeSet)
+    expect(elems.length).to eq(3)
+    expect(elems[1][:x]).to eq(:y)
+    expect(elems.to_ary.map(&:class)).to eq([class1] * 3)
+  end
+
+  it 'works with Paggio, .create/.new and nested blocks' do
+    elem = DOM { |d|
+      class1.new(d) {
+        d.div.noticeme
+        class1.new(d) {
+          d.div.noticeme3
+        }
+        d.div.noticeme2
+      }
+    }
+    expect(elem.class).to eq(class1)
+    expect(elem.children.length).to eq(3)
+    expect(elem.children[1].class).to eq(class1)
+    expect(elem.children[1].children.length).to eq(1)
+    expect(elem.children[0].class).to eq(Browser::DOM::Element)
+    expect(elem.children[2].class).to eq(Browser::DOM::Element)
+    expect(elem.children[1].children[0].class).to eq(Browser::DOM::Element)
+  end
+
+  it 'works with Paggio, .create/.new, nested blocks and without DOM{}' do
+    elem = class1.new {
+      div.noticeme
+      class1.new(self) {
+        div.noticeme3
+      }
+      div.noticeme2
+    }
+    expect(elem.class).to eq(class1)
+    expect(elem.children.length).to eq(3)
+    expect(elem.children[1].class).to eq(class1)
+    expect(elem.children[1].children.length).to eq(1)
+    expect(elem.children[0].class).to eq(Browser::DOM::Element)
+    expect(elem.children[2].class).to eq(Browser::DOM::Element)
+    expect(elem.children[1].children[0].class).to eq(Browser::DOM::Element)
+  end
+end

data/spec/dom/element_spec.rb

@@ -1,14 +1,40 @@
 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
       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
 
   describe '#class_names' do
@@ -28,7 +54,7 @@ describe Browser::DOM::Element do
     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
-      expect($document[:matches].matches?('#matches.not.me')).to be_truthy
+      expect($document[:matches] =~ '#matches.not.me').to be_truthy
     end
 
     it 'matches on class and name' do
-      expect($document[:matches].first_element_child.matches?('span.yes')).to 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|
-      async {
-        expect(mutations.first.added.first.name).to eq('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|
-      async {
-        expect(mutations.first.removed.first.name).to eq('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 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

@@ -18,6 +18,54 @@ describe Browser::DOM::Node do
     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
       expect($document.document?).to be_truthy

data/spec/dom_spec.rb

@@ -11,5 +11,13 @@ describe 'Kernel' 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|
         es.close
 
-        async {
-          expect(e.target).to be_a(Browser::EventSource)
-        }
+        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|
         e.off
         es.close
 
-        async {
-          expect(e.data).to eq('lol')
-        }
+        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|
         e.off
         es.close
 
-        async {
-          expect(e.data).to eq('omg')
-        }
+        expect(e.data).to eq('omg')
+        promise.resolve
       end
     end
+    promise.for_rspec
   end
 end if Browser::EventSource.supported?

data/spec/{dom/event_spec.rb → event_spec.rb}

@@ -1,6 +1,7 @@
 require 'spec_helper'
+require 'browser/event'
 
-describe Browser::DOM::Event do
+describe Browser::Event do
   html <<-HTML
     <div id="event-spec">
       u wot m8
@@ -40,39 +41,46 @@ describe Browser::DOM::Event do
       expect(count).to eq(2)
     end
 
-    async "passes an event to the handler" do
+    it "passes an event to the handler" do
       elem = $document["event-spec"]
 
+      promise = Browser::Promise.new
+
       elem.on :click do |event|
-        async {
-          expect(event).to be_a(Browser::DOM::Event)
-        }
+        expect(event).to be_a(Browser::Event)
+        promise.resolve
       end
 
       elem.trigger :click
+
+      promise.for_rspec
     end
 
-    async "passes additional arguments to the handler" do
+    it "passes additional arguments to the handler" do
       elem = $document["event-spec"]
 
+      promise = Browser::Promise.new
+
       elem.on :bazinga do |event, foo, bar, baz|
-        async {
-          expect(foo).to eq(1)
-          expect(bar).to eq(2)
-          expect(baz).to eq(3)
-        }
+        expect(foo).to eq(1)
+        expect(bar).to eq(2)
+        expect(baz).to eq(3)
+        promise.resolve
       end
 
       elem.trigger :bazinga, 1, 2, 3
+
+      promise.for_rspec
     end
 
-    async "works with delegated events" do
+    it "works with delegated events" do
       elem = $document["event-spec"]
 
+      promise = Browser::Promise.new
+
       elem.on :bazinga, 'span.nami' do
-        async {
-          expect(true).to be_truthy
-        }
+        expect(true).to be_truthy
+        promise.resolve
       end
 
       elem.add_child DOM { span.nami }
@@ -80,6 +88,27 @@ describe Browser::DOM::Event do
       after 0.01 do
         elem.first_element_child.trigger :bazinga
       end
+
+      promise.for_rspec
+    end
+  end
+
+  describe "#one" do
+    it "fires once, passes arguments, works with custom events" do
+      count = 0
+      elem  = $document["event-spec"]
+
+      elem.one :testone do |event, a, b, c|
+        count += a + b*c
+      end
+
+      expect(count).to eq(0)
+      elem.trigger :testone, 1, 2, 3
+      expect(count).to eq(7)
+      elem.trigger :testone, 2, 3, 4
+      expect(count).to eq(7)
+      elem.trigger :testone, 3, 4, 5
+      expect(count).to eq(7)
     end
   end