initial tag debug fixing publiclab#801

app/assets/javascripts/tagging.js

@@ -10,6 +10,18 @@ function addTag(tagname, selector) {
 
 }
 
+function setupTagDelete(el) {
+
+  el.click(function(e) {
+      $(this).css('opacity', 0.5)
+    })
+    .bind('ajax:success', function(e, tid){
+      $('#tag_' + tid).remove();
+    });
+  return el;
+
+}
+
 function initTagForm(node_id, selector) {
 
   selector = selector || '#tagform';
@@ -29,9 +41,7 @@ function initTagForm(node_id, selector) {
       el.find('.tag-input').val("")
       el.find('.control-group').removeClass('has-error')
       el.find('.control-group .help-block').remove()
-      $('#tag_' + tag_id).bind('ajax:success', function(e, tid){
-        $('#tag_' + tid).remove()
-      });
+      setupTagDelete($('#tag_' + tag_id + ' .tag-delete'));
     })
     if (response['errors'].length > 0) {
       el.find('.control-group').addClass('has-error')
@@ -48,11 +58,7 @@ function initTagForm(node_id, selector) {
     el.find('.control-group').append('<span class="help-block">' + response.responseText + '</span>')
   });
 
-  // add el.bind('ajax:send' ... (look up event name) and turn tag grey
-
-  $('.tag-delete').bind('ajax:success', function(e, tid){
-    $('#tag_' + tid).remove();
-  });
+  setupTagDelete($('.tag-delete'));
 
   el.find('.tag-input').typeahead({
     items: 8,
@@ -71,4 +77,3 @@ function initTagForm(node_id, selector) {
   return el;
 
 }
-

app/views/tag/_tagging.html.erb

@@ -3,10 +3,10 @@
 <p>
   <span id="tags">
     <% @node.community_tags.each do |tag| %>
-      <span id="tag_<%= tag.id %>" class="label label-primary" data-toggle="tooltip" data-html="true" title="created by <strong><%= tag.try(:author).username %></strong> <%= time_ago_in_words(Time.at(tag.date)) %> ago">
+      <span id="tag_<%= tag.tid %>" class="label label-primary" data-toggle="tooltip" data-html="true" title="created by <strong><%= tag.try(:author).username %></strong> <%= time_ago_in_words(Time.at(tag.date)) %> ago">
         <a href="<%= "/maps" if @node.type == "map" %>/tag/<%= tag.name %>"><%= tag.name %></a>
         <% if current_user && (tag.uid == @node.uid || current_user.role == "admin" || current_user.role == "moderator") %>
-          <a class="tag-delete" data-remote="true" href="/tag/delete/<%= @node.id %>/<%= tag.id %>" data-tag-id="<%= tag.id %>">x</a>
+          <a class="tag-delete" data-remote="true" href="/tag/delete/<%= @node.id %>/<%= tag.tid %>" data-tag-id="<%= tag.tid %>">x</a>
         <% end %>
       </span>
     <% end %>

spec/javascripts/fixtures/tagging.html

@@ -0,0 +1,11 @@
+<span id="tags">
+  <span id="tag_1" class="label label-primary" data-toggle="tooltip" data-html="true">
+    <a href="/tag/blog">blog</a>
+    <a class="tag-delete" data-remote="true" href="/tag/delete/2/1" data-tag-id="1">x</a>
+  </span>
+</span>
+
+<form id="tagform" class="form" data-remote="true" action="/tag/create/<%= @node.id %>">
+  <input name="remote" type="hidden" value="true" />
+  <input autocomplete="off" class="tag-input form-control" name="name" type="text" data-provide="typeahead" />
+</form>

spec/javascripts/tagging_spec.js

@@ -0,0 +1,56 @@
+//= require application
+//= require jasmine-jquery
+//= require tagging
+
+var editor;
+
+describe("Tagging", function() {
+
+  beforeAll(function() {
+
+    // for phantomjs running
+    jasmine.getFixtures().fixturesPath="../../spec/javascripts/fixtures";
+
+    loadFixtures('tagging.html');
+
+    initTagForm(2);
+
+  });
+
+
+  // this should test addTag(tagname, selector) from tagging.js, which is an ajax request
+  xit("tests tag deletion", function() {
+
+    $('tags.label:first a.tag-delete').trigger('click');
+
+    setTimeout(0, function() {
+
+      // expect tag to be greyed out
+      expect($('tags.label:first a.tag-delete').css('opacity')).toBe(0.5);
+
+    });
+
+
+  });
+
+
+  // this should test addTag(tagname, selector) from tagging.js, which is an ajax request
+  xit("adds a tag", function(done) {
+
+    addTag('boss');
+
+    el.bind('ajax:success', function(e, response){
+
+    // drop the test expectations to the bottom of the task queue
+    setTimeout(0, function() {
+
+      // assert tag properly constructed here
+      // expect($('#tag_...).toBe(true);
+
+      done();
+
+    });
+
+  });
+
+});