2020-05-14 10:04:08 -04:00
|
|
|
import I18n from "I18n";
|
2018-06-15 11:03:24 -04:00
|
|
|
import componentTest from "helpers/component-test";
|
|
|
|
moduleForComponent("d-button", { integration: true });
|
2017-08-01 15:33:31 -04:00
|
|
|
|
2018-06-15 11:03:24 -04:00
|
|
|
componentTest("icon only button", {
|
2017-08-01 16:06:51 -04:00
|
|
|
template: '{{d-button icon="plus" tabindex="3"}}',
|
2017-08-01 15:33:31 -04:00
|
|
|
|
|
|
|
test(assert) {
|
2018-06-15 11:03:24 -04:00
|
|
|
assert.ok(
|
2019-02-25 10:04:55 -05:00
|
|
|
find("button.btn.btn-icon.no-text").length,
|
2018-06-15 11:03:24 -04:00
|
|
|
"it has all the classes"
|
|
|
|
);
|
2019-02-25 10:04:55 -05:00
|
|
|
assert.ok(find("button .d-icon.d-icon-plus").length, "it has the icon");
|
|
|
|
assert.equal(find("button").attr("tabindex"), "3", "it has the tabindex");
|
2017-08-01 15:33:31 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2018-06-15 11:03:24 -04:00
|
|
|
componentTest("icon and text button", {
|
2017-08-01 15:33:31 -04:00
|
|
|
template: '{{d-button icon="plus" label="topic.create"}}',
|
|
|
|
|
|
|
|
test(assert) {
|
2018-06-15 11:03:24 -04:00
|
|
|
assert.ok(
|
2019-02-25 10:04:55 -05:00
|
|
|
find("button.btn.btn-icon-text").length,
|
2018-06-15 11:03:24 -04:00
|
|
|
"it has all the classes"
|
|
|
|
);
|
2019-02-25 10:04:55 -05:00
|
|
|
assert.ok(find("button .d-icon.d-icon-plus").length, "it has the icon");
|
|
|
|
assert.ok(find("button span.d-button-label").length, "it has the label");
|
2017-08-01 15:33:31 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2018-06-15 11:03:24 -04:00
|
|
|
componentTest("text only button", {
|
2017-08-01 15:33:31 -04:00
|
|
|
template: '{{d-button label="topic.create"}}',
|
|
|
|
|
|
|
|
test(assert) {
|
2019-02-25 10:04:55 -05:00
|
|
|
assert.ok(find("button.btn.btn-text").length, "it has all the classes");
|
|
|
|
assert.ok(find("button span.d-button-label").length, "it has the label");
|
2017-08-01 15:33:31 -04:00
|
|
|
}
|
|
|
|
});
|
2019-02-25 03:49:49 -05:00
|
|
|
|
|
|
|
componentTest("form attribute", {
|
|
|
|
template: '{{d-button form="login-form"}}',
|
|
|
|
|
|
|
|
test(assert) {
|
|
|
|
assert.ok(exists("button[form=login-form]"), "it has the form attribute");
|
|
|
|
}
|
|
|
|
});
|
2019-10-31 15:36:24 -04:00
|
|
|
|
|
|
|
componentTest("link-styled button", {
|
|
|
|
template: '{{d-button display="link"}}',
|
|
|
|
|
|
|
|
test(assert) {
|
|
|
|
assert.ok(
|
|
|
|
find("button.btn-link:not(.btn)").length,
|
|
|
|
"it has the right classes"
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
2020-03-30 17:17:00 -04:00
|
|
|
|
|
|
|
componentTest("isLoading button", {
|
|
|
|
template: "{{d-button isLoading=isLoading}}",
|
|
|
|
|
|
|
|
beforeEach() {
|
|
|
|
this.set("isLoading", true);
|
|
|
|
},
|
|
|
|
|
|
|
|
test(assert) {
|
|
|
|
assert.ok(
|
2020-03-30 17:42:21 -04:00
|
|
|
find("button.is-loading .loading-icon").length,
|
2020-03-30 17:17:00 -04:00
|
|
|
"it has a spinner showing"
|
|
|
|
);
|
|
|
|
assert.ok(
|
|
|
|
find("button[disabled]").length,
|
|
|
|
"while loading the button is disabled"
|
|
|
|
);
|
|
|
|
|
|
|
|
this.set("isLoading", false);
|
|
|
|
|
|
|
|
assert.notOk(
|
2020-03-30 17:42:21 -04:00
|
|
|
find("button .loading-icon").length,
|
2020-03-30 17:17:00 -04:00
|
|
|
"it doesn't have a spinner showing"
|
|
|
|
);
|
|
|
|
assert.ok(
|
|
|
|
find("button:not([disabled])").length,
|
|
|
|
"while not loading the button is enabled"
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
componentTest("disabled button", {
|
|
|
|
template: "{{d-button disabled=disabled}}",
|
|
|
|
|
|
|
|
beforeEach() {
|
|
|
|
this.set("disabled", true);
|
|
|
|
},
|
|
|
|
|
|
|
|
test(assert) {
|
|
|
|
assert.ok(find("button[disabled]").length, "the button is disabled");
|
|
|
|
|
|
|
|
this.set("disabled", false);
|
|
|
|
|
|
|
|
assert.ok(find("button:not([disabled])").length, "the button is enabled");
|
|
|
|
}
|
|
|
|
});
|
2020-05-11 16:09:44 -04:00
|
|
|
|
|
|
|
componentTest("aria-label", {
|
|
|
|
template:
|
|
|
|
"{{d-button ariaLabel=ariaLabel translatedAriaLabel=translatedAriaLabel}}",
|
|
|
|
|
|
|
|
beforeEach() {
|
|
|
|
I18n.translations[I18n.locale].js.test = { fooAriaLabel: "foo" };
|
|
|
|
},
|
|
|
|
|
|
|
|
test(assert) {
|
|
|
|
this.set("ariaLabel", "test.fooAriaLabel");
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
find("button")[0].getAttribute("aria-label"),
|
|
|
|
I18n.t("test.fooAriaLabel")
|
|
|
|
);
|
|
|
|
|
|
|
|
this.setProperties({
|
|
|
|
ariaLabel: null,
|
|
|
|
translatedAriaLabel: "bar"
|
|
|
|
});
|
|
|
|
|
|
|
|
assert.equal(find("button")[0].getAttribute("aria-label"), "bar");
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
componentTest("title", {
|
|
|
|
template: "{{d-button title=title translatedTitle=translatedTitle}}",
|
|
|
|
|
|
|
|
beforeEach() {
|
|
|
|
I18n.translations[I18n.locale].js.test = { fooTitle: "foo" };
|
|
|
|
},
|
|
|
|
|
|
|
|
test(assert) {
|
|
|
|
this.set("title", "test.fooTitle");
|
|
|
|
assert.equal(
|
|
|
|
find("button")[0].getAttribute("title"),
|
|
|
|
I18n.t("test.fooTitle")
|
|
|
|
);
|
|
|
|
|
|
|
|
this.setProperties({
|
|
|
|
title: null,
|
|
|
|
translatedTitle: "bar"
|
|
|
|
});
|
|
|
|
|
|
|
|
assert.equal(find("button")[0].getAttribute("title"), "bar");
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
componentTest("label", {
|
|
|
|
template: "{{d-button label=label translatedLabel=translatedLabel}}",
|
|
|
|
|
|
|
|
beforeEach() {
|
|
|
|
I18n.translations[I18n.locale].js.test = { fooLabel: "foo" };
|
|
|
|
},
|
|
|
|
|
|
|
|
test(assert) {
|
|
|
|
this.set("label", "test.fooLabel");
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
find("button .d-button-label").text(),
|
|
|
|
I18n.t("test.fooLabel")
|
|
|
|
);
|
|
|
|
|
|
|
|
this.setProperties({
|
|
|
|
label: null,
|
|
|
|
translatedLabel: "bar"
|
|
|
|
});
|
|
|
|
|
|
|
|
assert.equal(find("button .d-button-label").text(), "bar");
|
|
|
|
}
|
|
|
|
});
|