Refactor and add tests for category editing

app/assets/javascripts/discourse/controllers/edit-category.js.es6

@@ -100,16 +100,12 @@ export default ObjectController.extend(ModalFunctionality, {
     return name.trim().length > 0 ? name : I18n.t("preview");
   }.property('name'),
 
-  buttonTitle: function() {
-    if (this.get('saving')) return I18n.t("saving");
-    if (this.get('model.isUncategorizedCategory')) return I18n.t("save");
-    return (this.get('model.id') ? I18n.t("category.save") : I18n.t("category.create"));
+  saveLabel: function() {
+    if (this.get('saving')) return "saving";
+    if (this.get('model.isUncategorizedCategory')) return "save";
+    return this.get('model.id') ? "category.save" : "category.create";
   }.property('saving', 'model.id'),
 
-  deleteButtonTitle: function() {
-    return I18n.t('category.delete');
-  }.property(),
-
   showDescription: function() {
     return !this.get('model.isUncategorizedCategory') && this.get('model.id');
   }.property('model.isUncategorizedCategory', 'model.id'),
@@ -149,7 +145,6 @@ export default ObjectController.extend(ModalFunctionality, {
         self.send('closeModal');
         model.setProperties({slug: result.category.slug, id: result.category.id });
         Discourse.URL.redirectTo("/c/" + Discourse.Category.slugFor(model));
-
       }).catch(function(error) {
         if (error && error.responseText) {
           self.flash($.parseJSON(error.responseText).errors[0], 'error');

app/assets/javascripts/discourse/templates/modal/edit-category-general.hbs

@@ -53,7 +53,7 @@
       <div class='input-prepend input-append'>
         <span class='color-title'>{{i18n 'category.foreground_color'}}:</span>
         <span class='add-on'>#</span>{{text-field value=model.text_color placeholderKey="category.color_placeholder" maxlength="6"}}
-        {{color-picker colors=foregroundColors value=model.text_color}}
+        {{color-picker colors=foregroundColors value=model.text_color id='edit-text-color'}}
       </div>
     </div>
   </section>

app/assets/javascripts/discourse/templates/modal/edit-category.hbs

@@ -9,15 +9,20 @@
   </ul>
 
   <div class="modal-body">
-    {{#each tab in view.panels}}
+    {{#each view.panels as |tab|}}
       {{view 'edit-category-panel' tab=tab}}
     {{/each}}
   </div>
 
   <div class="modal-footer">
-    <button class='btn btn-primary' {{bind-attr disabled="disabled"}} {{action "saveCategory"}}>{{buttonTitle}}</button>
+    {{d-button id="save-category" class="btn-primary" disabled=disabled action="saveCategory" label=saveLabel}}
+
     {{#if model.can_delete}}
-      <button class='btn btn-danger pull-right' {{bind-attr disabled="deleteDisabled"}} {{action "deleteCategory"}}><i class="fa fa-trash-o"></i>{{deleteButtonTitle}}</button>
+      {{d-button class="btn-danger pull-right"
+                 disabled=deleteDisabled
+                 action="deleteCategory"
+                 icon="trash-o"
+                 label="category.delete"}}
     {{else}}
       <div class="cannot_delete_reason">
         {{{model.cannot_delete_reason}}}

test/javascripts/acceptance/category-edit-test.js.es6

@@ -2,7 +2,7 @@ import { acceptance } from "helpers/qunit-helpers";
 
 acceptance("Category Edit", { loggedIn: true });
 
-test("Can edit a category", (assert) => {
+test("Can open the category modal", (assert) => {
   visit("/c/bug");
 
   click('.edit-category');
@@ -15,3 +15,15 @@ test("Can edit a category", (assert) => {
     assert.ok(!visible('#discourse-modal'), 'it closes the modal');
   });
 });
+
+test("Change the category color", (assert) => {
+  visit("/c/bug");
+
+  click('.edit-category');
+  fillIn('#edit-text-color', '#ff0000');
+  click('#save-category');
+  andThen(() => {
+    assert.ok(!visible('#discourse-modal'), 'it closes the modal');
+    assert.equal(Discourse.URL.redirectedTo, '/c/bug', 'it does one of the rare full page redirects');
+  });
+});

test/javascripts/helpers/create-pretender.js.es6

@@ -119,6 +119,11 @@ export default function() {
 
     this.get('/users/:username/staff-info.json', () => response({}));
 
+    this.put('/categories/:category_id', function(request) {
+      const category = parsePostData(request.requestBody);
+      return response({category});
+    });
+
     this.get('/draft.json', function() {
       return response({});
     });

test/javascripts/test_helper.js

@@ -90,6 +90,12 @@ QUnit.testStart(function(ctx) {
   Discourse.BaseUrl = "localhost";
   Discourse.User.resetCurrent();
   Discourse.Site.resetCurrent(Discourse.Site.create(fixtures['site.json'].site));
+
+  Discourse.URL.redirectedTo = null;
+  Discourse.URL.redirectTo = function(url) {
+    Discourse.URL.redirectedTo = url;
+  };
+
   PreloadStore.reset();
 
   window.sandbox = sinon.sandbox.create();