From b653b868060349e2f99756f5459ec4219d87635d Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Fri, 12 Aug 2022 12:12:39 +0800
Subject: [PATCH] DEV: Remove undefined in Sidebar::SectionLink class attribute
 (#17881)

---
 .../app/components/sidebar/section-link.js    | 11 +++++-
 .../components/sidebar/section-link-test.js   | 35 +++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
index 790a7b0f565..d8badbf436a 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
@@ -9,7 +9,16 @@ export default class SectionLink extends Component {
   }
 
   get classNames() {
-    return `${this.args.class} sidebar-section-link sidebar-section-link-${this.args.linkName}`;
+    let classNames = [
+      "sidebar-section-link",
+      `sidebar-section-link-${this.args.linkName}`,
+    ];
+
+    if (this.args.class) {
+      classNames.push(this.args.class);
+    }
+
+    return classNames.join(" ");
   }
 
   get models() {
diff --git a/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js b/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js
new file mode 100644
index 00000000000..f413c02faae
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js
@@ -0,0 +1,35 @@
+import { module, test } from "qunit";
+
+import { hbs } from "ember-cli-htmlbars";
+import { render } from "@ember/test-helpers";
+
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { query } from "discourse/tests/helpers/qunit-helpers";
+
+module("Integration | Component | sidebar | section-link", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("default class attribute for link", async function (assert) {
+    const template = hbs`<Sidebar::SectionLink @linkName="test" @route="discovery.latest" />`;
+
+    await render(template);
+
+    assert.strictEqual(
+      query("a").className,
+      "sidebar-section-link sidebar-section-link-test ember-view",
+      "has the right class attribute for the link"
+    );
+  });
+
+  test("custom class attribute for link", async function (assert) {
+    const template = hbs`<Sidebar::SectionLink @linkName="test" @route="discovery.latest" @class="123 abc" />`;
+
+    await render(template);
+
+    assert.strictEqual(
+      query("a").className,
+      "sidebar-section-link sidebar-section-link-test 123 abc ember-view",
+      "has the right class attribute for the link"
+    );
+  });
+});