UX: Display user.username on user cards (#16539)

If you happen to mention someone with the wrong capitalization for that
person's username (e.g. `@sAm`), that incorrect capitalization would get
displayed on their user card.

This update will fix that by displaying the `user.username` value, which
will have the correct capitalization.

I also added some tests that will ensure `username` and `name` are
displayed on the user card in the correct order based on the
`prioritize_username_in_ux` setting.

This issue was reported here:
https://meta.discourse.org/t/capitalization-does-not-match-when-you-open-user-cards-using-mentions/217166

app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs

@@ -37,12 +37,12 @@
           <h1 class="{{this.staff}} {{this.newUser}} {{if this.nameFirst "full-name" "username"}}">
             {{#if this.user.profile_hidden}}
               <span class="name-username-wrapper">
-                {{if this.nameFirst this.user.name (format-username this.username)}}
+                {{if this.nameFirst this.user.name (format-username this.user.username)}}
               </span>
             {{else}}
               <a href={{this.user.path}} {{action "showUser" this.user}} class="user-profile-link">
                 <span class="name-username-wrapper">
-                  {{if this.nameFirst this.user.name (format-username this.username)}}
+                  {{if this.nameFirst this.user.name (format-username this.user.username)}}
                 </span>
                 {{user-status this.user currentUser=this.currentUser}}
               </a>
@@ -50,7 +50,7 @@
           </h1>
           {{plugin-outlet name="user-card-after-username" connectorTagName="div" args=(hash user=this.user showUser=(action "showUser" this.user))}}
           {{#if this.nameFirst}}
-            <h2 class="username">{{this.username}}</h2>
+            <h2 class="username">{{this.user.username}}</h2>
           {{else}}
             {{#if this.user.name}}
               <h2 class="full-name">{{this.user.name}}</h2>

app/assets/javascripts/discourse/tests/acceptance/user-card-test.js

@@ -1,4 +1,8 @@
-import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
+import {
+  acceptance,
+  exists,
+  query,
+} from "discourse/tests/helpers/qunit-helpers";
 import { click, visit } from "@ember/test-helpers";
 import User from "discourse/models/user";
 import { test } from "qunit";
@@ -26,3 +30,49 @@ acceptance("User Card - Show Local Time", function (needs) {
     );
   });
 });
+
+acceptance(
+  "User Card - when 'prioritize username in ux' is enabled",
+  function (needs) {
+    needs.user();
+    needs.settings({ prioritize_username_in_ux: true });
+    needs.pretender((server, helper) => {
+      const cardResponse = cloneJSON(userFixtures["/u/eviltrout/card.json"]);
+      server.get("/u/eviltrout/card.json", () => helper.response(cardResponse));
+    });
+
+    test("it displays the person's username followed by ther fullname", async function (assert) {
+      await visit("/t/this-is-a-test-topic/9");
+      await click('a[data-user-card="eviltrout"]');
+
+      assert.equal(
+        query(".user-card h1.username .name-username-wrapper").innerText,
+        "eviltrout"
+      );
+      assert.equal(query(".user-card h2.full-name").innerText, "Robin Ward");
+    });
+  }
+);
+
+acceptance(
+  "User Card - when 'prioritize username in ux' is disabled",
+  function (needs) {
+    needs.user();
+    needs.settings({ prioritize_username_in_ux: false });
+    needs.pretender((server, helper) => {
+      const cardResponse = cloneJSON(userFixtures["/u/eviltrout/card.json"]);
+      server.get("/u/eviltrout/card.json", () => helper.response(cardResponse));
+    });
+
+    test("it displays the person's fullname followed by their username", async function (assert) {
+      await visit("/t/this-is-a-test-topic/9");
+      await click('a[data-user-card="eviltrout"]');
+
+      assert.equal(
+        query(".user-card h1.full-name .name-username-wrapper").innerText,
+        "Robin Ward"
+      );
+      assert.equal(query(".user-card h2.username").innerText, "eviltrout");
+    });
+  }
+);