Merge pull request #6363 from svbergerem/mobile-view-multiple-reaction-boxes

Mobile view multiple reaction boxes

Changelog.md

@@ -57,6 +57,7 @@ With the port to Bootstrap 3, app/views/terms/default.haml has a new structure.
 * Improve accessibility of a couple pages [#6227](https://github.com/diaspora/diaspora/pull/6227)
 * Capitalize "Powered by diaspora" [#6254](https://github.com/diaspora/diaspora/pull/6254)
 * Display username and avatar for NSFW posts in mobile view [#6245](https://github.com/diaspora/diaspora/6245)
+* Prevent multiple comment boxes on mobile [#6363](https://github.com/diaspora/diaspora/pull/6363)
 
 ## Features
 * Support color themes [#6033](https://github.com/diaspora/diaspora/pull/6033)

app/assets/javascripts/helpers/i18n.js

@@ -77,9 +77,12 @@ Diaspora.I18n = {
 
   reset: function() {
     this.locale.data = {};
+    this.locale.fallback.data = {};
 
-    if( arguments.length > 0 && !(_.isEmpty(arguments[0])) )
+    if(arguments.length > 0 && !(_.isEmpty(arguments[0]))) {
       this.locale.data = arguments[0];
+      this.locale.fallback.data = arguments[0];
+    }
   }
 };
 // @license-end

spec/controllers/jasmine_fixtures/aspects_spec.rb

@@ -58,6 +58,13 @@ describe StreamsController, :type => :controller do
         save_fixture(html_for("body"), "aspects_index_post_with_comments")
       end
 
+      it "generates a mobile jasmine fixture with a post with comments", fixture: true do
+        message = bob.post(:status_message, text: "HALO WHIRLED", 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_post_with_comments")
+      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_comments_spec.js

+describe("Diaspora.Mobile.Comments", function(){
+  describe("toggleComments", function() {
+    beforeEach(function() {
+      spec.loadFixture("aspects_index_mobile_post_with_comments");
+      this.link = $(".stream .show_comments").first();
+      spyOn(Diaspora.Mobile.Comments, "showComments");
+      spyOn(Diaspora.Mobile.Comments, "hideComments");
+    });
+
+    it("calls showComments", function() {
+      Diaspora.Mobile.Comments.toggleComments(this.link);
+      expect(Diaspora.Mobile.Comments.showComments).toHaveBeenCalled();
+      expect(Diaspora.Mobile.Comments.hideComments).not.toHaveBeenCalled();
+    });
+
+    it("calls hideComments if the link class is 'active'", function() {
+      this.link.addClass("active");
+      Diaspora.Mobile.Comments.toggleComments(this.link);
+      expect(Diaspora.Mobile.Comments.showComments).not.toHaveBeenCalled();
+      expect(Diaspora.Mobile.Comments.hideComments).toHaveBeenCalled();
+    });
+
+    it("doesn't call any function if the link class is 'loading'", function() {
+      this.link.addClass("loading");
+      Diaspora.Mobile.Comments.toggleComments(this.link);
+      expect(Diaspora.Mobile.Comments.showComments).not.toHaveBeenCalled();
+      expect(Diaspora.Mobile.Comments.hideComments).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("showUnloadedComments", function() {
+    beforeEach(function() {
+      spec.loadFixture("aspects_index_mobile_post_with_comments");
+      this.link = $(".stream .show_comments").first();
+      this.bottomBar = this.link.closest(".bottom_bar").first();
+      this.commentActionLink = this.bottomBar.find("a.comment-action");
+    });
+
+    it("adds the 'loading' class to the link", function() {
+      Diaspora.Mobile.Comments.showUnloadedComments(this.link, this.bottomBar, this.commentActionLink);
+      expect($(".show_comments").first()).toHaveClass("loading");
+    });
+
+    it("removes the 'loading' class if the request failed", function() {
+      Diaspora.Mobile.Comments.showUnloadedComments(this.link, this.bottomBar, this.commentActionLink);
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 400});
+      expect($(".show_comments").first()).not.toHaveClass("loading");
+    });
+
+    it("adds the 'active' class if the request succeeded", function() {
+      Diaspora.Mobile.Comments.showUnloadedComments(this.link, this.bottomBar, this.commentActionLink);
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 200, contentType: "text/plain", responseText: "test"});
+      expect($(".show_comments").first()).toHaveClass("active");
+      expect($(".show_comments").first()).not.toHaveClass("loading");
+    });
+
+    it("calls showCommentBox", function() {
+      spyOn(Diaspora.Mobile.Comments, "showCommentBox");
+      Diaspora.Mobile.Comments.showUnloadedComments(this.link, this.bottomBar, this.commentActionLink);
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 200, contentType: "text/plain", responseText: "test"});
+      expect(Diaspora.Mobile.Comments.showCommentBox).toHaveBeenCalledWith(this.commentActionLink);
+    });
+
+    it("adds the response text to the comments list", function() {
+      Diaspora.Mobile.Comments.showUnloadedComments(this.link, this.bottomBar, this.commentActionLink);
+      jasmine.Ajax.requests.mostRecent().respondWith({
+        status: 200,
+        contentType: "text/plain",
+        responseText: "<div class=\"commentContainerForTest\">new comments</div>"
+      });
+      expect($(".stream .stream_element").first()).toContainElement(".commentContainerForTest");
+    });
+  });
+
+  describe("showCommentBox", function() {
+    beforeEach(function() {
+      spec.loadFixture("aspects_index_mobile_post_with_comments");
+      this.link = $(".stream .comment-action").first();
+    });
+
+    it("adds the 'loading' class to the link", function() {
+      Diaspora.Mobile.Comments.showCommentBox(this.link);
+      expect($(".comment-action").first()).toHaveClass("loading");
+    });
+
+    it("removes the 'loading' class if the request failed", function() {
+      Diaspora.Mobile.Comments.showCommentBox(this.link);
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 400});
+      expect($(".comment-action").first()).not.toHaveClass("loading");
+    });
+
+    it("fires an AJAX call", function() {
+      spyOn(jQuery, "ajax");
+      Diaspora.Mobile.Comments.showCommentBox(this.link);
+      expect(jQuery.ajax).toHaveBeenCalled();
+    });
+
+    it("calls appendCommentBox", function() {
+      spyOn(Diaspora.Mobile.Comments, "appendCommentBox");
+      Diaspora.Mobile.Comments.showCommentBox(this.link);
+      jasmine.Ajax.requests.mostRecent().respondWith({status: 200, contentType: "text/plain", responseText: "test"});
+      expect(Diaspora.Mobile.Comments.appendCommentBox).toHaveBeenCalledWith(this.link, "test");
+    });
+
+    it("doesn't do anything if the link class is 'loading'", function() {
+      spyOn(jQuery, "ajax");
+      this.link.addClass("loading");
+      Diaspora.Mobile.Comments.showCommentBox(this.link);
+      expect(jQuery.ajax).not.toHaveBeenCalled();
+    });
+
+    it("doesn't do anything if the link class is not 'inactive'", function() {
+      spyOn(jQuery, "ajax");
+      this.link.removeClass("inactive");
+      Diaspora.Mobile.Comments.showCommentBox(this.link);
+      expect(jQuery.ajax).not.toHaveBeenCalled();
+    });
+  });
+});

spec/javascripts/widgets/i18n-spec.js

@@ -90,6 +90,7 @@ describe("Diaspora.I18n", function() {
       Diaspora.I18n.load(locale, "en", locale);
       Diaspora.I18n.reset();
       expect(Diaspora.I18n.locale.data).toEqual({});
+      expect(Diaspora.I18n.locale.fallback.data).toEqual({});
     });
 
     it("sets the locale to only a specific value", function() {
@@ -97,6 +98,7 @@ describe("Diaspora.I18n", function() {
       Diaspora.I18n.load(locale, "en", locale);
       Diaspora.I18n.reset(data);
       expect(Diaspora.I18n.locale.data).toEqual(data);
+      expect(Diaspora.I18n.locale.fallback.data).toEqual(data);
     });
   });
 });