From 00f1adc8b2958339efd42fa233de533596da8503 Mon Sep 17 00:00:00 2001
From: Dennis Collinson <dennis.collective@gmail.com>
Date: Thu, 17 May 2012 13:24:21 -0700
Subject: [PATCH] Going back to the composer from the framer is happy via
 button

---
 .../javascripts/app/forms/picture_form.js     |   2 +-
 app/assets/javascripts/app/forms/post_form.js |   2 +-
 app/assets/javascripts/app/pages/composer.js  |  25 +--
 app/assets/javascripts/app/pages/framer.js    |  15 +-
 .../app/views/aspects_dropdown_view.js        |  79 ++++----
 .../app/views/services_selector_view.js       |  11 +-
 .../app/views/template_picker_view.js         |   2 +-
 .../stylesheets/new_styles/_composer.scss     |  10 +-
 app/assets/templates/aspects-dropdown.jst.hbs |  19 +-
 app/assets/templates/framer-controls.jst.hbs  |   5 +-
 app/assets/templates/post-form.jst.hbs        |   2 +-
 .../templates/services-selector.jst.hbs       |  11 +-
 features/step_definitions/trumpeter_steps.rb  |   6 +-
 features/trumpeter.feature                    |  17 +-
 .../app/forms/picture_form_spec.js            |   2 +-
 spec/javascripts/app/pages/composer_spec.js   |  21 +-
 .../app/views/aspects_dropdown_view_spec.js   | 179 +++++++++---------
 .../app/views/services_selector_view_spec.js  |   6 +-
 .../app/views/template_picker_view_spec.js    |   3 +-
 19 files changed, 225 insertions(+), 192 deletions(-)

