mirror of
https://github.com/discourse/discourse.git
synced 2024-11-27 03:10:46 -06:00
DEV: introduces {{concat-class}} helper (#17526)
Usage: ``` <button class={{concat-class "foo" this.bar (if true "baz")}} /> ```
This commit is contained in:
parent
be6736c940
commit
0760b249ff
@ -0,0 +1,8 @@
|
||||
import { helper } from "@ember/component/helper";
|
||||
|
||||
function concatClass(args) {
|
||||
const classes = args.compact().join(" ");
|
||||
return classes.length ? classes : undefined;
|
||||
}
|
||||
|
||||
export default helper(concatClass);
|
@ -0,0 +1,44 @@
|
||||
import { assert, module, test } from "qunit";
|
||||
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
||||
import { render } from "@ember/test-helpers";
|
||||
import { hbs } from "ember-cli-htmlbars";
|
||||
import { query } from "discourse/tests/helpers/qunit-helpers";
|
||||
|
||||
module("Integration | Helper | concat-class", function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test("One class given", async function () {
|
||||
await render(hbs`<button class={{concat-class "foo"}} />`);
|
||||
|
||||
assert.equal(query("button").className, "foo");
|
||||
});
|
||||
|
||||
test("Multiple class given", async function () {
|
||||
this.set("bar", "bar");
|
||||
await render(hbs`<button class={{concat-class "foo" this.bar}} />`);
|
||||
|
||||
assert.equal(query("button").className, "foo bar");
|
||||
});
|
||||
|
||||
test("One undefined class given", async function () {
|
||||
this.set("bar", null);
|
||||
await render(hbs`<button class={{concat-class "foo" this.bar}} />`);
|
||||
|
||||
assert.equal(query("button").className, "foo");
|
||||
});
|
||||
|
||||
test("Only undefined class given", async function () {
|
||||
this.set("bar", null);
|
||||
await render(hbs`<button class={{concat-class null this.bar}} />`);
|
||||
|
||||
assert.notOk(query("button").hasAttribute("class"));
|
||||
});
|
||||
|
||||
test("Helpers used", async function () {
|
||||
await render(
|
||||
hbs`<button class={{concat-class (if true "foo") (if true "bar")}} />`
|
||||
);
|
||||
|
||||
assert.equal(query("button").className, "foo bar");
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue
Block a user