FIX: Updating the category was not updating the UI

.jshintrc

@@ -35,6 +35,7 @@
     "exists",
     "visible",
     "invisible",
+    "selectDropdown",
     "asyncTestDiscourse",
     "fixture",
     "find",

app/assets/javascripts/discourse/models/topic.js.es6

@@ -40,18 +40,18 @@ const Topic = RestModel.extend({
     return ({ type: 'topic', id: this.get('id') });
   }.property('id'),
 
-  category: function() {
+  _categoryIdChanged: function() {
-    const categoryId = this.get('category_id');
+    this.set('category', Discourse.Category.findById(this.get('category_id')));
-    if (categoryId) {
+  }.observes('category_id').on('init'),
-      return Discourse.Category.list().findProperty('id', categoryId);
-    }
 
+  _categoryNameChanged: function() {
     const categoryName = this.get('categoryName');
+    let category;
     if (categoryName) {
-      return Discourse.Category.list().findProperty('name', categoryName);
+      category = Discourse.Category.list().findProperty('name', categoryName);
     }
-    return null;
+    this.set('category', category);
-  }.property('category_id', 'categoryName'),
+  }.observes('categoryName'),
 
   categoryClass: function() {
     return 'category-' + this.get('category.fullSlug');
@@ -407,7 +407,6 @@ Topic.reopenClass({
       // The title can be cleaned up server side
       props.title = result.basic_topic.title;
       props.fancy_title = result.basic_topic.fancy_title;
-
       topic.setProperties(props);
     });
   },

app/assets/javascripts/discourse/templates/topic.hbs

@@ -22,8 +22,8 @@
 
             {{plugin-outlet "edit-topic"}}
 
-            {{d-button action="finishedEditingTopic" class="btn-primary btn-small no-text" icon="check"}}
+            {{d-button action="finishedEditingTopic" class="btn-primary btn-small no-text submit-edit" icon="check"}}
-            {{d-button action="cancelEditingTopic" class="btn-small no-text" icon="times"}}
+            {{d-button action="cancelEditingTopic" class="btn-small no-text cancel-edit" icon="times"}}
           {{else}}
             <h1>
               {{#unless is_warning}}
@@ -32,7 +32,7 @@
 
               {{#if details.loaded}}
                 {{topic-status topic=model}}
-                <a href='{{unbound url}}' {{action "jumpTop"}}>
+                <a href='{{unbound url}}' {{action "jumpTop"}} class='fancy-title'>
                   {{{fancy_title}}}
                 </a>
               {{/if}}

test/javascripts/acceptance/topic-anonymous-test.js.es6

@@ -0,0 +1,17 @@
+import { acceptance } from "helpers/qunit-helpers";
+acceptance("Topic - Anonymous");
+
+test("Enter a Topic", () => {
+  visit("/t/internationalization-localization/280/1");
+  andThen(() => {
+    ok(exists("#topic"), "The topic was rendered");
+    ok(exists("#topic .cooked"), "The topic has cooked posts");
+  });
+});
+
+test("Enter without an id", () => {
+  visit("/t/internationalization-localization");
+  andThen(() => {
+    ok(exists("#topic"), "The topic was rendered");
+  });
+});

test/javascripts/acceptance/topic-test.js.es6

@@ -1,17 +1,33 @@
 import { acceptance } from "helpers/qunit-helpers";
-acceptance("View Topic");
+acceptance("Topic", { loggedIn: true });
+
+test("Showing and hiding the edit controls", () => {
+  visit("/t/internationalization-localization/280");
+
+  click('#topic-title .fa-pencil');
 
-test("Enter a Topic", () => {
-  visit("/t/internationalization-localization/280/1");
   andThen(() => {
-    ok(exists("#topic"), "The topic was rendered");
+    ok(exists('#edit-title'), 'it shows the editing controls');
-    ok(exists("#topic .cooked"), "The topic has cooked posts");
+  });
+
+  fillIn('#edit-title', 'this is the new title');
+  click('#topic-title .cancel-edit');
+  andThen(() => {
+    ok(!exists('#edit-title'), 'it hides the editing controls');
   });
 });
 
-test("Enter without an id", () => {
+test("Updating the topic title and category", () => {
-  visit("/t/internationalization-localization");
+  visit("/t/internationalization-localization/280");
+  click('#topic-title .fa-pencil');
+
+  fillIn('#edit-title', 'this is the new title');
+  selectDropdown('.category-combobox', 4);
+
+  click('#topic-title .submit-edit');
+
   andThen(() => {
-    ok(exists("#topic"), "The topic was rendered");
+    equal(find('#topic-title .badge-category').text(), 'faq', 'it displays the new category');
+    equal(find('.fancy-title').text().trim(), 'this is the new title', 'it displays the new title');
   });
 });

test/javascripts/helpers/assertions.js

@@ -28,6 +28,12 @@ function visible(selector) {
   return find(selector + ":visible").length > 0;
 }
 
+Ember.Test.registerAsyncHelper('selectDropdown', function(app, selector, itemId) {
+  var $select2 = find(selector);
+  $select2.select2('val', itemId.toString());
+  $select2.trigger("change");
+});
+
 function invisible(selector) {
   var $items = find(selector + ":visible");
   return $items.length === 0 ||