diff --git a/app/assets/javascripts/app/forms/picture_form.js b/app/assets/javascripts/app/forms/picture_form.js
index 21f3ba64c..6fc4a19be 100644
--- a/app/assets/javascripts/app/forms/picture_form.js
+++ b/app/assets/javascripts/app/forms/picture_form.js
@@ -31,7 +31,7 @@ app.forms.Picture = app.forms.PictureBase.extend({
   templateName : "picture-form",
 
   initialize : function() {
-    this.photos = new Backbone.Collection()
+    this.photos = this.model.photos || new Backbone.Collection()
     this.photos.bind("add", this.render, this)
   },
 
diff --git a/app/assets/javascripts/app/forms/post_form.js b/app/assets/javascripts/app/forms/post_form.js
index 0d454847f..944cdd9a8 100644
--- a/app/assets/javascripts/app/forms/post_form.js
+++ b/app/assets/javascripts/app/forms/post_form.js
@@ -7,7 +7,7 @@ app.forms.Post = app.views.Base.extend({
    },
 
   initialize : function() {
-    this.pictureForm = new app.forms.Picture();
+    this.pictureForm = new app.forms.Picture({model: this.model});
   },
 
   postRenderTemplate : function() {
diff --git a/app/assets/javascripts/app/pages/composer.js b/app/assets/javascripts/app/pages/composer.js
index d8b47789e..1eaea7105 100644
--- a/app/assets/javascripts/app/pages/composer.js
+++ b/app/assets/javascripts/app/pages/composer.js
@@ -12,16 +12,21 @@ app.pages.Composer = app.views.Base.extend({
 
   formAttrs : {
     "textarea#text_with_markup" : "text",
-    "input.aspect_ids" : "aspect_ids",
-    "input.service:checked" : "services"
+    "input.aspect_ids" : "aspect_ids[]",
+    "input.services" : "services[]"
   },
 
   initialize : function(){
-    app.frame = this.model = new app.models.StatusMessage();
+    app.frame = this.model = this.model || new app.models.StatusMessage();
     this.postForm = new app.forms.Post({model : this.model});
     this.composerControls = new app.views.ComposerControls({model : this.model});
   },
 
+  unbind : function(){
+    this.model.off()
+    this.model.photos.off()
+  },
+
   navigateNext : function(){
     var self = this,
         textArea = this.$("form textarea.text")
@@ -46,14 +51,12 @@ app.pages.Composer = app.views.Base.extend({
     this.model.set({"photos": this.model.photos.toJSON() })
     this.model.set(overrides)
 
+
     function setValueFromField(memo, attribute, selector){
-      var selectors = form.find(selector);
-      if(selectors.length > 1) {
-        memo[attribute] = _.map(selectors, function(selector){
-          return this.$(selector).val()
-        })
+      if(attribute.slice("-2") === "[]") {
+        memo[attribute.slice(0, attribute.length - 2)] = _.pluck(form.find(selector).serializeArray(), "value")
       } else {
-        memo[attribute] = selectors.val();
+        memo[attribute] = form.find(selector).val();
       }
       return memo
     }
@@ -69,7 +72,7 @@ app.views.ComposerControls = app.views.Base.extend({
   },
 
   initialize : function() {
-    this.aspectsDropdown = new app.views.AspectsDropdown();
-    this.servicesSelector = new app.views.ServicesSelector();
+    this.aspectsDropdown = new app.views.AspectsDropdown({model : this.model});
+    this.servicesSelector = new app.views.ServicesSelector({model : this.model});
   }
 })
diff --git a/app/assets/javascripts/app/pages/framer.js b/app/assets/javascripts/app/pages/framer.js
index 7f3c9d4dd..9a85a7887 100644
--- a/app/assets/javascripts/app/pages/framer.js
+++ b/app/assets/javascripts/app/pages/framer.js
@@ -18,6 +18,10 @@ app.pages.Framer = app.views.Base.extend({
     this.framerControls = new app.views.framerControls({model : this.model})
   },
 
+  unbind : function(){
+    this.model.off()
+  },
+
   postView : function(){
     return new app.views.SmallFrame({model : this.model})
   },
@@ -45,7 +49,8 @@ app.views.framerControls = app.views.Base.extend({
   templateName : 'framer-controls',
 
   events : {
-    "click button.done" : "saveFrame"
+    "click button.done" : "saveFrame",
+    "click button.back" : "editFrame"
   },
 
   subviews : {
@@ -57,8 +62,12 @@ app.views.framerControls = app.views.Base.extend({
   },
 
   saveFrame : function(){
-    this.$('button').prop('disabled', 'disabled')
-                    .addClass('disabled')
+    this.$('button').prop('disabled', 'disabled').addClass('disabled')
     this.model.save()
+  },
+
+  editFrame : function(){
+    app.router.renderPage(function(){return new app.pages.Composer({model : app.frame})})
+    app.router.navigate("/posts/new")
   }
 });
diff --git a/app/assets/javascripts/app/views/aspects_dropdown_view.js b/app/assets/javascripts/app/views/aspects_dropdown_view.js
index e02fed8ef..5925b0ea2 100644
--- a/app/assets/javascripts/app/views/aspects_dropdown_view.js
+++ b/app/assets/javascripts/app/views/aspects_dropdown_view.js
@@ -1,55 +1,60 @@
 app.views.AspectsDropdown = app.views.Base.extend({
   templateName : "aspects-dropdown",
   events : {
-    "click .dropdown-menu a" : "setVisibility"
+    "change .dropdown-menu input" : "setVisibility"
+  },
+
+  presenter : function(){
+    var selectedAspects = this.model.get("aspect_ids")
+      , parsedIds = _.map(selectedAspects, parseInt)
+
+    return {
+      aspects : _.map(app.currentUser.get('aspects'), function(aspect){
+        return _.extend({}, aspect, {checked :_.include(parsedIds, aspect.id) })
+      }),
+
+      public :_.include(selectedAspects, "public"),
+      'all-aspects' :_.include(selectedAspects, "all_aspects")
+    }
   },
 
   postRenderTemplate : function(){
-    this.setVisibility({target : this.$("a[data-visibility='public']").first()})
+    if(this.model.get("aspect_ids")) {
+      this.setDropdownText()
+    } else {
+      this.setVisibility({target : this.$("input[value='public']").first()})
+    }
   },
 
   setVisibility : function(evt){
-    var self = this
-      , link = $(evt.target).closest("a")
+    var input = $(evt.target).closest("input")
 
-    if(_.include(['public', 'all-aspects'], link.data('visibility'))) {
-      deselectAll()
-      link.parents("li").addClass("selected")
-      self.setDropdownText(link.text())
+    if(_.include(['public', 'all_aspects'], input.val())) {
+      this.$("input").attr("checked", false)
+      input.attr("checked", "checked")
     } else {
-      deselectOverrides()
-      link.parents("li").toggleClass("selected")
-      evt.stopImmediatePropagation(); //stop dropdown from going awaay
-
-      var selectedAspects = this.$("li.selected")
-      if(selectedAspects.length > 1) {
-        self.setDropdownText("In " + this.$("li.selected").length + " aspects")
-      } else {
-        self.setDropdownText(selectedAspects.text() || "Private")
-      }
+      this.$("input.public, input.all_aspects").attr("checked", false)
     }
 
-    this.setAspectIds()
-
-    function deselectOverrides() {
-      self.$("a.public, a.all-aspects").parent().removeClass("selected")
-    }
-
-    function deselectAll() {
-      self.$("li.selected").removeClass("selected")
-    }
+    this.setDropdownText()
   },
 
-  setDropdownText : function(text){
+  setDropdownText : function(){
+    var selected = this.$("input").serializeArray()
+      , text;
+
+    switch (selected.length) {
+      case 0:
+        text = "Private"
+        break
+      case 1:
+        text = selected[0].name
+        break
+      default:
+        text = ["In", selected.length, "aspects"].join(" ")
+        break
+    }
+
     $.trim(this.$(".dropdown-toggle .text").text(text))
-  },
-
-  setAspectIds : function(){
-    var selectedAspects = this.$("li.selected a")
-    var aspectIds = _.map(selectedAspects, function(aspect){
-      return $(aspect).data("aspect-id")}
-    )
-
-    this.$("input.aspect_ids").val(aspectIds)
   }
 })
diff --git a/app/assets/javascripts/app/views/services_selector_view.js b/app/assets/javascripts/app/views/services_selector_view.js
index a6ceef3c2..43cb65328 100644
--- a/app/assets/javascripts/app/views/services_selector_view.js
+++ b/app/assets/javascripts/app/views/services_selector_view.js
@@ -15,7 +15,16 @@ app.views.ServicesSelector = app.views.Base.extend({
   ],
 
   presenter : function() {
-    return _.extend(this.defaultPresenter(), {services : this.services})
+    var selectedServices = this.model.get('services');
+
+    return _.extend(this.defaultPresenter(), {
+      services :_.map(this.services, function(service){
+        return {
+          name : service,
+          checked :_.include(selectedServices, service)
+        }
+      })
+    })
   },
 
   askForAuth : function(evt){
diff --git a/app/assets/javascripts/app/views/template_picker_view.js b/app/assets/javascripts/app/views/template_picker_view.js
index 9293073a5..c2f768071 100644
--- a/app/assets/javascripts/app/views/template_picker_view.js
+++ b/app/assets/javascripts/app/views/template_picker_view.js
@@ -6,7 +6,7 @@ app.views.TemplatePicker = app.views.Base.extend({
   },
 
   initialize : function(){
-    this.model.setFrameName()
+    if(!this.model.get('frame_name')) this.model.setFrameName()
   },
 
   postRenderTemplate : function(){
diff --git a/app/assets/stylesheets/new_styles/_composer.scss b/app/assets/stylesheets/new_styles/_composer.scss
index dd5f2980f..5799e6675 100644
--- a/app/assets/stylesheets/new_styles/_composer.scss
+++ b/app/assets/stylesheets/new_styles/_composer.scss
@@ -53,22 +53,20 @@
     .aspect-selector {
       float: left;
 
-      i {
+      i, input {
         display: none;
       }
 
-      .selected i {
+      input:checked + label i {
         display: inline-block;
         position: absolute;
         left : 3px;
         margin-top : 1px;
       }
 
-      a {
-        display : block;
-
+      label {
         span:not(.caret) {
-          padding-left: 5px;
+          padding-left: 21px;
         }
       }
     }
diff --git a/app/assets/templates/aspects-dropdown.jst.hbs b/app/assets/templates/aspects-dropdown.jst.hbs
index a89c087f9..d5d74a482 100644
--- a/app/assets/templates/aspects-dropdown.jst.hbs
+++ b/app/assets/templates/aspects-dropdown.jst.hbs
@@ -3,14 +3,23 @@
         <span class="text"></span> <span class="caret"></span>
     </a>
     <ul class="dropdown-menu">
-        <li><a href="#" class="public" data-aspect-id="public" data-visibility="public"><i class='icon-ok'/><span>Public</span></a></li>
-        <li><a href="#" class="all-aspects" data-aspect-id="all_aspects" data-visibility="all-aspects"><i class='icon-ok'/><span>All Aspects</span></a></li>
+        <form class="necessaryForJS">
+        <li>
+            <input id="aspect_ids_public" type="checkbox" name="Public" class="aspect_ids public" value="public" {{#if public}}checked="checked"{{/if}}/>
+            <label for="aspect_ids_public"><i class='icon-ok'/><span>Public</span></label></li>
+        <li>
+            <input id="aspect_ids_all_aspects" type="checkbox" name="All Aspects" class="aspect_ids all_aspects" value="all_aspects" {{#if all-aspects}}checked="checked"{{/if}}/>
+            <label for="aspect_ids_all_aspects"><i class='icon-ok'/><span>All Aspects</span></label></li>
+        </li>
 
         <li class="divider"></li>
-        {{#each current_user.aspects}}
-            <li><a href="#" data-aspect-id="{{id}}"  data-visibility="custom"><i class='icon-ok'/><span>{{name}}</span></a></li>
+        {{#each aspects}}
+            <li>
+                <input id="aspect_ids_{{id}}" type="checkbox" name="{{name}}" class="aspect_ids" value="{{id}}" {{#if checked}}checked="checked"{{/if}}/>
+                <label for="aspect_ids_{{id}}"><i class='icon-ok'/><span>{{name}}</span></label>
+            </li>
         {{/each}}
-
+        </form>
     </ul>
 </div>
 
diff --git a/app/assets/templates/framer-controls.jst.hbs b/app/assets/templates/framer-controls.jst.hbs
index 2d824cd27..a4c59b94f 100644
--- a/app/assets/templates/framer-controls.jst.hbs
+++ b/app/assets/templates/framer-controls.jst.hbs
@@ -1,4 +1,5 @@
 <div id='controls-wrapper'>
-  <div class='template-picker'></div>
-  <button id='done' class="done btn btn-success">Post <i class='icon-white icon-ok-sign'></i></button>
+    <div class='template-picker'></div>
+    <button id='back' class="back btn">Back</button>
+    <button id='done' class="done btn btn-success">Post <i class='icon-white icon-ok-sign'></i></button>
 </div>
\ No newline at end of file
diff --git a/app/assets/templates/post-form.jst.hbs b/app/assets/templates/post-form.jst.hbs
index b1d1d1571..aa0857dcf 100644
--- a/app/assets/templates/post-form.jst.hbs
+++ b/app/assets/templates/post-form.jst.hbs
@@ -4,7 +4,7 @@
             <legend>
                 Make Something!
             </legend>
-            <textarea name="text" id='post_text' class="text span8" placeholder="Add Text"/>
+            <textarea name="text" id='post_text' class="text span8" placeholder="Add Text">{{text}}</textarea>
             <textarea id="text_with_markup" style="display:none;"/>
         </fieldset>
     </form>
diff --git a/app/assets/templates/services-selector.jst.hbs b/app/assets/templates/services-selector.jst.hbs
index 34ea91b0f..59540451d 100644
--- a/app/assets/templates/services-selector.jst.hbs
+++ b/app/assets/templates/services-selector.jst.hbs
@@ -1,10 +1,9 @@
 <!--*CSS MAGIC* CHECKBOX IS HIDDEN AND IS CHECKED BY CLICKING THE LABEL, CHANGE THIS AT YOUR OWN PERIL, RUN JASMINE AFTER-->
-<div class="magic-service-selector">
+<form class="magic-service-selector">
     {{#each services}}
-        <input id="service_toggle_{{this}}" type="checkbox" name="services" class="service" value="{{this}}"/>
-        <label for="service_toggle_{{this}}">
-            <img class="legacy-provider-image" src="/assets/social_media_logos/{{this}}-32x32.png" data-provider="{{this}}" data-url="/auth/{{this}}" title="Share on {{this}}" />
+        <input id="services[{{name}}]" type="checkbox" name="services[{{name}}]" class="services" value="{{name}}" {{#if checked}}checked="checked"{{/if}}/>
+        <label for="services[{{name}}]">
+            <img class="legacy-provider-image" src="/assets/social_media_logos/{{name}}-32x32.png" data-provider="{{name}}" data-url="/auth/{{name}}" title="Share on {{name}}" />
         </label>
     {{/each}}
-</div>
-
+</form>
diff --git a/features/step_definitions/trumpeter_steps.rb b/features/step_definitions/trumpeter_steps.rb
index 6aedd13a8..badebb462 100644
--- a/features/step_definitions/trumpeter_steps.rb
+++ b/features/step_definitions/trumpeter_steps.rb
@@ -155,4 +155,8 @@ end
 
 Then /^"([^"]*)" should be the first canvas frame$/ do |post_text|
   find(".canvas-frame").should have_content(post_text)
-end 
\ No newline at end of file
+end
+
+When /^I go back to the composer$/ do
+  click_button "Back"
+end
\ No newline at end of file
diff --git a/features/trumpeter.feature b/features/trumpeter.feature
index 634171b9c..1e7db9547 100644
--- a/features/trumpeter.feature
+++ b/features/trumpeter.feature
@@ -51,17 +51,24 @@ Feature: Creating a new post
     Then the post's default mood should be "Wallpaper"
     Then it should be a wallpaper frame with the background "button.gif"
     Then I should see "This is hella customized" in the framer preview
-    When I select the mood "Day"
-    Then the post's mood should be "Day"
+
+    When I select the mood "Newspaper"
+    Then the post's mood should be "Newspaper"
     And "button.gif" should be in the post's picture viewer
     And I should see "This is hella customized" in the framer preview
 
+    And I go back to the composer
+    And I write "It sure is a beautiful Day"
+    And I start the framing process
+    Then the post's mood should be "Newspaper"
+    And I should see "It sure is a beautiful Day" in the framer preview
+
     When I finalize my frame
     #on stream
-    Then "This is hella customized" should be the first canvas frame
-    When I click the "This is hella customized" post
+    Then "It sure is a beautiful Day" should be the first canvas frame
+    When I click the "It sure is a beautiful Day" post
     #on show page
-    And the post's mood should still be "Day"
+    And the post's mood should still be "Newspaper"
 
   Scenario: The Wallpaper mood
     When I write "This is a pithy status" with body "And this is a long body"
diff --git a/spec/javascripts/app/forms/picture_form_spec.js b/spec/javascripts/app/forms/picture_form_spec.js
index 3d1abe557..21a95ff83 100644
--- a/spec/javascripts/app/forms/picture_form_spec.js
+++ b/spec/javascripts/app/forms/picture_form_spec.js
@@ -5,7 +5,7 @@ describe("app.forms.Picture", function(){
       "content" : "supersecrettokenlol"
     }).prependTo("head")
 
-    this.form = new app.forms.Picture().render()
+    this.form = new app.forms.Picture({model: factory.statusMessage()}).render()
   });
 
   it("sets the authenticity token from the meta tag", function(){
diff --git a/spec/javascripts/app/pages/composer_spec.js b/spec/javascripts/app/pages/composer_spec.js
index 438c5abc6..c1b59eca7 100644
--- a/spec/javascripts/app/pages/composer_spec.js
+++ b/spec/javascripts/app/pages/composer_spec.js
@@ -22,29 +22,16 @@ describe("app.pages.Composer", function(){
         beforeEach(function(){
           this.page.$("form .text").val("Oh My")
           this.page.$("input.aspect_ids").val("public")
-
-          /* appending checkboxes */
-          this.page.$(".service-selector").append($("<input/>", {
-            value : "fakeBook",
-            checked : "checked",
-            "class" : "service",
-            "type" : "checkbox"
-          }))
-
-          this.page.$(".service-selector").append($("<input/>", {
-            value : "twitter",
-            checked : "checked",
-            "class" : "service",
-            "type" : "checkbox"
-          }))
+          this.page.$("input.services[value=facebook]").attr("checked", "checked")
+          this.page.$("input.services[value=twitter]").attr("checked", "checked")
         })
 
         it("instantiates a post on form submit", function(){
           this.page.$("button.next").click()
           waitsFor(function(){ return this.navigateSpy.wasCalled })
           runs(function(){
-            expect(this.page.model.get("aspect_ids")).toBe("public")
-            expect(this.page.model.get("services").length).toBe(2)
+            expect(this.page.model.get("aspect_ids")).toEqual(["public"])
+            expect(this.page.model.get("services")).toEqual(["facebook", "twitter"])
             expect(this.page.model.get("text")).toBe("Oh My")
           })
         })
diff --git a/spec/javascripts/app/views/aspects_dropdown_view_spec.js b/spec/javascripts/app/views/aspects_dropdown_view_spec.js
index c8b649240..b1a43a66d 100644
--- a/spec/javascripts/app/views/aspects_dropdown_view_spec.js
+++ b/spec/javascripts/app/views/aspects_dropdown_view_spec.js
@@ -1,122 +1,123 @@
-describe("app.views.AspectsDropdown", function(){
-  beforeEach(function(){
+describe("app.views.AspectsDropdown", function () {
+  function selectedAspects(view){
+    return _.pluck(view.$("input.aspect_ids").serializeArray(), "value")
+  }
+
+  beforeEach(function () {
     loginAs({
-      aspects : [
-        { id : 3, name : "sauce" },
-        { id : 5, name : "conf" },
-        { id : 7, name : "lovers" }
+      aspects:[
+        { id:3, name:"sauce" },
+        { id:5, name:"conf" },
+        { id:7, name:"lovers" }
       ]
     })
 
-    this.view = new app.views.AspectsDropdown
+    this.view = new app.views.AspectsDropdown({model:factory.statusMessage({aspect_ids:undefined})})
   })
 
-  describe("rendering", function(){
-    beforeEach(function(){
+  describe("rendering", function () {
+    beforeEach(function () {
       this.view.render()
     })
+    it("sets aspect_ids to 'public' by default", function () {
+      expect(this.view.$("input.aspect_ids:checked").val()).toBe("public")
+    })
 
-    it("defaults to Public Visibility", function(){
-      expect(this.view.$("input.aspect_ids").val()).toBe("public")
+    it("defaults to Public Visibility", function () {
+      expect(this.view.$("input.aspect_ids.public")).toBeChecked()
       expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("Public")
     })
 
-    describe("selecting Public", function(){
-      beforeEach(function(){
-       this.link = this.view.$("a[data-visibility='public']")
-       this.link.click()
-      })
-
-      it("sets aspect_ids to 'public'", function(){
-        expect(this.view.$("input.aspect_ids").val()).toBe("public")
-      })
-
-      it("sets the dropdown title to 'public'", function(){
-        expect(this.view.$(".dropdown-toggle .text").text()).toBe("Public")
-      })
-
-      it("adds the selected class to the link", function(){
-        expect(this.link.parent().hasClass("selected")).toBeTruthy();
-      })
+    it("sets aspect_ids to 'public'", function () {
+      expect(selectedAspects(this.view)).toEqual(["public"])
     })
 
-    describe("selecting All Aspects", function(){
-      beforeEach(function(){
-        this.link = this.view.$("a[data-visibility='all-aspects']")
-        this.link.click()
-      })
-
-      it("calls set aspect_ids to 'all'", function(){
-        expect(this.view.$("input.aspect_ids").val()).toBe("all_aspects")
-      })
-
-      it("sets the dropdown title to 'public'", function(){
-        expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("All Aspects")
-      })
-
-      it("adds the selected class to the link", function(){
-        expect(this.link.parent().hasClass("selected")).toBeTruthy();
-      })
+    it("sets the dropdown title to 'public'", function () {
+      expect(this.view.$(".dropdown-toggle .text").text()).toBe("Public")
     })
 
+    describe("setVisibility", function () {
+      function checkInput(input){
+        input.attr("checked", "checked")
+        input.trigger("change")
+      }
 
-    describe("selecting An Aspect", function(){
-      beforeEach(function(){
-        this.link = this.view.$("a:contains('lovers')")
-        this.link.click()
-      })
+      function uncheckInput(input){
+        input.attr("checked", false)
+        input.trigger("change")
+      }
 
-      it("sets the dropdown title to the aspect title", function(){
-        expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("lovers")
-      })
-
-      it("adds the selected class to the link", function(){
-        expect(this.link.parent().hasClass("selected")).toBeTruthy();
-      })
-
-      it("sets aspect_ids to to the aspect id", function(){
-        expect(this.view.$("input.aspect_ids").val()).toBe("7")
-      })
-
-      describe("selecting another aspect", function(){
-        beforeEach(function(){
-          this.view.$("a:contains('sauce')").click()
+      describe("selecting All Aspects", function () {
+        beforeEach(function () {
+          this.input = this.view.$("input#aspect_ids_all_aspects")
+          checkInput(this.input)
         })
 
-        it("sets aspect_ids to the selected aspects", function(){
-          expect(this.view.$("input.aspect_ids").val()).toBe("3,7")
+        it("calls set aspect_ids to 'all'", function () {
+          expect(selectedAspects(this.view)).toEqual(["all_aspects"])
         })
 
-        it("sets the button text to the number of selected aspects", function(){
-          expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("In 2 aspects")
-          this.view.$("a:contains('conf')").click()
-          expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("In 3 aspects")
-          this.view.$("a:contains('conf')").click()
-          expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("In 2 aspects")
+        it("sets the dropdown title to 'public'", function () {
+          expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("All Aspects")
+        })
+      })
 
+      describe("selecting An Aspect", function () {
+        beforeEach(function () {
+          this.input = this.view.$("input[name='lovers']")
+          checkInput(this.input)
         })
 
-        describe("deselecting another aspect", function(){
-          it("removes the clicked aspect", function(){
-            expect(this.view.$("input.aspect_ids").val()).toBe("3,7")
+        it("sets the dropdown title to the aspect title", function () {
+          expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("lovers")
+        })
+
+        it("sets aspect_ids to to the aspect id", function () {
+          expect(selectedAspects(this.view)).toEqual(["7"])
+        })
+
+        describe("selecting another aspect", function () {
+          beforeEach(function () {
+            this.input = this.view.$("input[name='sauce']")
+            checkInput(this.input)
+          })
+
+          it("sets aspect_ids to the selected aspects", function () {
+            expect(selectedAspects(this.view)).toEqual(["3", "7"])
+          })
+
+          it("sets the button text to the number of selected aspects", function () {
+            expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("In 2 aspects")
+            checkInput(this.view.$("input[name='conf']"))
+            expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("In 3 aspects")
+            uncheckInput(this.view.$("input[name='conf']"))
             expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("In 2 aspects")
-            this.view.$("a:contains('lovers')").click()
-            expect(this.view.$("input.aspect_ids").val()).toBe("3")
-            expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("sauce")
           })
-        })
 
-        describe("selecting all_aspects", function(){
-          it("sets aspect_ids to all_aspects", function(){
-            this.view.$("a[data-visibility='all-aspects']").click()
-            expect(this.view.$("input.aspect_ids").val()).toBe("all_aspects")
+          describe("deselecting another aspect", function () {
+            it("removes the clicked aspect", function () {
+              expect(selectedAspects(this.view)).toEqual(["3", "7"])
+              expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("In 2 aspects")
+              uncheckInput(this.view.$("input[name='lovers']"))
+              expect(selectedAspects(this.view)).toEqual(["3"])
+              expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("sauce")
+            })
           })
-        })
 
-        describe("selecting public", function(){
-          it("sets aspect_ids to public", function(){
-            this.view.$("a[data-visibility='public']").click()
-            expect(this.view.$("input.aspect_ids").val()).toBe("public")
+          describe("selecting all_aspects", function () {
+            it("sets aspect_ids to all_aspects", function () {
+              expect(selectedAspects(this.view)).toEqual(["3", "7"])
+              checkInput(this.view.$("input[name='All Aspects']"))
+              expect(selectedAspects(this.view)).toEqual(["all_aspects"])
+            })
+          })
+
+          describe("selecting public", function () {
+            it("sets aspect_ids to public", function () {
+              expect(selectedAspects(this.view)).toEqual(["3", "7"])
+              checkInput(this.view.$("input[name='Public']"))
+              expect(selectedAspects(this.view)).toEqual(["public"])
+            })
           })
         })
       })
diff --git a/spec/javascripts/app/views/services_selector_view_spec.js b/spec/javascripts/app/views/services_selector_view_spec.js
index 93b8f4328..2857825d2 100644
--- a/spec/javascripts/app/views/services_selector_view_spec.js
+++ b/spec/javascripts/app/views/services_selector_view_spec.js
@@ -6,7 +6,7 @@ describe("app.views.ServicesSelector", function(){
       ]
     });
 
-    this.view = new app.views.ServicesSelector();
+    this.view = new app.views.ServicesSelector({model : factory.statusMessage()});
   });
 
   describe("rendering", function(){
@@ -23,10 +23,10 @@ describe("app.views.ServicesSelector", function(){
     // this tests the crazy css we have in a bassackwards way
     // check out toggling the services on the new publisher and make sure it works if you change stuff.
     it("selects the checkbox when the image is clicked", function(){
-      expect($("label[for=service_toggle_facebook] img").is(".magic-service-selector input:not(:checked) + label img")).toBeTruthy();
+      expect($("label[for='services[facebook]'] img").is(".magic-service-selector input:not(:checked) + label img")).toBeTruthy();
       this.view.$("input[value='facebook']").select()
 
-      expect($("label[for=service_toggle_facebook] img").is(".magic-service-selector input:not(:checked) + label img")).toBeFalsy();
+      expect($("label[for='services[facebook]'] img").is(".magic-service-selector input:not(:checked) + label img")).toBeFalsy();
     });
   });
 
diff --git a/spec/javascripts/app/views/template_picker_view_spec.js b/spec/javascripts/app/views/template_picker_view_spec.js
index 0481f70b2..fe015d216 100644
--- a/spec/javascripts/app/views/template_picker_view_spec.js
+++ b/spec/javascripts/app/views/template_picker_view_spec.js
@@ -5,8 +5,9 @@ describe("app.views.TemplatePicker", function(){
   })
 
   describe("initialization", function(){
-    it("calls setFrameName on the model", function(){
+    it("calls setFrameName on the model when there is no frame_name", function(){
       spyOn(this.model, 'setFrameName')
+      this.model.unset("frame_name")
       new app.views.TemplatePicker({model:this.model})
       expect(this.model.setFrameName).toHaveBeenCalled()
     })