2020-05-14 22:04:08 +08:00
|
|
|
import I18n from "I18n";
|
2018-08-31 03:23:15 +08:00
|
|
|
import componentTest from "helpers/component-test";
|
2020-01-17 01:56:53 +08:00
|
|
|
import Theme, { THEMES, COMPONENTS } from "admin/models/theme";
|
2018-08-31 03:23:15 +08:00
|
|
|
|
|
|
|
moduleForComponent("themes-list", { integration: true });
|
|
|
|
|
|
|
|
componentTest("current tab is themes", {
|
|
|
|
template:
|
|
|
|
"{{themes-list themes=themes components=components currentTab=currentTab}}",
|
|
|
|
beforeEach() {
|
2020-08-20 03:41:11 +08:00
|
|
|
this.themes = [1, 2, 3, 4, 5].map((num) =>
|
|
|
|
Theme.create({ name: `Theme ${num}` })
|
|
|
|
);
|
|
|
|
this.components = [1, 2, 3, 4, 5].map((num) =>
|
|
|
|
Theme.create({
|
|
|
|
name: `Child ${num}`,
|
|
|
|
component: true,
|
|
|
|
parentThemes: [this.themes[num - 1]],
|
|
|
|
parent_themes: [1, 2, 3, 4, 5],
|
|
|
|
})
|
|
|
|
);
|
2018-08-31 03:23:15 +08:00
|
|
|
this.setProperties({
|
2020-08-20 03:41:11 +08:00
|
|
|
themes: this.themes,
|
|
|
|
components: this.components,
|
2018-08-31 03:23:15 +08:00
|
|
|
currentTab: THEMES,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
test(assert) {
|
|
|
|
assert.equal(
|
2019-02-25 23:04:55 +08:00
|
|
|
find(".themes-tab").hasClass("active"),
|
2018-08-31 03:23:15 +08:00
|
|
|
true,
|
|
|
|
"themes tab is active"
|
|
|
|
);
|
|
|
|
assert.equal(
|
2019-02-25 23:04:55 +08:00
|
|
|
find(".components-tab").hasClass("active"),
|
2018-08-31 03:23:15 +08:00
|
|
|
false,
|
|
|
|
"components tab is not active"
|
|
|
|
);
|
|
|
|
|
|
|
|
assert.equal(
|
2019-02-25 23:04:55 +08:00
|
|
|
find(".inactive-indicator").index(),
|
2018-08-31 03:23:15 +08:00
|
|
|
-1,
|
|
|
|
"there is no inactive themes separator when all themes are inactive"
|
|
|
|
);
|
2019-02-25 23:04:55 +08:00
|
|
|
assert.equal(find(".themes-list-item").length, 5, "displays all themes");
|
2018-08-31 03:23:15 +08:00
|
|
|
|
2020-08-20 03:41:11 +08:00
|
|
|
[2, 3].forEach((num) => this.themes[num].set("user_selectable", true));
|
|
|
|
this.themes[4].set("default", true);
|
|
|
|
this.set("themes", this.themes);
|
|
|
|
const names = [4, 2, 3, 0, 1].map((num) => this.themes[num].get("name")); // default theme always on top, followed by user-selectable ones and then the rest
|
2018-08-31 03:23:15 +08:00
|
|
|
assert.deepEqual(
|
2019-02-25 23:04:55 +08:00
|
|
|
Array.from(find(".themes-list-item").find(".name")).map((node) =>
|
2018-08-31 03:23:15 +08:00
|
|
|
node.innerText.trim()
|
|
|
|
),
|
|
|
|
names,
|
|
|
|
"sorts themes correctly"
|
|
|
|
);
|
|
|
|
assert.equal(
|
2019-02-25 23:04:55 +08:00
|
|
|
find(".inactive-indicator").index(),
|
2018-08-31 03:23:15 +08:00
|
|
|
3,
|
|
|
|
"the separator is in the right location"
|
|
|
|
);
|
|
|
|
|
2020-08-20 03:41:11 +08:00
|
|
|
this.themes.forEach((theme) => theme.set("user_selectable", true));
|
|
|
|
this.set("themes", this.themes);
|
2018-08-31 03:23:15 +08:00
|
|
|
assert.equal(
|
2019-02-25 23:04:55 +08:00
|
|
|
find(".inactive-indicator").index(),
|
2018-08-31 03:23:15 +08:00
|
|
|
-1,
|
|
|
|
"there is no inactive themes separator when all themes are user-selectable"
|
|
|
|
);
|
|
|
|
|
|
|
|
this.set("themes", []);
|
|
|
|
assert.equal(
|
2019-02-25 23:04:55 +08:00
|
|
|
find(".themes-list-item").length,
|
2018-08-31 03:23:15 +08:00
|
|
|
1,
|
|
|
|
"shows one entry with a message when there is nothing to display"
|
|
|
|
);
|
|
|
|
assert.equal(
|
2019-02-25 23:04:55 +08:00
|
|
|
find(".themes-list-item span.empty").text().trim(),
|
2018-08-31 03:23:15 +08:00
|
|
|
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() {
|
2020-08-20 03:41:11 +08:00
|
|
|
this.themes = [1, 2, 3, 4, 5].map((num) =>
|
|
|
|
Theme.create({ name: `Theme ${num}` })
|
|
|
|
);
|
|
|
|
this.components = [1, 2, 3, 4, 5].map((num) =>
|
|
|
|
Theme.create({
|
|
|
|
name: `Child ${num}`,
|
|
|
|
component: true,
|
|
|
|
parentThemes: [this.themes[num - 1]],
|
|
|
|
parent_themes: [1, 2, 3, 4, 5],
|
|
|
|
})
|
|
|
|
);
|
2018-08-31 03:23:15 +08:00
|
|
|
this.setProperties({
|
2020-08-20 03:41:11 +08:00
|
|
|
themes: this.themes,
|
|
|
|
components: this.components,
|
2018-08-31 03:23:15 +08:00
|
|
|
currentTab: COMPONENTS,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
test(assert) {
|
|
|
|
assert.equal(
|
2019-02-25 23:04:55 +08:00
|
|
|
find(".components-tab").hasClass("active"),
|
2018-08-31 03:23:15 +08:00
|
|
|
true,
|
|
|
|
"components tab is active"
|
|
|
|
);
|
|
|
|
assert.equal(
|
2019-02-25 23:04:55 +08:00
|
|
|
find(".themes-tab").hasClass("active"),
|
2018-08-31 03:23:15 +08:00
|
|
|
false,
|
|
|
|
"themes tab is not active"
|
|
|
|
);
|
|
|
|
|
|
|
|
assert.equal(
|
2019-02-25 23:04:55 +08:00
|
|
|
find(".inactive-indicator").index(),
|
2018-08-31 03:23:15 +08:00
|
|
|
-1,
|
|
|
|
"there is no separator"
|
|
|
|
);
|
|
|
|
assert.equal(
|
2019-02-25 23:04:55 +08:00
|
|
|
find(".themes-list-item").length,
|
2018-08-31 03:23:15 +08:00
|
|
|
5,
|
|
|
|
"displays all components"
|
|
|
|
);
|
|
|
|
|
|
|
|
this.set("components", []);
|
|
|
|
assert.equal(
|
2019-02-25 23:04:55 +08:00
|
|
|
find(".themes-list-item").length,
|
2018-08-31 03:23:15 +08:00
|
|
|
1,
|
|
|
|
"shows one entry with a message when there is nothing to display"
|
|
|
|
);
|
|
|
|
assert.equal(
|
2019-02-25 23:04:55 +08:00
|
|
|
find(".themes-list-item span.empty").text().trim(),
|
2018-08-31 03:23:15 +08:00
|
|
|
I18n.t("admin.customize.theme.empty"),
|
|
|
|
"displays the right message"
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|