opal · Feb 2, 2014 · Feb 2, 2014 · Feb 2, 2014 · Feb 2, 2014 · Feb 2, 2014
Showing with 82 additions and 5 deletions.

+25 −2 opal/browser/dom/element.rb

+2 −2 opal/browser/dom/node.rb

+55 −1 spec/dom/element_spec.rb
diff --git a/opal/browser/dom/element.rb b/opal/browser/dom/element.rb
@@ -210,7 +210,20 @@ def scroll
     Scroll.new(self)
   end
 
-  alias_native :id
+  def id
+    %x{
+      var id = #@native.id;
+
+      if (id === "") {
+        return nil;
+      }
+      else {
+        return id;
+      }
+    }
+  end
+
+  alias_native :id=
 
   def inner_dom(&block)
     # FIXME: when block passing is fixed
@@ -359,7 +372,17 @@ def window
   end
 
   def inspect
-    "#<DOM::Element: #{name}>"
+    inspect = name.downcase
+
+    if id
+      inspect += '.' + id + '!'
+    end
+
+    unless class_names.empty?
+      inspect += '.' + class_names.join('.')
+    end
+
+    "#<DOM::Element: #{inspect}>"
   end
 
   class Attributes

diff --git a/opal/browser/dom/node.rb b/opal/browser/dom/node.rb
@@ -42,7 +42,7 @@ def self.new(value)
   #
   # @return [Boolean]
   def ==(other)
-    `#@native === #{Native.try_convert(other)}`
+    `#@native === #{Native.convert(other)}`
   end
 
   # Append a child to the node.
@@ -366,7 +366,7 @@ def remove_child(node)
   # @param node [Node] the node to replace with
   # @return [Node] the passed node
   def replace(node)
-    `#@native.parentNode.replaceChild(#@native, #{Native.try_convert(node)})`
+    `#@native.parentNode.replaceChild(#@native, #{Native.convert(node)})`
 
     node
   end

diff --git a/spec/dom/element_spec.rb b/spec/dom/element_spec.rb
@@ -3,12 +3,36 @@
 describe Browser::DOM::Element do
   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
@@ -43,4 +67,34 @@
       expect($document[:matches].first_element_child =~ 'span.yes').to be_truthy
     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
 end