mirror of
https://github.com/discourse/discourse.git
synced 2024-12-06 06:23:42 +08:00
8c03868808
In virtualdom, element 'properties' are not completely synonymous with element 'attributes'. In particular, `data-` properties will not be rendered as attributes. To ensure all attributes are passed through, we need to include them under an `attributes` key. For more info, see https://github.com/Matt-Esch/virtual-dom/blob/master/docs/vnode.md#custom-attributes-data-
419 lines
9.2 KiB
JavaScript
419 lines
9.2 KiB
JavaScript
import I18n from "I18n";
|
|
import { next } from "@ember/runloop";
|
|
import { moduleForWidget, widgetTest } from "helpers/widget-test";
|
|
import { createWidget } from "discourse/widgets/widget";
|
|
import { withPluginApi } from "discourse/lib/plugin-api";
|
|
import { Promise } from "rsvp";
|
|
import hbs from "discourse/widgets/hbs-compiler";
|
|
|
|
moduleForWidget("base");
|
|
|
|
widgetTest("widget attributes are passed in via args", {
|
|
template: `{{mount-widget widget="hello-test" args=args}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("hello-test", {
|
|
tagName: "div.test",
|
|
template: hbs`Hello {{attrs.name}}`
|
|
});
|
|
|
|
this.set("args", { name: "Robin" });
|
|
},
|
|
|
|
test(assert) {
|
|
assert.equal(find(".test").text(), "Hello Robin");
|
|
}
|
|
});
|
|
|
|
widgetTest("hbs template - no tagName", {
|
|
template: `{{mount-widget widget="hbs-test" args=args}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("hbs-test", {
|
|
template: hbs`<div class='test'>Hello {{attrs.name}}</div>`
|
|
});
|
|
|
|
this.set("args", { name: "Robin" });
|
|
},
|
|
|
|
test(assert) {
|
|
assert.equal(find("div.test").text(), "Hello Robin");
|
|
}
|
|
});
|
|
|
|
widgetTest("hbs template - with tagName", {
|
|
template: `{{mount-widget widget="hbs-test" args=args}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("hbs-test", {
|
|
tagName: "div.test",
|
|
template: hbs`Hello {{attrs.name}}`
|
|
});
|
|
|
|
this.set("args", { name: "Robin" });
|
|
},
|
|
|
|
test(assert) {
|
|
assert.equal(find("div.test").text(), "Hello Robin");
|
|
}
|
|
});
|
|
|
|
widgetTest("hbs template - with data attributes", {
|
|
template: `{{mount-widget widget="hbs-test" args=args}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("hbs-test", {
|
|
template: hbs`<div class='mydiv' data-my-test='hello world'></div>`
|
|
});
|
|
},
|
|
|
|
test(assert) {
|
|
assert.equal(find("div.mydiv").data("my-test"), "hello world");
|
|
}
|
|
});
|
|
|
|
widgetTest("buildClasses", {
|
|
template: `{{mount-widget widget="classname-test" args=args}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("classname-test", {
|
|
tagName: "div.test",
|
|
|
|
buildClasses(attrs) {
|
|
return ["static", attrs.dynamic];
|
|
}
|
|
});
|
|
|
|
this.set("args", { dynamic: "cool-class" });
|
|
},
|
|
|
|
test(assert) {
|
|
assert.ok(find(".test.static.cool-class").length, "it has all the classes");
|
|
}
|
|
});
|
|
|
|
widgetTest("buildAttributes", {
|
|
template: `{{mount-widget widget="attributes-test" args=args}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("attributes-test", {
|
|
tagName: "div.test",
|
|
|
|
buildAttributes(attrs) {
|
|
return { "data-evil": "trout", "aria-label": attrs.label };
|
|
}
|
|
});
|
|
|
|
this.set("args", { label: "accessibility" });
|
|
},
|
|
|
|
test(assert) {
|
|
assert.ok(find(".test[data-evil=trout]").length);
|
|
assert.ok(find(".test[aria-label=accessibility]").length);
|
|
}
|
|
});
|
|
|
|
widgetTest("buildId", {
|
|
template: `{{mount-widget widget="id-test" args=args}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("id-test", {
|
|
buildId(attrs) {
|
|
return `test-${attrs.id}`;
|
|
}
|
|
});
|
|
|
|
this.set("args", { id: 1234 });
|
|
},
|
|
|
|
test(assert) {
|
|
assert.ok(find("#test-1234").length);
|
|
}
|
|
});
|
|
|
|
widgetTest("widget state", {
|
|
template: `{{mount-widget widget="state-test"}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("state-test", {
|
|
tagName: "button.test",
|
|
buildKey: () => `button-test`,
|
|
template: hbs`{{state.clicks}} clicks`,
|
|
|
|
defaultState() {
|
|
return { clicks: 0 };
|
|
},
|
|
|
|
click() {
|
|
this.state.clicks++;
|
|
}
|
|
});
|
|
},
|
|
|
|
async test(assert) {
|
|
assert.ok(find("button.test").length, "it renders the button");
|
|
assert.equal(find("button.test").text(), "0 clicks");
|
|
|
|
await click(find("button"));
|
|
assert.equal(find("button.test").text(), "1 clicks");
|
|
}
|
|
});
|
|
|
|
widgetTest("widget update with promise", {
|
|
template: `{{mount-widget widget="promise-test"}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("promise-test", {
|
|
tagName: "button.test",
|
|
buildKey: () => "promise-test",
|
|
template: hbs`
|
|
{{#if state.name}}
|
|
{{state.name}}
|
|
{{else}}
|
|
No name
|
|
{{/if}}
|
|
`,
|
|
|
|
click() {
|
|
return new Promise(resolve => {
|
|
next(() => {
|
|
this.state.name = "Robin";
|
|
resolve();
|
|
});
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
async test(assert) {
|
|
assert.equal(
|
|
find("button.test")
|
|
.text()
|
|
.trim(),
|
|
"No name"
|
|
);
|
|
|
|
await click(find("button"));
|
|
assert.equal(
|
|
find("button.test")
|
|
.text()
|
|
.trim(),
|
|
"Robin"
|
|
);
|
|
}
|
|
});
|
|
|
|
widgetTest("widget attaching", {
|
|
template: `{{mount-widget widget="attach-test"}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("test-embedded", { tagName: "div.embedded" });
|
|
|
|
createWidget("attach-test", {
|
|
tagName: "div.container",
|
|
template: hbs`{{attach widget="test-embedded" attrs=attrs}}`
|
|
});
|
|
},
|
|
|
|
test(assert) {
|
|
assert.ok(find(".container").length, "renders container");
|
|
assert.ok(find(".container .embedded").length, "renders attached");
|
|
}
|
|
});
|
|
|
|
widgetTest("magic attaching by name", {
|
|
template: `{{mount-widget widget="attach-test"}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("test-embedded", { tagName: "div.embedded" });
|
|
|
|
createWidget("attach-test", {
|
|
tagName: "div.container",
|
|
template: hbs`{{test-embedded attrs=attrs}}`
|
|
});
|
|
},
|
|
|
|
test(assert) {
|
|
assert.ok(find(".container").length, "renders container");
|
|
assert.ok(find(".container .embedded").length, "renders attached");
|
|
}
|
|
});
|
|
|
|
widgetTest("custom attrs to a magic attached widget", {
|
|
template: `{{mount-widget widget="attach-test"}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("testing", {
|
|
tagName: "span.value",
|
|
template: hbs`{{attrs.value}}`
|
|
});
|
|
|
|
createWidget("attach-test", {
|
|
tagName: "div.container",
|
|
template: hbs`{{testing value=(concat "hello" " " "world")}}`
|
|
});
|
|
},
|
|
|
|
test(assert) {
|
|
assert.ok(find(".container").length, "renders container");
|
|
assert.equal(find(".container .value").text(), "hello world");
|
|
}
|
|
});
|
|
|
|
widgetTest("handlebars d-icon", {
|
|
template: `{{mount-widget widget="hbs-icon-test" args=args}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("hbs-icon-test", {
|
|
template: hbs`{{d-icon "arrow-down"}}`
|
|
});
|
|
},
|
|
|
|
test(assert) {
|
|
assert.equal(find(".d-icon-arrow-down").length, 1);
|
|
}
|
|
});
|
|
|
|
widgetTest("handlebars i18n", {
|
|
_translations: I18n.translations,
|
|
|
|
template: `{{mount-widget widget="hbs-i18n-test" args=args}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("hbs-i18n-test", {
|
|
template: hbs`
|
|
<span class='string'>{{i18n "hbs_test0"}}</span>
|
|
<span class='var'>{{i18n attrs.key}}</span>
|
|
<a href title={{i18n "hbs_test0"}}>test</a>
|
|
`
|
|
});
|
|
I18n.translations = {
|
|
en: {
|
|
js: {
|
|
hbs_test0: "evil",
|
|
hbs_test1: "trout"
|
|
}
|
|
}
|
|
};
|
|
this.set("args", { key: "hbs_test1" });
|
|
},
|
|
|
|
afterEach() {
|
|
I18n.translations = this._translations;
|
|
},
|
|
|
|
test(assert) {
|
|
// comin up
|
|
assert.equal(find("span.string").text(), "evil");
|
|
assert.equal(find("span.var").text(), "trout");
|
|
assert.equal(find("a").prop("title"), "evil");
|
|
}
|
|
});
|
|
|
|
widgetTest("handlebars #each", {
|
|
template: `{{mount-widget widget="hbs-each-test" args=args}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("hbs-each-test", {
|
|
tagName: "ul",
|
|
template: hbs`
|
|
{{#each attrs.items as |item|}}
|
|
<li>{{item}}</li>
|
|
{{/each}}
|
|
`
|
|
});
|
|
|
|
this.set("args", {
|
|
items: ["one", "two", "three"]
|
|
});
|
|
},
|
|
|
|
test(assert) {
|
|
assert.equal(find("ul li").length, 3);
|
|
assert.equal(find("ul li:eq(0)").text(), "one");
|
|
}
|
|
});
|
|
|
|
widgetTest("widget decorating", {
|
|
template: `{{mount-widget widget="decorate-test"}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("decorate-test", {
|
|
tagName: "div.decorate",
|
|
template: hbs`main content`
|
|
});
|
|
|
|
withPluginApi("0.1", api => {
|
|
api.decorateWidget("decorate-test:before", dec => {
|
|
return dec.h("b", "before");
|
|
});
|
|
|
|
api.decorateWidget("decorate-test:after", dec => {
|
|
return dec.h("i", "after");
|
|
});
|
|
});
|
|
},
|
|
|
|
test(assert) {
|
|
assert.ok(find(".decorate").length);
|
|
assert.equal(find(".decorate b").text(), "before");
|
|
assert.equal(find(".decorate i").text(), "after");
|
|
}
|
|
});
|
|
|
|
widgetTest("widget settings", {
|
|
template: `{{mount-widget widget="settings-test"}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("settings-test", {
|
|
tagName: "div.settings",
|
|
template: hbs`age is {{settings.age}}`,
|
|
settings: { age: 36 }
|
|
});
|
|
},
|
|
|
|
test(assert) {
|
|
assert.equal(find(".settings").text(), "age is 36");
|
|
}
|
|
});
|
|
|
|
widgetTest("override settings", {
|
|
template: `{{mount-widget widget="ov-settings-test"}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("ov-settings-test", {
|
|
tagName: "div.settings",
|
|
template: hbs`age is {{settings.age}}`,
|
|
settings: { age: 36 }
|
|
});
|
|
|
|
withPluginApi("0.1", api => {
|
|
api.changeWidgetSetting("ov-settings-test", "age", 37);
|
|
});
|
|
},
|
|
|
|
test(assert) {
|
|
assert.equal(find(".settings").text(), "age is 37");
|
|
}
|
|
});
|
|
|
|
widgetTest("get accessor", {
|
|
template: `{{mount-widget widget="get-accessor-test"}}`,
|
|
|
|
beforeEach() {
|
|
createWidget("get-accessor-test", {
|
|
tagName: "div.test",
|
|
template: hbs`Hello {{transformed.name}}`,
|
|
transform() {
|
|
return {
|
|
name: this.get("currentUser.username")
|
|
};
|
|
}
|
|
});
|
|
},
|
|
|
|
test(assert) {
|
|
assert.equal(find("div.test").text(), "Hello eviltrout");
|
|
}
|
|
});
|