fix(chat) - Mention dot doesn't show if mention is preceded by weird … (#12177)

* fix(chat) - Mention dot doesn't show if mention is preceded by weird mention

* fix(chat) - add unit test for chatCard

* fix(chat) - Improve unit test to only mount the wrapper once

website/client/tests/unit/components/chat/chatCard.spec.js

@@ -0,0 +1,58 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+import ChatCard from '@/components/chat/chatCard.vue';
+import Store from '@/libs/store';
+
+const localVue = createLocalVue();
+localVue.use(Store);
+
+describe('ChatCard', () => {
+  function createMessage (text) {
+    return { text, likes: {} };
+  }
+
+  function createUser (username) {
+    return {
+      auth: { local: { username } },
+      profile: { name: username },
+      contributor: {},
+      flags: {},
+    };
+  }
+
+  const message = createMessage('test');
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(ChatCard, {
+      propsData: { msg: message },
+      store: new Store({
+        state: {
+          user: { data: createUser('Tester') },
+        },
+        getters: {},
+        actions: {},
+      }),
+      localVue,
+      mocks: { $t: string => string },
+    });
+  });
+
+  it('shows the message text', () => {
+    expect(wrapper.find('div.text').text()).to.equal(message.text);
+    expect(wrapper.find('div.mentioned-icon').exists()).to.be.false;
+  });
+
+  it('shows mention dot if user is mentioned', () => {
+    wrapper.setProps({ msg: createMessage('@Tester') });
+
+    expect(wrapper.find('div.mentioned-icon').exists()).to.be.true;
+  });
+
+  // Bug fixed by https://github.com/HabitRPG/habitica/pull/12177
+  it('shows mention dot if user is mentioned after almostmention', () => {
+    wrapper.setProps({ msg: createMessage('thetester @Tester') });
+
+    expect(wrapper.find('div.mentioned-icon').exists()).to.be.true;
+  });
+});