REFACTOR: badge-button (#16500)

- drops jquery
- uses native class syntax
- tagless
- tests
- removes unnecessary alias

app/assets/javascripts/discourse/app/components/badge-button.js

@@ -1,20 +1,13 @@
 import Component from "@ember/component";
-import { alias } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
+import domFromString from "discourse-common/lib/dom-from-string";
 
-export default Component.extend({
+export default class BadgeButtonComponent extends Component {
-  tagName: "span",
+  tagName = "";
-  classNameBindings: [
+  badge = null;
-    ":user-badge",
-    "badge.badgeTypeClassName",
-    "badge.enabled::disabled",
-  ],
 
   @discourseComputed("badge.description")
   title(badgeDescription) {
-    return $("<div>" + badgeDescription + "</div>").text();
+    return domFromString(`<div>${badgeDescription}</div>`)[0].innerText;
-  },
+  }
-
+}
-  attributeBindings: ["data-badge-name", "title"],
-  "data-badge-name": alias("badge.name"),
-});

app/assets/javascripts/discourse/app/templates/components/badge-button.hbs

@@ -1,3 +1,5 @@
-{{icon-or-image badge}}
+<span class="user-badge {{badge.badgeTypeClassName}} {{unless badge.enabled "disabled"}}" title={{title}} data-badge-name={{badge.name}}>
-<span class="badge-display-name">{{badge.name}}</span>
+  {{icon-or-image badge}}
-{{yield}}
+  <span class="badge-display-name">{{badge.name}}</span>
+  {{yield}}
+</span>

app/assets/javascripts/discourse/tests/integration/components/badge-button-test.js

@@ -0,0 +1,97 @@
+import componentTest, {
+  setupRenderingTest,
+} from "discourse/tests/helpers/component-test";
+import {
+  discourseModule,
+  exists,
+  query,
+} from "discourse/tests/helpers/qunit-helpers";
+import hbs from "htmlbars-inline-precompile";
+
+discourseModule("Integration | Component | badge-button", function (hooks) {
+  setupRenderingTest(hooks);
+
+  componentTest("disabled badge", {
+    template: hbs`{{badge-button badge=badge}}`,
+
+    beforeEach() {
+      this.set("badge", { enabled: false });
+    },
+
+    async test(assert) {
+      assert.ok(exists(".user-badge.disabled"));
+    },
+  });
+
+  componentTest("enabled badge", {
+    template: hbs`{{badge-button badge=badge}}`,
+
+    beforeEach() {
+      this.set("badge", { enabled: true });
+    },
+
+    async test(assert) {
+      assert.notOk(exists(".user-badge.disabled"));
+    },
+  });
+
+  componentTest("data-badge-name", {
+    template: hbs`{{badge-button badge=badge}}`,
+
+    beforeEach() {
+      this.set("badge", { name: "foo" });
+    },
+
+    async test(assert) {
+      assert.ok(exists('.user-badge[data-badge-name="foo"]'));
+    },
+  });
+
+  componentTest("title", {
+    template: hbs`{{badge-button badge=badge}}`,
+
+    beforeEach() {
+      this.set("badge", { description: "a <a href>good</a> run" });
+    },
+
+    async test(assert) {
+      assert.equal(query(".user-badge").title, "a good run", "it strips html");
+    },
+  });
+
+  componentTest("icon", {
+    template: hbs`{{badge-button badge=badge}}`,
+
+    beforeEach() {
+      this.set("badge", { icon: "times" });
+    },
+
+    async test(assert) {
+      assert.ok(exists(".d-icon.d-icon-times"));
+    },
+  });
+
+  componentTest("accepts block", {
+    template: hbs`{{#badge-button badge=badge}}<span class="test"></span>{{/badge-button}}`,
+
+    beforeEach() {
+      this.set("badge", {});
+    },
+
+    async test(assert) {
+      assert.ok(exists(".test"));
+    },
+  });
+
+  componentTest("badgeTypeClassName", {
+    template: hbs`{{badge-button badge=badge}}`,
+
+    beforeEach() {
+      this.set("badge", { badgeTypeClassName: "foo" });
+    },
+
+    async test(assert) {
+      assert.ok(exists(".user-badge.foo"));
+    },
+  });
+});