UX: improvements to admin theme UI

test/javascripts/admin/components/themes-list-item-test.js.es6

@@ -0,0 +1,84 @@
+import componentTest from "helpers/component-test";
+import Theme from "admin/models/theme";
+
+moduleForComponent("themes-list-item", { integration: true });
+
+componentTest("default theme", {
+  template: "{{themes-list-item theme=theme}}",
+  beforeEach() {
+    this.set("theme", Theme.create({ name: "Test", default: true }));
+  },
+
+  test(assert) {
+    assert.expect(1);
+    assert.equal(this.$(".fa-check").length, 1, "shows default theme icon");
+  }
+});
+
+componentTest("pending updates", {
+  template: "{{themes-list-item theme=theme}}",
+  beforeEach() {
+    this.set(
+      "theme",
+      Theme.create({ name: "Test", remote_theme: { commits_behind: 6 } })
+    );
+  },
+
+  test(assert) {
+    assert.expect(1);
+    assert.equal(this.$(".fa-refresh").length, 1, "shows pending update icon");
+  }
+});
+
+componentTest("borken theme", {
+  template: "{{themes-list-item theme=theme}}",
+  beforeEach() {
+    this.set(
+      "theme",
+      Theme.create({
+        name: "Test",
+        theme_fields: [{ name: "scss", type_id: 1, error: "something" }]
+      })
+    );
+  },
+
+  test(assert) {
+    assert.expect(1);
+    assert.equal(
+      this.$(".fa-exclamation-circle").length,
+      1,
+      "shows broken theme icon"
+    );
+  }
+});
+
+const childrenList = [1, 2, 3, 4, 5].map(num =>
+  Theme.create({ name: `Child ${num}`, component: true })
+);
+
+componentTest("with children", {
+  template: "{{themes-list-item theme=theme}}",
+
+  beforeEach() {
+    this.set(
+      "theme",
+      Theme.create({ name: "Test", childThemes: childrenList })
+    );
+  },
+
+  test(assert) {
+    assert.expect(2);
+    assert.deepEqual(
+      Array.from(this.$(".component")).map(node => node.innerText.trim()),
+      childrenList.splice(0, 4).map(theme => theme.get("name")),
+      "lists the first 4 children"
+    );
+    assert.deepEqual(
+      this.$(".others-count")
+        .text()
+        .trim(),
+      I18n.t("admin.customize.theme.and_x_more", { count: 1 }),
+      "shows count of remaining children"
+    );
+  }
+});

test/javascripts/admin/components/themes-list-test.js.es6

@@ -0,0 +1,132 @@
+import componentTest from "helpers/component-test";
+import { default as Theme, THEMES, COMPONENTS } from "admin/models/theme";
+
+moduleForComponent("themes-list", { integration: true });
+
+const themes = [1, 2, 3, 4, 5].map(num =>
+  Theme.create({ name: `Theme ${num}` })
+);
+const components = [1, 2, 3, 4, 5].map(num =>
+  Theme.create({ name: `Child ${num}`, component: true })
+);
+
+componentTest("current tab is themes", {
+  template:
+    "{{themes-list themes=themes components=components currentTab=currentTab}}",
+  beforeEach() {
+    this.setProperties({
+      themes,
+      components,
+      currentTab: THEMES
+    });
+  },
+
+  test(assert) {
+    assert.equal(
+      this.$(".themes-tab").hasClass("active"),
+      true,
+      "themes tab is active"
+    );
+    assert.equal(
+      this.$(".components-tab").hasClass("active"),
+      false,
+      "components tab is not active"
+    );
+
+    assert.equal(
+      this.$(".inactive-indicator").index(),
+      -1,
+      "there is no inactive themes separator when all themes are inactive"
+    );
+    assert.equal(this.$(".themes-list-item").length, 5, "displays all themes");
+
+    [2, 3].forEach(num => themes[num].set("user_selectable", true));
+    themes[4].set("default", true);
+    this.set("themes", themes);
+    const names = [4, 2, 3, 0, 1].map(num => themes[num].get("name")); // default theme always on top, followed by user-selectable ones and then the rest
+    assert.deepEqual(
+      Array.from(this.$(".themes-list-item").find(".name")).map(node =>
+        node.innerText.trim()
+      ),
+      names,
+      "sorts themes correctly"
+    );
+    assert.equal(
+      this.$(".inactive-indicator").index(),
+      3,
+      "the separator is in the right location"
+    );
+
+    themes.forEach(theme => theme.set("user_selectable", true));
+    this.set("themes", themes);
+    assert.equal(
+      this.$(".inactive-indicator").index(),
+      -1,
+      "there is no inactive themes separator when all themes are user-selectable"
+    );
+
+    this.set("themes", []);
+    assert.equal(
+      this.$(".themes-list-item").length,
+      1,
+      "shows one entry with a message when there is nothing to display"
+    );
+    assert.equal(
+      this.$(".themes-list-item span.empty")
+        .text()
+        .trim(),
+      I18n.t("admin.customize.theme.empty"),
+      "displays the right message"
+    );
+  }
+});
+
+componentTest("current tab is components", {
+  template:
+    "{{themes-list themes=themes components=components currentTab=currentTab}}",
+  beforeEach() {
+    this.setProperties({
+      themes,
+      components,
+      currentTab: COMPONENTS
+    });
+  },
+
+  test(assert) {
+    assert.equal(
+      this.$(".components-tab").hasClass("active"),
+      true,
+      "components tab is active"
+    );
+    assert.equal(
+      this.$(".themes-tab").hasClass("active"),
+      false,
+      "themes tab is not active"
+    );
+
+    assert.equal(
+      this.$(".inactive-indicator").index(),
+      -1,
+      "there is no separator"
+    );
+    assert.equal(
+      this.$(".themes-list-item").length,
+      5,
+      "displays all components"
+    );
+
+    this.set("components", []);
+    assert.equal(
+      this.$(".themes-list-item").length,
+      1,
+      "shows one entry with a message when there is nothing to display"
+    );
+    assert.equal(
+      this.$(".themes-list-item span.empty")
+        .text()
+        .trim(),
+      I18n.t("admin.customize.theme.empty"),
+      "displays the right message"
+    );
+  }
+});

test/javascripts/admin/controllers/admin-customize-themes-test.js.es6

@@ -29,8 +29,8 @@ QUnit.test("can list themes correctly", function(assert) {
 
   assert.deepEqual(
     controller.get("fullThemes").map(t => t.get("name")),
-    [defaultTheme, userTheme, strayTheme1, strayTheme2].map(t => t.get("name")),
-    "sorts themes correctly"
+    [strayTheme2, strayTheme1, userTheme, defaultTheme].map(t => t.get("name")),
+    "returns a list of themes without components"
   );
 
   assert.deepEqual(