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/src/components/chat/chatCard.vue

@@ -200,7 +200,6 @@
 import moment from 'moment';
 import cloneDeep from 'lodash/cloneDeep';
 import escapeRegExp from 'lodash/escapeRegExp';
-import max from 'lodash/max';
 
 import habiticaMarkdown from 'habitica-markdown';
 import { mapState } from '@/libs/store';
@@ -245,28 +244,14 @@ export default {
     ...mapState({ user: 'user.data' }),
     isUserMentioned () {
       const message = this.msg;
+
+      if (message.highlight) return true;
+
       const { user } = this;
-
-      if (message.highlight) return message.highlight;
-
-      message.highlight = false;
-      const messageText = message.text.toLowerCase();
       const displayName = user.profile.name;
-      const username = user.auth.local && user.auth.local.username;
-      const mentioned = max([
-        messageText.indexOf(username.toLowerCase()),
-        messageText.indexOf(displayName.toLowerCase()),
-      ]);
-      if (mentioned === -1) return message.highlight;
-
-      const escapedDisplayName = escapeRegExp(displayName);
-      const escapedUsername = escapeRegExp(username);
-      const pattern = `@(${escapedUsername}|${escapedDisplayName})(\\b)`;
-      const precedingChar = messageText.substring(mentioned - 1, mentioned);
-      if (mentioned === 0 || precedingChar.trim() === '' || precedingChar === '@') {
-        const regex = new RegExp(pattern, 'i');
-        message.highlight = regex.test(messageText);
-      }
+      const { username } = user.auth.local;
+      const pattern = `@(${escapeRegExp(displayName)}|${escapeRegExp(username)})(\\b)`;
+      message.highlight = new RegExp(pattern, 'i').test(message.text);
 
       return message.highlight;
     },
@@ -319,11 +304,7 @@ export default {
         chatId: message.id,
       });
 
-      if (!message.likes[this.user._id]) {
-        message.likes[this.user._id] = true;
-      } else {
       message.likes[this.user._id] = !message.likes[this.user._id];
-      }
 
       this.$emit('message-liked', message);
       this.$root.$emit('bv::hide::tooltip');

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;
+  });
+});