Merge pull request #6394 from AugierLe42e/mobile-js-refactor

Mobile JS refactor

Changelog.md

@@ -83,6 +83,7 @@ Contributions are very welcome, the hard work is done!
 * Unifiy max-widths and page layouts [#6675](https://github.com/diaspora/diaspora/pull/6675)
 * Enable autosizing for all textareas [#6674](https://github.com/diaspora/diaspora/pull/6674)
 * Stream faces are gone [#6686](https://github.com/diaspora/diaspora/pull/6686)
+* Refactor mobile javascript and add tests [#6394](https://github.com/diaspora/diaspora/pull/6394)
 
 ## Bug fixes
 * Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852)

app/assets/javascripts/mobile/mobile.js

@@ -15,119 +15,12 @@
 //= require diaspora
 //= require helpers/i18n
 //= require widgets/timeago
+//= require mobile/mobile_application
 //= require mobile/mobile_file_uploader
 //= require mobile/profile_aspects
 //= require mobile/tag_following
 //= require mobile/publisher
 //= require mobile/mobile_comments
-
-$(document).ready(function(){
-
-  $('.shield a').click(function(){
-    $(this).parents(".stream_element").removeClass("shield-active");
-    return false;
-  });
-  var showLoader = function(link){
-    link.addClass('loading');
-  };
-
-  var removeLoader = function(link){
-    link.removeClass('loading')
-         .toggleClass('active')
-         .toggleClass('inactive');
-  };
-
-  // init autosize plugin
-  autosize($("textarea"));
-
-  /* Drawer menu */
-  $("#menu-badge").bind("tap click", function(evt){
-    evt.preventDefault();
-    $("#app").toggleClass("draw");
-  });
-
-  /* Show / hide aspects in the drawer */
-  $("#all_aspects").bind("tap click", function(evt){
-    evt.preventDefault();
-    $("#all_aspects + li").toggleClass("hide");
-  });
-
-  /* Show / hide followed tags in the drawer */
-  $("#followed_tags > a").bind("tap click", function(evt){
-    evt.preventDefault();
-    $("#followed_tags + li").toggleClass("hide");
-  });
-
-  /* Heart toggle */
-  $(".like-action", ".stream").bind("tap click", function(evt){
-    evt.preventDefault();
-    var link = $(this),
-        likeCounter = $(this).closest(".stream_element").find(".like-count"),
-        url = link.data("url");
-
-    if(!link.hasClass("loading")){
-      if(link.hasClass('inactive')) {
-        $.ajax({
-          url: url,
-          dataType: 'json',
-          type: 'POST',
-          beforeSend: showLoader(link),
-          success: function(data){
-            removeLoader(link);
-            link.data("url", url + "/" + data.id);
-
-            if(likeCounter){
-              likeCounter.text(parseInt(likeCounter.text(), 10) + 1);
-            }
-          }
-        });
-      }
-      else if(link.hasClass("active")){
-        $.ajax({
-          url: url,
-          dataType: 'json',
-          type: 'DELETE',
-          beforeSend: showLoader(link),
-          complete: function(){
-            removeLoader(link);
-            link.data("url", url.replace(/\/\d+$/, ""));
-
-            if(likeCounter){
-              likeCounter.text(parseInt(likeCounter.text(), 10) - 1);
-            }
-          }
-        });
-      }
-    }
-  });
-
-  /* Reshare */
-  $(".reshare-action:not(.disabled)", ".stream").bind("tap click", function(evt){
-    evt.preventDefault();
-
-    var link = $(this),
-        href = link.attr("href"),
-        confirmText = link.attr('title');
-
-    if(!link.hasClass("loading")) {
-      if(link.hasClass('inactive')) {
-        if(confirm(confirmText)) {
-          $.ajax({
-            url: href + "&provider_display_name=mobile",
-            dataType: 'json',
-            type: 'POST',
-            beforeSend: showLoader(link),
-            success: function(){
-              removeLoader(link);
-            },
-            error: function(){
-              removeLoader(link);
-              alert(Diaspora.I18n.t('failed_to_reshare'));
-            }
-          });
-        }
-      }
-    }
-  });
-});
+//= require mobile/mobile_post_actions
+//= require mobile/mobile_drawer
 // @license-end

app/assets/javascripts/mobile/mobile_application.js

+(function(){
+  Diaspora.Mobile = {
+    initialize: function(){
+      $(".shield a").click(function(){
+        $(this).parents(".stream_element").removeClass("shield-active");
+        return false;
+      });
+
+      // init autosize plugin
+      autosize($("textarea"));
+    }
+  };
+})();
+
+$(document).ready(function(){
+  Diaspora.Mobile.initialize();
+});

app/assets/javascripts/mobile/mobile_comments.js

@@ -5,19 +5,11 @@
  */
 
 (function() {
-  Diaspora.Mobile = {};
   Diaspora.Mobile.Comments = {
     stream: function(){ return $(".stream"); },
 
     initialize: function() {
       var self = this;
-      $(".stream").on("tap click", "a.back_to_stream_element_top", function() {
-        var bottomBar = $(this).closest(".bottom_bar").first();
-        var streamElement = bottomBar.parent();
-        $("html, body").animate({
-          scrollTop: streamElement.offset().top - 54
-        }, 1000);
-      });
 
       this.stream().on("tap click", "a.show-comments", function(evt){
         evt.preventDefault();

app/assets/javascripts/mobile/mobile_drawer.js

+(function(){
+  Diaspora.Mobile.Drawer = {
+    initialize: function(){
+      $("#all_aspects").bind("tap click", function(evt){
+        evt.preventDefault();
+        $(this).find("+ li").toggleClass("hide");
+      });
+
+      $("#menu-badge").bind("tap click", function(evt){
+        evt.preventDefault();
+        $("#app").toggleClass("draw");
+      });
+
+      $("#followed_tags").bind("tap click", function(evt){
+        evt.preventDefault();
+        $(this).find("+ li").toggleClass("hide");
+      });
+    }
+  };
+})();
+
+$(function(){
+  Diaspora.Mobile.Drawer.initialize();
+});

app/assets/javascripts/mobile/mobile_post_actions.js

+(function(){
+  Diaspora.Mobile.PostActions = {
+    initialize: function() {
+      $(".like-action", ".stream").bind("tap click", this.onLike);
+      $(".reshare-action", ".stream").bind("tap click", this.onReshare);
+    },
+
+    showLoader: function(link) {
+      link.addClass("loading");
+    },
+
+    hideLoader: function(link) {
+      link.removeClass("loading");
+    },
+
+    toggleActive: function(link) {
+      link.toggleClass("active").toggleClass("inactive");
+    },
+
+    like: function(likeCounter, link){
+      var url = link.data("url");
+      var onSuccess = function(data){
+        Diaspora.Mobile.PostActions.toggleActive(link);
+        link.data("url", url + "/" + data.id);
+        if(likeCounter){
+          likeCounter.text(parseInt(likeCounter.text(), 10) + 1);
+        }
+      };
+
+      $.ajax({
+        url: url,
+        dataType: "json",
+        type: "POST",
+        beforeSend: function() {
+          Diaspora.Mobile.PostActions.showLoader(link);
+        },
+        success: onSuccess,
+        complete: function() {
+          Diaspora.Mobile.PostActions.hideLoader(link);
+        }
+      });
+    },
+
+    unlike: function(likeCounter, link){
+      var url = link.data("url");
+      var onSuccess = function(){
+        Diaspora.Mobile.PostActions.toggleActive(link);
+        link.data("url", url.replace(/\/\d+$/, ""));
+
+        if(likeCounter){
+          var newValue = parseInt(likeCounter.text(), 10) - 1;
+          likeCounter.text(Math.max(newValue, 0));
+        }
+      };
+
+      $.ajax({
+        url: url,
+        dataType: "json",
+        type: "DELETE",
+        beforeSend: function() {
+          Diaspora.Mobile.PostActions.showLoader(link);
+        },
+        success: onSuccess,
+        complete: function() {
+          Diaspora.Mobile.PostActions.hideLoader(link);
+        }
+      });
+    },
+
+    onLike: function(evt){
+      evt.preventDefault();
+      var link = $(evt.target),
+          likeCounter = $(evt.target).closest(".stream_element").find(".like-count");
+
+      if(!link.hasClass("loading") && link.hasClass("inactive")) {
+        Diaspora.Mobile.PostActions.like(likeCounter, link);
+      }
+      else if(!link.hasClass("loading") && link.hasClass("active")) {
+        Diaspora.Mobile.PostActions.unlike(likeCounter, link);
+      }
+    },
+
+    onReshare: function(evt) {
+      evt.preventDefault();
+
+      var link = $(this),
+          href = link.attr("href"),
+          confirmText = link.attr("title");
+
+      if(!link.hasClass("loading") && link.hasClass("inactive") && confirm(confirmText)) {
+        $.ajax({
+          url: href + "&provider_display_name=mobile",
+          dataType: "json",
+          type: "POST",
+          beforeSend: function() {
+            Diaspora.Mobile.PostActions.showLoader(link);
+          },
+          success: function() {
+            Diaspora.Mobile.PostActions.toggleActive(link);
+          },
+          error: function() {
+            alert(Diaspora.I18n.t("failed_to_reshare"));
+          },
+          complete: function() {
+            Diaspora.Mobile.PostActions.hideLoader(link);
+          }
+        });
+      }
+    }
+  };
+})();
+
+$(function(){
+  Diaspora.Mobile.PostActions.initialize();
+});

spec/controllers/jasmine_fixtures/aspects_spec.rb

@@ -65,6 +65,20 @@ describe StreamsController, :type => :controller do
         save_fixture(html_for("body"), "aspects_index_mobile_post_with_comments")
       end
 
+      it "generates a mobile jasmine fixture with a public post", fixture: true do
+        message = bob.post(:status_message, text: "HALO WHIRLED", public: true)
+        5.times { bob.comment!(message, "what") }
+        get :aspects, format: :mobile
+        save_fixture(html_for("body"), "aspects_index_mobile_public_post")
+      end
+
+      it "generates a mobile jasmine fixture with an NSFW post", fixture: true do
+        message = bob.post(:status_message, text: "#NSFW", to: @bob.aspects.where(name: "generic").first.id)
+        5.times { bob.comment!(message, "what") }
+        get :aspects, format: :mobile
+        save_fixture(html_for("body"), "aspects_index_mobile_nsfw_post")
+      end
+
       it 'generates a jasmine fixture with a followed tag', :fixture => true do
         @tag = ActsAsTaggableOn::Tag.create!(:name => "partytimeexcellent")
         TagFollowing.create!(:tag => @tag, :user => alice)

spec/javascripts/mobile/mobile_application_spec.js

+describe("Diaspora.Mobile", function(){
+  describe("initialize", function(){
+    beforeEach(function(){
+      spec.loadFixture("aspects_index_mobile_nsfw_post");
+      spyOn(window, "autosize");
+    });
+
+    it("calls autosize for textareas", function(){
+      Diaspora.Mobile.initialize();
+      expect(window.autosize).toHaveBeenCalled();
+      expect(window.autosize.calls.mostRecent().args[0].selector).toBe("textarea");
+    });
+
+    it("deactivates shield", function(){
+      Diaspora.Mobile.initialize();
+      var $shield = $(".stream_element").first();
+      expect($shield).toHaveClass("shield-active");
+      $shield.find(".shield a").click();
+      expect($shield).not.toHaveClass("shield-active");
+    });
+  });
+});

spec/javascripts/mobile/mobile_drawer_spec.js

+describe("Diaspora.Mobile.Drawer", function(){
+  describe("initialize", function(){
+    beforeEach(function(){
+      spec.loadFixture("aspects_index_mobile_post_with_comments");
+      Diaspora.Mobile.Drawer.initialize();
+      this.menuBadge = $("#menu-badge");
+      this.followedTags = $("#followed_tags");
+      this.allAspects = $("#all_aspects");
+    });
+
+    it("correctly binds events", function(){
+      expect($._data(this.allAspects[0], "events").tap.length).not.toBe(0);
+      expect($._data(this.allAspects[0], "events").click.length).not.toBe(0);
+      expect($._data(this.followedTags[0], "events").tap.length).not.toBe(0);
+      expect($._data(this.followedTags[0], "events").click.length).not.toBe(0);
+      expect($._data(this.menuBadge[0], "events").tap.length).not.toBe(0);
+      expect($._data(this.menuBadge[0], "events").click.length).not.toBe(0);
+    });
+
+    it("opens and closes the drawer", function(){
+      var $app = $("#app");
+      expect($app).not.toHaveClass("draw");
+      this.menuBadge.click();
+      expect($app).toHaveClass("draw");
+      this.menuBadge.click();
+      expect($app).not.toHaveClass("draw");
+    });
+
+    it("shows and hides the aspects", function(){
+      var $aspectList = this.allAspects.find("+ li");
+      expect($aspectList).toHaveClass("hide");
+      this.allAspects.click();
+      expect($aspectList).not.toHaveClass("hide");
+      this.allAspects.click();
+      expect($aspectList).toHaveClass("hide");
+    });
+
+    it("shows and hides the followed tags", function(){
+      var $tagList = this.followedTags.find("+ li");
+      expect($tagList).toHaveClass("hide");
+      this.followedTags.click();
+      expect($tagList).not.toHaveClass("hide");
+      this.followedTags.click();
+      expect($tagList).toHaveClass("hide");
+    });
+  });
+});

spec/javascripts/mobile/mobile_post_actions_spec.js

+describe("Diaspora.Mobile.PostActions", function(){
+  describe("initialize", function(){
+    beforeEach(function(){
+      spec.loadFixture("aspects_index_mobile_public_post");
+      spyOn(Diaspora.Mobile.PostActions, "onLike");
+      spyOn(Diaspora.Mobile.PostActions, "onReshare");
+      Diaspora.Mobile.PostActions.initialize();
+    });
+
+    it("binds the events", function(){
+      $(".stream .like-action").trigger("tap");
+      expect(Diaspora.Mobile.PostActions.onLike).toHaveBeenCalled();
+      $(".stream .like-action").click();
+      expect(Diaspora.Mobile.PostActions.onLike).toHaveBeenCalled();
+      $(".stream .reshare-action").trigger("tap");
+      expect(Diaspora.Mobile.PostActions.onReshare).toHaveBeenCalled();
+      $(".stream .reshare-action").click();
+      expect(Diaspora.Mobile.PostActions.onReshare).toHaveBeenCalled();
+    });
+  });
+
+  describe("toggleActive", function(){
+    beforeEach(function(){
+      spec.loadFixture("aspects_index_mobile_public_post");
+      Diaspora.Mobile.PostActions.initialize();
+      this.link = $(".stream .like-action").first();
+    });
+
+    it("toggles active and inactive classes", function(){
+      expect(this.link).toHaveClass("inactive");
+      expect(this.link).not.toHaveClass("active");
+      Diaspora.Mobile.PostActions.toggleActive(this.link);
+      expect(this.link).not.toHaveClass("inactive");
+      expect(this.link).toHaveClass("active");
+      Diaspora.Mobile.PostActions.toggleActive(this.link);
+      expect(this.link).toHaveClass("inactive");
+      expect(this.link).not.toHaveClass("active");
+    });
+  });
+
+  describe("showLoader and hideLoader", function(){
+    beforeEach(function(){
+      spec.loadFixture("aspects_index_mobile_public_post");
+      Diaspora.Mobile.PostActions.initialize();
+      this.link = $(".stream .like-action").first();
+    });
+
+    it("adds and removes loading class", function(){
+      expect(this.link).not.toHaveClass("loading");
+      Diaspora.Mobile.PostActions.showLoader(this.link);
+      expect(this.link).toHaveClass("loading");
+      Diaspora.Mobile.PostActions.hideLoader(this.link);
+      expect(this.link).not.toHaveClass("loading");
+    });
+  });
+
+  describe("onLike", function(){
+    beforeEach(function(){
+      spec.loadFixture("aspects_index_mobile_public_post");
+      spyOn(Diaspora.Mobile.PostActions, "like");
+      spyOn(Diaspora.Mobile.PostActions, "unlike");
+      Diaspora.Mobile.PostActions.initialize();
+      this.link = $(".stream .like-action").first();
+    });
+
+    it("doesn't activate the link if loading", function(){
+      this.link.addClass("loading");
+      this.link.click();
+      expect(Diaspora.Mobile.PostActions.like).not.toHaveBeenCalled();
+      expect(Diaspora.Mobile.PostActions.unlike).not.toHaveBeenCalled();
+    });
+
+    it("calls like if like button is inactive", function(){
+      this.link.removeClass("active").addClass("inactive");
+      this.link.click();
+      expect(Diaspora.Mobile.PostActions.like).toHaveBeenCalled();
+    });
+
+    it("calls unlike if like button is active", function(){
+      this.link.removeClass("inactive").addClass("active");
+      this.link.click();
+      expect(Diaspora.Mobile.PostActions.unlike).toHaveBeenCalled();
+    });
+  });
+
+  describe("like", function(){
+    beforeEach(function(){
+      spec.loadFixture("aspects_index_mobile_public_post");
+      Diaspora.Mobile.PostActions.initialize();
+      this.link = $(".stream .like-action").first();
+      this.likeCounter = this.link.closest(".stream_element").find(".like-count");
+    });
+
+    it("always calls showLoader before sending request", function(){
+      spyOn(Diaspora.Mobile.PostActions, "showLoader");
+
+      Diaspora.Mobile.PostActions.like(this.likeCounter, this.link);
+      expect(Diaspora.Mobile.PostActions.showLoader).toHaveBeenCalled();
+    });
+
+    it("always calls hideLoader after receiving response", function(){
+      spyOn(Diaspora.Mobile.PostActions, "hideLoader");
+
+      Diaspora.Mobile.PostActions.like(this.likeCounter, this.link);
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 400});
+      expect(Diaspora.Mobile.PostActions.hideLoader).toHaveBeenCalled();
+      Diaspora.Mobile.PostActions.like(this.likeCounter, this.link);
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 201, responseText: "{\"id\": \"18\"}"});
+      expect(Diaspora.Mobile.PostActions.hideLoader).toHaveBeenCalled();
+    });
+
+    it("doesn't activate the link on error", function(){
+      spyOn(Diaspora.Mobile.PostActions, "toggleActive");
+
+      Diaspora.Mobile.PostActions.like(this.likeCounter, this.link);
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 400});
+      expect(Diaspora.Mobile.PostActions.toggleActive).not.toHaveBeenCalled();
+      expect(this.likeCounter.text()).toBe("0");
+    });
+
+    it("activates link on success", function(){
+      spyOn(Diaspora.Mobile.PostActions, "toggleActive");
+      var data = this.link.data("url");
+
+      Diaspora.Mobile.PostActions.like(this.likeCounter, this.link);
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 201, responseText: "{\"id\": \"18\"}"});
+      expect(Diaspora.Mobile.PostActions.toggleActive).toHaveBeenCalled();
+      expect(this.likeCounter.text()).toBe("1");
+      expect(this.link.data("url")).toBe(data + "/18");
+    });
+  });
+
+  describe("unlike", function(){
+    beforeEach(function(){
+      spec.loadFixture("aspects_index_mobile_public_post");
+      Diaspora.Mobile.PostActions.initialize();
+      this.link = $(".stream .like-action").first();
+      this.likeCounter = this.link.closest(".stream_element").find(".like-count");
+      Diaspora.Mobile.PostActions.like(this.likeCounter, this.link);
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 201, responseText: "{\"id\": \"18\"}"});
+    });
+
+    it("always calls showLoader before sending request", function(){
+      spyOn(Diaspora.Mobile.PostActions, "showLoader");
+      Diaspora.Mobile.PostActions.unlike(this.likeCounter, this.link);
+      expect(Diaspora.Mobile.PostActions.showLoader).toHaveBeenCalled();
+    });
+
+    it("always calls hideLoader after receiving response", function(){
+      spyOn(Diaspora.Mobile.PostActions, "hideLoader");
+
+      Diaspora.Mobile.PostActions.unlike(this.likeCounter, this.link);
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 400});
+      expect(Diaspora.Mobile.PostActions.hideLoader).toHaveBeenCalled();
+      Diaspora.Mobile.PostActions.unlike(this.likeCounter, this.link);
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 204});
+      expect(Diaspora.Mobile.PostActions.hideLoader).toHaveBeenCalled();
+    });
+
+    it("doesn't unlike on error", function(){
+      spyOn(Diaspora.Mobile.PostActions, "toggleActive");
+
+      Diaspora.Mobile.PostActions.unlike(this.likeCounter, this.link);
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 400});
+      expect(Diaspora.Mobile.PostActions.toggleActive).not.toHaveBeenCalled();
+      expect(this.likeCounter.text()).toBe("1");
+    });
+
+    it("deactivates link on success", function(){
+      spyOn(Diaspora.Mobile.PostActions, "toggleActive");
+      var data = this.link.data("url");
+
+      expect(this.likeCounter.text()).toBe("1");
+      Diaspora.Mobile.PostActions.unlike(this.likeCounter, this.link);
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 204});
+      expect(Diaspora.Mobile.PostActions.toggleActive).toHaveBeenCalled();
+      expect(this.likeCounter.text()).toBe("0");
+      expect(this.link.data("url")).toBe(data.replace(/\/\d+$/, ""));
+    });
+
+    it("doesn't produce negative like count", function(){
+      expect(this.likeCounter.text()).toBe("1");
+      Diaspora.Mobile.PostActions.unlike(this.likeCounter, this.link);
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 204});
+      expect(this.likeCounter.text()).toBe("0");
+      Diaspora.Mobile.PostActions.unlike(this.likeCounter, this.link);
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 204});
+      expect(this.likeCounter.text()).toBe("0");
+      Diaspora.Mobile.PostActions.unlike(this.likeCounter, this.link);
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 204});
+      expect(this.likeCounter.text()).toBe("0");
+    });
+  });
+
+  describe("onReshare", function(){
+    beforeEach(function(){
+      spec.loadFixture("aspects_index_mobile_public_post");
+      Diaspora.Mobile.PostActions.initialize();
+      this.reshareLink = $(".stream .reshare-action");
+      spyOn(window, "confirm").and.returnValue(true);
+      spyOn(window, "alert");
+    });
+
+    it("always calls showLoader before sending request and hideLoader after receiving response", function(){
+      spyOn(Diaspora.Mobile.PostActions, "hideLoader");
+      spyOn(Diaspora.Mobile.PostActions, "showLoader");
+
+      this.reshareLink.click();
+      expect(Diaspora.Mobile.PostActions.showLoader).toHaveBeenCalled();
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 400});
+      expect(Diaspora.Mobile.PostActions.hideLoader).toHaveBeenCalled();
+      this.reshareLink.click();
+      expect(Diaspora.Mobile.PostActions.showLoader).toHaveBeenCalled();
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 201, responseText: "{}"});
+      expect(Diaspora.Mobile.PostActions.hideLoader).toHaveBeenCalled();
+    });
+
+    it("calls toggleActive on success", function(){
+      spyOn(Diaspora.Mobile.PostActions, "toggleActive");
+
+      this.reshareLink.click();
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 201, responseText: "{}"});
+      expect(Diaspora.Mobile.PostActions.toggleActive).toHaveBeenCalledWith(this.reshareLink);
+    });
+
+    it("pops an alert on error", function(){
+      this.reshareLink.click();
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 400});
+      expect(window.alert).toHaveBeenCalledWith(Diaspora.I18n.t("failed_to_reshare"));
+    });
+  });
+});